demo-design-tokens

演示设计令牌

概述

预先配置的设计令牌，无需正式设计系统即可打造优雅的演示 UI。

颜色系统

品牌色

--brand-primary: #2563EB;    /* Blue-600 */
--brand-secondary: #1E40AF;  /* Blue-800 */
--brand-accent: #7C3AED;     /* Violet-600 */

中性色

--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 */

语义色

/* 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 */

字体排版

字体栈

--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;

字号比例

令牌	大小	行高	字重	用途
--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	主视觉文本

间距比例

基于 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

阴影

令牌	值	用途
--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)	弹出层

边框圆角

令牌	值	用途
--radius-sm	4px	按钮、输入框
--radius-md	8px	卡片
--radius-lg	12px	模态框
--radius-xl	16px	大型容器
--radius-full	9999px	胶囊标签、头像

过渡效果

令牌	值	用途
--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 配置扩展

// 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'],
      },
    },
  },
};

最佳实践

• 优先使用语义令牌，而非原始值
• 保持间距节奏一致
• 将阴影与边框圆角搭配使用
• 测试颜色是否符合 WCAG 对比度要求

反模式

• 不要在组件中硬编码十六进制颜色值
• 不要使用不一致的间距值
• 不要混用设计系统