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