Typography
scale ratio 1.372- Circular Xxcss: circularXxdisplay + body400 450 500100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Circular Xx | 52.89px | 500 | 1.11 | -0.05em |
| headline | Circular Xx | 47.02px | 500 | 1 | 0em |
| body | Circular Xx | 20.58px | 450 | 1.14 | -0.029em |
| body-sm | Circular Xx | 16.16px | 500 | 1.27 | -0.027em |
| label | Circular Xx | 13.22px | 400 | 1.11 | 0em |
Type scale
Aa12Aa13Aa14.5Aa16Aa17.5Aa19Aa20.5Aa35.5Aa47Aa53
- Body size
- 20.5px / 1.14
- Display size
- 52.89px
- Display tracking
- -0.05em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- undefined:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 3
- 6
- 10.5
- 12
- 13
- 17.5
- 26.5
- 29.5
- 35.5
- 41
- 47
- 61.5
- 104
- 117.5
Corner radii
17.5pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 35px
Components
exact computed valuesbutton-primary
Buy Now
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 11.8px 47px
- height
- 41.1px
- fontFamily
- Circular Xx
- fontSize
- 17.63px
- fontWeight
- 400
card
- rounded
- 17.6px
- padding
- 26.5px
- border
- 1px solid #FFFFFF80
Layout & motion
- Container
- 863px
- Grid columns
- 16
- Hero
- centered+media-below
- Navigation
- top-sticky+transparent
- Page height
- 5,781px
- Easing
- cubic-bezier(0, 0, 0.2, 1)
- Durations
- 150ms 300ms
- Transitions
- 7
- Keyframes
- 1
- Stack
- next.js, vercel
Page sections (6)
section labels are heuristic
01nav
02content?
04content?
05feature detail?Analogue Reviews
06footer
How Analogue compares
- Body text
- 20.5px: larger than 95% of indexed sites (median 16px).
- Largest heading
- 52.9px: smaller than 63% of indexed sites (median 60px).
- Type scale
- 1.37×: steeper than 74% of indexed sites (median 1.28×).
- Container
- 863px: narrower than 89% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 5,781px: shorter than 74% of indexed sites (median 8,217px).
- Corner radius
- Mostly 18px, shared by 2 of 274 indexed sites (1%).
- Circular Xx
- One of 2 indexed sites that load Circular Xx (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 Analogue use?
Analogue uses Circular Xx (loaded as "circularXx") for headings and body text.
What are Analogue's brand colors?
Analogue's website uses a dark scheme: background #000000, text #FFFFFF and borders #FFFFFF80.
How is Analogue's website laid out?
The most common corner radius is 17.5px, body text is 20.5px with 1.14 line height, and the page container is 863px wide.
