UI UX Styling FAQ & Answers

Use variant prop to control button styling. Implementation: Save or Cancel. Component definition: defineProps<{ variant: 'primary' | 'secondary' | 'tertiary' }>();. CSS approach: .btn-primary { background: var(--color-primary); color: white; font-weight: 600; } .btn-secondary { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }. Design principles: (1) Primary button: most prominent, used for main call-to-action (CTA), one per page/screen, high saturation colors. (2) Secondary button: less visual prominence, subtle tonal weight, supports primary action, multiple allowed per page. (3) Tertiary/Ghost: lowest emphasis, text-only or minimal styling, for less important actions. Visual hierarchy: primary commands most attention, accompanied by medium (secondary) and low (tertiary) emphasis buttons. States: enabled, hovered, pressed, focused, disabled (5 states for web, 3 for mobile). Best practices: (1) One primary button per page, (2) Use semantic naming (variant not color), (3) Maintain 4.5:1 contrast ratio (WCAG), (4) Support light/dark modes, (5) Consistent spacing and sizing across variants. Tailwind example: variant="primary" → bg-blue-600 hover:bg-blue-700, variant="secondary" → border-2 border-blue-600 text-blue-600.

Use CSS custom properties (variables) for dynamic theming. Setup: define color tokens in :root: :root { --color-primary: #3B82F6; --color-secondary: #8B5CF6; --color-bg: #FFFFFF; --color-text: #1F2937; } [data-theme='dark'] { --color-primary: #60A5FA; --color-bg: #1F2937; --color-text: #F9FAFB; }. Apply in components: button { background: var(--color-primary); color: var(--color-text); }. Switch themes: document.documentElement.setAttribute('data-theme', 'dark');. Semantic tokens (2025 pattern): create two-tier system: (1) Primitive tokens: raw values (--blue-500: #3B82F6), (2) Semantic tokens: context-specific (--color-primary: var(--blue-500)). Benefits: change primitive once, all semantic tokens update. Color system: 50-900 scale per color (--blue-50 lightest to --blue-900 darkest), use 500 for primary, 600 for hover, 700 for active. Dynamic updates: CSS variables update at runtime (unlike Sass), no recompilation needed, perfect for user preferences. Animations: use @property for smooth transitions: @property --color-primary { syntax: ''; inherits: false; initial-value: #3B82F6; }. Best practices: (1) Use semantic naming (--color-primary not --blue-500), (2) Define in CSS not JavaScript, (3) Include fallbacks, (4) Test contrast ratios (WCAG 4.5:1), (5) Store user preference in localStorage.

Component libraries use design tokens for centralized color management. Tailwind CSS 4 (2025): use @theme directive: @theme { --color-primary: #3B82F6; --color-secondary: #8B5CF6; }. Access in components: . Element Plus: configure theme provider: import { ElConfigProvider } from 'element-plus'; . PrimeVue: use CSS variables: --primary-color: #3B82F6;. Custom component library: create ThemeProvider: provide('theme', { colors: { primary: '#3B82F6', secondary: '#8B5CF6' } });. Component consumption: const theme = inject('theme'); button { background: theme.colors.primary; }. Token structure (2025 standard): Component-Variant-Kind-Modifier-Property. Example: button-primary-error-hovered-background. Benefits: (1) Single source of truth, (2) Consistent across app, (3) Easy theme switching, (4) Type-safe with TypeScript. TypeScript: interface Theme { colors: { primary: string; secondary: string; }; spacing: { sm: string; md: string; }; }. Best practices: (1) Use semantic tokens, (2) Generate CSS variables from design tokens, (3) Support dark mode out of box, (4) Document token usage in Storybook, (5) Validate contrast ratios automatically.

Design tokens abstract raw values into semantic meanings. Token types: (1) Primitive tokens: raw color values (--blue-500: #3B82F6, --spacing-4: 16px, --font-lg: 18px), (2) Semantic tokens: context-specific (--color-primary: var(--blue-500), --spacing-button: var(--spacing-4)). Bad practice: hardcodes color, breaks theming, difficult to maintain. Good practice: uses token, theme-aware, maintainable. CSS implementation: :root { /* Primitives / --blue-500: #3B82F6; --red-500: #EF4444; / Semantic */ --color-primary: var(--blue-500); --color-error: var(--red-500); --color-bg-button-primary: var(--color-primary); }. Component usage: button { background: var(--color-bg-button-primary); }. Benefits: (1) Change blue-500 once, updates everywhere primary is used, (2) Swap primary color (--color-primary: var(--green-500)) instantly, (3) Dark mode: redefine semantic tokens, primitives unchanged. Naming convention (2025): Component-Variant-Kind-Modifier-Property: --button-primary-default-enabled-background, --input-text-error-focused-border. Token management: use tools like Style Dictionary to generate tokens from JSON: { "color": { "primary": { "value": "#3B82F6" } } } → CSS variables. Best practices: (1) Never hardcode colors in components, (2) Use two-tier token system, (3) Document token usage, (4) Validate tokens in CI/CD, (5) Generate TypeScript types from tokens.

Create variant system with distinct visual treatments. Variant types: (1) Primary: main CTA, filled background, high contrast (bg-blue-600 text-white), (2) Secondary: supporting action, outlined or subtle fill (border-2 border-blue-600 text-blue-600), (3) Tertiary/Ghost: lowest emphasis, text-only (text-blue-600 hover:bg-blue-50), (4) Danger/Destructive: warning actions, red palette (bg-red-600 text-white), (5) Success: positive actions (bg-green-600), (6) Icon-only: compact actions (p-2 rounded-full). Implementation: const buttonStyles = { primary: 'bg-blue-600 hover:bg-blue-700 text-white', secondary: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50', danger: 'bg-red-600 hover:bg-red-700 text-white', ghost: 'text-blue-600 hover:bg-blue-50' }; . Size variants: small (py-1 px-3 text-sm), medium (py-2 px-4), large (py-3 px-6 text-lg). State styles: disabled (opacity-50 cursor-not-allowed), loading (cursor-wait with spinner), active (scale-95 transform). Advanced: compound variants (variant + size combinations): { variant: 'primary', size: 'large' } → 'bg-blue-600 py-3 px-6 text-lg'. Use class-variance-authority package for type-safe variants. Best practices: (1) One primary per page, (2) Consistent sizing across variants, (3) Accessible color contrast (4.5:1), (4) Include loading/disabled states, (5) Document when to use each variant.

Variant props control visual appearance while maintaining component behavior. Purpose: (1) Visual hierarchy: differentiate importance (primary > secondary > tertiary), (2) Semantic meaning: convey intent (success, warning, danger), (3) Context adaptation: adjust styling for different contexts (toolbar button vs CTA button), (4) Reusability: one component, multiple styles, (5) Consistency: enforce design system rules. Example: Submit same behavior as Cancel, different styling. Implementation: type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'success'; defineProps<{ variant?: ButtonVariant; size?: 'sm' | 'md' | 'lg'; }>(); const classes = computed(() => ({ 'btn-primary': variant === 'primary', 'btn-secondary': variant === 'secondary' }));. Benefits over separate components: (1) Shared logic (click handling, loading state, disabled state), (2) Smaller bundle (one component not five), (3) Easier maintenance (update behavior once), (4) Type safety (TypeScript validates variants). Alternative approaches: style prop (not recommended, breaks design system), separate components (ButtonPrimary, ButtonSecondary - too rigid), CSS classes (manual, error-prone). Best practices: (1) Define variants in design system first, (2) Use TypeScript union types, (3) Provide sensible defaults (variant="primary"), (4) Document variant usage with examples, (5) Limit variants to 5-7 (more indicates missing abstraction).

Visual hierarchy guides user attention to most important actions. Hierarchy levels: (1) High emphasis (Primary): one per page, filled button, saturated color, largest size, commands most attention. Example: 'Save', 'Submit', 'Buy Now'. (2) Medium emphasis (Secondary): multiple allowed, outlined or tinted, supports primary action. Example: 'Cancel', 'Learn More', 'View Details'. (3) Low emphasis (Tertiary/Ghost): unlimited, text-only or minimal styling, optional actions. Example: 'Skip', 'Dismiss', 'Not Now'. Visual properties: (1) Color saturation: primary uses vibrant colors (blue-600), secondary uses muted (blue-100 background, blue-600 border), tertiary minimal color. (2) Size: primary slightly larger (py-3 px-6), secondary standard (py-2 px-4), tertiary compact (py-1 px-3). (3) Weight: primary bold text (font-semibold), secondary medium (font-medium), tertiary regular. (4) Spacing: primary more padding, tertiary less. Layout guidelines: (1) Right-align primary in forms (scanning pattern), (2) Group related actions, (3) Destructive actions (red) separate from primary, (4) Disable competing primaries (show one at a time). Accessibility: maintain 3:1 contrast ratio for all states, 4.5:1 for text. Anti-patterns: (1) Multiple primary buttons (confusing), (2) All buttons same size (no hierarchy), (3) Low contrast secondary (invisibility). Best practice: A layout should contain a single high-emphasis button making it clear other buttons have less importance.

Use design tokens and component library for consistency. Strategies: (1) CSS custom properties: define once in :root: --spacing-sm: 8px; --spacing-md: 16px; --color-primary: #3B82F6;, reference everywhere: button { padding: var(--spacing-md); background: var(--color-primary); }. (2) Component library: create base components (Button, Input, Card), ensure all features use these, not custom implementations. (3) Utility classes (Tailwind): shared classes: , consistent spacing/colors via utilities. (4) Design tokens: centralized token file (tokens.json), generate CSS variables automatically, version control tokens with code. (5) Linting: Stylelint rules to enforce conventions, ban hardcoded colors, require token usage. Token structure: spacing (4px grid system: 4, 8, 12, 16...), colors (palette with 50-900 shades), typography (font sizes, weights, line heights), shadows, border radius. Enforcement: (1) Code reviews check for hardcoded values, (2) Storybook documents correct usage, (3) CI fails on token violations, (4) Generated TypeScript types prevent invalid values. Component patterns: create composable primitives (Box, Stack, Text), build complex components from primitives, inherit styling from parent automatically. Best practices: (1) Single source of truth (design tokens), (2) Component library not custom CSS, (3) Document patterns in Storybook, (4) Automated visual regression tests (Percy, Chromatic), (5) Regular design system audits.

Theme systems provide structured approach to color management. Architecture: (1) Color palette: define full spectrum per color (blue-50 to blue-900), (2) Semantic mapping: map palette to semantic tokens (--color-primary: var(--blue-600)), (3) Component tokens: map semantic to components (--button-bg: var(--color-primary)). Implementation: :root { /* Palette / --blue-50: #EFF6FF; --blue-600: #2563EB; --blue-900: #1E3A8A; / Semantic / --color-primary: var(--blue-600); --color-primary-light: var(--blue-50); --color-primary-dark: var(--blue-900); / Components / --button-bg-primary: var(--color-primary); --button-text-primary: white; } [data-theme="dark"] { --blue-600: #3B82F6; / Adjust for dark mode */ }. Usage: button { background: var(--button-bg-primary); color: var(--button-text-primary); }. Benefits: (1) Change theme by updating root tokens, (2) Dark mode support built-in, (3) Brand refresh = update palette, (4) A/B test colors easily. Theme switching: const setTheme = (theme: 'light' | 'dark') => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };. Color scales: use tools like Tailwind's color generator or Radix Colors for perceptually uniform scales. Best practices: (1) Three-tier tokens (palette → semantic → component), (2) Test all combinations for contrast, (3) Support system preference (prefers-color-scheme), (4) Animate theme transitions with CSS, (5) Document color usage in design system.

Use mobile-first approach with breakpoints and fluid layouts. Breakpoints (Tailwind standard): sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Mobile-first CSS: write base styles for mobile, add complexity at larger screens: .container { padding: 1rem; } @media (min-width: 768px) { .container { padding: 2rem; } }. Tailwind approach:

CSS custom properties enable runtime dynamic styling and theming. Purpose: (1) Theming: define theme colors once, change at runtime, support light/dark modes automatically. (2) Component styling: pass values from parent to deeply nested children without prop drilling. (3) Dynamic updates: JavaScript can change variables, CSS updates automatically. (4) Maintainability: single source of truth, change once applies everywhere. (5) Performance: browser handles recalculation, faster than inline styles. Syntax: define with --: --primary-color: #3B82F6;, use with var(): color: var(--primary-color, blue); (blue is fallback). Inheritance: custom properties inherit down DOM tree, can be overridden at any level. Example: :root { --spacing: 16px; } .compact { --spacing: 8px; } div { padding: var(--spacing); }. JavaScript interaction: getComputedStyle(element).getPropertyValue('--primary-color'); document.documentElement.style.setProperty('--primary-color', '#FF0000');. Advanced (2025): @property for animation: @property --rotation { syntax: ''; inherits: false; initial-value: 0deg; } enables smooth CSS transitions. Advantages over Sass variables: (1) Live values (Sass compiles once), (2) JavaScript access (Sass can't be changed at runtime), (3) Inheritance (Sass variables don't inherit), (4) Browser DevTools inspection. Best practices: (1) Prefix with component name (--button-bg not --bg), (2) Always provide fallbacks, (3) Document usage, (4) Use for theming not all CSS values.

Use CSS custom properties with data-theme attribute for dark mode. Implementation: define colors for both themes: :root { --bg-primary: #FFFFFF; --text-primary: #1F2937; --color-primary: #3B82F6; } [data-theme="dark"] { --bg-primary: #1F2937; --text-primary: #F9FAFB; --color-primary: #60A5FA; }. Apply in components: body { background: var(--bg-primary); color: var(--text-primary); }. Toggle function: const toggleTheme = () => { const current = document.documentElement.dataset.theme; const next = current === 'dark' ? 'light' : 'dark'; document.documentElement.dataset.theme = next; localStorage.setItem('theme', next); };. Detect system preference: const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (prefersDark) document.documentElement.dataset.theme = 'dark';. Listen for changes: window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { if (!localStorage.getItem('theme')) setTheme(e.matches ? 'dark' : 'light'); });. Smooth transitions: use @property (2025): @property --bg-primary { syntax: ''; inherits: false; initial-value: #FFFFFF; } * { transition: background-color 0.3s ease; }. SSR/hydration: prevent flash of wrong theme by inlining script in HTML head: . Tailwind approach: dark:bg-gray-900 dark:text-white. Best practices: (1) Respect system preference initially, (2) Save user choice in localStorage, (3) Provide manual toggle, (4) Test contrast ratios for both themes (WCAG 4.5:1), (5) Include transition for smoother switch.

Use variant prop to control button styling. Implementation: Save or Cancel. Component definition: defineProps<{ variant: 'primary' | 'secondary' | 'tertiary' }>();. CSS approach: .btn-primary { background: var(--color-primary); color: white; font-weight: 600; } .btn-secondary { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }. Design principles: (1) Primary button: most prominent, used for main call-to-action (CTA), one per page/screen, high saturation colors. (2) Secondary button: less visual prominence, subtle tonal weight, supports primary action, multiple allowed per page. (3) Tertiary/Ghost: lowest emphasis, text-only or minimal styling, for less important actions. Visual hierarchy: primary commands most attention, accompanied by medium (secondary) and low (tertiary) emphasis buttons. States: enabled, hovered, pressed, focused, disabled (5 states for web, 3 for mobile). Best practices: (1) One primary button per page, (2) Use semantic naming (variant not color), (3) Maintain 4.5:1 contrast ratio (WCAG), (4) Support light/dark modes, (5) Consistent spacing and sizing across variants. Tailwind example: variant="primary" → bg-blue-600 hover:bg-blue-700, variant="secondary" → border-2 border-blue-600 text-blue-600.

Use CSS custom properties (variables) for dynamic theming. Setup: define color tokens in :root: :root { --color-primary: #3B82F6; --color-secondary: #8B5CF6; --color-bg: #FFFFFF; --color-text: #1F2937; } [data-theme='dark'] { --color-primary: #60A5FA; --color-bg: #1F2937; --color-text: #F9FAFB; }. Apply in components: button { background: var(--color-primary); color: var(--color-text); }. Switch themes: document.documentElement.setAttribute('data-theme', 'dark');. Semantic tokens (2025 pattern): create two-tier system: (1) Primitive tokens: raw values (--blue-500: #3B82F6), (2) Semantic tokens: context-specific (--color-primary: var(--blue-500)). Benefits: change primitive once, all semantic tokens update. Color system: 50-900 scale per color (--blue-50 lightest to --blue-900 darkest), use 500 for primary, 600 for hover, 700 for active. Dynamic updates: CSS variables update at runtime (unlike Sass), no recompilation needed, perfect for user preferences. Animations: use @property for smooth transitions: @property --color-primary { syntax: ''; inherits: false; initial-value: #3B82F6; }. Best practices: (1) Use semantic naming (--color-primary not --blue-500), (2) Define in CSS not JavaScript, (3) Include fallbacks, (4) Test contrast ratios (WCAG 4.5:1), (5) Store user preference in localStorage.

Component libraries use design tokens for centralized color management. Tailwind CSS 4 (2025): use @theme directive: @theme { --color-primary: #3B82F6; --color-secondary: #8B5CF6; }. Access in components: . Element Plus: configure theme provider: import { ElConfigProvider } from 'element-plus'; . PrimeVue: use CSS variables: --primary-color: #3B82F6;. Custom component library: create ThemeProvider: provide('theme', { colors: { primary: '#3B82F6', secondary: '#8B5CF6' } });. Component consumption: const theme = inject('theme'); button { background: theme.colors.primary; }. Token structure (2025 standard): Component-Variant-Kind-Modifier-Property. Example: button-primary-error-hovered-background. Benefits: (1) Single source of truth, (2) Consistent across app, (3) Easy theme switching, (4) Type-safe with TypeScript. TypeScript: interface Theme { colors: { primary: string; secondary: string; }; spacing: { sm: string; md: string; }; }. Best practices: (1) Use semantic tokens, (2) Generate CSS variables from design tokens, (3) Support dark mode out of box, (4) Document token usage in Storybook, (5) Validate contrast ratios automatically.

Design tokens abstract raw values into semantic meanings. Token types: (1) Primitive tokens: raw color values (--blue-500: #3B82F6, --spacing-4: 16px, --font-lg: 18px), (2) Semantic tokens: context-specific (--color-primary: var(--blue-500), --spacing-button: var(--spacing-4)). Bad practice: hardcodes color, breaks theming, difficult to maintain. Good practice: uses token, theme-aware, maintainable. CSS implementation: :root { /* Primitives / --blue-500: #3B82F6; --red-500: #EF4444; / Semantic */ --color-primary: var(--blue-500); --color-error: var(--red-500); --color-bg-button-primary: var(--color-primary); }. Component usage: button { background: var(--color-bg-button-primary); }. Benefits: (1) Change blue-500 once, updates everywhere primary is used, (2) Swap primary color (--color-primary: var(--green-500)) instantly, (3) Dark mode: redefine semantic tokens, primitives unchanged. Naming convention (2025): Component-Variant-Kind-Modifier-Property: --button-primary-default-enabled-background, --input-text-error-focused-border. Token management: use tools like Style Dictionary to generate tokens from JSON: { "color": { "primary": { "value": "#3B82F6" } } } → CSS variables. Best practices: (1) Never hardcode colors in components, (2) Use two-tier token system, (3) Document token usage, (4) Validate tokens in CI/CD, (5) Generate TypeScript types from tokens.

Create variant system with distinct visual treatments. Variant types: (1) Primary: main CTA, filled background, high contrast (bg-blue-600 text-white), (2) Secondary: supporting action, outlined or subtle fill (border-2 border-blue-600 text-blue-600), (3) Tertiary/Ghost: lowest emphasis, text-only (text-blue-600 hover:bg-blue-50), (4) Danger/Destructive: warning actions, red palette (bg-red-600 text-white), (5) Success: positive actions (bg-green-600), (6) Icon-only: compact actions (p-2 rounded-full). Implementation: const buttonStyles = { primary: 'bg-blue-600 hover:bg-blue-700 text-white', secondary: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50', danger: 'bg-red-600 hover:bg-red-700 text-white', ghost: 'text-blue-600 hover:bg-blue-50' }; . Size variants: small (py-1 px-3 text-sm), medium (py-2 px-4), large (py-3 px-6 text-lg). State styles: disabled (opacity-50 cursor-not-allowed), loading (cursor-wait with spinner), active (scale-95 transform). Advanced: compound variants (variant + size combinations): { variant: 'primary', size: 'large' } → 'bg-blue-600 py-3 px-6 text-lg'. Use class-variance-authority package for type-safe variants. Best practices: (1) One primary per page, (2) Consistent sizing across variants, (3) Accessible color contrast (4.5:1), (4) Include loading/disabled states, (5) Document when to use each variant.

Variant props control visual appearance while maintaining component behavior. Purpose: (1) Visual hierarchy: differentiate importance (primary > secondary > tertiary), (2) Semantic meaning: convey intent (success, warning, danger), (3) Context adaptation: adjust styling for different contexts (toolbar button vs CTA button), (4) Reusability: one component, multiple styles, (5) Consistency: enforce design system rules. Example: Submit same behavior as Cancel, different styling. Implementation: type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'success'; defineProps<{ variant?: ButtonVariant; size?: 'sm' | 'md' | 'lg'; }>(); const classes = computed(() => ({ 'btn-primary': variant === 'primary', 'btn-secondary': variant === 'secondary' }));. Benefits over separate components: (1) Shared logic (click handling, loading state, disabled state), (2) Smaller bundle (one component not five), (3) Easier maintenance (update behavior once), (4) Type safety (TypeScript validates variants). Alternative approaches: style prop (not recommended, breaks design system), separate components (ButtonPrimary, ButtonSecondary - too rigid), CSS classes (manual, error-prone). Best practices: (1) Define variants in design system first, (2) Use TypeScript union types, (3) Provide sensible defaults (variant="primary"), (4) Document variant usage with examples, (5) Limit variants to 5-7 (more indicates missing abstraction).

Visual hierarchy guides user attention to most important actions. Hierarchy levels: (1) High emphasis (Primary): one per page, filled button, saturated color, largest size, commands most attention. Example: 'Save', 'Submit', 'Buy Now'. (2) Medium emphasis (Secondary): multiple allowed, outlined or tinted, supports primary action. Example: 'Cancel', 'Learn More', 'View Details'. (3) Low emphasis (Tertiary/Ghost): unlimited, text-only or minimal styling, optional actions. Example: 'Skip', 'Dismiss', 'Not Now'. Visual properties: (1) Color saturation: primary uses vibrant colors (blue-600), secondary uses muted (blue-100 background, blue-600 border), tertiary minimal color. (2) Size: primary slightly larger (py-3 px-6), secondary standard (py-2 px-4), tertiary compact (py-1 px-3). (3) Weight: primary bold text (font-semibold), secondary medium (font-medium), tertiary regular. (4) Spacing: primary more padding, tertiary less. Layout guidelines: (1) Right-align primary in forms (scanning pattern), (2) Group related actions, (3) Destructive actions (red) separate from primary, (4) Disable competing primaries (show one at a time). Accessibility: maintain 3:1 contrast ratio for all states, 4.5:1 for text. Anti-patterns: (1) Multiple primary buttons (confusing), (2) All buttons same size (no hierarchy), (3) Low contrast secondary (invisibility). Best practice: A layout should contain a single high-emphasis button making it clear other buttons have less importance.

Use design tokens and component library for consistency. Strategies: (1) CSS custom properties: define once in :root: --spacing-sm: 8px; --spacing-md: 16px; --color-primary: #3B82F6;, reference everywhere: button { padding: var(--spacing-md); background: var(--color-primary); }. (2) Component library: create base components (Button, Input, Card), ensure all features use these, not custom implementations. (3) Utility classes (Tailwind): shared classes: , consistent spacing/colors via utilities. (4) Design tokens: centralized token file (tokens.json), generate CSS variables automatically, version control tokens with code. (5) Linting: Stylelint rules to enforce conventions, ban hardcoded colors, require token usage. Token structure: spacing (4px grid system: 4, 8, 12, 16...), colors (palette with 50-900 shades), typography (font sizes, weights, line heights), shadows, border radius. Enforcement: (1) Code reviews check for hardcoded values, (2) Storybook documents correct usage, (3) CI fails on token violations, (4) Generated TypeScript types prevent invalid values. Component patterns: create composable primitives (Box, Stack, Text), build complex components from primitives, inherit styling from parent automatically. Best practices: (1) Single source of truth (design tokens), (2) Component library not custom CSS, (3) Document patterns in Storybook, (4) Automated visual regression tests (Percy, Chromatic), (5) Regular design system audits.

Theme systems provide structured approach to color management. Architecture: (1) Color palette: define full spectrum per color (blue-50 to blue-900), (2) Semantic mapping: map palette to semantic tokens (--color-primary: var(--blue-600)), (3) Component tokens: map semantic to components (--button-bg: var(--color-primary)). Implementation: :root { /* Palette / --blue-50: #EFF6FF; --blue-600: #2563EB; --blue-900: #1E3A8A; / Semantic / --color-primary: var(--blue-600); --color-primary-light: var(--blue-50); --color-primary-dark: var(--blue-900); / Components / --button-bg-primary: var(--color-primary); --button-text-primary: white; } [data-theme="dark"] { --blue-600: #3B82F6; / Adjust for dark mode */ }. Usage: button { background: var(--button-bg-primary); color: var(--button-text-primary); }. Benefits: (1) Change theme by updating root tokens, (2) Dark mode support built-in, (3) Brand refresh = update palette, (4) A/B test colors easily. Theme switching: const setTheme = (theme: 'light' | 'dark') => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };. Color scales: use tools like Tailwind's color generator or Radix Colors for perceptually uniform scales. Best practices: (1) Three-tier tokens (palette → semantic → component), (2) Test all combinations for contrast, (3) Support system preference (prefers-color-scheme), (4) Animate theme transitions with CSS, (5) Document color usage in design system.

Use mobile-first approach with breakpoints and fluid layouts. Breakpoints (Tailwind standard): sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Mobile-first CSS: write base styles for mobile, add complexity at larger screens: .container { padding: 1rem; } @media (min-width: 768px) { .container { padding: 2rem; } }. Tailwind approach:

CSS custom properties enable runtime dynamic styling and theming. Purpose: (1) Theming: define theme colors once, change at runtime, support light/dark modes automatically. (2) Component styling: pass values from parent to deeply nested children without prop drilling. (3) Dynamic updates: JavaScript can change variables, CSS updates automatically. (4) Maintainability: single source of truth, change once applies everywhere. (5) Performance: browser handles recalculation, faster than inline styles. Syntax: define with --: --primary-color: #3B82F6;, use with var(): color: var(--primary-color, blue); (blue is fallback). Inheritance: custom properties inherit down DOM tree, can be overridden at any level. Example: :root { --spacing: 16px; } .compact { --spacing: 8px; } div { padding: var(--spacing); }. JavaScript interaction: getComputedStyle(element).getPropertyValue('--primary-color'); document.documentElement.style.setProperty('--primary-color', '#FF0000');. Advanced (2025): @property for animation: @property --rotation { syntax: ''; inherits: false; initial-value: 0deg; } enables smooth CSS transitions. Advantages over Sass variables: (1) Live values (Sass compiles once), (2) JavaScript access (Sass can't be changed at runtime), (3) Inheritance (Sass variables don't inherit), (4) Browser DevTools inspection. Best practices: (1) Prefix with component name (--button-bg not --bg), (2) Always provide fallbacks, (3) Document usage, (4) Use for theming not all CSS values.

Use CSS custom properties with data-theme attribute for dark mode. Implementation: define colors for both themes: :root { --bg-primary: #FFFFFF; --text-primary: #1F2937; --color-primary: #3B82F6; } [data-theme="dark"] { --bg-primary: #1F2937; --text-primary: #F9FAFB; --color-primary: #60A5FA; }. Apply in components: body { background: var(--bg-primary); color: var(--text-primary); }. Toggle function: const toggleTheme = () => { const current = document.documentElement.dataset.theme; const next = current === 'dark' ? 'light' : 'dark'; document.documentElement.dataset.theme = next; localStorage.setItem('theme', next); };. Detect system preference: const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (prefersDark) document.documentElement.dataset.theme = 'dark';. Listen for changes: window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { if (!localStorage.getItem('theme')) setTheme(e.matches ? 'dark' : 'light'); });. Smooth transitions: use @property (2025): @property --bg-primary { syntax: ''; inherits: false; initial-value: #FFFFFF; } * { transition: background-color 0.3s ease; }. SSR/hydration: prevent flash of wrong theme by inlining script in HTML head: . Tailwind approach: dark:bg-gray-900 dark:text-white. Best practices: (1) Respect system preference initially, (2) Save user choice in localStorage, (3) Provide manual toggle, (4) Test contrast ratios for both themes (WCAG 4.5:1), (5) Include transition for smoother switch.