Typography
scale ratio 1.292- Saans Fontcss: saansFontdisplay + body475 500 600100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Saans Font | 96px | 475 | 1 | 0.002em |
| headline | Saans Font | 40px | 475 | 1.125 | 0.005em |
| title | Saans Font | 18px | 500 | 1.375 | 0.011em |
| body | Saans Font | 16px | 475 | 1.375 | 0.013em |
| body-sm | Saans Font | 14px | 475 | 1.375 | 0.014em |
| label | Saans Font | 16px | 600 | 1.375 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa24Aa30Aa40Aa64Aa96
- Body size
- 16px / 1.375
- Display size
- 96px
- Display tracking
- 0.002em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 16.82:1
- Muted on bg
- 8.96:1
- Dark mode
- none
Declared accent tokens
- --color-accent#866006painted
- --stroke-accent#ABFFAEpainted
- --surface-accent#ABFFAEpainted
- --color-on-accent#BDFFBDpainted
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 16
- 24
- 32
- 40
- 60
- 64
- 96
Corner radii
24pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 161px
Components
exact computed valuesbutton-primary
- backgroundColor
- #0B363B
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 8px 20px
- height
- 40px
- fontFamily
- saansFont
- fontSize
- 14px
- fontWeight
- 600
- border
- 2px solid #0B363B
- shadow
- oklch(0.9263 0.136 145.2) 0px 0px 0px 4px
button-secondary
- textColor
- #00262B
- rounded
- 9999px
- padding
- 8px 20px
- height
- 40px
- fontFamily
- saansFont
- fontSize
- 14px
- fontWeight
- 600
- border
- 2px solid #0B363B
- shadow
- oklch(0.97 0 0) 0px 0px 0px 4px
Layout & motion
- Container
- 1320px
- Grid columns
- 12
- Hero
- left-aligned+media-below
- Navigation
- none-detected
- Page height
- 9,016px
- Easing
- cubic-bezier(0, 0, 0.35, 1)
- Durations
- 200ms 400ms
- Transitions
- 109
- Keyframes
- 1
- Stack
- next.js, tailwind, radix-ui, shadcn/ui, sanity, google-tag-manager, vercel
Page sections (10)
section labels are heuristic
01banner?
02heroMore impact from every
03features?Built for agents, not just humans
04features?Everything you need to engage customers
05features?Meet your AI Agent
06features?Support every stage of the customer journey
07features?Infrastructure built for teams and the agents that support them
08feature detail?Trusted to power billions of customer interactions
09logosOptimize your messaging
10footer
How Customer.io compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 96px: larger than 89% of indexed sites (median 60px).
- Type scale
- 1.29×: steeper than 53% of indexed sites (median 1.28×).
- Container
- 1320px: wider than 77% of indexed sites (median 1242px).
- Text contrast
- 16.8:1: lower than 60% of indexed sites (median 17.6:1).
- Page length
- 9,016px: longer than 59% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Saans Font
- One of 2 indexed sites that load Saans Font (1%).
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Customer.io use?
Customer.io uses Saans Font (loaded as "saansFont") for headings and body text.
What are Customer.io's brand colors?
Customer.io's website uses a light scheme: background #FFFFFF, surface #FDF0E9, text #00262B, muted text #032125CC and borders #EBEBEB.
How is Customer.io's website laid out?
The most common corner radius is 0px, body text is 16px with 1.375 line height, and the page container is 1320px wide.
