Milestone 0B · Design system

Design reference

Every primitive in every state. Later milestones consume these rather than inventing their own spacing, colour or control sizes — and this page is where a regression shows up first. Switch the theme in the top bar to check both.

Buttons

30px · 24px small40px below the md breakpoint

Variants

Sizes and states

Fields

30px16px text on mobile prevents iOS zoom

Standard

Title

Shown in lists and search results

Language

Invalid and multiline

Slug

Already used by another article

Description

Status

Never colour aloneEvery tone carries an icon or a word

Snippet safety

SafeCautionDestructive

Destructive classification is unmissable and never hue-only.

Autosave

Saving…Saved 18:42Not saved

A failed save must never look like a successful one.

Share lifecycle

Active · 6d leftExpires in 42mConsumedRevoked

Storage quota

41%

78%

100%

Decimal, to match the exact 2,000,000,000-byte ceiling.

Overlays

RadixFocus trap, restore and Escape come free

Dialog, popover, tooltip

Shortcuts Ctrl K N / Esc

Tabs

Roving focus

Segmented navigation

Arrow keys move between tabs; the panel follows.

Data list

32px rowsOne component behind every list in HIT

Notes·3 items

Empty and loading

No notes match these filters

Clear a filter, or capture something new.

Arrow keys move, Home and End jump, Enter opens. Tab enters and leaves the list once — a hundred rows are not a hundred tab stops.

Type

13px baseComfortable prose, compact chrome

Scale

24 / 600Article title

20 / 600Section heading

16 / 400Body prose in the reader and editor

14 / 500Item titles and emphasis

13 / 400Default interface text

12 / 400Secondary metadata

11 monoColumn labels

Density

True heightsEach block is its real pixel height

Control scale

Button small

Icon button

Input · Button

List row

Top bar

Mobile control

Mobile row

WCAG 2.2 AA sets a 24×24 minimum target, and it outranks compactness. Below the md breakpoint every control steps up.