RocketTeam/tailwind.config.ts at main · hrdAI3/RocketTeam · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import type { Config } from 'tailwindcss';

// Claude-inspired aesthetic. Warm paper + coral. Editorial typography.
const config: Config = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // Surfaces — warm paper
        paper: {
          DEFAULT: '#FAF9F5', // canvas
          card: '#FFFFFF',
          subtle: '#F2EFE6',
          deep: '#EDE9DB'
        },
        // Ink — warm black
        ink: {
          DEFAULT: '#1F1F1C',
          soft: '#2A2A26',
          muted: '#5A5A57',
          quiet: '#8A8782',
          ghost: '#B8B5AE',
          inverse: '#FAF9F5'
        },
        // Border — warm gray
        rule: {
          DEFAULT: '#E8E3D5',
          strong: '#DBD5C3',
          soft: '#F0EBDC'
        },
        // Coral — Claude's signature accent
        coral: {
          DEFAULT: '#D97757',
          deep: '#C76A4D',
          subtle: '#FCEEE2',
          mute: '#F5DCC9'
        },
        // Status palette (warm-tinted)
        forest: '#5C7F5A',     // success / high energy
        amber: '#D49B40',      // warning / partial
        rust: '#B85850',       // danger / burnt
        sky: '#5681A8',        // info / running
        plum: '#8A5A87',       // accent — secondary category (from Rocket Team design)
        // Legacy aliases (kept so existing components don't break)
        bg: { DEFAULT: '#FAF9F5', sidebar: '#F2EFE6', hover: '#EDE9DB', active: '#FCEEE2' },
        text: { primary: '#1F1F1C', secondary: '#5A5A57', muted: '#8A8782', inverse: '#FAF9F5' },
        border: { DEFAULT: '#E8E3D5', strong: '#DBD5C3', focus: '#D97757' },
        accent: { success: '#5C7F5A', warning: '#D49B40', danger: '#B85850', info: '#5681A8', neutral: '#8A8782', product: '#D97757' }
      },
      fontFamily: {
        sans: ['var(--font-geist-sans)', 'PingFang SC', 'Microsoft YaHei', 'sans-serif'],
        mono: ['var(--font-geist-mono)', 'monospace'],
        serif: ['"Source Serif 4"', 'Cambria', 'Songti SC', 'SimSun', 'Georgia', 'serif']
      },
      fontSize: {
        // Editorial display ramp — calibrated to rocket-team.renlab.ai demo
        // computed-style values (sidebar 13.5, body 13/16, h1 36, card title 18).
        hero: ['44px', { lineHeight: '48px', letterSpacing: '-0.025em', fontWeight: '500' }],
        display: ['36px', { lineHeight: '42px', letterSpacing: '-0.02em', fontWeight: '500' }],
        title: ['22px', { lineHeight: '28px', letterSpacing: '-0.015em', fontWeight: '500' }],
        heading: ['18px', { lineHeight: '24px', fontWeight: '600' }],
        body: ['16px', { lineHeight: '24px', fontWeight: '400' }],
        sidebar: ['13.5px', { lineHeight: '20px', fontWeight: '500' }],
        caption: ['12px', { lineHeight: '16px', fontWeight: '400' }]
      },
      borderRadius: {
        sm: '4px',
        md: '8px',
        lg: '12px',
        xl: '16px'
      },
      boxShadow: {
        card: '0 1px 0 rgba(31,31,28,0.04)',
        soft: '0 2px 8px rgba(31,31,28,0.06)',
        modal: '0 16px 48px rgba(31,31,28,0.12)',
        inset: 'inset 0 0 0 1px rgba(216,209,193,0.5)'
      },
      keyframes: {
        'fade-in': {
          from: { opacity: '0', transform: 'translateY(4px)' },
          to: { opacity: '1', transform: 'translateY(0)' }
        },
        'slide-up': {
          from: { opacity: '0', transform: 'translateY(24px)' },
          to: { opacity: '1', transform: 'translateY(0)' }
        },
        'pulse-coral': {
          '0%, 100%': { boxShadow: '0 0 0 0 rgba(217,119,87,0.45)' },
          '50%': { boxShadow: '0 0 0 8px rgba(217,119,87,0)' }
        },
        'pulse-rust': {
          '0%, 100%': { boxShadow: '0 0 0 0 rgba(184,88,80,0.45)' },
          '50%': { boxShadow: '0 0 0 5px rgba(184,88,80,0)' }
        },
        shimmer: {
          '0%, 100%': { opacity: '0.6' },
          '50%': { opacity: '1' }
        }
      },
      animation: {
        'fade-in': 'fade-in 0.4s ease-out forwards',
        'slide-up': 'slide-up 0.32s cubic-bezier(0.16,1,0.3,1) forwards',
        'pulse-coral': 'pulse-coral 1.6s ease-in-out infinite',
        'pulse-rust': 'pulse-rust 1.6s ease-in-out infinite',
        shimmer: 'shimmer 1.6s ease-in-out infinite'
      }
    }
  },
  plugins: []
};

export default config;