What problem does it solve? Establishing a project's visual foundation from scratch — typography scale, color palette, spacing — often produces ad-hoc values that drift over time and fail accessibility checks. This Skill generates canonical design tokens (typography, OKLCH tint scales, spacing) with WCAG contrast validation, either interactively or derived from existing design context in the A-Team pipeline. ## Core Features & Use Cases - Typography scale generation: Compute type sizes, line-heights, and spacing from a base size and ratio, with an anti-collision rule that snaps values to a 4px grid and warns on tight collisions. - OKLCH palette generation: Generate 10-step perceptually uniform tint scales (brand, neutral, accent, semantic colors) from a hue/chroma seed, with hex fallbacks and a WCAG nudge loop that adjusts lightness until AA contrast passes. - shadcn theme bridge: Bind shadcn/ui role variables (--background, --primary, --ring, etc.) to scale steps with contrast-checked foreground/background pairs. - Use Case: A new project has no design system. Run the skill to produce scale.ts, palette.ts, and shadcn-theme.css under docs/product/design-system/, plus Tailwind config and CSS variable blocks for a lofi prototype — all gate-reviewed and never silently overwritten. ## Quick Start Ask the AI to set up the design system by generating typography and color tokens for the project, providing a brand color seed or describing the product's domain and mood.
