Three options for one system
All three share the same foundations: one brand palette, a type scale that starts at a 16px body, spacing on a 4px unit, and controls that grow on touch screens. They differ in three things: shape, depth, and where the brand colour shows up. Pick any option and the whole page redraws in it.
Side by side
| Item | A · Calm | B · Institutional | C · Brand-forward |
|---|---|---|---|
| Page ground | #F5F5F7 light grey | White, with #FAFBFC bands | #EFEEF5 (brand-deep 8%) |
| Top bar | Translucent white, blurred | brand-deep #312E81 | brand-dark #1F2430, page header joins it |
| Primary button | brand-primary, white text (6.29:1) | brand-deep, white text (11.42:1) | brand-accent, brand-dark text (5.60:1) |
| Secondary button | Light brand-primary fill | 2px brand-deep outline | brand-dark 40% outline |
| Accent colour | Focus, progress, live status | Progress only | Primary action, active tab, progress |
| Secondary palette | Status only | Status only | Status and categories |
| Radius (card / inner / control) | 20 / 14 / 12 | 8 / 6 / 8 (pill button) | 16 / 10 / 10 |
| Surface separation | Shadow | 1px border | Light shadow and a translucent edge |
| Closeness to the standard | Sizes only | Sizes and shape | Sizes only |
| Effect on out-of-scope screens | None — independent of them | Closest to a typical admin look; easiest to unify later | None |
Sources and what was checked
Each value below names where it came from and whether it was measured or still needs confirmation. Replace these example rows with the project's own evidence.
| What we took | Value | Source | Status |
|---|---|---|---|
| Body size and heading scale | 16px · 40 · 32 · 28 · 24 · 20 | Existing CSS — path/to/app.css:LINE | Measured |
| Spacing and control heights | 4px base · 32 · 40 · 48 → mobile 40 · 48 · 56 | Standard X — package@version, file | Measured |
| Brand colours | 5 primary · 4 secondary · 3 greys | Brand guide — page / section | To confirm |
Every number in this demo is a placeholder. A value with no source row is an assumption and belongs in Open decisions.
Colour
One palette in all three options; what changes is the role each colour plays. Steps 20 to 80% are tints of each base colour, and an 8% step is added for light washes.
Primary palette
brand-accent is not usable as text on white (2.77:1); its text-safe stand-in is accent-ink #0A7CAF (4.65:1).
Secondary palette
In options A and B these are for status only. In option C they also tell categories apart, one colour per category.
Status colours
Each status has three values: a light wash, an ink that reaches 4.5:1 on that wash, and a dot. Green, blue and yellow come from the secondary palette; red is added because the palette has no error colour.
Roles in the option shown
| Role | Sample | Token | Value |
|---|
Type
One scale: a 16px body with headings at 40, 32, 28, 24 and 20. On phones the headings step down and the body stays at 16, so iOS never zooms into a focused field.
The smallest size that carries words is 13px. Keep letter-spacing at zero for any Arabic text.
Weights
Body 400; small headings, labels and buttons 500; headings 700. 300 is for large numerals only.
A paragraph at real length
The Website relaunch project brings marketing, design and engineering onto one plan for six weeks. Each team owns its own board, and a weekly review keeps the scope in check. When 80% of the tasks are done and the final review passes, the project moves to billing and an invoice goes to the client.
Maximum measure 62 characters; line height 1.62 (26px for 16px text).
Space and grid
Every gap is a multiple of 4px. Related items sit close, groups sit apart, and the space above a heading is larger than the space below it.
Mobile first: the base styles serve the small screen, and each breakpoint adds what a larger screen needs with min-width. A 12-column grid, 24px gutters on desktop and 16px on phones, and a 1320px maximum content width.
Control heights
Three sizes only. Each grows on touch screens, so no button or field on a phone is shorter than 40px.
| Size | Desktop | Mobile | Use |
|---|---|---|---|
| Small S | 32 | 40 | Inside tables, dense filters, row actions |
| Medium M | 40 | 48 | Default: buttons, fields, selects |
| Large L | 48 | 56 | The main action of a long form; the main search |
Shape, depth and motion
This section differs most between the options. The values shown are for the option selected at the top.
Each shadow level has a vertical offset and a soft spread, tinted with brand-dark rather than black. Motion starts fast and eases out (cubic-bezier(.16,1,.3,1)) over 200ms. Content reveals on page load happen once and take 600ms. All of it stops when the user asks the system for reduced motion.
Icons and focus
One outline icon set at a 1.6 stroke, in three sizes: 16, 20 and 24. Directional icons (arrows, back, breadcrumb separators) mirror with text direction; the rest never do.
Focus ring
Shown for keyboard navigation only. brand-accent on white is 2.77:1, under the 3:1 that UI components need, so the ring is focus-accent #0D96D4 (3.32:1) in options A and C, and brand-deep (11.42:1) in option B.
Components
Every component here takes its values from the tokens of the option shown. Switch the option at the top to see the same component in another shape.
Buttons
One primary button per region of the page; the secondary button for what comes after it. A button label is a clear verb, such as "Create project" rather than "Submit".
The icon goes before the label; an arrow that shows direction goes after it. An icon-only button is square at its size's height and carries an aria-label. While loading, a spinner replaces the label and the button keeps its width.
Fields
The label always sits above the field, never inside it. Mark required fields with an asterisk when most fields are optional, and optional ones with "Optional" when most are required. An error message says what is wrong and how to fix it.
The field border reaches 3:1 on white (n350 #868FA0 is 3.26:1 in A and C; brand-dark-60 #797C83 is 4.18:1 in B).
Selects and choices
Use the native select when there are more than five options. With five or fewer, show them all as radio buttons so nobody has to open a menu.
Search
Search comes in two forms: a wide main search in the page header that looks everywhere, and a small search inside a table that filters its rows. Results are grouped, and the matching word is highlighted.
No projects named “advanced cost forecast”.
Try a shorter word, or browse all projects.
Tabs and toggles
A segmented toggle changes how the same data is shown, such as week or month. Tabs move between different sections of a page.
- Account details
- Choose a plan
- Invite your team
- Confirm
Chips and status
A status chip pairs a coloured dot with text and never relies on colour alone. A category chip classifies content. A removable tag shows what the user picked.
In option C each category takes a colour from the secondary palette. In A and B categories are grey and colour stays reserved for status.
Avatar
Without a photo, show the initials of the first and last name. The background colour is derived from the name, so a person keeps the same colour on every screen. The presence dot appears only where presence matters.
24 · 32 · 40 · 56 · 80 — the rounded square is for organisations, the circle for people.
Breadcrumb and pagination
The breadcrumb starts with a home icon, and the current page comes last and is not a link. On phones the middle levels collapse into a "…" button. Pagination shows how many records are on screen out of the total.
Cards
A card holds one thing that can be opened — a project, a task, an invoice — and is not a general-purpose box. Never put a card inside another card.
Website relaunch
Billing migration
Upcoming
View allLoading
Table
Numbers in tables use tabular figures and align to the end of the cell so digits line up. Row actions live in one menu at the end of the row. On phones the table scrolls sideways; columns never fold into the rows.
| Project | Amount | Status | Actions | |||
|---|---|---|---|---|---|---|
AC Acme CorpINV-1042 | Website relaunch | 12 Nov | $4,250.00 | Paid | ||
GL Globex LtdINV-1043 | Billing migration | 18 Nov | $1,980.50 | Sent | ||
IN InitechINV-1039 | Support retainer | 2 Nov | $760.00 | Overdue |
Alerts, dialogs and menus
An inline alert stays until its cause changes. A toast confirms that an action happened and offers to undo it. A dialog is only for an action that cannot be undone.
Delete “Website relaunch”?
All 24 tasks and their files will be removed for everyone. Invoices already sent stay in billing history.
Sample screen: dashboard
The same content and the same components in all three options. Switch the option at the top to compare them on a real screen, then look at the phone version below it.
Projects
Upcoming
AllNotifications
3On a phone (390px)
Good morning, Sam
3 tasks due today · 1 invoice to approve
Upcoming
Open decisions
The first decision is the option. The rest need an answer from the product owner; this page does not assume them.
- Which option — or which mix?
Options can be combined, for example B's shape with C's colour. Pick one source per layer (shape, depth, colour) and never blend two options' values inside the same layer.
- Is there a web licence for the brand font?
If not, the current fallback stays; both fonts can be compared with the switch at the top. The scale and sizes do not change with the font.
- Does a compliance standard apply?
If the product falls under an accessibility or design standard, name it and the version in force; it decides how close to option B the result must be.
- Move the body text to 16px?
Larger body text is easier to read; users will notice the change first in dense tables. Confirm before the scale is applied.
- Which error colour?
The palette has no error colour, so this page uses #B42318 (6.05:1 on its wash, 6.57:1 for white text on it). Confirm it or supply the brand's own.