Datum

The design language behind this site and the interfaces I build. Everything here is rendered live, in light and dark, from the same tokens the pages use.

The spec is one file, DESIGN.md. This page reads it and the site's CSS when it is built, so the counts and the colour check below are measured, not typed in.

A · Foundations

Principles

Eleven rules that decide the small questions. The two that matter most: information is the ornament, and the same control always looks and sits the same way.

01Information is the ornament
02Show the grid
03Two voices
04Extreme scale contrast
05Monochrome first, one signal
06Hairlines over boxes
07Repetition is rhythm
08Objects, not pages
09Hands on the controls
10Material, lightly
11Quiet by default

B · Foundations

Colour

About 90% concrete, up to 5% signal, up to 3% moss. State colours appear only on live data. Each swatch pair is Paper then Instrument.

Concrete ramp

c-000 #F7F7F5

c-050 #EDEDEA

c-100 #E2E2DE

c-200 #CFCFCA

c-300 #B4B4AE

c-400 #808079

c-500 #686862

c-600 #55554F

c-700 #9A9A94

c-800 #3A3A36

c-850 #2A2A28

c-900 #1C1C1B

c-950 #141414

c-980 #0A0A0A

ink-paper #111111

ink-instrument #E8E8E4

Semantic tokens

Token	Paper	Instrument
`on-warning`	#F7F7F5	#0A0A0A
`bg`	#EDEDEA	#0A0A0A
`surface`	#F7F7F5	#141414
`hover`	#E2E2DE	#1C1C1B
`ink`	#111111	#E8E8E4
`ink-2`	#55554F	#9A9A94
`ink-3`	#686862	#808079
`rule`	#CFCFCA	#2A2A28
`rule-strong`	#B4B4AE	#3A3A36
`signal`	#EA562A	#EB6137
`signal-text`	#B83A14	#F0724C
`signal-weak`	#F5DED6	#33170F
`on-signal`	#111111	#0A0A0A
`moss`	#55664A	#8FA27A
`moss-weak`	#DDE1D3	#1A2016
`on-moss`	#F7F7F5	#0A0A0A

State colours

Status, charts, telemetry. Never decoration, never a second accent. Warning is amber, not orange and not red, and always carries a word or the hollow marker.

live

#0E7A41 #3DDC84

alert

#D11A1A #FF4545

cold

#2650D9 #6B93FF

warning

#6A4A00 #F2C94C

C · Foundations

Type

Three fonts, two voices: a tight grotesk that states, a small mono that annotates. Departure Mono is pixel-built, so it never goes below 20px.

micro 11px

SERIAL PLY-S

Plex Mono 500, capsLabels, ticks, pills

meta 12–13px

2026.10.05 · 33 min

Plex Mono 400Dates, captions, data, code

control 14px

Download PDF

Grotesk 500Buttons, tabs, nav

body 16–17px

Plain, direct, first person.

Grotesk 400Running text, 66ch

lead 20–22px

A short statement of what this is.

Grotesk 400Intros

plate 24–64px

0x03 · No. 019

Departure MonoIndices and codes, never below 20px

h2 28–32px

Information is the ornament

Grotesk 600Subheads

h1 48–72px

Datum

Grotesk 600Page titles

display 120px+

Grotesk 600–700Numerals and single words

D · Foundations

Space and marks

A 4px base unit on a 12-column grid. Hairlines are 1px and corners are sharp. The decoration is information: small marks that carry something true.

Mark	Looks like
Index	§0x03 · B · III · No. 019 · Fig. α · ii
Serial / ID	PLY-2026-014
Version stamp	v0.6 · 2026.10.05
Tick ruler	Short hairlines at regular intervals
Inverted label	Outputs, results, totals
Status pill	LIVE · PRE-RELEASE · NEEDED
Hairline table	Rows split by 1px rules, no fills
Redaction bar	Only for something truly withheld

E · Atoms

The smallest parts, one job each. Each is shown on Paper and Instrument; the controls work.

§16.1a

Text roles

Named uses of the type scale, so a screen never picks sizes freehand.
A count after a title is meta in ink-3, never in a bubble.

Paper

title.page

Recordings

title.group

Friday, 2 Oct 2

title.row

Design system architecture

label

Recordings 20

Icon

Outline only, 1.5px stroke. Sizes 12, 16 and 20.
ink-2, or ink-3 when it only decorates. A state colour only when the icon is that status.
Never the only label of an unfamiliar action.

Paper

Instrument

§16.1c

Status pill

Same geometry as a tag. Box and text in the state colour; concrete states stay ink-2.
Solid: only the one current state in signal, or warning where pills are solid.
Always a word. Colour is the second cue.

Paper

Live Failed Info Needed Asks first Archived Pre-release Needed

Instrument

Live Failed Info Needed Asks first Archived Pre-release Needed

§16.1e

Count

Number in ink, noun in ink-2. No colour and no box. 16px between counts, in a fixed order per item type.
Hide a zero unless the zero is the news. Singular for 1.

Paper

4 decisions4 open questions2 next steps1 speaker

Instrument

4 decisions4 open questions2 next steps1 speaker

§16.1f

