Yours, and the field.
Colour, type, layout, motifs and voice.
Essence
Pink is yours; green is the field. Every Datum Line surface is one idea drawn twice: a single lab's cells, and everyone else running the same line. The design stays quiet (off-white ground, near-black ink, grey for everyone else) so the two colours carry the meaning whenever they appear.
The register is a lab notebook that went to design school: precise numbers, monospace labels, generous space, one idea per surface.
01Colour
Two meaning colours, a grey scale, nothing else. Pink and green are a magenta–green pair, chosen to stay distinct under red–green colour blindness.
| Token | Light | Dark | Means | Use |
|---|---|---|---|---|
| accent (pink) | #be1e74 |
#ef74ad |
yours: this lab, this plate, the thing in question | one emphasis per surface; headline accents; your data point |
| green | #0f8f6c |
#3fe0a0 |
the field: everyone running the same line | reference rings, chance lines, eyebrow labels, "in distribution" |
| ink | #14171a |
#f6f7f7 |
text | headings, names, primary text |
| soft | #454c50 |
#c9cfd1 |
body | running text |
| muted | #666e72 |
#949c9f |
secondary | labels, captions, byline |
| quiet | #949c9f |
#6f777a |
everyone else | grey points, dashes, inactive dots |
| rule | #d3d8da |
#2a2f33 |
structure | hairlines, table rules, card borders |
| ground | #f6f7f7 |
#14171a |
page | light slides and documents |
| surface | #ffffff |
#1c2024 |
card | figure and content cards |
Dark slides (04, 05, 06, 07) use ink as the ground and the dark column throughout. Grey is never decoration: it always means "everyone else".
02Type
One sans for words, one mono for things you could measure, a serif only for math.
| Family | Role | Weights | Details |
|---|---|---|---|
| Archivo | headlines, body, figure titles | 400, 500, 600, 700 | headlines 600–700, tracking −0.03em, line height 1.05 |
| IBM Plex Mono | eyebrows, labels, numbers, captions, timestamps | 400, 500 | eyebrows uppercase, tracking +0.1em |
| Source Serif 4 | equations and variables only | 400 italic | never for running text |
| Level | Slide (1280 × 720) | Document | Font |
|---|---|---|---|
| Title | 84 | 40–64 (fluid) | Archivo 700 |
| Headline | 44 | 26 | Archivo 600 |
| Lead | 26–30 | 19 | Archivo 500 |
| Body | 18–21 | 17 | Archivo 400 |
| Label, eyebrow | 13–15 | 13 | Plex Mono, uppercase |
| Caption | 13 | 13 | Plex Mono, muted |
Nothing on a slide is smaller than 13 px. The headline's key phrase takes the accent: "Control is an illusion", "Identity, yes. Behaviour, no."
03Layout and surfaces
| Element | Spec |
|---|---|
| Slide frame | 1280 × 720, padding 52–56 |
| Top row | eyebrow left: slide number in muted mono; tag right: green mono uppercase |
| Headline row | headline left at a fixed width; one supporting line to its right, or nothing |
| Cards | surface white, radius 14, soft shadow (1 px contact + 12 px blur), padding 16–22 |
| Spacing | multiples of 4; 16 between cards, 20 between rows |
| Progress | ten dashes bottom left, 9 × 4; the current one 20 wide in the accent |
| Ground | off-white with two faint glows: pink from the top right, green from the bottom left, each under 8% opacity |
| Documents | 780 px column, pink-to-green rule under the masthead, numbered sections |
Leave space empty rather than fill it with words. A slide carries its title, one figure and at most one line of type; the rest goes to the script or the caption.
04Motifs and icons
| Motif | What it is | Where |
|---|---|---|
| The dial | a pink dot drifting inside a green ring, on a white disc with a tick scale | title slide, favicon |
| The rule | a 3 px line fading pink to green | under document mastheads, on card tops |
| The key | a pink dot labelled your cells, a green ring labelled the field | wherever the two colours first appear |
| Checks | a filled green circle with a white tick; a grey dash for no | comparison tables |
| Line icons | 24 px grid, 1.6 px stroke, round caps and joins, one colour | pipelines, roadmaps, the ask |
Icons stay literal: a vial for a cell line, a plate grid for a screen, a lock for "stays yours", a pin for a place on the map, a receipt for a membership. No filled icons, no emoji, and no third-party logos; institutions are named in type.
05Figures and data
Figures carry the argument; text only points at them.
| Rule | In practice |
|---|---|
| Colour roles are fixed | pink = this plate or lab; green = the field, the reference, chance; grey = everyone else |
| One highlight | one pink mark per figure; if two things need emphasis, it is two figures |
| Number every figure | "Fig. n" in pink mono, then a title that states the finding, then a one-line caption |
| Captions carry the sourcing | n, what was held out, the null, the results file or reference number |
| References are verified | a numbered reference only if the source was opened and checked; pending work says "pending" |
| Math is typeset | serif italic with numbered equations, never code-style text |
| Charts are drawn from data | never hand-placed points; axes titled in plain words |
Captions can be switched off for live presenting; the shared link and PDFs always show them.
06Voice and writing
Precise, spare, a little dry. Say the number, say where it came from, stop.
| Do | Instead of |
|---|---|
| "99.9% of DMSO wells name their own lab; chance is 9%" | "a highly accurate model" |
| "the field", "your cells", "a reference" | "federated", "corpus", "platform" |
| "pending" on anything not yet run | implying a result exists |
| "Published with" for coauthor institutions | "partners" before anyone has agreed |
| colons, semicolons, commas, full stops | em dashes |
| one idea per slide, one thesis per section | lists of benefits |
Headlines are claims, not topics: "Eleven labs. Eleven normals.", not "Inter-laboratory variation". Pairs land hardest: Identity, yes. Behaviour, no. Confidence without control.
07Don't
- Add a third colour, or use pink and green for anything but yours and the field.
- Recolour or redraw anyone else's logo.
- Put two sentences on a slide where one will do, or text under 13 px.
- Use gradients, except the pink-to-green rule and the faint background glows.
- Let text touch a border: every label has room to breathe, and every layout is checked at phone width.
- Show an unverified number as a fact.
Tokens for code
Copy these into any page; light and dark come for free.
css
:root {
--accent: #be1e74; --green: #0f8f6c;
--ink: #14171a; --soft: #454c50; --muted: #666e72;
--quiet: #949c9f; --rule: #d3d8da;
--ground: #f6f7f7; --surface: #ffffff;
--font-sans: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
--font-mono: 'IBM Plex Mono', Menlo, monospace;
--font-math: 'Source Serif 4', Georgia, serif;
--radius: 14px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--accent: #ef74ad; --green: #3fe0a0;
--ink: #f6f7f7; --soft: #c9cfd1; --muted: #949c9f;
--quiet: #6f777a; --rule: #2a2f33;
--ground: #14171a; --surface: #1c2024;
}
}
Fonts load from Google Fonts: Archivo 400–700, IBM Plex Mono 400–500, Source Serif 4 400 italic.