Glossary

The vocabulary, in plain language

Every term the courses use, defined the same way twice: one plain-language line, then the detail. 57 terms so far – seeded from the design-foundations research note; each new course adds its own.

12-column gridLayoutA layout convention dividing content width into 12 equal columns with gutters, so elements can span flexible fractions – halves, thirds, quarters – of one grid.
5-second testShow a design for five seconds, take it away, ask what it was for – isolates first impressions and tests whether the hierarchy landed.
60-30-10 ruleColourA colour-proportion heuristic borrowed from interior design – 60% dominant colour, 30% secondary, 10% accent, spent only on what most needs attention.
8pt gridLayoutA spacing discipline where every margin, padding and gap is a multiple of 8px (with 4px as a permitted half-step for tight spots).
Aesthetic-usability effectPerceptionPeople perceive attractive designs as more usable than they measurably are – and forgive real flaws in things they find beautiful.
AffordanceInteractionThe possible actions an object's form suggests – a handle affords pulling; a raised, shadowed rectangle looks pressable.
APCAColourA newer, more perceptually accurate contrast method proposed for WCAG 3 – not yet a standard, and its scores are not compatible with WCAG 2's ratios.
Atomic designSystemsBrad Frost's five-level model – atoms → molecules → organisms → templates → pages – describing how interface pieces combine hierarchically.
Brand guidelinesSystemsThe broader document describing what a brand looks like, sounds like and stands for – across digital and physical surfaces. Upstream of a design system.
Code ownership (shadcn model)SystemsA component-distribution approach where source code is copied directly into your project at install time – it's your code from that second on – rather than installed as an external dependency.
Common regionPerceptionThings sharing an enclosed area – a card, a bordered box, a background block – are perceived as a group, even more strongly than proximity alone.
Component anatomySystemsA labelled breakdown of a component's parts – container, label, icon slot, content area – documenting what each part is for and how it can vary.
Component registrySystemsA shareable, installable collection of components that any team can publish and any developer can pull from via CLI – shadcn's Registry 2.0 generalisation of copy-owned code.
ComposabilitySystemsThe capacity of small components to combine and nest into larger structures with capabilities neither piece had alone. Portability is a side-effect of doing this well – not the definition.
Container queryLayoutCSS that lets a component respond to the size of its own containing box, rather than the size of the whole browser window.
Contrast ratioColourWCAG's measure of the luminance difference between two colours – 4.5:1 is the legal-strength minimum for normal text against its background.
Design pattern (UX pattern)SystemsA reusable solution to a recurring user-facing problem – onboarding, error recovery, empty states – one abstraction level above the components it's built from.
Design systemSystemsThe code-connected toolkit – tokens, components, patterns, rules – built from brand guidelines to construct consistent product UI at scale.
Design tokenSystemsA named variable for one design decision – a colour, a spacing value, a radius – stored in one place and referenced by name everywhere it's used.
Empty stateInteractionWhat a screen shows when there's no data yet. Designed well, it doubles as onboarding; designed lazily, it's just blank and confusing.
F-pattern / Z-patternPerceptionThe two dominant paths eyes take across a page – F for text-dense pages (down the left edge), Z for sparse marketing layouts (corner to corner).
Figure/groundPerceptionThe brain automatically splits a scene into the thing being looked at (figure) and the backdrop it sits on (ground) – designers push and pull that boundary deliberately.
FindabilitySystemsWhether a person can locate what they need using only the labels and structure the product actually gives them.
Gestalt principlesPerceptionThe brain's automatic rules for grouping separate visual elements into one perceived whole – designers steer them deliberately rather than fighting them.
Governance modelWho is allowed to change a design system, and how a contribution gets approved – centralised, federated, or a hybrid of the two.
Gulf of execution / evaluationInteractionThe two gaps a user has to cross – between what they intend and what the interface lets them do, and between what happened and how well they understand it.
Hallway testingInformal usability testing with whoever's nearby – watch a real person attempt a real task, and stay silent when they get stuck.
Information architecture (IA)SystemsThe pre-visual work of deciding what a product contains and how it's organised, named and related – settled in lists and diagrams before any screen is drawn.
Interactive prototypeA mockup made clickable to simulate real flows – no real code or data underneath, just enough behaviour to test with.
Leading (line height)TypographyThe vertical space between lines of text, usually a percentage of the font size – around 145–150% is the common starting point for body text.
Measure (line length)TypographyThe width of a block of text, counted in characters per line – 50–75 characters is the readable range.
MockupA wireframe with the full visual design applied – real colour, type and spacing, but nothing is clickable yet.
Modular scaleTypographyA set of sizes generated by multiplying a base value by a fixed ratio, so every size relates harmoniously to every other instead of being picked ad hoc.
NavigationInteractionThe on-screen components – menus, tabs, breadcrumbs, filters – that expose a product's information architecture to the user.
Primitive tokenSystemsA raw value in the token system – `blue-500`, `space-4` – with no meaning attached yet. The full set of available Lego bricks, before any are assigned a job.
Progressive disclosureInteractionShow only what's needed now; reveal further complexity on demand – rather than presenting everything at once.
ProximityPerceptionThings placed close together are perceived as related, and things far apart as unrelated – regardless of what they look like.
Screen flowA user flow built from actual screens or mockups instead of abstract boxes – the most literal, walkable map of a product.
Semantic colour tokenSystemsA colour named by its role (like `status-error`), not its value (`#D64545`) – so the value can change without renaming anything that uses it.
Semantic tokenSystemsA token named by purpose – `color-status-error` – that references a primitive, so the underlying value can change without renaming anything that uses it.
SignifierInteractionThe explicit cue that tells you how to act, layered on top of what's merely possible – the "push" plate on a door that affords both pushing and pulling.
SimilarityPerceptionThings that share a visual trait – shape, colour, size – are perceived as the same category, even when scattered across the screen.
SitemapThe visual diagram of a site's page hierarchy – an output of finished IA work, not the way you start it.
Skeleton loadingInteractionShowing a greyed-out approximation of the incoming content while it loads, instead of a blank screen or a spinner.
StateSystemsA live, reactive condition of a component – hover, focus, pressed, disabled, loading – entered and left automatically as the user or the data acts on it.
Task flowA strictly linear diagram of the single ideal path through one task – no branches, no edge cases, just the happy path.
The 5-users ruleOne test user surfaces roughly a third of usability problems; by the fifth you're mostly re-watching known ones – so run small rounds, fix, repeat.
Type pairingTypographyCombining typefaces (usually exactly two – one voice, one workhorse) using deliberate contrast in weight, width or style rather than near-matches.
UI (user interface)InteractionThe tangible surface a person sees and touches – layout, type, colour, icons, buttons, motion.
Usability heuristicOne of ten product-agnostic rules of thumb (Nielsen, 1994) for judging whether any interface is usable – the standard critique vocabulary.
User flowThe zoomed-in, step-by-step path through a product to get one specific thing done – minutes, not months.
User journey mapThe zoomed-out story of someone pursuing a goal with a product – across channels, over time, feelings included.
UX (user experience)InteractionThe entirety of a person's experience with a product or company – before, during and after they touch the interface.
VariantSystemsA situational, design-time version of a component – primary vs secondary, small vs large – chosen deliberately, and unchanged while the app runs.
Visual hierarchyPerceptionThe ranked order of importance across elements, made visible through size, weight, colour, spacing and position – so scanning in order of importance takes no conscious effort.
Whitespace (negative space)LayoutDeliberately empty space used as an active design tool – nothing to do with the colour white, everything to do with emptiness on purpose.
WireframeA deliberately unstyled layout – structure and hierarchy only, no colour, no real type, no imagery.