design-system-2026

What problem does it solve?

It solves the problem of inconsistent, ad-hoc UI design by providing a single, accessibly verified blueprint for color, typography, layout, and tokens that can be instantiated into a project-ready DESIGN.md.

Core Features & Use Cases

• OKLCH color system foundations: perceptually-even ramps and contrast verification guidance for palettes and semantic roles.
• Typography + fluid scale planning: stable, CLS-safe font pairings with fluid clamp-based sizing and readability rules.
• Layout systems for modern UI: bento grids, subgrid alignment, container-query responsiveness, and fluid spacing.
• 3-layer token architecture + DESIGN.md authoring: integrates a structured design token contract aligned to DTCG/DTCG-like tooling workflows.
• Visual style taxonomy + art-direction recipes: maps a brand archetype into a coherent art-direction plan.
• Palette/type selection procedure: a deliberate select → justify → instantiate workflow that prevents “color soup” failures.

Quick Start

Use this skill to create a project DESIGN.md by selecting one palette from the vetted palette-schemes menu, one type pairing from type-pairings, and instantiating their roles into docs/plans/<slug>/DESIGN.md while recording the rationale in art-direction.md.