Typography
scale ratio 1.337- Geistdisplay + body400 450 50077%
- Berkeley Monocss: berkeleyMonomono400 50023%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Geist | 64px | 500 | 1 | -0.015em |
| headline | Geist | 48px | 500 | 1.167 | -0.025em |
| title | Geist | 16px | 500 | 1.5 | -0.025em |
| body | Geist | 15px | 400 | 1.5 | 0em |
| body-sm | Geist | 13px | 400 | 1.5 | 0em |
| mono | Berkeley Mono | 13px | 400 | 1.5 | 0em |
Type scale
Aa10Aa11Aa12Aa13Aa14Aa15Aa16Aa36Aa40Aa48Aa64
- Body size
- 15px / 1.6
- Display size
- 64px
- Display tracking
- -0.015em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 19.07:1
- Muted on bg
- 7.99:1
- Accent on bg
- 5.26:1
- Dark mode
- none
Declared accent tokens
- --brand#DE5820painted
- --color-brand#DE5820painted
- --sidebar-primary#1447E6not on page
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 10
- 12
- 14
- 16
- 20
- 24
- 100
Corner radii
23461010.516pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 97px
Components
exact computed valuesbutton-primary
Start free
- backgroundColor
- #DA5C2B
- textColor
- #FFFFFF
- rounded
- 6.1px
- padding
- 0px 12px
- height
- 36px
- fontFamily
- Geist
- fontSize
- 13px
- fontWeight
- 500
button-secondary
Run
- backgroundColor
- #EEEEEE
- textColor
- #0C0C0C
- rounded
- 4px
- padding
- 2px 8px
- height
- 24px
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 500
card
- rounded
- 10.6px
- padding
- 20px
- backgroundColor
- #0F0F0F
- border
- 1px solid #22222280
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
Layout & motion
- Container
- 1240px
- Grid columns
- 4
- Hero
- left-aligned
- Navigation
- top-sticky
- Page height
- 11,621px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 500ms
- Transitions
- 205
- Keyframes
- 3
- Stack
- next.js, tailwind, shadcn/ui, google-tag-manager, vercel
Page sections (14)
section labels are heuristic
01nav
02features?
03heroThe modern machine data platform.
04logos
05features?doesn't work at petabytes. What worked at terabytes
06feature detail?No data left behind.
08code sample?Modern backend. Classic UX.
09feature detail?No renegotiation. No rip-and-replace.
10feature detail?and their agents. Built for engineers
11code sample?account required. Run a query. No
12feature detail?Compare Axiom with
13cta?Keep every log. Predict every bill.
14footerCompany
How Axiom compares
- Body text
- 15px: smaller than 76% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.34×: steeper than 66% of indexed sites (median 1.28×).
- Container
- 1240px: narrower than 50% of indexed sites (median 1242px).
- Text contrast
- 19.1:1: higher than 67% of indexed sites (median 17.6:1).
- Page length
- 11,621px: longer than 80% of indexed sites (median 8,217px).
- Corner radius
- Mostly 6px, shared by 14 of 274 indexed sites (5%).
- Geist
- One of 11 indexed sites that load Geist (4%).
- Berkeley Mono
- One of 4 indexed sites that load Berkeley Mono (1%).
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Axiom use?
Axiom uses Geist for headings and body text. Berkeley Mono (loaded as "berkeleyMono") is used for code.
What are Axiom's brand colors?
Axiom's website uses a dark scheme: background #090909, surface #0F0F0F, text #FAFAFA, muted text #FFFFFFA1 and borders #222222.
How is Axiom's website laid out?
The most common corner radius is 6px, body text is 15px with 1.6 line height, and the page container is 1240px wide.
