Demo Design Tokens

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

Spacing Scale

Based on 4px grid:

Shadows

Border Radius

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