UI gallery · pick a philosophy

Your morning, in print.

NPR Up First · Apr 26 · 12 min

succeeded failed last poll 2h ago

reader-warm

Charter serif on cream paper, 70-character measure, italic captions, generous leading. The cosy living room of the web. Your current shipped flavour, refined.

serifprose-firstcreamlight + dark

Open

02 / TODAY

Feeds.
Polled
overnight.

OK NPR · THE DAILY · STRATECHERY

swiss-grid

/swiss-grid/

Müller-Brockmann grid logic. Inter at 16 px, ragged-right, asymmetric, single vermillion accent. Numbered sections. Disciplined whitespace.

sans12-col gridone accentlight + dark

Open

feeds: today's queue

3 items · download · mark read

[OK] NPR Up First — 2h ago
[FAIL] The Verge — 502

brutalist

/brutalist/

System defaults. Times New Roman, browser blue links, HTML 4 tables. Almost no CSS. The user's browser already knows what good looks like.

system fontsno theme~4 KBlight only

Open

Inbox · updated 06:14

Today's queue

New NPR Up First 2h ago

linear-dark

/linear-dark/

Inter, dark by default, indigo accent, tight 4‑px spacing. Sidebar layout, panels with borders, keyboard-shortcut chips. Modern product-UI flavour.

sansdenseindigodark + light

Open

Feeds · last 14 days

5 sources · 4 ok / 1 failed / 1 awaiting

NPR Up First 14 new

The Verge 87 new

tufte-dense

/tufte-dense/

ET Book serif, cream paper, sidenotes in the margin, sparklines inline with prose. Maximises data-ink. For when every pixel should earn its keep.

serifdata-densesidenoteslight + dark

Open

Workspace / Inbox / Today

Today's queue

A document-style view of your morning.

Success NPR Up First 2h ago

document-editor

/document-editor/

Quip / Notion / Google Docs flavour. Sans chrome, serif body, page-shaped column on a subtle workspace background. The document IS the UI.

sans + serifpage metaphorblue accentlight + dark

Open

How to view

Open any index.html file directly in a browser, or serve the directory:

cd /home/cc/boxworks/demo/ui-gallery
python3 -m http.server 8080
# then proxy via Caddy or SSH-tunnel localhost:8080

What to look at when choosing

Legibility & mood — spend a minute reading the body paragraph. Does it relax you (reader-warm, document-editor) or activate you (linear-dark, swiss-grid)?
Density — the table and the small-multiples panel. How much do you want to see at once? tufte-dense shows the most; reader-warm the least.
Brand fit — does the chrome say "personal aggregator" or "SaaS product"? brutalist says "personal site"; linear-dark says "company".
Mobile — resize to phone width. Some collapse gracefully; tufte-dense's margin notes flip into expandable footnotes.
Dark mode — click the theme toggle in the header. brutalist deliberately doesn't have one; consider whether you'd miss it.
Implementation surface — brutalist is <4 KB total. linear-dark and document-editor each carry >500 lines of CSS. Multiply that by every service you ship.
Five-year fit — ask yourself which one will look least dated in 2031. Swiss has held up since 1955; "modern dark SaaS" has a half-life.

— Full philosophy notes & sources in README.md next to this file.