Brand Guide

Design tokens and visual rules.

Everything on this page renders from the actual CSS custom properties in theme.css. Toggle the theme to see both modes.

Color

--theme-text
--theme-text-muted
--theme-text-soft
--theme-accent
--theme-accent-strong
--theme-neutral-strong

Surfaces

--theme-surface-strong
--theme-surface
--theme-surface-muted
--theme-surface-overlay

Typography

Display Quarterly Revenue
Heading Operating performance
Body Enterprise renewals and mix quality improved overall performance this quarter.
Caption Revenue distribution by segment
Eyebrow Executive Summary

Radius

sm — 14px
md — 22px
lg — 30px
pill

Shadow

xs
sm
md
lg

Spacing scale

space-1 — 0.5rem
space-2 — 0.75rem
space-3 — 1rem
space-4 — 1.5rem
space-5 — 2rem
space-6 — 3rem
space-7 — 4rem

Principles

Reduce Typography and spacing over decoration. Small number of surfaces and emphasis states.
Signal, not atmosphere The accent color marks deliberate emphasis. It doesn't fill backgrounds.
Static reliability Every page opens directly in a browser. No build step, no framework.
Accessible by default Screen-reader summaries on data components. Visible focus states. Reduced-motion support.