00 — reference

Style guide

Everything below is rendered from the same tokens the rest of the site uses. Re-skin src/styles/global.css and this page updates with it.

01 — colour

Semantic tokens

Components reference only these names. The raw ramps behind them are the single place you edit to re-brand.

Text and status

Ratios are measured against --bg in each theme. Body text needs 4.5:1; large text and UI boundaries need 3:1.

Text colour tokens with contrast ratios computed from global.css at build time
Token	Light	Ratio	Dark	Ratio	Role
--text	#101917	16.70 — passes the 4.5:1 requirement	#E3EBE8	15.80 — passes the 4.5:1 requirement	Body and headingsneeds 4.5:1
--text-secondary	#3C4A47	8.66 — passes the 4.5:1 requirement	#BFCECA	11.77 — passes the 4.5:1 requirement	Supporting copyneeds 4.5:1
--text-muted	#556561	5.73 — passes the 4.5:1 requirement	#A3B3AF	8.78 — passes the 4.5:1 requirement	Meta and captions only — never paragraphsneeds 4.5:1
--accent	#0A7286	5.20 — passes the 4.5:1 requirement	#5BE1F2	12.32 — passes the 4.5:1 requirement	Links, CTAs, live valuesneeds 4.5:1
--success	#096840	6.39 — passes the 4.5:1 requirement	#6BEBAE	12.89 — passes the 4.5:1 requirement	Healthy statusneeds 4.5:1
--warning	#7D5205	6.36 — passes the 4.5:1 requirement	#F5B93F	10.85 — passes the 4.5:1 requirement	Slow / flaggedneeds 4.5:1
--error	#B3183A	6.30 — passes the 4.5:1 requirement	#FFA3AB	10.11 — passes the 4.5:1 requirement	Failures, form errorsneeds 4.5:1
--border-strong	#6E7E7A	3.97 — passes the 3:1 requirement	#667774	4.06 — passes the 3:1 requirement	Inputs, toggles, focus ringsneeds 3:1

--text
Body and headings
light#10191716.70dark#E3EBE815.80
--text-secondary
Supporting copy
light#3C4A478.66dark#BFCECA11.77
--text-muted
Meta and captions only — never paragraphs
light#5565615.73dark#A3B3AF8.78
--accent
Links, CTAs, live values
light#0A72865.20dark#5BE1F212.32
--success
Healthy status
light#0968406.39dark#6BEBAE12.89
--warning
Slow / flagged
light#7D52056.36dark#F5B93F10.85
--error
Failures, form errors
light#B3183A6.30dark#FFA3AB10.11
--border-strong
Inputs, toggles, focus rings
light#6E7E7A3.97dark#6677744.06

These figures are computed at build time by parsing src/styles/global.css — they are not written down anywhere. Change a ramp, rebuild, and this table tells you the truth about your own palette. A ratio below its requirement renders in the error colour.

Surfaces

--bg
Page background
#F4F8F6 / #0B100F
--surface
Cards, forms, nav
#FBFDFC / #131A19
--surface-raised
Popovers, featured tier
#FBFDFC / #1B2422
--surface-sunken
Alternate bands, code wells
#E9EFEC / #030807
--border
Decorative hairlines only
#D5DFDB / #26312E
--border-strong
Inputs, toggles — ≥3:1
#6E7E7A / #667774

Both themes, side by side

Forced light

Bench

bg #F4F8F6 · text #101917 · accent #0A7286

Forced dark

Rack

bg #0B100F · text #E3EBE8 · accent #5BE1F2

02 — type

Type scale

Archivo for display, Instrument Sans for text, JetBrains Mono for machine output. Every level changes size, weight and width axis together.

display-2xl
38–64px / 0.96 / −0.035em
Every agent run
display-xl
36–52px / 1.02 / −0.03em
Inner page heroes
h1
44px / 1.06 / −0.028em
Article titles
h2
34px / 1.12 / −0.022em
Section headings
h3
26px / 1.20 / −0.016em
Sub-sections
h4
20px / 1.30 / −0.01em
Card titles
lead
19px / 1.55
Hero subheads and section intros
body
16px / 1.65
Default paragraph text, capped at 68 characters per line
body-sm
15px / 1.60
Dense UI prose and card bodies
small
14px / 1.50
Navigation, buttons, form labels
caption
13px / 1.45 / +0.005em / 500
Meta lines and table labels
micro
12px / 1.40 / +0.02em / 600
Badges and chips — sentence case, never all caps
readout
32–44px / 1.00
142 ms
mono
14px / 1.55
model.completion · 1,442 ms

03 — space

Spacing, radii and motion

Spacing scale (base-4)

Radii

2px
4px
8px
12px
9999px

Motion

Motion duration tokens
Token	Duration	Used for
--dur-instant	90ms	Tab and segment switches
--dur-fast	140ms	Hover, colour and border changes
--dur-base	220ms	Accordions, card lift, span draw
--dur-slow	420ms	Scroll reveals (.reveal-stagger)

Every animation is wrapped in prefers-reduced-motion: no-preference. Under reduced motion, entrances still resolve — they just stop travelling.

04 — components

Every state, on one page

If a state is not shown here, it does not exist in the template.

Buttons

primary

secondary

ghost

danger

linkText link

Hover, active and focus-visible states are live — tab through the row to see the focus ring.

Badges

accent
success
warning
error
neutral

Form fields

Default

With help text

Quiet guidance sits under the field.

Error

Enter a valid work email.

Read-only

Disabled

Select

Textarea

Card treatments

Three treatments, never nested inside one another, and at most two per section.

panel
Fill plus hairline. Elevation is a shadow in light, a bezel in dark.
instrument
The console well. Identical in both themes — the instrument never inverts.
etched
No fill. Top and left rules with a corner tick at the opposite corner.

Instrument components

ingest99.98%p99142 ms

142 ms

p99 query latency

60B

spans ingested / month

99.98%

ingest availability

Copy button — confirms via aria-live

Icons

Lucide, one stroke width, drawn inline. Add new ones to src/components/ui/Icon.astro.

arrow-right
check
chevron-down
copy
alert-triangle
alert-circle
menu
close
sun
moon
monitor
search
zap
activity
shield
gauge
terminal
layers
mail