What is Asana's primary brand color?

Asana's brand voltage is the deep indigo at "#222875" — count 43, used 20 times as text, 19 as border, and 4 as background fill. It carries the "What sets Asana apart" panel cards and the AI Teammate Gallery hero band, never the CTA. The conventional primary CTA fills near-black "#0d0d0d" (count 936) at 100px pill radius. The system reserves indigo as a panel-fill brand signal, not an action color.

What typography does Asana use, and what should I substitute?

Asana runs two typefaces. Ghost (custom display) carries h1 at 72px / 500 / 72px line-height / -0.5px letter-spacing and h2 at 60px / 500 / 60px / normal. TWK Lausanne carries every body, paragraph, button, link, and nav surface; paragraphs sit at 20px / 300 / 30px line-height / +0.4px letter-spacing. Open-source substitutes: Migra or Editorial New for Ghost-style display, and Inter or Geist Sans at weight 300 for TWK Lausanne body. Note the body weight is 300 — using 400 will read heavier than Asana intends.

How does Asana shape its primary CTA?

The primary "Get started" pill fills "#0d0d0d" with white text at 14px / 500 / 21px / +0.5px letter-spacing, 100px border-radius, 12px 19px padding, and 36px total height — a near-black pill, not the indigo brand color. A secondary "View demo" pill inverts the same shape: white background, hairline border, near-black text. The 100px radius appears 22 times across the page and is the dominant pill geometry; rectangular cards use 8px or 10px instead.

Why is "#222875" a panel fill rather than a CTA color?

Where most project-management brands push the brand hue onto the primary button (Linear lavender, Notion purple, Monday yellow), Asana reserves "#222875" for two specific surfaces — the AI Teammate Gallery hero band and the two "What sets Asana apart" cards. The deep indigo carries enough chromatic weight that filling a small button would read as undersaturated; filling a full-width band lets the hue do atmospheric work. The CTA stays near-black so the indigo never competes with the action.

What is the coral palette for?

Asana's secondary palette runs coral-rose tints — "#e1bbc7" (count 144, border-heavy at 72), "#ffeaec" (count 44, split across text/bg/border), and a deep coral-burgundy at "#690031" (count 7). These never carry primary CTAs; they live inside product mockups as decorative dots, tag chips, and rounded chip backgrounds — the visual texture of the workspace illustration. A single glow-coral "#ff584a" appears once as a saturated accent glow.

What's missing from this DESIGN.md spec?

A handful of items, documented in the Known Gaps section. The dark-mode token layer is referenced by CSS variable names (--darkmode-bg, --darkmode-text-strong) but is not visible on the captured marketing surface — the page renders light-only. Form-field error and validation states are not visible above the fold. The richer in-product color-tag palette (red, orange, yellow, green, blue, purple at the "-1000" scale) lives inside the workspace mockups but is not used on the marketing chrome itself. Motion timings were not extracted; 200ms ease is a safe default.

Asana Design System

Asana's marketing system as a DESIGN.md file.

About Asana DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source asana.com

Project Management
Productivity & SaaS

Asana's marketing page reads as a workspace catalog rather than a fintech pitch — the canvas is a true white ("#ffffff", 91 occurrences across bg, border, and inverted text) with the load-bearing color story split between deep indigo ("#222875") for product mockup chrome and a coral-rose family ("#e1bbc7", "#ffeaec") for the accent dots and chips inside those mockups. The hero composition opens with a 72px Ghost headline ("Supercharge your teams with AI that gets work done") that sits on the off-white floor, drops into a 1440-wide indigo card containing the AI Teammate Gallery, and continues into use-case tiles before the page floor turns pale-sky ("#cbefff") under the "What sets Asana apart" heading where two deep-indigo cards finally appear.

This file packages the spec into one DESIGN.md written to the Google Labs format. Inside: 22 color tokens grouped into brand-indigo, coral-rose, pale-sky, off-white, and a graded near-black scale; 12 type tokens spanning Ghost display (72px / 60px / 36px / 30px / 24px h5) against TWK Lausanne body at sizes 20 / 16 / 14 / 12 / 11 with the body weight held at 300; a 6-step rounded scale (4px chips through 100px pills and 146px capsule chrome); a 9-step spacing rhythm built on 4/8/12/14/16/24/32/40/80 px; and 18 components covering primary and secondary pill buttons, the AI Teammate Gallery card, the "What sets Asana apart" indigo card, the campaign-brief mockup card, use-case tiles, pill tabs, the search-style hero input, and the dark top-nav row.

A working React developer feeds this file to Claude, Cursor, or Copilot and the agent reproduces Asana's specific moves — Ghost weight 500 against TWK Lausanne weight 300, indigo "#222875" used as panel fill rather than CTA color, a 100px-pill primary in near-black, coral chips inside product mockups — instead of a generic project-management theme. Reference the tokens directly inside Tailwind config or CSS variables; every hex, font, radius, and spacing value is a quoted scalar. The system rewards study because it inverts two project-management conventions at once: the brand color does not run the CTA, and the body family runs weight 300 rather than 400.

What makes it distinct

Deep indigo voltage"#222875" reserved for the "What sets Asana apart" panel fill and the AI Teammate Gallery band, never as a CTA color
Two-typeface rampGhost carries display at 60–72px weight 500, TWK Lausanne carries body at weight 300 with +0.4px letterspacing
Pill CTA at 100px radiusprimary fills near-black "#0d0d0d" with a 1px white inner stroke, secondary inverts to white with a hairline border
Coral-tint mockup chrome"#e1bbc7" and "#ffeaec" carry decorative dots, accent chips, and tag bubbles inside product mockups
Off-white canvas with pale-sky calloutsbody sits on "#ffffff" while "What sets Asana apart" opens a "#cbefff" pale-sky section before dropping into the indigo cards

Live at asana.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

asana.com

Explore Asana

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Asana design system FAQ

Common questions about Asana's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Asana — official site

Asana's marketing surface — the source of the indigo, coral, and Ghost-display token set captured here.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Asana in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→