Elements that look alike are assumed to behave alike, which makes visual language a promise.
UI foundation · Gestalt principles
Tag
components
Entries tagged components, drawn from across the library. Tags cut through the section structure, which is where most of the useful connections are.
12 entries across 6 sections
Type
Category
Level
12 entries
The constraint that stops content spreading to unusable widths, and increasingly the unit that components respond to.
UI foundation · Layout
Corner treatment and silhouette carry tone, and a product should commit to one system rather than mixing several.
UI foundation · Form and depth
Every interactive element needs a defined appearance for every state it can be in, and most designs specify only two.
UI foundation · Form and depth
Shows where the reader is in a sequence, how much is left, and whether they can move between steps.
Component · Navigation
Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.
Accessibility · Operable
Users must be able to increase spacing without content being clipped or lost.
Accessibility · Perceivable
The props a component exposes determine whether it gets used correctly or forked, which is the main failure mode of design systems.
Design system · Components
A component is finished when its parts, its states and the reason each variant exists are all written down.
Design system · Components
Drafting component documentation from code, which handles the mechanical parts and not the judgement.
AI workflow · Design systems
Models produce working interfaces quickly, and default to generic components with missing states. Supply the system, then review the parts they always get wrong.
AI workflow · Build
The standard workshop for developing and documenting components in isolation.
Tool · design-systems