ui-design-system

Provide the AI with a design system document covering principles, color tokens, and typography before generating components. This Skill defines tinted surfaces, rounded shapes, and oklch tokens so generated markup matches the project style.

All colors use oklch with a cohesive cool-gray surface hue of 260 degrees. Semantic tokens cover primary, destructive, success, and warning, while skill colors differentiate Listening, Reading, Writing, and Speaking by hue.

No, cards must use tinted background fills like bg-muted/30 or bg-primary/5 instead of borders or shadows. Depth is expressed through color lightness and opacity, not elevation.

Yes, dark mode keeps the same hues but shifts lightness up, and borders become semi-transparent white. Accent colors remain at full saturation on text, icons, and small indicators.

Hard-coded hex or rgb values break theme consistency and dark mode adaptation. The design system requires oklch tokens defined in src/styles.css so all colors share the same hue family and respond to theme changes.