Design systems & UX foundations

A design system bundles design language, tokens, coded components, patterns, usage guidance and governance, run as a product. A component library is its coded parts; a style guide documents rules; a pattern library catalogues reusable solutions; a UI kit is design-file assets.

A raw redline records what one drawn frame measured, so engineers hardcode it and it drifts when a mode or the system changes. Naming the component, variant and token says what to reuse and keeps every theme and future update working.

Deprecation keeps the component working while warning consumers and naming its replacement, giving teams a support window to migrate on their own schedule; removal comes later in a major release, so no product breaks without warning.

Changes grouped by impact: first anything requiring consumer action, with the exact steps; then visible visual changes, new features and fixes, each naming the component, platforms and design-library counterpart, with links to docs and migration notes.

Components reference semantic names such as surface, primary text and border, and a mode supplies different values for those names. One mapping switches every component at once, while per-component dark styles multiply the work and drift apart.

Categorical palettes give unordered groups distinct hues of similar weight; sequential palettes show ordered magnitude with steadily changing lightness; diverging palettes show deviation from a meaningful midpoint with two hues darkening outward from a neutral center.

Functional color roles give colors fixed meanings: success, warning, error, info, interactive states and surfaces. Defining them once means every screen sends the same signal, users learn it, and the system guarantees contrast and a non-color cue centrally.

Elevation levels show how far a surface sits above others, signalling hierarchy, temporariness and focus. A few named levels, each mapped to one shadow or tone, keep one consistent light model and let the system retune depth in one place.

An icon is decorative when nearby visible text already carries its meaning or it is pure ornament; hide it from assistive technology. It is meaningful when it carries information nothing else states; give it a text alternative naming that information.

Name it by its function, not its picture: “Save to favourites”, made unique per card, such as “Save compact hatchback to favourites”. Leave out the role word, and expose the saved status as a pressed state or a changing name.

An atom is a basic interface element, such as a label, input, button or icon, that cannot be broken down further without ceasing to be functional. The test: split it; if no part still works alone, it is an atom.

Bottom-up composition means larger interface parts are assembled from smaller ones: atoms into molecules, organisms, templates and finally pages. Frost stresses the levels are a lens for working on parts and whole at the same time, not five sequential steps.

A molecule is a small group of atoms working as one unit with one focused job. A ticket-search field qualifies because the combination links the parts: the label names the input and the button submits its query.

An organism is a relatively complex component, built from molecules, atoms or other organisms, that forms a distinct section of an interface. A flight-results list qualifies: one flight-option molecule repeated into a self-contained section of the booking screen.

A template is the layout skeleton that shows content structure; a page is one instance of it filled with real, representative content. Pages exist to show the final UI and to test whether the system's parts survive real content.

An avatar falls through a fixed chain: the photo once it loads, otherwise the person's initials on a stable background color, otherwise a generic placeholder glyph. The frame and size never change, so nothing breaks or shifts.

A button does something in place: submits, opens a dialog, changes state. A link goes somewhere: another page, screen or resource. Semantics must follow behaviour, because users and assistive technology rely on it to predict what will happen.

A modal dialog makes everything behind it unreachable for every user until it closes, so it fits a decision needed before continuing. A non-modal dialog lets the user keep working on the page, so it fits reference or parallel tasks.

A toast briefly confirms a low-stakes result of the user's own action; a banner states a condition affecting the whole screen or account and stays until resolved; an inline alert sits next to the content it concerns.

Choose by wait length and what is known: a skeleton when the arriving content's layout is known, a spinner for a short wait of unknown shape, and a progress bar when measurable work takes longer.

Make the label a required input the component cannot be created without, and feed it into the accessible name. It should name the action and its object, such as download invoice 1042, never the icon.

A library cannot know which languages its products ship in, so hardcoded text forces one language on every consumer. Elements should take complete, translatable messages from the app, which owns translation, and let every internal default string be overridden.

A literal freezes one decision inside the component, so no theme, mode or consumer can change it. A semantic token names the role a value plays, such as selected surface, and lets the active theme supply the value.

A new variant is MINOR because it adds backward-compatible capability; a spacing fix back to the documented design is PATCH; a renamed property is MAJOR, because code still passing the old name stops working.

Several boolean style flags let callers ask for combinations that make no sense, with the winner hidden in the implementation. One enum variant property makes the options mutually exclusive, exhaustively checkable and easy to extend; booleans stay for genuinely independent axes.

An accessible name is the string assistive technology announces to identify a control - which one it is. Every operable control needs one, and it must contain the visible text, or voice-control users cannot activate it by saying what they see.

A contrast ratio measures how far apart two specific colors sit in relative luminance, on a scale from 1:1 to 21:1. WCAG's minimum-contrast criterion asks 4.5:1 for normal-size text and 3:1 for large text.

Focus order follows the order controls appear in a screen's underlying structure, not where they are painted. When the two disagree, keyboard users jump unpredictably, and WCAG treats that as a Focus Order failure, not a cosmetic flaw.

Screen reader users rarely read top to bottom. They jump between structural elements, step from one control to the next, or read linearly through everything. Each way of moving needs real structure behind the visuals, not just visual formatting.

Two passes over the whole task: complete it using the keyboard alone, then repeat it with an assistive technology, judging what is announced. Run the keyboard pass first — an inoperable screen makes every later finding point at the wrong cause.

People look for things using their own expectations and words, not an organization's departments or jargon. Labels drawn from users' mental models predict what lies behind them; labels drawn from the org chart leave existing features effectively invisible.

An affordance is what an element lets a person do, such as being tappable; a signifier is the perceivable cue that shows the action exists and where. Flat styling strips cues like underlines, borders and depth, so actions become invisible.

A persona is an archetype of a user segment that lets a team argue design decisions against real goals and behaviours. It is evidence-based when each attribute traces to patterns seen across research participants and it actually changes decisions.

A moderated usability session has a live facilitator, in person or remote, who gives tasks and probes; an unmoderated session runs alone through software. Choose moderated to learn why people struggle, unmoderated for fast, larger samples on well-defined tasks.

Qualitative methods such as interviews, observation and diary studies explain why and how people behave and uncover problems nobody knew to ask about. Quantitative methods such as surveys and product analytics measure how many and how much. Use qualitative to discover, quantitative to size.