Typography
scale ratio 1.419- Geographbody400 50061%
- Self Moderndisplay40030%
- Akkurat Monomono400 50010%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Geograph | 24px | 400 | 1.333 | 0.025em |
| headline | Self Modern | 40px | 400 | 1.5 | 0em |
| title | Akkurat Mono | 12px | 400 | 1.333 | 0.05em |
| body | Geograph | 14px | 400 | 1.429 | 0em |
| label | Geograph | 12px | 400 | 1.333 | 0em |
Type scale
Aa12Aa14Aa16Aa24Aa40
- Body size
- 14px / 1.5
- Display size
- 24px
- Display tracking
- 0.025em
- Case
- title
Color
dark schemePalette by painted area
- Text on bg
- 16.10:1
- Muted on bg
- undefined:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 40
- 80
- 112.5
- 168
- 188.5
Corner radii
1624pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 80px
Components
exact computed valuesbutton-secondary
Shop Women
- textColor
- #212121
- rounded
- 9999px
- padding
- 8px 16px
- height
- 33px
- fontFamily
- Geograph
- fontSize
- 12px
- fontWeight
- 500
- border
- 1px solid #FFFFFF
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #FFFFFF
input
- rounded
- 33554400px
- height
- 42px
- padding
- 10px 80px
- backgroundColor
- #FFFFFF
- border
- 1px solid #212121
Layout & motion
- Container
- 1360px
- Grid columns
- 4
- Hero
- left-over-media
- Navigation
- none-detected
- Page height
- 5,964px
- Easing
- cubic-bezier(0.37, 0, 0.63, 1)
- Durations
- 150ms 200ms 300ms 900ms
- Transitions
- 42
- Keyframes
- 0
- Stack
- shopify, vue, tailwind, google-tag-manager, cloudflare
Page sections (5)
section labels are heuristic
01heroWildly Comfortable. Blissfully Breathable.
02features?Bestsellers
03feature detail?Dasher NZ
04features?Breezer Collection
05footerFollow The Flock
How Allbirds compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 24px: smaller than 92% of indexed sites (median 60px).
- Type scale
- 1.42×: steeper than 84% of indexed sites (median 1.28×).
- Container
- 1360px: wider than 89% of indexed sites (median 1242px).
- Text contrast
- 16.1:1: lower than 67% of indexed sites (median 17.6:1).
- Page length
- 5,964px: shorter than 72% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Geograph
- The only site in the index that loads Geograph.
- Self Modern
- The only site in the index that loads Self Modern.
- 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 Allbirds use?
Allbirds uses Geograph for body text. Self Modern is used for headings. Akkurat Mono is used for code.
What are Allbirds's brand colors?
Allbirds's website uses a dark scheme: background #212121, surface #00000026, text #FFFFFF and borders #FFFFFF.
How is Allbirds's website laid out?
The most common corner radius is fully rounded (pill), body text is 14px with 1.5 line height, and the page container is 1360px wide.
