ui-design-system

name	ui-design-system
description	Project UI design system — read this before building any page or component. Defines visual style, color tokens, typography, and constraints.
globs	["src/components/**","src/routes/**","src/styles.css"]

Soft Rounded UI

Friendly, soft design language. Tinted surfaces, rounded shapes, flat depth, saturated accents on muted backgrounds.

Principles

• Tinted, not bordered — surfaces use low-opacity background fills (bg-muted/30, bg-primary/5), never solid borders or box shadows
• Flat depth — hierarchy through color lightness and opacity, not elevation or shadow
• Very rounded — large border-radius everywhere (rounded-xl+ for containers, rounded-full for pills and progress bars)
• Subtle interaction — hover changes background opacity or text color via transition-colors. No glow, gradient, shimmer, floating, parallax, or neon effects
• Muted canvas, saturated accents — backgrounds are near-white tinted surfaces; accent colors appear at full saturation only on text, icons, and small indicators

Typography

• Font: DIN Round — geometric, rounded sans-serif (defined in src/styles.css)
• Weights: 500 (body), 700 (headings)
• Numeric: always tabular-nums

Color System

All colors use oklch with a cohesive cool-gray surface hue of 260°.

• Semantic tokens: primary (258° blue), destructive (27° red), success (150° green), warning (55° amber)
• Skill colors: Listening 258° · Reading 155° · Writing 290° · Speaking 60° — equal lightness/chroma, differentiated by hue
• Surfaces: tinted with hue 260°, ultra-low opacity. Accent backgrounds at /5 to /15; text/icons at full saturation
• Dark mode: same hues, shift lightness up; borders become semi-transparent white

Don'ts

• No border or shadow on cards — use tinted fills
• No hard-coded hex/rgb colors — use oklch tokens from src/styles.css
• No inline styles
• No glow, neon shadows, colored box-shadows, glowing borders
• No gratuitous gradients, shimmering text, or floating animations
• No AI-style icons (✨ sparkles, 🪄 wands, 🤖 robots) unless requested