Typography
scale ratio 1.312- TWK Lausannedisplay + body300 400 500100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | TWK Lausanne | 102px | 300 | 0.9 | -0.025em |
| headline | TWK Lausanne | 54px | 300 | 1 | -0.02em |
| title | TWK Lausanne | 20px | 400 | 1.5 | 0em |
| body | TWK Lausanne | 20px | 300 | 1.5 | 0.02em |
| body-sm | TWK Lausanne | 13px | 300 | 1.5 | 0.02em |
| label | TWK Lausanne | 16px | 400 | 1.5 | 0em |
Type scale
Aa11Aa13Aa14Aa16Aa20Aa24Aa26Aa30Aa36Aa54Aa102
- Body size
- 20px / 1.5
- Display size
- 102px
- Display tracking
- -0.025em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 19.44:1
- Muted on bg
- 10.86:1
- Accent on bg
- 19.44:1
- Dark mode
- none
Declared accent tokens
- --accent-bright-coral#FF584Apainted
Space, shape & depth
Spacing scale (base 4px)
- 4
- 8
- 12
- 14
- 15
- 16
- 24
- 32
- 40
- 76
- 80
- 120
Corner radii
481020pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 160px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #0D0D0D
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 0px 16px
- height
- 44px
- fontFamily
- TWK Lausanne
- fontSize
- 14px
- fontWeight
- 500
button-secondary
Explore AI Teammates
- textColor
- #0D0D0D
- rounded
- 9999px
- padding
- 16px 32px
- height
- 58px
- fontFamily
- TWK Lausanne
- fontSize
- 16px
- fontWeight
- 500
- border
- 1px solid #6E6E6E
card
- rounded
- 8px
- padding
- 0px
- backgroundColor
- #FFFFFF
- border
- 1px solid #E7E7E7
input
- rounded
- 4px
- height
- 50px
- padding
- 12px 16px
- backgroundColor
- #FFFFFF
- border
- 1px solid #CFCFCF
Layout & motion
- Container
- 1288px
- Grid columns
- 12
- Hero
- centered-over-media
- Navigation
- top-sticky+transparent
- Page height
- 8,363px
- Easing
- ease
- Durations
- 100ms 150ms 200ms 300ms
- Transitions
- 133
- Keyframes
- 2
- Stack
- next.js, google-tag-manager, netlify
Page sections (10)
section labels are heuristic
01nav
02heroThe OS for teams
03features?
05gallery?
06feature detail?Get started easily
07content?
08feature detail?Why projects slip when work is scattered
09feature detail?The only platform that can support your company at any scale
10footer
How Asana compares
- Body text
- 20px: larger than 90% of indexed sites (median 16px).
- Largest heading
- 102px: larger than 93% of indexed sites (median 60px).
- Type scale
- 1.31×: steeper than 58% of indexed sites (median 1.28×).
- Container
- 1288px: wider than 67% of indexed sites (median 1242px).
- Text contrast
- 19.4:1: higher than 69% of indexed sites (median 17.6:1).
- Page length
- 8,363px: longer than 52% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- TWK Lausanne
- One of 2 indexed sites that load TWK Lausanne (1%).
- 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 Asana use?
Asana uses TWK Lausanne for headings and body text.
What are Asana's brand colors?
Asana's website uses a light scheme: background #FFFFFF, text #0D0D0D, muted text #3D3D3D.
How is Asana's website laid out?
The most common corner radius is fully rounded (pill), body text is 20px with 1.5 line height, and the page container is 1288px wide.
