Design Kit

blog

(since 2026)


Field notes

Starting from nothing

Numbers set in tabular figures so columns align: 71.4, 67.3, 86.2. Data renders as typed characters rather than charts — ▁▂▃▄▅▆▇█▇▆▅ — which means the system needs no libraries to say something quantitative.

To emphasize something, mute its neighbors rather than louden it.

the third rule

The spreadsheet aesthetic

Any list of records is an honest table: tiny uppercase headers, one heavy line, hairlines between rows.

RoomReadingTempΔ
Sleeping Cave▁▂▃▄▅▆▇█67.3°F−1.2
Primary Bedroom▂▃▄▅▆▇█▇72.1°F+0.4
Linen Closet▃▄▅▆▇█▇▆71.4°F±0.0

Stat lines

Outside

▁▂▃▄▅▆▇█ 86.2°F   +1.1

House

▁▂▃▄▅▆▇█   16 lights on   live

The permitted marks

Tags are putty pills:

Inline code looks like --link: #0033cc, and the accent appears only where something is alive or actionable.

/* the entire palette */
--text: #0a0a0a;   --link: #0033cc;
--muted: #8c8b85;  --rule: #e8e6df;  --pill: #eeece6;

Set in Inter. Four materials, one accent, no shadows.