Brand / Design principles
Design principles
The visual version of the voice. When a layout choice is unclear, these decide it. Written from the 5 Oct review that Wes approved; wording approved in v1.0.
01Six principles
Show the thing
A figure, a record, a number with its denominator. Not another white card describing it.
Forest means owned, or do this
Forest marks the primary action, the owned element and the slash. Never a decorative frame, a label, a heading or a link arrow.
Real text, always
Words are HTML text, never baked into images. 14px is the floor on a phone.
One idea per section
Vary the section pattern. No more than two identical layouts in a row.
Bound every claim, visibly
Captions carry the source and date. A chart says what it is not.
Built to be kept
One token source, outlined logo files, documented components. The brand system follows its own advice.
02The squint test
Blur any NTWRK screen. You should see cream ground, ink type, one Forest action and one figure. If you see a wall of white cards, or more than one green thing competing, the layout has drifted.
03How to apply
- Stuck between two layouts? Prefer the one that shows a figure over the one that adds another card.
- Stuck on colour? If it is not the primary action, the owned element or the slash, it is not Forest. Labels and headings use ink or mute; link arrows take the link colour.
- Stuck on type size? If it falls below the floor on a phone, re-lay out; never shrink.
- Stuck on a claim? Put the count, the denominator and the date on the same surface, or cut the claim.
- Stuck on a new component? Reuse an existing one from Components before inventing.