Watchtower style guide
The visual language behind the reports. Emerald is the oxidised copper-patina roof of the watchtower; the zinc greys are its stone. Dark-first — the night watch — with a light mode for long reads. Toggle the theme (top right) to see every token adapt.
Logo
Primary lockup
Mark only
On stone
The mark is a crenellated tower in emerald; the wordmark is set in Figtree. Keep clear space of at least the mark's height around the lockup.
Colour
Brand — copper-patina emerald
50
#ecfdf5 100
#d1fae5 200
#a7f3d0 300
#6ee7b7 400
#34d399 500
#10b981 600
#009966 700
#047857 800
#065f46 900
#064e3b 950
#022c22 Copper — warm secondary accent
300
#f0b78a 400
#e0894a 500
#c77b3c 600
#a45f2b Surfaces & ink (theme-switched)
page
--plane cards
--surface-1 insets
--surface-2 raised
--surface-3 text
--ink body
--ink-2 muted
--muted hairline
--hair border
--hair-strong Categorical series
emerald
--s1 teal
--s2 sky
--s3 violet
--s4 pink
--s5 copper
--s6 amber
--s7 lime
--s8 Status
good / up
--good warning
--warn serious
--serious critical / down
--crit Typography
Figtree (variable) for everything — display through body. JetBrains Mono for figures, metrics, and technical tokens, so numbers align in tables and charts.
The .au namespace
The .au namespace
The .au namespace
The .au namespace
The .au namespace
The .au namespace
3,570,024 · 1.16% · com.au
Components
Buttons
KPI tiles
Registered .au domains
3,570,024
▲ +347,366 (+10.8% MoM)
DNSSEC-signed
1.16%
41,566 signed
Top-4 registrar share
78.4%
of the namespace
Chart cards
Horizontal bars
Magnitude
Donut
Composition
Principles
Data over decoration. Charts are dependency-free inline SVG; colour carries meaning, never mood.
Emerald is the signal. The hero series and every positive delta; copper and the other hues are supporting cast.
Numbers are monospaced. Every figure is tabular so columns and deltas line up.
Both themes, always. Every token is defined for dark and light; nothing is hard-coded.