Design Language

Say what happened in plain words, specific to the item; say why if it helps; and say how to fix it or what to do next. Avoid bare codes, blame and a vague 'Something went wrong'.

Marketing pages exist to make an impression; task screens exist to get a job done. On a results screen, flourishes compete with the content and brand color can be misread as meaning, so the brand shows through a few consistent touches.

Clear space is a protected margin around the logo, measured in a unit from the logo so it scales; minimum size is its smallest legible rendering. When a header cannot honour both, use a compact approved lockup, never a squeezed one.

A vision statement describes the future the product aims to create for its users; design principles are short, product-specific rules for choosing between options. The vision sets direction and priorities; principles settle everyday design decisions and review debates.

A failed payment leaves the guest stressed and at risk of losing the room. Humour there reads as not taking the problem seriously and slows them down; a calm, plain tone that helps them recover respects their state.

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.

Inverting colors flips hues, breaking brand and status meaning, fails to preserve contrast ratios, makes saturated accents glare and reverses elevation cues. A dark palette is designed: dark gray surfaces, off-white text, softened accents, lighter raised surfaces, every pair re-checked.

Hover and pressed are usually derived by rule: a darker step or a translucent layer over the base. Focus gets its own strong, non-hue indicator, because WCAG 2.4.7 requires it and a TV-remote user has no other position cue.

Give every step a target relative luminance shared by all hues, and space steps so neighbours differ by a constant contrast ratio. Contrast then depends only on step distance, so one published distance per threshold holds for every hue.

A semantic text style is a named typographic role, such as body or caption, that bundles size, weight, line height and letter spacing. Teams choose the role, not the numbers, so text stays consistent and one edit updates every screen.

Mirror whatever follows reading direction: layout order, alignment, navigation, back and forward arrows, steppers and progress. Do not mirror numbers and amounts, logos, checkmarks or icons of real objects; left-to-right runs keep their order inside right-to-left text.

Many readers raise the system or browser text size because they need it, and fixed sizes ignore them. A system defines text styles relative to that setting, and layouts let text wrap, containers grow and horizontal rows stack at large sizes.

A modular type scale is a small set of font sizes where each step is the previous one multiplied by a fixed ratio. From a base of 16 at 1.25, the steps run 12.8, 16, 20, 25, 31.25 and 39.06, then get rounded.

Heading level describes the document outline that assistive technology users navigate, while a text style describes visual prominence. A card title may need level 3 but a small style, and a large fare is not a heading at all, so each is chosen separately.

Named window-width classes give designers, web and native engineers one vocabulary for ranges of available space. They describe the window rather than the hardware, so split-screen, resizing and zoom land in the right layout, and thresholds can change without rewriting specs.

Columns are the vertical tracks that content spans; gutters are the fixed spaces between columns that keep neighbouring content apart; margins are the space between the outer columns and the window edge. Together they give every screen shared alignment lines.

A spacing scale replaces endless one-off guesses with a few shared steps, so screens share one rhythm and are quicker to design, build and review. A base unit such as 4 or 8 makes every step a simple multiple.

Screens differ several-fold in pixel density, so a size given in hardware pixels renders at a different size on each. Density-independent units are multiplied by each device's scale factor, giving roughly one perceived size everywhere from a single spec.

Inset is the space inside a container around its content, stack is the vertical space between stacked elements, and inline is the horizontal space between items in a row. Naming the roles makes intent explicit and clarifies who owns each space.

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.

A shadow is darker than the surface behind it, and on a near-black background there is little darker left, so depth disappears. Tonal elevation makes higher surfaces progressively lighter, one tone step per level, so depth reads through brightness instead.

Use the weakest separator that works: spacing groups related content by default, dividers separate dense uniform rows, borders mark a container's or control's boundary, and elevation marks a surface that sits above or moves over others.

Define a few radius steps, from none to fully rounded, mapped to roles such as control and container so small parts get small radii. When one rounded surface sits inside another, give the inner radius the outer radius minus the inset, floored at zero.

Define a named layer order by role, with toasts above sheets and dialogs, and add a relative rule: a surface opened from another appears directly above its opener, whatever its type. Visual elevation must follow that order.

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.

Glyph size serves visual hierarchy and pairing with text, while the tappable area serves the finger or pointer. A small icon becomes easy to tap by padding its hit area around an unchanged glyph, never by stretching the drawing.

An icon that takes its color from surrounding text follows every state and theme its container handles — selected, disabled, dark surfaces, high-contrast settings — from one file. A fixed fill needs a file per color and breaks when surfaces change.

The canvas is the fixed square every icon is drawn on, the live area the inner zone for its main shapes, and padding the margin between them. A shared canvas lets any icon align and swap in controls without per-icon nudging.

Remove the motion and ask what the user loses. If they can no longer tell where something came from, went or what changed, the motion is functional; if they lose only a moment, it is decoration.

Parallax, zooming or scaling, large areas sweeping across the screen, spinning, and motion the user did not directly cause. They signal that the viewer is moving while the inner ear feels stillness, and that conflict can cause dizziness, nausea and headaches.

Much motion carries information: where a panel came from, that an action worked, that content is loading. Removing it all hides that information. Swapping travel, zoom and parallax for fades or clear instant changes keeps the meaning without the trigger.

Duration grows with how far something moves and how much of the screen changes: a small change is understood at once, a large panel needs time for the eye to follow. Too long feels sluggish; too short reads as a jump.

Entering content must be noticed and located, so it gets fuller motion showing where it came from. Exiting content was already dismissed, so it leaves faster and simpler, often a fade, unless its direction tells users where it went.