The px laws

At any width from 320 to 2560px, nothing pushes past the edge of the screen.

One-line labels end in “…”; longer text wraps; numbers and buttons never wrap.

10px is allowed only for chart axis labels. Body text is 14px.

Visible controls are at least 32×32px (38px standard). On touch screens every control also gets an invisible 44×44px tap area, so it stays easy to hit without looking bigger.

Icon-only buttons have a label; images have alt text; fields have a label.

4.5:1 contrast for content text. 3:1 for large numbers (24px and up) and for secondary labels in the muted grey — the Octagon OS look, a deliberate trade below WCAG AA for small grey labels.

6 · 9 · 10 · 12 · 13 · 14 · 16 · 22 · 26 · oval (99px). Inside corner = outside corner − the gap between them (a 26px card with 12px padding holds 14px corners).

Cards sit 16px apart (12px on phones). Card padding 24–26px (20px on phones). Page gutter 24px (8px on phones).

Borders and separators are 1px. Separators use the line colour, never a darker grey.

Page → raised cards → sticky headers → sidebar → menus → dialogs → notifications. Only the layer tokens are used.

Tabular figures everywhere; € with cents in totals; big figures carry a small € at 0.42em; a number never wraps.

12–24px, 1.6 stroke, round ends, centred in a square hit area. No mixed icon sets.

Every row in a list card starts with the same 36px tile (10px corners, 18px icon) naming what the row is about. Grey by default; a row carries one colour signal at most — the tile when it asks you to act, otherwise its status chip. Breakdown rows under a figure carry no tile.

Animate transform and opacity only. Hover changes colour, never position: buttons never lift.

A pressed control sinks a little. The result shows in the same place — a row turns done and offers Undo — and the other rows slide, never jump. A message pops up only when the result is somewhere else.

Loading, empty, error and filled — designed, not left blank.

Blue = active or due · orange = planning · green = done or paid · red = overdue. Never decoration.

Each screen has one hero — the biggest figure or the one dark card. Everything else steps down; two cards never shout at the same size.

Big figure → short label → detail. Size and weight make the order; colour does not.

A card opens with its answer in one line (“14 of 18 at work”), and its rows only explain it.

People show as faces, money as a figure, to-dos as rows with their one button. Two cards side by side never look like the same list.

About 60% plain surface, 30% grey text, 10% colour — and that 10% only on what you must look at or press. No boxes inside boxes.

Panels stop at 1360px; reading text stops at 72 characters per line.

The main places live in the bottom bar. A card’s main action sits at its foot, full width, at least 44px tall.

Inputs, text boxes and selects use 16px text on a phone, so the phone never zooms in when you tap one.

One line says what it is; one button says what to do. No second lines, no labels for what you can already see.

A list shows up to four rows, then “See all”. Breakdowns and secondary figures fold away behind one tap.

Menus and pickers open as a sheet at the bottom of the screen, rows 48px tall, closed by a tap outside.

Nothing sits under the bottom bar, the notch or the home bar; the page ends above the bar.

The page never scrolls sideways. Only chip rows slide, starting at the page edge.

Without scrolling: what is happening and what to do next.

Phone transitions stay at 300ms or less, and a swipe follows the finger.