How the site is set

1Principles

Text first

The site exists to explain a specification. Anything that doesn't help with that is left out.

Thin lines

Thin rules separate rows and sections. Tinted backgrounds are used only for code, notes and the digits after the eighth.

One accent colour

Blue is used for things you can click or choose, and for the highlighted cell in figures.

Numbers line up

Numbers in columns use fixed-width digits. Stamps are set in the normal text font, not as code.

No jumping

Anything that loads late, like the live clock, has its space reserved, and its placeholder can't be mistaken for a real value.

2The mark

The logo is the name set in Public Sans at weight 720, with the letters spaced by hand, followed by a square full stop. The square is the same highlighted cell as in the zoom figure on the overview page, where it marks one part in 32.

Cap 12px

Cap 16px

Cap 24px

Cap 36px

Tile, 16 to 64px

• Use the shapes in mark.svg rather than typing the name in a font. tools/mark.py generates the file.
• Leave clear space around it of at least half its capital height. When the capitals would be smaller than 12px, use the square tile instead.
• The letters use the text colour and the full stop uses the accent colour. Don't recolour it in any other way.
• In a sentence, write the name as plain text: T32.

3Colour

The palette is an off-white background, near-black text, two greys and one blue. Dark mode has its own values, chosen to work on a dark background rather than inverted from the light ones. The contrast column is measured against the page background. The build fails if any text colour drops below 4.5:1 against either background colour, in light or dark mode.

4Type

Families

Light text on a dark background looks heavier, so dark mode uses slightly lighter weights. The fonts are variable, so in-between weights like 620 are used exactly rather than rounded.

Scale

Each step is $2^{1/5}$ times the size of the one below it, so the size doubles every five steps. T32 has the same ratio: five bits make one character. Step 0 is 16px and step 5 is 32px.

Roles

There are seven text styles, each on a step of the scale. Larger text gets tighter line spacing and letter spacing. Labels, which are in capitals, get wider letter spacing instead.

Figures

Numbers in sentences use proportional digits. Numbers in columns, and all stamps, use fixed-width digits so they line up, with a little extra letter spacing so a stamp's characters are easy to count.

5Space

Spacing uses a 4px grid with nine steps, each roughly double the one before. The small steps are used inside components, the middle ones between components, and the largest above each section.

6Frame

A page has a narrow side column and a main column, inside a fixed maximum width. Paragraphs are limited to about 70 characters per line, even when the column is wider.

7Parts

The components pages are built from. Each one is a plain HTML element or a CSS class.

let utc: UtcDateTime = "2026-10-31T03:13:00Z".parse()?;
let stamp = Stamp::new(Instant::from_utc(utc)?, 8)?;
assert_eq!(stamp.to_string(), "G0S7G6B1");