Using the identity
The logo, colour, type and lineage bar on one page. It prints on a single A4 sheet.
a Logo and clear space
The dashed line marks the clear space: at least the height of the mark on every side. Use the ink version on paper and the paper version on night. The mark and wordmark are interim until the lab's own logo arrives.
b Type
- NewsreaderTitles, ledes and long reading. Light weights and tight tracking at large sizes.Without it: Times New Roman
- GeistInterface, lists and body text on slides and posters.Without it: Arial
- Geist MonoLabels, metadata, numbers and code. Labels are uppercase with wide tracking.Without it: Courier New
c Colour, paper and night
| Token | Paper | Night | Use |
|---|---|---|---|
| bg | #FAF9F6 | #07090D | page background; the hero canvas is cleared to it |
| surface | #FFFFFF | #0D1016 | raised areas: dialogs, cards, the sticky header |
| ink | #0E1218 | #EDEFF3 | primary text |
| ink-muted | #48515E | #A7AFBC | secondary text, ledes |
| ink-subtle | #636C78 | #7F8898 | metadata, captions, placeholders |
| line | #E2E0D9 | #1C212A | hairline rules between blocks |
| accent | #D9381E | #FF6A4D | graphics and large marks; never a large background fill |
| accent-ink | #B42E17 | #FF8A70 | accent text and links in an active state |
| focus | #2F5BEA | #8FB0FF | keyboard focus outline |
Data hues, for categories, in this order
- data-1#2F5BEA · #6F9BFF
- data-2#6D43E0 · #9E84FF
- data-3#B833C4 · #DB7BEA
- data-4#D6336C · #FF7A9C
- data-5#E8590C · #FF8F5E
- data-6#B7791F · #FFC65C
- data-7#0B8F7A · #56DCC6
- data-8#3D7EA6 · #7CC4F0
d The lineage bar
The lab's colour strip: the data hues in order, in equal segments, like the colour bar on the edge of a printed sheet. It runs along the top of inner pages, slides and posters, and nowhere else.
e Do and do not
Do
- Use the token colours: paper values on light grounds, night values on dark ones.
- Keep clear space of at least the mark's height around the logo.
- Set titles in Newsreader, text in Geist, labels and numbers in Geist Mono.
- Give the signal colour to the one thing that matters in a view.
- Separate with hairlines and white space.
Do not
- Recolour, stretch, rotate or outline the logo, or set it on a busy image.
- Fill large areas with the signal colour.
- Add shadows, gradients, glows or boxed panels.
- Reorder, recolour or shorten the lineage bar, or use it as decoration.
- Set running text in capitals or in the mono face.