Form follows data.
FirstWho is a functionalist brand. The interface is an instrument for cognition, not a canvas for expression. This guide defines how the brand looks, reads, and behaves so that every surface stays consistent, legible, and honest to the data it carries.
Foundation
What the brand believes, stated once so every later decision can point back to it.
Structure over decoration
Order comes from the grid and the hierarchy, not from ornament. If an element can be removed without losing meaning, it is removed.
Color carries meaning
A color is a signal, never a mood. Each hue is tied to a category or a state, so people can navigate by seeing.
Plain language wins
We write like a precise, calm technical manual with a human voice. No hyperbole, no filler, no corporate happy-talk.
Logo
The FirstWho mark is a plain geometric symbol — stacked squares with one sharp corner — set beside the wordmark. It behaves like a component, not an illustration.
Keep clear space equal to the symbol's height on all sides. Minimum size: 24 px on screen, 8 mm in print.
Always use the supplied logo asset in brand indigo, or its white reverse on dark surfaces. The rules for clear space, sizing, and misuse apply to every placement.
Color
Color is information encoding. Before using any hue, name the meaning it carries. If it carries none, use neutral gray.
Deep Indigo — Brand
Identity and primary action. Navigation, primary buttons, the logo, and top-level headings.
Teal — Interactive
Anything the user can act on: links, controls, and in-context prompts. Teal always means "clickable."
Amber — Wayfinding
Numbering, step indicators, and structural markers that orient the reader. Used sparingly, never as fill.
Green / Yellow / Red — Status
Reserved strictly for state: success, warning, error. Never decorative.
Gray ramp — Structure
Text, borders, dividers, and surfaces. Carries the layout so color can carry meaning.
Contrast: body and UI text must meet WCAG AA against its background; primary text pairs aim for AAA. Never rely on color alone to signal state — pair it with text or an icon.
Typography
Two families, strictly divided. Inter carries the interface; Merriweather is reserved for page titles and posed questions, where a human voice matters.
Inter — interface & body
Neo-grotesque, neutral, built for legibility at every size. The default for all UI, labels, and running text.
Merriweather — titles & questions
A serif with warmth, used only for H1 page titles and question text. Never for body copy or UI.
Do
- Keep a strict hierarchy — one H1 per page.
- Set body measure at 60–75 characters.
- Reserve Merriweather for titles and questions.
- Use tracking only on uppercase labels.
Don't
- Set body text in a serif or display face.
- Track lowercase text — it breaks word shapes.
- Skip heading levels for visual effect.
- Introduce a third typeface.
Voice & Tone
Write to be understood, then to be finished with. Precise, calm, direct — a technical manual with a human pulse.
Failure and emptiness are moments for direction, not mood. An error says what went wrong and how to fix it, in the interface's voice — it never apologizes and is never vague. An empty screen is an invitation to act, not a dead end.
Layout & Grid
A rigorous grid creates order the reader feels without noticing. Whitespace is a structural element, not leftover space.
Align every element to the grid. A 7 + 3 split (content + sidebar) is the default reading layout. Break the grid only for a stated functional reason.
Repeat one format to let the reader spot patterns across many values. Consistency of frame is what makes comparison fast.
Content width
720px main column; 320px sidebar. Text measure stays comfortable.
Spacing
4px base unit. All gaps are multiples of it — no arbitrary values.
Corners
4/6/8/12px only. Sharp and structural. Pills for tags alone.
Elevation
One light card shadow. No heavy drops, no glows, no glass.
Data & Imagery
Above all else, show the data. Strip everything that isn't the signal — grid noise, bevels, shadows, and decoration around numbers.
Do
- Erase non-data ink until only the signal remains.
- Use functional, geometric icons (Otl Aicher).
- Encode categories with the palette's meaning.
- Label directly; skip legends where you can.
Don't
- Add drop shadows, bevels, or 3D to charts.
- Use "ducks" — shapes that mimic the metaphor.
- Fill space with mesh gradients or blobs.
- Draw heavy gridlines that fight the data.
In Practice
Before any page ships, run the cruft scan. If it fails a line, the page isn't ready.