Asana design system

What font does Asana use?

Asana’s website uses TWK Lausanne for headings and body text. TWK Lausanne is not on Google Fonts; the closest free match is Figtree.

Asana colour palette

Asana’s home page is light (#FFFFFF background, #0D0E10 text) and uses #0D0D0D for its main actions. Its palette: #FFFFFF, #0D0D0D, #3D3D3D, #FAFAFA, #F3F3F3, #0D0E10.

• #FFFFFF
  51.2% · backgrounds
• #0D0D0D
  26.6% · backgrounds, text
• #3D3D3D
  13.2% · backgrounds
• #FAFAFA
  6.5% · backgrounds
• #F3F3F3
  1.3% · backgrounds, text
• #0D0E10
  0.5% · text
• #E7E7E7
  0.3% · text, lines
• #6E6E6E
  0.2% · text
• #3E3E3E
  0.1% · text
• #FFC9FF
  0.1% · backgrounds

Type scale

Each size the page sets text in, with its weight and line height. Asana’s largest type is 102px at weight 300.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 52px, 56px.

Corner radii: 1px, 2px, 3px, 4px, 6px, 8px, 10px, pill. 4 shadow levels measured.

What makes Asana look like Asana

Almost entirely neutral: 99% of the page is painted in #FFFFFF and #0D0D0D.

#FFC9FF is an accent: 0.1% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (102px TWK Lausanne) is light, not bold (300), tracked to -0.025em.

Open: text covers 10% of the page.

Asana DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Asana’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Asana’s product, so use your own name, words and images.

Download Asana DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Asana’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap");

:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #F3F3F3; /* Surface */
  --color-text: #0D0E10; /* Text */
  --color-text-muted: #646F79; /* Text muted */
  --color-border: #E7E7E7; /* Border */
  --color-action: #0D0D0D; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-3d3d3d: #3D3D3D; /* 13.2% of the page, as fills */
  --color-fafafa: #FAFAFA; /* 6.5% of the page, as fills */
  --font-body: "TWK Lausanne", "Figtree", sans-serif; /* TWK Lausanne on the site; Figtree renders */
  --type-display-large: 102px; /* Display Large, weight 300 */
  --type-display-large-leading: 91.8px;
  --type-display-large-tracking: -0.025em;
  --type-display-medium: 54px; /* Display Medium, weight 300 */
  --type-display-medium-leading: 54px;
  --type-display-medium-tracking: -0.02em;
  --type-display-small: 36px; /* Display Small, weight 300 */
  --type-display-small-leading: 46.8px;
  --type-display-small-tracking: -0.01em;
  --type-headline-large: 30px; /* Headline Large, weight 400 */
  --type-headline-large-leading: 36px;
  --type-headline-medium: 26px; /* Headline Medium, weight 300 */
  --type-headline-medium-leading: 33.8px;
  --type-headline-medium-tracking: 0.02em;
  --type-headline-small: 24px; /* Headline Small, weight 500 */
  --type-headline-small-leading: 28.8px;
  --type-title: 20px; /* Title, weight 300 */
  --type-title-leading: 30px;
  --type-title-tracking: 0.02em;
  --type-body-large: 16px; /* Body Large, weight 400 */
  --type-body-large-leading: 24px;
  --type-body-small: 14px; /* Body Small, weight 500 */
  --type-body-small-leading: 24.5px;
  --type-label-large: 13px; /* Label Large, weight 300 */
  --type-label-large-leading: 19.5px;
  --type-label-large-tracking: 0.02em;
  --type-label-small: 11px; /* Label Small, weight 500 */
  --type-label-small-leading: 16.5px;
  --type-label-small-tracking: 0.04em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-19: 76px;
  --space-20: 80px;
  --space-30: 120px;
  --space-40: 160px;
  --radius-xs: 1px;
  --radius-sm: 2px;

How this was measured

PikSpec’s scanner read the asana.com home page in Chrome at 1440px wide on 14 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Asana is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Asana.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.