UI Introduction

Design for small viewports first

If an application is to be made available on different devices, create and design it for small viewports first. The system defines its frame sizes at three breakpoints — Small, Medium and Large — and the type, icon and container tokens re-resolve at each.

Content that survives the 358 px container will survive every wider one. The reverse is rarely true.

Subdivision into blocks

The layout is generously subdivided into blocks, vertically and horizontally, so as to clearly structure content and content sections. Blocks are separated by Padding/XX-Large (32 px) at Large and Padding/Medium (16 px) at Small.

Every gap in the system is one of four values. If a spacing decision needs a fifth, the block structure is usually wrong.

Content can be displayed inside rectangular tiles. Tiles use the global background ramp — background/2 for a resting surface, background/4 for an inactive or placeholder one — and are separated from one another by narrow padding.

An image may cover a tile completely. When it does, ensure there is sufficient contrast against the surface the tile sits on, so the edges stay readable.

If a tile is assigned one or more functions, it becomes a card. Cards carry a Thin 1 px stroke and a 4 px corner radius.

Clear spacing separates elements from each other in a natural way. Where elements must be grouped compactly for reasons of space, a fine line is applied instead — Global/Stroke/1 at Thin (1 px).

Fine lines are placed between the elements to be separated, never above the first or below the last.

Elements and content that matter to the user are highlighted through size and placement. Relevance and status are conveyed by contrast against the background: active and important elements contrast starkly, inactive and secondary ones less so.

The foreground ramp carries this. Foreground/1 is the active voice, Foreground/2 supporting copy, and Foreground/3 is reserved for captions, metadata and disabled states.

On white and light grey surfaces, dark components are placed. On the brand red or on foreground 1, light components are placed and Foreground/On brand (#ffffff) carries the text.

Brand red is a signal colour. It marks the primary action and little else — a page with two red buttons has no primary action.

Placement on images

Elements are placed so as to ensure readability. If a background is busy or varies in brightness, a black block with an opacity of up to 30 % may be applied across the whole image before content is placed on it.

Readability must hold at every viewport, not only the one being designed in.

Superimpositions are avoided for purely design-led reasons. Functionally they are often necessary — a sticky header, a tooltip, a modal. In those cases the block one level above the layout receives a subtle soft shadow rather than a heavy border.

Where the superimposing block must take full focus, the background behind it is darkened to 90 % black. Modals are the usual example.

Type sizes and some components adapt to viewport width and purpose, so the layout can stay compact where space is short and open where it is not. The same token resolves to a different value per breakpoint.

Title 1 is 32 px at Large and 28 px at Small; Body 1 is 16 px and 14 px; the main icon size steps from 24 px to 20 px. Nothing in the component markup changes — only the token values do.