Typography
- Arealcss: arealdisplay + body400 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Areal | 19.2px | 400 | 1.45 | 0em |
| headline | Areal | 19.2px | 700 | 1.45 | 0em |
| body | Areal | 19.2px | 400 | 1.45 | 0em |
| body-sm | Areal | 14.4px | 400 | 1.45 | 0em |
| label | Areal | 12.5px | 400 | 1.35 | 0em |
Type scale
Aa10Aa12.5Aa14.5Aa16Aa19
- Body size
- 19px / 1.45
- Display size
- 19.2px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 12.63:1
- Muted on bg
- 5.49:1
- Accent on bg
- 17.56:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale (base 5px)
- 2.5
- 5
- 7.5
- 10
- 15
- 20
- 25
- 35
- 65
Corner radii
3pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Sign up
- backgroundColor
- #00075F
- textColor
- #FFFFFF
- rounded
- 3px
- padding
- 0px 15px
- height
- 34px
- fontFamily
- Areal
- fontSize
- 14.4px
- fontWeight
- 700
input
- rounded
- 3px
- height
- 54px
- padding
- 0px 20px
- backgroundColor
- #F7F7F799
- border
- 1px solid #DEDEDE
Layout & motion
- Container
- 648px
- Grid columns
- 12
- Hero
- left-aligned+media-below
- Navigation
- top-fixed+transparent
- Page height
- 6,014px
- Easing
- ease
- Durations
- 150ms 180ms 200ms 240ms
- Transitions
- 34
- Keyframes
- 2
- Stack
- next.js, contentful, vercel, cloudflare
Page sections (2)
01nav
02footerSupport
How Are.na compares
- Body text
- 19px: larger than 88% of indexed sites (median 16px).
- Largest heading
- 19.2px: smaller than 95% of indexed sites (median 60px).
- Container
- 648px: narrower than 96% of indexed sites (median 1242px).
- Text contrast
- 12.6:1: lower than 86% of indexed sites (median 17.6:1).
- Page length
- 6,014px: shorter than 71% of indexed sites (median 8,217px).
- Corner radius
- Mostly 3px, shared by 5 of 274 indexed sites (2%).
- Areal
- The only site in the index that loads Areal.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Are.na use?
Are.na uses Areal (loaded as "areal") for headings and body text.
What are Are.na's brand colors?
Are.na's website uses a light scheme: background #FFFFFF, text #333333, muted text #696969 and borders #EDEDED.
How is Are.na's website laid out?
The most common corner radius is 3px, body text is 19px with 1.45 line height, and the page container is 648px wide.
