Typography
scale ratio 1.201- NType82-Regulardisplay40072%
- Ndotcss: Ndot-Regularui57 40012%
- Geistcss: Geist Variablebody4009%
- Geist Monocss: Geist Mono Variablemono4005%
- Lattera Mono LLcss: LatteraMonoLLother4003%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | NType82-Regular | 48px | 400 | 1 | 0em |
| headline | NType82-Regular | 32px | 400 | 1 | 0em |
| title | NType82-Regular | 24px | 400 | 1.1 | 0em |
| body | Geist | 16px | 400 | 1.3 | 0em |
| body-sm | Lattera Mono LL | 11px | 400 | 1.1 | 0em |
Type scale
Aa11Aa12Aa14Aa16Aa18Aa20Aa24Aa32Aa40Aa48
- Body size
- 16px / 1.3
- Display size
- 48px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 18.64:1
- Muted on bg
- 6.29:1
- Accent on bg
- 18.64:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 8
- 10
- 12
- 16
- 20
- 24
- 28
- 32
- 40
- 144
Corner radii
48
Shadows (0)
none
- Borders
- none
- Section padding
- 144px
Components
exact computed valuesbutton-primary
Read the interview
- backgroundColor
- #040404
- textColor
- #FFFFFF
- rounded
- 4px
- padding
- 12px 16px
- height
- 40px
- fontFamily
- Geist Mono
- fontSize
- 12px
- fontWeight
- 400
input
- rounded
- 4px
- height
- 48px
- padding
- 8px 16px
- backgroundColor
- #3C3C3C99
Layout & motion
- Container
- 1376px
- Grid columns
- 12
- Hero
- left-over-media
- Navigation
- top-fixed+transparent
- Page height
- 8,859px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 100ms 200ms 400ms 500ms
- Transitions
- 49
- Keyframes
- 0
- Stack
- shopify, tailwind, lenis, sanity, google-tag-manager, cloudflare
Page sections (12)
section labels are heuristic
01nav
02heroThe tech you want. The prices you’ve waited for.
03gallery?Shop by category
04feature detail?Studio-level precision for our most advanced headphone ever.
05feature detail?A conversation in New York City with Kelela + Sage Elsesser
06feature detail?On set with V, our new Global Brand Ambassador for Headphone (1) Pro
07gallery?Going pink?
08features?Pack your sound
09feature detail?We put Charli xcx in a room for five days to test the battery on Headphone (a).
10logosWhy buy on nothing.tech
11cta?Join the community
12footer
How Nothing compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.20×: flatter than 80% of indexed sites (median 1.28×).
- Container
- 1376px: wider than 96% of indexed sites (median 1242px).
- Text contrast
- 18.6:1: higher than 61% of indexed sites (median 17.6:1).
- Page length
- 8,859px: longer than 58% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- NType82-Regular
- The only site in the index that loads NType82-Regular.
- Ndot
- The only site in the index that loads Ndot.
- 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 Nothing use?
Nothing uses NType82-Regular for headings. Ndot (loaded as "Ndot-Regular") is used for ui. Geist (loaded as "Geist Variable") is used for body text.
What are Nothing's brand colors?
Nothing's website uses a light scheme: background #F4F4F4, surface #D8D9D980, text #040404, muted text #595A5A.
How is Nothing's website laid out?
The most common corner radius is 4px, body text is 16px with 1.3 line height, and the page container is 1376px wide.
