UI: Establish a Global Design Token System

[juanmanueldaza]

Part of Epic: #105

Task

Define and implement a global system for design tokens in src/app/globals.css to ensure consistency across the application.

Acceptance Criteria

1. Define a primary, secondary, and accent color palette in CSS variables.
2. Define semantic colors for success, error, warning, and info states.
3. Establish a typographic scale (e.g., --font-size-sm, --font-size-md, etc.) and apply it to base HTML elements.
4. Define a spacing scale (e.g., --spacing-1, --spacing-2) based on an 8pt grid.

[juanmanueldaza]

✅ Implementation Complete

The global design token system has been successfully implemented in src/app/globals.css with the following additions:

What was implemented:

1. Color Palettes (CSS Variables)

• Primary colors: --color-primary-50 through --color-primary-900 (10 shades)
• Secondary colors: --color-secondary-50 through --color-secondary-900 (10 shades)
• Accent colors: --color-accent-50 through --color-accent-900 (10 shades)

2. Semantic Colors

• Success states: --color-success-50 through --color-success-900
• Error states: --color-error-50 through --color-error-900
• Warning states: --color-warning-50 through --color-warning-900
• Info states: --color-info-50 through --color-info-900

3. Typography Scale

• Font sizes: --font-size-xs (12px) through --font-size-3xl (40px) - 8 steps
• Line heights: --line-height-tight through --line-height-loose - 5 steps
• Font weights: --font-weight-light through --font-weight-bold - 5 steps
• HTML elements: Automatic styling applied to h1-h6, p, small, and code tags

4. Spacing Scale (8pt Grid)

• Spacing tokens: --spacing-0 through --spacing-24 based on 8pt grid
• Values: 0, 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px

5. Dark Mode Support

All color palettes automatically adapt for dark mode with inverted scales (lighter colors in dark mode, darker colors in light mode).

6. Tailwind Integration

All design tokens are exposed to Tailwind CSS via @theme inline directive for use with arbitrary value syntax.

Documentation

Created comprehensive documentation at docs/design-tokens.md with:

• Usage examples for all token types
• Best practices and guidelines
• Integration patterns with React and Tailwind
• Dark mode behavior explanation

Files Modified

• ✅ src/app/globals.css - Added complete design token system
• ✅ docs/design-tokens.md - Created comprehensive documentation
• ✅ docs/README.md - Added link to design tokens documentation

Validation

• ✅ TypeScript type checking: PASSED
• ✅ Next.js build: PASSED
• ✅ All tokens available in both light and dark modes

The design token system is now ready for use across the application. All shadcn/ui components and custom components can leverage these tokens for consistent theming.