Button

Height 32, hit area 40, Grotesk 500 14px. One signal-filled primary per view.
States are the same for all three weights. Focus is a 2px ink outline, never system blue.
A menu button shows the current value, not the dimension.

Paper

primary secondary plain menu

Instrument

primary secondary plain menu

§16.1g

Toggle

36×20, sharp. Off is an empty track with an ink-3 thumb; on is a filled ink track.
Never signal, never live. 120ms linear. One toggle per setting that applies at once.

Paper

Off On Disabled Disabled

Instrument

Off On Disabled Disabled

§16.1h

Text field

Height 32, 1px rule-strong, surface fill. Label above, hint below, 4px gaps.
Focus turns the border ink. Error turns border and hint alert. Warning colours the hint only.
Text area: min 96, grows to 240 then scrolls, vertical resize with a hairline handle.
Secure field: value in Plex Mono 13px, reveal button inside, re-masks on blur and after 30 seconds.

Paper

Search Matches titles and transcripts. Title Focus: the border turns ink. Server address That address is not valid. Shortcut Needs Accessibility access. Notes Drag the corner to resize.

API key Reveal is a view of the value, not a change to it.

Instrument

Search Matches titles and transcripts. Title Focus: the border turns ink. Server address That address is not valid. Shortcut Needs Accessibility access. Notes Drag the corner to resize.

API key Reveal is a view of the value, not a change to it.

§16.1i

Rule

rule between rows of a list, starting at the text column. rule-strong under a group header and at the top of a section, full width.
Nothing thicker than 1px.

Paper

rule

rule-strong

Instrument

rule

rule-strong

§16.1j

Disclosure chevron

12px, ink-3, at the trailing edge of a row that opens a detail view. A menu uses the up/down chevron instead.

Paper

opens a detailopens a menu

Instrument

opens a detailopens a menu

§16.1k

Row marker

8×8 hollow square, 1.5px stroke, in warning, at the leading edge. Hollow means "needs attention"; a filled square stays free for alert.

Paper

AccessibilityNeeded

Instrument

AccessibilityNeeded

§16.1l

Checkbox

16×16, 40px hit area. Checked is filled ink with a bg tick; mixed is a dash. Never signal or green.
A toggle is one setting applied at once. A checkbox picks members of a set of five or more.

§16.1m

Slider

The track is a tick ruler: one tick per step, ink up to the value. Thumb is an 8×20 ink block.
Arrow keys move one step, Shift+arrow ten, Home and End jump to the ends.
Six or fewer meaningful values are a menu or a segmented control instead.

Paper

Lower by40 %

10 %100 %

Gain6

010

Instrument

Lower by40 %

10 %100 %

Gain6

010

§16.1n

Segmented control

Two to four options, all visible. Selected is filled ink; one is always selected.
Five or more options, or long labels, become a menu button.

Paper

Kind

View

Instrument

Kind

View

§16.1o

Progress meter

The tick meter: 1px ticks on a 4px pitch. Lit ticks are ink; signal only for the one primary meter in a view.
Indeterminate is five lit ticks stepping across. With reduced motion it holds still and says WORKING.

Paper

Model download

42 %

Index

78 %

Preparing

WORKING

Upload

Failed

Instrument

Model download

42 %

Index

78 %

Preparing

WORKING

Upload

Failed

§16.1p

Chip

A removable item the user chose. Tag geometry, ink text, a 8px × with a 40px hit area.
One atom: not a tag next to a separate × button. Offer Undo where removing loses data.

Paper

Languages

EnglishItalianPolishUkrainian

Remove one to try it.

Instrument

Languages

EnglishItalianPolishUkrainian

Remove one to try it.

§16.1q

Selected and editing row

Selected is a signal-weak ground and nothing else; multi-select adds a checkbox, so it reads without colour.
Editing opens the row in place with a 1px ink outline. One row edits at a time, Esc cancels.
A plain Edit button sits before the chevron on hover and focus.

Paper

Open NotesCommand · Open

Start a timerCommand · Run

Name

Kind

Instrument

Open NotesCommand · Open

Start a timerCommand · Run

Name

Kind

§16.1r

Category mark

Tells apart members of a category that has no state meaning: speakers, groups, kinds. One character in a 16px box.
Assigned in order of first appearance and kept. Never coloured. Active inverts.

Paper

ASpeaker BSpeaker CSpeaker 01Group

Instrument

ASpeaker BSpeaker CSpeaker 01Group

F · Molecules

A few atoms put together. Starting points, not the only allowed layouts.

§16.2

Section header and group header

Section header: label and count left; plain and menu buttons right; rule-strong 8px below.
Group header: title.group and count, 24px above and 8px below, rule-strong under it.

Paper

Recordings 20

Friday, 2 Oct 2

Instrument

Recordings 20

Friday, 2 Oct 2

§16.2

Settings row

Icon, title.row, optional tag, control at the trailing edge, hint under the label. Minimum 48 high.
The text column keeps at least 240px. When a long control would leave less, it drops below the hint and the pill stays on the label line.

Paper

Live transcriptExperimentalStarts with the next recording.

AccessibilityNeededNeeded to type text into other apps.

