demo-design-tokens
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDemo Design Tokens
演示用设计令牌
Overview
概述
Pre-configured design tokens for graceful demo UI without a formal design system.
预配置的设计令牌，可在没有正式设计系统的情况下打造优雅的演示UI。
Color System
颜色系统
Brand Colors
品牌色
css
--brand-primary: #2563EB; /* Blue-600 */
--brand-secondary: #1E40AF; /* Blue-800 */
--brand-accent: #7C3AED; /* Violet-600 */css
--brand-primary: #2563EB; /* Blue-600 */
--brand-secondary: #1E40AF; /* Blue-800 */
--brand-accent: #7C3AED; /* Violet-600 */Neutral Colors
中性色
css
--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 */css
--neutral-50: #F8FAFC; /* 背景色 */
--neutral-100: #F1F5F9; /* 备用表面色 */
--neutral-200: #E2E8F0; /* 边框色 */
--neutral-300: #CBD5E1; /* 边框悬停色 */
--neutral-500: #64748B; /* 次要文本色 */
--neutral-700: #334155; /* 主要文本色 */
--neutral-900: #0F172A; /* 强调文本色 */Semantic Colors
语义色
css
/* 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 */css
/* 状态色 */
--success: #22C55E; /* Green-500 */
--warning: #EAB308; /* Yellow-500 */
--error: #EF4444; /* Red-500 */
--info: #3B82F6; /* Blue-500 */
/* 严重程度色（用于数据可视化） */
--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-excellent: #22C55E; /* Green-500 */
--condition-good: #84CC16; /* Lime-500 */
--condition-fair: #EAB308; /* Yellow-500 */
--condition-poor: #F97316; /* Orange-500 */Typography
排版
Font Stack
字体栈
css
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;css
--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 |
| 令牌 | 尺寸 | 行高 | 字重 | 用途 |
|---|---|---|---|---|
| --text-xs | 12px | 16px | 400 | 标签、说明文字 |
| --text-sm | 14px | 20px | 400 | 次要文本 |
| --text-base | 16px | 24px | 400 | 正文 |
| --text-lg | 18px | 28px | 500 | 强调文本 |
| --text-xl | 20px | 28px | 600 | 卡片标题 |
| --text-2xl | 24px | 32px | 600 | 区块标题 |
| --text-3xl | 30px | 36px | 700 | 页面标题 |
| --text-4xl | 36px | 40px | 700 | 英雄区文本 |
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 |
基于4px网格系统：
| 令牌 | 数值 | 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 |
| 令牌 | 数值 | 用途 |
|---|---|---|
| --shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | 轻微层级提升 |
| --shadow-md | 0 4px 6px rgba(0,0,0,0.1) | 卡片组件 |
| --shadow-lg | 0 10px 15px rgba(0,0,0,0.1) | 模态框、下拉菜单 |
| --shadow-xl | 0 20px 25px rgba(0,0,0,0.15) | 弹出层 |
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 |
| 令牌 | 数值 | 用途 |
|---|---|---|
| --radius-sm | 4px | 按钮、输入框 |
| --radius-md | 8px | 卡片 |
| --radius-lg | 12px | 模态框 |
| --radius-xl | 16px | 大型容器 |
| --radius-full | 9999px | 胶囊按钮、头像 |
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 |
| 令牌 | 数值 | 用途 |
|---|---|---|
| --duration-fast | 150ms | 微交互 |
| --duration-normal | 300ms | 默认过渡 |
| --duration-slow | 500ms | 页面过渡 |
| --ease-out | cubic-bezier(0, 0, 0.2, 1) | 入场动画 |
| --ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | 常规过渡 |
Tailwind Config Extension
Tailwind 配置扩展
typescript
// 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'],
},
},
},
};typescript
// 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
- 使用语义化令牌而非原始数值
- 保持一致的间距节奏
- 阴影与圆角搭配使用
- 测试颜色的WCAG对比度
Anti-Patterns
反模式
- NO hardcoded hex values in components
- NO inconsistent spacing values
- NO mixing design systems
- 禁止在组件中硬编码十六进制颜色值
- 禁止使用不一致的间距数值
- 禁止混合使用不同的设计系统