Cognition v1.2 · Distyl AI
The design system that makes everything look and behave like Distyl
Cognition is Distyl's design system — the single set of rules for how every frontend surface looks, responds, and adapts. Every color, spacing step, radius, and typographic choice is a named token. Components consume tokens, not raw values. Brand and dark mode come for free.
Semantic, not literal values
Use bg-background-subtle, not bg-gray-100. Names describe intent, so values can change underneath without touching components.
Token layer, not dark classes
Themes remap [data-theme="dark"] on <html>. No dark: classes anywhere — the token layer does all the work.
Right component, every time
Button, Tag, Badge, Chip, and Link each have one job. Using the wrong element is a bug, not a style choice.
Every background, text, border, and feedback color with live swatches, plus radius, spacing, and the type scale.
Component semantics, anti-patterns, the legacy migration map, and the dark mode contract.
Where the three Distyl repos stand against Cognition v1.2 today — and what blocks the rebrand.