Design Systems MOC
Date: 2026-08-16
The layer where visual decisions become system constraints, so the same decision isn’t remade on every screen. Engineering work with a governance problem attached — the design half is User Experience, and Design Engineering is the cross-domain view of both.
Primitives
Decided once, referenced everywhere. Getting these wrong is the expensive mistake, because everything above encodes them.
- Design Tokens — named values for colour, space, type, radius, shadow. The contract between design and code
- Colour Systems — palettes, semantic naming, and why
--colour-dangeroutlives--red-500 - Type Scale — a ratio-based scale, and choosing sizes from it rather than by eye
- Spacing Systems — one scale applied consistently, which is most of what “looks designed” means
- Theming — light, dark and brand variants as token swaps rather than parallel stylesheets
Components
- Component API Design — props as a public interface: naming, defaults, and what not to expose
- Composition over Configuration — slots and children rather than a fortieth boolean prop
- Component States — default, hover, focus, active, disabled, loading, error, empty. The set that’s always incomplete
- Variants and Modifiers — a component’s axes of variation, kept orthogonal
- Polymorphic Components — changing the rendered element without changing the API
- Headless Components — behaviour and accessibility without styling, and why the pattern won
- Component Documentation — the prop table, the states, and the usage guidance that stops misuse
The system
- Design Systems — what one actually is: tokens, components, patterns, guidance, governance
- Design System Governance — who decides, how contributions work, and how it stops being one person’s project
- Design System Adoption — the real problem, which is social rather than technical
- Component Inventory — auditing what exists before building what’s missing
- Design System Versioning — shipping breaking changes to consumers you don’t control
- Design Tokens in Practice — a token pipeline from design tool to CSS to platform
Design to code
- Design Handoff — what a developer actually needs, and what gets sent instead
- Figma to Code — the workflow, its automation, and where generated output stops being useful
Borders
Filed in other domains, needed constantly here.
- User Experience — Inclusive Design · Motion and Transitions · WCAG