Brand
First Read,
the identity.
One type family, two surfaces, one signal colour. Ink chrome around white paper, so the memo is always the brightest thing on the screen. Everything a page, a sheet or a slide needs to read as First Read.
01The mark
A timeline of five stages. The diamond on the second.
In the research the diamond marks where the first reliable answer arrives: today at the end, after six figures; with the memo at the second stage, after a few hours. The mark is that diamond, moved early. It is drawn in whatever ink surrounds it.
On the night, in the page's text colour
On paper, in ink
On the signal, in white
64, 32 and 16 px: the mark holds at a favicon's size
The tile: app icon and favicon, the diamond in signal
02Wordmark and lockups
The name is set in the same face as everything else.
IBM Plex Sans 600 at the mark's height, tracked slightly tight. Clear space around a lockup is the mark's own width; the mark is never smaller than 16 px, the lockup never narrower than 120 px.
Horizontal lockup, in the page's ink
Horizontal lockup on paper
Stacked, with the subtitle: a cover, a title block, a slide
In HTML: the mark as an inline SVG and the name as text, so it scales and takes the ink around it
03Colour
Ink and paper. One signal. Amber for what is pending.
Colour is meaning. The signal blue is the proposed mass in every drawing, so it is also the link, the focus ring and the one loud button. White text sits only on the deep signal (5.2:1); the light signal draws lines, links on the night and the mass. Amber is never a highlight: it means not yet settled. A status colour never appears without its word.
- Ink
#14181D - Slate
#2C3E50 · the tool's working ink - Paper
#FFFFFF - Page
#F5F6F8 · the tool's desk - Night
#0E1116 · the site's desk - Signal
#3C8CDC · #6FB1F2 at night · lines, the mass - Signal, deep
#2A6FB8 · fills under white text, links on paper - Amber
#C77D14 · #E0A03A at night
The six statuses: a round mark with a glyph, then the word, on a wash. Pass green, conditional yellow, fail red, uncertain amber with a dashed edge, not applicable grey, info blue. Drawings keep their own tones on white paper in both themes: envelope blue for the proposed mass, lane grey for the outright one, a red dashed line for the setback envelope, amber dashes for the staff benchmark.
04Type
One family, four weights, and a mono for what a machine wrote.
IBM Plex Sans: 300 for display, 400 for reading, 500 for controls, 600 for headings and the small uppercase keys. IBM Plex Mono for rule ids, fingerprints, paths, dates and shell lines. Human sentences are never set in mono.
In the tool everything reads at drafting density: 13 px body, 11 px keys, nothing below 11 px. On the site the display runs large and light; the reading size stops at 18 px. Lead sentence in ink, continuation in grey: hierarchy inside a paragraph comes from colour, not weight.
05Voice
Plain sentences. Buttons say what they do.
The reader may be a volunteer with no planning background, reading on a projector. The voice is a careful colleague's, not a campaign's.
Say
- "Not sure" as a normal answer, never "N/A".
- "Not outright. By rezoning: yes, with conditions." The verdict is a sentence.
- "Run the rules", "Download PDF", "Compare with…": the button is the action.
- "Who resolves it": every open item names a person and what to do.
- "As of 23 Oct 2026", "R2": a memo is dated and numbered, like a drawing issue.
- Numbers with their source: "20 trees required on 2,811 m², Schedule C".
Never
- A status colour without its word, or a word without its mark.
- "AI-powered", "instant", "smart", or any claim the ledger cannot show.
- A guess where the engine is unsure; a hidden placeholder.
- "Submit", "OK", "Go": a button that does not say what happens.
- Legal, planning or funding advice in the memo's own voice. It is a screen.
- Testimonials, adoption claims or client sites that do not exist with consent.
06Components
A short kit, shared by the site and the tool.
Pills for buttons on the site, small rounded buttons in the tool; one primary per screen. A title block for every memo. Status pills everywhere a status is printed. Numbered items for anything that is a sequence.
One loud, the rest quiet.
Run the real case Open this memoRun the rulesSee how it works
Paper on the night for the site's primary; ghost for the second way in; signal for the tool's one loud button, Run the rules. Arrows lean out for a link that leaves the page, right for one that stays.
Keys over values, under a 2 px rule.
The memo's header, the PDF's cover, the Revit sheet and the case page all use it. The revision and the rules date are always in it.
01 · KEY · a title · one sentence.
Every sequence on the site reads this way: a mono number, a signal-blue key, a light title, one sentence. Three across, two on a tablet, one on a phone.
Diagrams drawn in HTML.
Rounded nodes with a kind label; arrows in the gaps; signal for the memo and the model, dashed for a person, filled for a check, an amber badge for a pain point, the diamond for the first reliable answer. Never a picture of a diagram.
07Two surfaces
The site is the desk at night. The tool is the page the memo is read on.
Both carry ink chrome: the site's top bar and the tool's top bar are the same dark band with the same lockup, so opening the tool feels like turning to the document. Inside, the tool is light by default and follows the system setting at night; drawings sit on white paper in either.
Do
- Keep the memo the brightest thing on any screen.
- Use the brand's tokens from brand.css; add no second accent.
- Draw diagrams and figures as HTML or SVG that reflows.
- Number a site's memos R1, R2… and date every one.
- Keep one primary action per screen; make it say what it does.
Don't
- Put the tool's content on a dark ground; the page is light, the chrome is ink.
- Use a gradient, glass or a floating shadow inside the tool; a panel's shadow is one pixel.
- Set amber as text on white, or a status colour on a button.
- Show the rules fingerprint in the reading path; the revision stands for it.
- Add a serif, a second sans or an icon set.