Style guide
The system behind the template
Every colour, type style and component used across these pages. Change a token here and it updates everywhere.
Colour tokens
Base
#08090A
Surface
#0F1113
Surface Raised
#16191C
Border
rgba(255,255,255,.08)
Border Strong
rgba(255,255,255,.16)
Text
#F5F6F7
Text Secondary
rgba(245,246,247,.58)
Text Muted
rgba(245,246,247,.38)
Accent
#C6FF3D
Accent Soft
rgba(198,255,61,.12)
On Accent
#08090A
Type scale
Display
72 / 1.02 / -0.035em
Ship AI agents
Heading 1
48 / 1.08 / -0.03em
Everything you need
Heading 2
32 / 1.16 / -0.025em
Replay any run
Heading 3
20 / 1.35 / -0.015em
Full-fidelity tracing
Body Large
18 / 1.6 / -0.005em
Axon traces every agent run and scores every output.
Body
16 / 1.6
Axon traces every agent run and scores every output.
Body Small
14 / 1.55
Axon traces every agent run and scores every output.
Quote
20 / 1.5 / -0.015em
We went from three engineers reading logs to nobody.
Stat
56 / 1 / -0.04em
99.99%
Eyebrow
Geist Mono 12 / 0.12em
The platform
Mono
Geist Mono 13
trace_8f31c2
Components
Button — Primary, Secondary, Ghost. Label, icon and link are props.
FAQ Item — click to toggle between the Open and Closed variants.
How do the variants work?
Question and answer are string props, so a buyer edits copy on the instance without opening the component.
What does the closed state look like?
Spacing scale
Sections use 112px of vertical padding and an 80px side gutter on desktop, scaling to 48px on tablet and 20px on phone. Everything else is built from the steps below.
Section
112px
Gutter
80px
Header
72px
Block
40px
Element
20px