asana.com · Captured October 9, 2026

Asana,as a design system.

The typeface, type scale and palette asana.com actually renders, on one board — measured from its live homepage, with its brand colour checked against its own guidelines.

Free with an account · Chrome, Edge & Brave · reads a page only when you click

Asana · typeface

TWK Lausanne

Self-hosted (@font-face) · shown here in a fallback if you don't have it installed

Aa
Styles
10 styles
Weights
5 weights
Colours
17 colours

type scale

Heading 1102/92 · 300
Heading 254/54 · 300
Heading36/47 · 300
Heading 430/36 · 400
Heading 524/29 · 500
Body20/30 · 300
Heading 320/30 · 400
Button16/24 · 500
! @ ? / . , $ % & * ( )1 2 3 4 5 6 7 8 9 0

Aa Bb Cc Dd Ee Ff Gg

Brand colour · Coral

#F06A6A

Surface#FFFFFF
#3D3D3D
#0D0D0D
#F3F3F3
#FAFAFA
#E7E7E7
#151B26
#6E6E6E
#FF453E

Go deeper, one layer at a time.

Every font with where it comes from, and every colour with where it's used and its contrast — each with exports for CSS, Tailwind, shadcn/ui and Figma.

Captured from asana.com on October 9, 2026 by Xtractly's Design System scanner, at 1440px wide in light mode. Sites change — run the extension on the live page for today's values. Xtractly isn't affiliated with Asana; names and marks belong to their owners.

More systems, measured live.