Internal · v0.1.0

Design system · Technical Blueprint.

Sharp 0px corners, 1px outlines, paper-white surface, electric-blue accent. Every component in /src/components renders here. Page is noindex.

Last updated · 2026-05-09

Owner · design

01 Color 02 Type 03 Buttons 04 Chips 05 Cards 06 Metrics 07 Terminal 08 Inputs

01 Tokens

Color

background

#f7f9fb

Page surface · the paper-white canvas.

surface-container-lowest

#ffffff

Cards, panels, the solid layer above background.

surface-container-low

#f2f4f6

Inset wells · alt-row table backgrounds.

surface-container

#eceef0

Tag pills, chips, secondary fills.

outline-variant

#c2c6d8

Default 1px borders · the structural blueprint line.

outline

#727687

Stronger borders · used inside dark sections.

on-surface-variant

#424656

Secondary text · captions, labels.

on-background

#191c1e

Primary text · headings, body, the obsidian anchor.

primary

#0050cb

Hover/active states for primary; rarely used directly.

primary-container

#0066ff

Primary CTAs, accents, the electric-blue trace line.

primary-fixed-dim

#b3c5ff

Primary on dark surfaces (inverse panels).

error

#ba1a1a

Destructive states, T0 tier accent, breaches.

02 Tokens

Typography

display-lg

Observability is a definition problem

headline-lg

What we've actually built.

headline-md

The maturity profile & roadmap

body-base

Tracefox re-engineers high-scale systems to reveal what dashboards hide.

body-sm

Senior engineers · fixed fee · USD priced.

technical-data

p99=412ms · trace_id=4f9b1e · sample_n=4820

label-caps

system status · nominal

03 Components

Buttons

Variants

primary for the canonical CTA per page · secondary for the supporting one · technical for inline links beside text · ghost for subtle.

Sizes

With icons

04 Components

Chips & status

Chip tones

Neutral Primary Active Inactive

Status pips

Operational Idle Degraded Outage

05 Components

Cards

Default

No accent

1px outline, sharp corners, paper-white surface.

Accent

2px top rule

Use to denote active or important modules.

Framed

Inset frame

For featured panels — telegraphs depth without shadow.

06 Components

Metric stats

99.98 % trending_up

Uptime

4.2x trending_down

MTTR

$1.2M trending_up

Cost saved

88 ms trending_down

p99 latency

07 Components

Terminal

incident.4f9b1e.trace

tail -f

01[14:22:01] init  ▸ probe attached
02[14:22:02] svc   ▸ checkout-api p99 = 412ms ⚠
03[14:22:03] root  ▸ retry-storm detected
04[14:22:04] fix   ▸ deadline budget redistributed
05[14:22:05] svc   ▸ checkout-api p99 = 88ms ✓

08 Components

Inputs

Notes