Styling & Design System

Quick Guide: Two-tier token system (Core primitives -> Semantic tokens). Foreground/background color pairs. Components use semantic tokens only. SCSS Modules + CSS Cascade Layers. HSL format. Dark mode via .dark class with mixin. Data-attributes for state. Self-contained (no external dependencies).

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST wrap ALL UI package component styles in @layer components {} for proper cascade precedence)

(You MUST use semantic tokens ONLY in components - NEVER use core tokens directly)

(You MUST use HSL format for colors with CSS color functions - NO Sass color functions like darken/lighten)

(You MUST use data-attributes for state styling - NOT className toggling)