Demo Design Tokens
Overview
Pre-configured design tokens for graceful demo UI without a formal design system.
Color System
Brand Colors
--brand-primary: #2563EB; /* Blue-600 */
--brand-secondary: #1E40AF; /* Blue-800 */
--brand-accent: #7C3AED; /* Violet-600 */
Neutral Colors
--neutral-50: #F8FAFC; /* Background */
--neutral-100: #F1F5F9; /* Surface alt */
--neutral-200: #E2E8F0; /* Border */
--neutral-300: #CBD5E1; /* Border hover */
--neutral-500: #64748B; /* Text secondary */
--neutral-700: #334155; /* Text primary */
--neutral-900: #0F172A; /* Text emphasis */
Semantic Colors
/* Status */
--success: #22C55E; /* Green-500 */
--warning: #EAB308; /* Yellow-500 */
--error: #EF4444; /* Red-500 */
--info: #3B82F6; /* Blue-500 */
/* Severity (for data visualization) */
--severity-critical: #DC2626; /* Red-600 */
--severity-high: #F97316; /* Orange-500 */
--severity-medium: #EAB308; /* Yellow-500 */
--severity-low: #3B82F6; /* Blue-500 */
--severity-info: #6B7280; /* Gray-500 */
/* Condition */
--condition-excellent: #22C55E; /* Green-500 */
--condition-good: #84CC16; /* Lime-500 */
--condition-fair: #EAB308; /* Yellow-500 */
--condition-poor: #F97316; /* Orange-500 */
Typography
Font Stack
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
Type Scale
| Token |
Size |
Line Height |
Weight |
Use |
| --text-xs |
12px |
16px |
400 |
Labels, captions |
| --text-sm |
14px |
20px |
400 |
Secondary text |
| --text-base |
16px |
24px |
400 |
Body |
| --text-lg |
18px |
28px |
500 |
Emphasis |
| --text-xl |
20px |
28px |
600 |
Card titles |
| --text-2xl |
24px |
32px |
600 |
Section headers |
| --text-3xl |
30px |
36px |
700 |
Page titles |
| --text-4xl |
36px |
40px |
700 |
Hero text |
Spacing Scale
Based on 4px grid:
| Token |
Value |
Tailwind |
| --space-1 |
4px |
p-1 |
| --space-2 |
8px |
p-2 |
| --space-3 |
12px |
p-3 |
| --space-4 |
16px |
p-4 |
| --space-5 |
20px |
p-5 |
| --space-6 |
24px |
p-6 |
| --space-8 |
32px |
p-8 |
| --space-10 |
40px |
p-10 |
| --space-12 |
48px |
p-12 |
Shadows
| Token |
Value |
Use |
| --shadow-sm |
0 1px 2px rgba(0,0,0,0.05) |
Subtle elevation |
| --shadow-md |
0 4px 6px rgba(0,0,0,0.1) |
Cards |
| --shadow-lg |
0 10px 15px rgba(0,0,0,0.1) |
Modals, dropdowns |
| --shadow-xl |
0 20px 25px rgba(0,0,0,0.15) |
Popovers |
Border Radius
| Token |
Value |
Use |
| --radius-sm |
4px |
Buttons, inputs |
| --radius-md |
8px |
Cards |
| --radius-lg |
12px |
Modals |
| --radius-xl |
16px |
Large containers |
| --radius-full |
9999px |
Pills, avatars |
Transitions
| Token |
Value |
Use |
| --duration-fast |
150ms |
Micro-interactions |
| --duration-normal |
300ms |
Default |
| --duration-slow |
500ms |
Page transitions |
| --ease-out |
cubic-bezier(0, 0, 0.2, 1) |
Entrances |
| --ease-in-out |
cubic-bezier(0.4, 0, 0.2, 1) |
Transitions |
Tailwind Config Extension
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
brand: {
primary: '#2563EB',
secondary: '#1E40AF',
accent: '#7C3AED',
},
severity: {
critical: '#DC2626',
high: '#F97316',
medium: '#EAB308',
low: '#3B82F6',
info: '#6B7280',
},
condition: {
excellent: '#22C55E',
good: '#84CC16',
fair: '#EAB308',
poor: '#F97316',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'SF Mono', 'monospace'],
},
},
},
};
Best Practices
- Use semantic tokens over raw values
- Maintain consistent spacing rhythm
- Pair shadows with border radius
- Test colors for WCAG contrast
Anti-Patterns
- NO hardcoded hex values in components
- NO inconsistent spacing values
- NO mixing design systems
1---2name: demo-design-tokens3description: Default design tokens for demo applications. Use when building demos without a formal design system. Provides colors, typography, spacing, shadows, and transitions.4---5
6# Demo Design Tokens
7
8## Overview
9Pre-configured design tokens for graceful demo UI without a formal design system.
10
11## Color System
12
13### Brand Colors
14```css
15--brand-primary: #2563EB; /* Blue-600 */
16--brand-secondary: #1E40AF; /* Blue-800 */
17--brand-accent: #7C3AED; /* Violet-600 */
18```
19
20### Neutral Colors
21```css
22--neutral-50: #F8FAFC; /* Background */
23--neutral-100: #F1F5F9; /* Surface alt */
24--neutral-200: #E2E8F0; /* Border */
25--neutral-300: #CBD5E1; /* Border hover */
26--neutral-500: #64748B; /* Text secondary */
27--neutral-700: #334155; /* Text primary */
28--neutral-900: #0F172A; /* Text emphasis */
29```
30
31### Semantic Colors
32```css
33/* Status */
34--success: #22C55E; /* Green-500 */
35--warning: #EAB308; /* Yellow-500 */
36--error: #EF4444; /* Red-500 */
37--info: #3B82F6; /* Blue-500 */
38
39/* Severity (for data visualization) */
40--severity-critical: #DC2626; /* Red-600 */
41--severity-high: #F97316; /* Orange-500 */
42--severity-medium: #EAB308; /* Yellow-500 */
43--severity-low: #3B82F6; /* Blue-500 */
44--severity-info: #6B7280; /* Gray-500 */
45
46/* Condition */
47--condition-excellent: #22C55E; /* Green-500 */
48--condition-good: #84CC16; /* Lime-500 */
49--condition-fair: #EAB308; /* Yellow-500 */
50--condition-poor: #F97316; /* Orange-500 */
51```
52
53## Typography
54
55### Font Stack
56```css
57--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
58--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
59```
60
61### Type Scale
62| Token | Size | Line Height | Weight | Use |
63|-------|------|-------------|--------|-----|
64| --text-xs | 12px | 16px | 400 | Labels, captions |
65| --text-sm | 14px | 20px | 400 | Secondary text |
66| --text-base | 16px | 24px | 400 | Body |
67| --text-lg | 18px | 28px | 500 | Emphasis |
68| --text-xl | 20px | 28px | 600 | Card titles |
69| --text-2xl | 24px | 32px | 600 | Section headers |
70| --text-3xl | 30px | 36px | 700 | Page titles |
71| --text-4xl | 36px | 40px | 700 | Hero text |
72
73## Spacing Scale
74
75Based on 4px grid:
76
77| Token | Value | Tailwind |
78|-------|-------|----------|
79| --space-1 | 4px | p-1 |
80| --space-2 | 8px | p-2 |
81| --space-3 | 12px | p-3 |
82| --space-4 | 16px | p-4 |
83| --space-5 | 20px | p-5 |
84| --space-6 | 24px | p-6 |
85| --space-8 | 32px | p-8 |
86| --space-10 | 40px | p-10 |
87| --space-12 | 48px | p-12 |
88
89## Shadows
90
91| Token | Value | Use |
92|-------|-------|-----|
93| --shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Subtle elevation |
94| --shadow-md | 0 4px 6px rgba(0,0,0,0.1) | Cards |
95| --shadow-lg | 0 10px 15px rgba(0,0,0,0.1) | Modals, dropdowns |
96| --shadow-xl | 0 20px 25px rgba(0,0,0,0.15) | Popovers |
97
98## Border Radius
99
100| Token | Value | Use |
101|-------|-------|-----|
102| --radius-sm | 4px | Buttons, inputs |
103| --radius-md | 8px | Cards |
104| --radius-lg | 12px | Modals |
105| --radius-xl | 16px | Large containers |
106| --radius-full | 9999px | Pills, avatars |
107
108## Transitions
109
110| Token | Value | Use |
111|-------|-------|-----|
112| --duration-fast | 150ms | Micro-interactions |
113| --duration-normal | 300ms | Default |
114| --duration-slow | 500ms | Page transitions |
115| --ease-out | cubic-bezier(0, 0, 0.2, 1) | Entrances |
116| --ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | Transitions |
117
118## Tailwind Config Extension
119
120```typescript
121// tailwind.config.ts
122export default {
123 theme: {
124 extend: {
125 colors: {
126 brand: {
127 primary: '#2563EB',
128 secondary: '#1E40AF',
129 accent: '#7C3AED',
130 },
131 severity: {
132 critical: '#DC2626',
133 high: '#F97316',
134 medium: '#EAB308',
135 low: '#3B82F6',
136 info: '#6B7280',
137 },
138 condition: {
139 excellent: '#22C55E',
140 good: '#84CC16',
141 fair: '#EAB308',
142 poor: '#F97316',
143 },
144 },
145 fontFamily: {
146 sans: ['Inter', 'system-ui', 'sans-serif'],
147 mono: ['JetBrains Mono', 'SF Mono', 'monospace'],
148 },
149 },
150 },
151};
152```
153
154## Best Practices
155
156- Use semantic tokens over raw values
157- Maintain consistent spacing rhythm
158- Pair shadows with border radius
159- Test colors for WCAG contrast
160
161## Anti-Patterns
162
163- NO hardcoded hex values in components
164- NO inconsistent spacing values
165- NO mixing design systems
majiayu000