Typography
scale ratio 1.351- Serif Fontcss: serifFontdisplay600 70051%
- Sans Fontcss: sansFontbody400 70039%
- Mono Fontcss: monoFontmono40010%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Serif Font | 72px | 600 | 1 | 0em |
| headline | Sans Font | 20px | 400 | 1.4 | 0em |
| body | Sans Font | 16px | 400 | 1.5 | 0em |
| body-sm | Sans Font | 14px | 400 | 1.375 | 0em |
| mono | Mono Font | 13.5px | 400 | 1.4 | 0em |
Type scale
Aa12Aa13.5Aa14Aa16Aa18Aa20Aa22Aa28Aa72
- Body size
- 16px / 1.5
- Display size
- 72px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 6.98:1
- Dark mode
- none
Declared accent tokens
- --color-brand-red#9D1D20painted
- --color-donate-primary#D62168not on page
Space, shape & depth
Spacing scale
- 2
- 4
- 8
- 12
- 14
- 16
- 18
- 20
- 24
- 36
- 176.5
- 242
Corner radii
4pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 212px
Components
exact computed valuesinput
- rounded
- 4px
- height
- 50px
- padding
- 12px 14px
- backgroundColor
- #FFFFFF
- border
- 1px solid #CCCCCC
Layout & motion
- Container
- 1368px
- Grid columns
- 3
- Hero
- centered-over-media
- Navigation
- top-static+transparent
- Page height
- 5,979px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms
- Transitions
- 175
- Keyframes
- 0
- Stack
- next.js, tailwind, google-tag-manager, vercel
Page sections (4)
01nav
02heroWhy anything exists
04footer
How Aeon compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 72px: larger than 70% of indexed sites (median 60px).
- Type scale
- 1.35×: steeper than 69% of indexed sites (median 1.28×).
- Container
- 1368px: wider than 94% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 5,979px: shorter than 72% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Serif Font
- The only site in the index that loads Serif Font.
- Sans Font
- The only site in the index that loads Sans Font.
- 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 Aeon use?
Aeon uses Serif Font (loaded as "serifFont") for headings. Sans Font (loaded as "sansFont") is used for body text. Mono Font (loaded as "monoFont") is used for code.
What are Aeon's brand colors?
Aeon's website uses a light scheme: background #FFFFFF, surface #FEFBEC, text #000000, muted text #000000A6.
How is Aeon's website laid out?
The most common corner radius is 0px, body text is 16px with 1.5 line height, and the page container is 1368px wide.
Similar to Aeon
Noe Standard / Atlas Grotesk / Noe Text#FAF8F0
Asteriskmagasteriskmag.com
Recoleta / Albert Sans#FFFCF3
Eatfishwifeeatfishwife.com
Kinfolk Serif Deck / Kinfolk Sans / Kinfolk Serif Display#FFFFFF
Kinfolkkinfolk.com
Baskerville Urw / Swis721 / Hiragino Kaku Gothic ProN#FFFFFF
KINTO USAkinto-usa.com
Iowan Old Style#FFFFFF
Leerobleerob.com