Design language

Lessons in this group, roughly in build order:

creating-the-design-language — The activity of deciding the visual and interaction vocabulary — color, type, space, grid, motion, voice —…
design-language — The shared vocabulary of visual and interaction decisions — color, type, space, shape, motion, and voice —…
design-principles — A short set of opinionated, prioritized statements that resolve design trade-offs — the tie-breakers a…
color — The system’s color foundation: a small set of hue ramps (each a stepped scale of one hue) plus rules for…
functional-colors — Colors assigned to a meaning rather than a brand identity — success, danger, warning, info — defined as…
dark-mode — A second mapping of every color role onto a dark surface palette, switchable at runtime without touching…
monochrome-version — A grayscale rendering of the UI — every color collapsed to its luminance — used both as an accessibility…
grid — The shared layout structure — columns, gutters, margins, and an underlying spacing unit — that aligns…
grid-relation — How the grid, the spacing scale, type, and component dimensions all derive from one base unit, so every…
breakpoints — The named viewport widths at which the layout changes — grid columns, margins, or component arrangement…

tech-studies