design-system.css - SINGLE SOURCE OF TRUTH for all styles
- Design tokens (colors, gradients, shadows, radii)
- Tailwind @theme configuration
- Dark mode overrides
- Component utilities
- All custom CSS classes

Quick Reference

Entry Point

// In main.tsx - THE ONLY CSS import needed
import "./styles/design-system.css";

Color Tokens

--color-primary      /* Primary brand blue (#0077B6) */
--color-primary-dark /* Darker variant (#005A8C) */
--color-success      /* Success green (#00B894) */
--color-warning      /* Warning amber (#F59E0B) */
--color-danger       /* Error red (#DC2626) */
--color-purple       /* Premium purple (#7C3AED) */

Usage

✅ DO:

// Use Tailwind utilities with design system colors
<div className="bg-brand-500 text-white">Content</div>

// Use CSS variables for inline styles
<div style={{ color: 'var(--color-primary)' }}>Content</div>

// Use design system React components
<Button tone="brand" variant="gradient">Click me</Button>

// Use colors.config.ts for programmatic access
import { getModuleCSSColor } from '@/config/colors.config';
const color = getModuleCSSColor('keywords');

❌ DON'T:

// Don't hardcode hex colors
<div className="bg-[#3B82F6]">Content</div>

// Don't use Tailwind default colors (blue-500, emerald-500, etc.)
<div className="text-emerald-500">Content</div>

// Don't use inline hex colors
<div style={{ color: '#F59E0B' }}>Content</div>

Utility Classes

All utility classes are in design-system.css:

Class	Purpose
`.menu-item`	Sidebar menu items
`.igny8-table-*`	Table styling utilities
`.igny8-header-metric-*`	Header metrics bar
`.igny8-select-styled`	Dropdown arrow styling
`.igny8-filter-bar`	Filter bar layout

Migration

All code should use:

Design tokens from design-system.css via CSS variables
Tailwind utilities mapped to design tokens (bg-brand-500, text-success-500)
colors.config.ts for programmatic color access
Standard React components (Button, Badge, Card)

See ../DESIGN_SYSTEM.md for complete guidelines.