creatorflow/tailwind.config.ts at master · Orcules/creatorflow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // Warm stone neutrals — the spa brand's paper
        sand: {
          50: '#faf9f7',
          100: '#f4f2ee',
          200: '#e8e4dd',
          300: '#d6d0c5',
          400: '#b3ab9c',
          500: '#8d8474',
          600: '#6f6759',
          700: '#584f45',
          800: '#3d372f',
          900: '#26221d',
          950: '#151310',
        },
        // Deep spa teal — primary action
        moss: {
          50: '#f0f7f5',
          100: '#daeae6',
          200: '#b6d5cd',
          300: '#89b8ad',
          400: '#5b978b',
          500: '#3f7c70',
          600: '#2f6359',
          700: '#284f48',
          800: '#22403b',
          900: '#1e3532',
          950: '#0e1e1c',
        },
        clay: {
          50: '#fdf5f0',
          100: '#fae8dc',
          200: '#f3cdb5',
          300: '#eaab85',
          400: '#df8253',
          500: '#d76432',
          600: '#c54c27',
          700: '#a43a23',
          800: '#843124',
          900: '#6b2b20',
        },
      },
      fontFamily: {
        sans: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
      },
      boxShadow: {
        card: '0 1px 2px rgba(38,34,29,0.04), 0 1px 3px rgba(38,34,29,0.06)',
        lift: '0 4px 6px -1px rgba(38,34,29,0.07), 0 12px 24px -8px rgba(38,34,29,0.12)',
        pop: '0 10px 15px -3px rgba(38,34,29,0.1), 0 24px 48px -12px rgba(38,34,29,0.18)',
      },
      keyframes: {
        shimmer: {
          '100%': { transform: 'translateX(100%)' },
        },
        'fade-up': {
          '0%': { opacity: '0', transform: 'translateY(4px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
      animation: {
        shimmer: 'shimmer 1.6s infinite',
        'fade-up': 'fade-up 0.25s ease-out',
      },
    },
  },
  plugins: [],
}

export default config