Typography
scale ratio 2.027- Aften Screencss: AftenScreendisplay40097%
- Benton Sanscss: BentonSansbody4003%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Aften Screen | 75px | 400 | 1 | -0.04em |
| headline | Benton Sans | 12px | 400 | 1.4 | 0em |
| body | Benton Sans | 12px | 400 | 1.4 | 0em |
Type scale
Aa12Aa26.5Aa75Aa100
- Body size
- 12px / 1.4
- Display size
- 75px
- Display tracking
- -0.04em
- Case
- upper
Color
light schemePalette by painted area
- Text on bg
- 20.14:1
- Muted on bg
- 2.54:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 10
- 16.5
- 20
- 25
- 41.5
- 54
- 100
- 108.5
- 160
Corner radii
Shadows (0)
none
- Borders
- none
- Section padding
- 100px
Layout & motion
- Container
- 1332px
- Grid columns
- 12
- Hero
- unknown
- Navigation
- top-fixed+transparent
- Page height
- 10,304px
- Easing
- ease
- Durations
- 300ms 500ms 1200ms 1250ms
- Transitions
- 199
- Keyframes
- 4
- Stack
- next.js, lenis, sanity, google-tag-manager, vercel
Page sections (6)
section labels are heuristic
01nav
02heroCreative Partner
03content?
06features?
How 14islands compares
- Body text
- 12px: smaller than 96% of indexed sites (median 16px).
- Largest heading
- 75px: larger than 77% of indexed sites (median 60px).
- Type scale
- 2.03×: steeper than 99% of indexed sites (median 1.28×).
- Container
- 1332px: wider than 82% of indexed sites (median 1242px).
- Text contrast
- 20.1:1: higher than 79% of indexed sites (median 17.6:1).
- Page length
- 10,304px: longer than 69% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Aften Screen
- The only site in the index that loads Aften Screen.
- Benton Sans
- The only site in the index that loads Benton Sans.
- 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 14islands use?
14islands uses Aften Screen (loaded as "AftenScreen") for headings. Benton Sans (loaded as "BentonSans") is used for body text.
What are 14islands's brand colors?
14islands's website uses a light scheme: background #FFFFFF, surface #F2F2F2, text #070707, muted text #A2A2A9 and borders #A2A2A9.
How is 14islands's website laid out?
The most common corner radius is 0px, body text is 12px with 1.4 line height, and the page container is 1332px wide.