Smaller afterRecordings shrink once they are this old.

Instrument

Live transcriptExperimentalStarts with the next recording.

AccessibilityNeededNeeded to type text into other apps.

Smaller afterRecordings shrink once they are this old.

§16.2

List row

Marker, 20px icon, then text: title.row, meta, body.short, counts. Trailing: one meta value and the chevron.
4px between lines, 16px top and bottom, rule between rows.

Paper

Design system architecture and workflowFri 2 Oct · 14:01Agreed on libraries, flow and next steps for definition. 4 decisions4 open questions2 next steps5 speakers

33 min

Weekly syncThu 1 Oct · 10:30Needs a title before it can be filed.

18 min

Instrument

Design system architecture and workflowFri 2 Oct · 14:01Agreed on libraries, flow and next steps for definition. 4 decisions4 open questions2 next steps5 speakers

33 min

Weekly syncThu 1 Oct · 10:30Needs a title before it can be filed.

18 min

§16.2

Filter bar and checklist

Filter bar: a text field taking the remaining width, then menu buttons in a fixed order: what, when, grouping, sort.
Checklist: rows are 40px, with a count and Select all / Clear above.

Paper

Capture while these apps have a window 2 of 4

Terminal Notes Browser Editor

Instrument

Capture while these apps have a window 2 of 4

Terminal Notes Browser Editor

G · Rules

Choosing and combining

Which control for which value, and the few rules that apply once atoms are put together (DESIGN.md 16.3).

The value is	Use
On or off, effect at once	Toggle
Several of a set	Checkbox list
One of 2–4, all visible	Segmented control
One of 5+ named presets	Menu button showing the current value
A number on a range	Slider (more than six sensible values)
A number typed exactly	Text field with a `meta` unit after it

§16.3

Stacked bar

Stepped ink opacity (100, 70, 45, 25, 12 %), largest first, at most five parts, a 1px gap between. Each part has a label and a value below.
State colours are not used: a part is a category, not a status. The values here are specimen data.

Paper

Part A38 %

Part B26 %

Part C18 %

Part D12 %

Other6 %

Instrument

Part A38 %

Part B26 %

Part C18 %

Part D12 %

Other6 %

H · Meta

On this site

The site is the first customer of its own spec. These numbers are read from the repository when the page is built.

Atoms specified: 18
Atoms shown here: 18
Colour tokens in spec: 20
Same in the CSS: 19
Differ from the CSS: 1
Not in the CSS: 0

Colour tokens against the CSS

A difference means the spec or src/styles/global.css is out of date. Tokens with no CSS variable are written in the spec only.

Token	Spec Paper	CSS Paper	Spec Instrument	CSS Instrument	Status
`live`	#0E7A41	#0E7A41	#3DDC84	#3DDC84	In sync
`alert`	#D11A1A	#D11A1A	#FF4545	#FF4545	In sync
`cold`	#2650D9	#2650D9	#6B93FF	#6B93FF	In sync
`warning`	#6A4A00	#6A4A00	#F2C94C	#F2C94C	In sync
`on-warning`	#F7F7F5	#F7F7F5	#0A0A0A	#0A0A0A	In sync
`bg`	#EDEDEA	#EDEDEA	#0A0A0A	#0A0A0A	In sync
`surface`	#F7F7F5	#F7F7F5	#141414	#141414	In sync
`hover`	#E2E2DE	#E2E2DE	#1C1C1B	#1C1C1B	In sync
`ink`	#111111	#111111	#E8E8E4	#E8E8E4	In sync
`ink-2`	#55554F	#55554F	#9A9A94	#9A9A94	In sync
`ink-3`	#686862	#8A8A83	#808079	#66665F	Differs
`rule`	#CFCFCA	#CFCFCA	#2A2A28	#2A2A28	In sync
`rule-strong`	#B4B4AE	#B4B4AE	#3A3A36	#3A3A36	In sync
`signal`	#EA562A	#EA562A	#EB6137	#EB6137	In sync
`signal-text`	#B83A14	#B83A14	#F0724C	#F0724C	In sync
`signal-weak`	#F5DED6	#F5DED6	#33170F	#33170F	In sync
`on-signal`	#111111	#111111	#0A0A0A	#0A0A0A	In sync
`moss`	#55664A	#55664A	#8FA27A	#8FA27A	In sync
`moss-weak`	#DDE1D3	#DDE1D3	#1A2016	#1A2016	In sync
`on-moss`	#F7F7F5	#F7F7F5	#0A0A0A	#0A0A0A	In sync

Counting systems, from this site's data

Each kind of counter has its own system, the same on every page: hex for sections, roman for registries, three-digit decimal for posts, Greek for figures.

Counts	System	Now
Site sections	Hex	0x01 · 0x02 · 0x03 · 0x04 · 0x05 · 0x06 · 0x07
Apps in the registry	Roman	I · II · III · IV · V · VI · VII
Releases	Roman	VII (7)
Posts	3-digit decimal	No. 019
Figures	Greek	Fig. α · Fig. β · Fig. γ

See the system applied on real interfaces in the Showcase, or read the full spec in DESIGN.md.