Clearwater

Reference

Design system

Every ratio was computed with tools/a11y/contrast.py, not eyeballed. This page is noindex: it documents the template for whoever builds with it.

Colour tokens

--color-bg

#101820 — Slate — page ground

--color-bg-alt

#161F28 — Banding

--color-surface

#1A242E — Cards

--color-text

#E8EEF2 — 15.29:1 on ground · AAA

--color-text-muted

#9FB0BC — 8.02:1 on ground · AAA

--color-accent

#4FD1C5 — Glass aqua · 9.59:1 on ground · AAA

--color-on-accent

#0A1216 — 10.13:1 on aqua · AAA

--color-brass

#D9A441 — Second accent · 7.96:1 on ground · AAA

--color-required

#FF9B9B — 8.87:1 on ground · AAA

The before/after pair

The primary device. Both panes are drawn in CSS — no photography ships in the free edition — and the grime overlay is chosen per job type so a salt film does not look like soot.

Before
After

Type

Vollkorn — display

Cabin — body. Neither font appears in days 1–78.

Buttons

Primary Secondary