Tailwind Design System

Reference for design tokens and component patterns. Use these tokens consistently across all components.

Color System

Semantic color tokens using CSS custom properties. Map intentions, not specific colors.

:root {
  /* Primary action -- buttons, links, focus rings */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;

  /* Surface -- backgrounds and cards */
  --color-surface: #ffffff;
  --color-surface-elevated: #f8fafc;

  /* Text */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;

  /* Borders */
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* Feedback */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
}

Typography Scale

Spacing Scale

Use Tailwind's default scale. Key values: 1=4px (tight), 2=8px (compact), 4=16px (standard), 6=24px (mobile section padding), 8=32px (desktop section padding), 16=64px (page sections), 24=96px (hero sections).

Component Patterns

Use semantic tokens in Tailwind's arbitrary value syntax:

• •Buttons: bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white px-6 py-3 rounded-lg font-medium transition-colors
• •Cards: bg-[var(--color-surface-elevated)] border border-[var(--color-border)] rounded-xl p-6 shadow-sm
• •Text: text-[var(--color-text-primary)] for headings, text-[var(--color-text-secondary)] for body

Dark Mode

Class-based toggle using CSS custom properties. Override token values in .dark:

.dark {
  --color-primary: #3b82f6;
  --color-primary-hover: #60a5fa;
  --color-surface: #0f172a;
  --color-surface-elevated: #1e293b;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-border: #334155;
  --color-border-strong: #475569;
}

Toggle with document.documentElement.classList.toggle('dark'). All components using var(--color-*) tokens adapt automatically -- no per-component dark mode logic needed.