Asana Design System

Overview

Asana's marketing chrome inverts two project-management conventions at once. First, the brand voltage {colors.brand-indigo} ("#222875") never fills a button — it fills the AI Teammate Gallery band and the two "What sets Asana apart" cards, two surfaces that read as panels rather than actions. Second, body type runs {typography.body-lg} at weight 300 with +0.4px letterspacing rather than the weight-400 default used by every adjacent SaaS site. The CTA pill {colors.primary} ("#0d0d0d") absorbs the action role so the indigo stays scenographic.

Panel-fill voltage: Where most project-management brands push the brand hue onto the primary button (Linear lavender on the CTA, Notion purple on "Get Notion free", Monday yellow on every action), Asana holds {colors.brand-indigo} for two flagship cards and a hero band. The deep indigo at OKLCH 0.33 / 0.13 / 273 carries enough chromatic weight that filling a 36px pill would undersaturate it; filling a 1440-wide band lets the hue do atmospheric work.

Weight as restraint: Display sits at Ghost weight 500 (60px / 72px). Body sits at TWK Lausanne weight 300. The display-to-body weight delta is 200 units, not the 400 units a heavy fintech site uses. Pairing display 500 with body 300 produces a typographic voice that reads quiet on the body and confident on the headline — the same restraint Stripe and Linear use, applied to a category that usually defaults to weight 600+ everywhere.

The page rhythm flows off-white → indigo card → off-white → pale-sky band → two indigo cards. The pale-sky {colors.accent-sky} ("#cbefff") opens the "What sets Asana apart" section before the indigo cards drop in, providing a chromatic ramp from canvas through accent into the brand voltage.

Key Characteristics:

• Panel-fill indigo {colors.brand-indigo} ("#222875") — band and card fill, never CTA.
• Two-typeface ramp — Ghost (display 60–72px / 500) against TWK Lausanne (body 14–20px / 300).
• Primary CTA is a 100px-pill near-black at {rounded.pill} — secondary inverts white over hairline.
• Coral-rose tints ({colors.accent-coral}, {colors.accent-coral-soft}) live inside product mockups, never on chrome.
• Pale-sky {colors.accent-sky} ("#cbefff") opens the apart-section before the indigo cards drop.
• Off-white canvas ({colors.canvas} "#ffffff", 91 occurrences) carries every above-fold surface.
• 14px is the dominant spacing unit (count 56) — not the more common 16px or 8px scale.

Colors

• Near-black ink (#0d0d0d) — frequency 936. Used as text (481), border (441), background (14). The load-bearing color of the entire chrome — every headline, body sentence, button fill, and hairline-as-text role traces back here. Asana avoids pure true black; the dark voltage carries the faintest gray cast.
• Mid-gray (#646f79) — frequency 239. Used as text (118), border (121). The workhorse muted text color for paragraphs that recede from headlines, footer rows, and secondary metadata.
• Coral-rose (#e1bbc7) — frequency 144. Used as text (72), border (72). Border-heavy: the rose tint outlines decorative dots, hairlines around product-mockup chips, and the soft-edge of inline labels. Never a fill on its own.
• White (#ffffff) — frequency 91. Used as bg (62), text (17), border (12). The page canvas, the secondary-button fill, and the text color flipped over the indigo bands.
• Deep coral-burgundy (#690031) — frequency 7. Used as bg (4), text (2), border (1). The dark complement to the coral-rose family; appears inside product mockups as chip text and a dot fill on a single accent illustration.
• Indigo "#222875" — frequency 43. Used as text (20), border (19), bg (4). The brand voltage. Reserved for the AI Teammate Gallery hero band and the two "What sets Asana apart" feature cards. Never a CTA color.
• Hairline gray (#e7e7e7) — frequency 38. Used as border (37). The default 1px divider — pill-button outlines, card borders, use-case tile separators.
• Coral-tint (#ffeaec) — frequency 44. Used as text (17), bg (10), border (17). Soft-edge hover surface for secondary buttons and the chip-fill behind small coral tags inside the campaign-brief mockup.
• Dark gray (#3d3d3d) — frequency 18. Used as text (9), border (9). The hovered state of #0d0d0d. Carries the lighter ink role inside the dark cards.
• Pale-sky (#cbefff) — frequency 15. Used as text (6), bg (4), border (5). Opens the "What sets Asana apart" band as a section background before the indigo cards drop in.
• Mid-blue accent (#879fc8) — frequency 2. The a11y focus ring token (--lightmode-a11y-focus-primary). Scarce, but functionally critical.
• Glow-coral (#ff584a) — frequency 1. Reserved for a single accent glow on the AI Teammate illustration.

The remaining tokens — #222875 siblings (#333c83, #6678ac), the green/yellow brand pegs at the -1000 scale, and the semantic error #a82424 and success #0c6410 — sit in the CSS variable layer for in-product mockups and a11y states but rarely render on the marketing chrome itself.

Typography

Asana runs two typefaces: Ghost (a custom display sans) for h1 and h2, and TWK Lausanne for every body, paragraph, button, link, label, and nav surface. The split is sharp — Ghost never runs below 60px and TWK Lausanne never runs above 36px. Open-source substitutes: Migra or Editorial New approximate Ghost's display character; Inter at weight 300 closely matches TWK Lausanne's body cut.

Three details define the ramp. (1) Display sits at Ghost weight 500 with negative tracking only at the top (-0.5px at 72px, normal at 60px) — the rest of the system uses 0 or +0.4px positive tracking. (2) Body paragraphs run at weight 300 with +0.4px letterspacing — the opposite move from sites that tighten body type. (3) Buttons use +0.5px letterspacing at 14px / 500 — wide-set caps signal the action without resorting to uppercase.

The 36px tier exists twice: {typography.display-md} at weight 400 for h3, and {typography.display-md-light} at weight 300 for the rare oversized paragraph quote. The eyebrow token sits at 11px / 500 / uppercase with +0.44px tracking — used on the four use-case-tile labels above the fold.

Layout

The page is a centered 1440 grid with 32px gutter ({spacing.xl}) and 80px section padding ({spacing.section}). The dominant inline rhythm is {spacing.base} 14px — appearing 56 times across pill padding, chip gaps, and inline element spacing — slightly tighter than the conventional 16px most adjacent SaaS sites default to. Card padding sits at {spacing.xl} 32px for hero cards and {spacing.lg} 24px for tiles.

Section blocks lock to either a single full-width band (AI Teammate Gallery, "What sets Asana apart") or a 4-up tile row (use cases, customer logos) — there is no 2-up split layout above the fold. Vertical rhythm between sections runs 32px 0px (count 27) inside cards and 80px between bands.

Elevation & Depth

Asana avoids drop shadows on the marketing chrome — every card uses a hairline border at {colors.hairline} ("#e7e7e7") to carry depth instead. The only shadow-adjacent move is a single glow-coral accent ("#ff584a", count 1) attached to the AI Teammate Gallery illustration via a CSS variable. Cards lift via background contrast: white canvas → white card with hairline → indigo card with no border. The indigo cards specifically drop their borders because the chromatic shift carries the lift on its own.

Shapes

The radius scale is bimodal. Buttons and tabs run pill at {rounded.pill} 100px (count 22) — the dominant pill geometry. Cards and surfaces run {rounded.md} 10px (count 30) for mockup cards and {rounded.sm} 8px (count 23) for chips and inputs. Hero cards lift to {rounded.lg} 16px (count 14) and {rounded.xl} 20px (count 14). A single {rounded.capsule} 146px appears 4 times — used for capsule-shaped chrome elements on the AI Teammate Gallery illustration.

Pill voltage: {rounded.pill} 100px is Asana's signature interactive geometry. Buttons, secondary buttons, and pill tabs all share the same radius — the consistency reads as "every action is an oval, every container is a rounded rectangle."

Components

The 18-component set covers every visible chrome surface above the fold. Below: {components.button-primary} is the near-black 100px-pill with white text and a 1px white inner stroke (the inner stroke shows on the JSON borderColor: #ffffff — a precise detail most agents would miss). {components.button-secondary} inverts to white over a {colors.hairline} 1px border. {components.pill-tab-default} carries the same pill geometry at smaller padding. {components.ai-gallery-band} fills {colors.brand-indigo} at 16px radius and 32px padding. {components.feature-card-indigo} is the "What sets Asana apart" panel; {components.feature-card-sky} is the pale-sky band that opens that section. {components.mockup-card} carries the campaign-brief illustration; {components.mockup-chip-coral} is the small coral-rose chip inside it. {components.ai-prompt-input} is the 64px-tall search-style input in the hero band. The {components.top-nav} row holds 56px height with 32px lateral padding.

Do's and Don'ts

• Don't fill the primary CTA with {colors.brand-indigo} ("#222875"). Indigo is a panel-fill voltage, not an action color. Use {colors.primary} ("#0d0d0d") for every CTA; the deep indigo only fills the AI Teammate band and the two apart-section cards.
• Don't set body paragraphs at weight 400. TWK Lausanne body runs at weight 300 with +0.4px letterspacing — using 400 reads heavier than Asana intends and breaks the display-to-body weight delta of 200 units.
• Don't use rectangular buttons. Every action surface on Asana's marketing chrome is {rounded.pill} 100px — primary, secondary, and pill tabs. Rectangular geometry is reserved for cards and inputs.
• Don't use coral-rose (#e1bbc7, #ffeaec) as a chrome accent. The coral family lives strictly inside product mockups — as decorative dots, chip backgrounds, and the soft-edge tag bubbles. Pulling coral onto buttons or section bands breaks the chrome-vs-illustration boundary.
• Don't drop shadows on cards. The system uses {colors.hairline} 1px borders for white cards and bare chromatic shift for indigo cards. A shadow on either reads as a foreign visual language.
• Don't swap Ghost for any neo-grotesk display (Inter, Geist, SF Pro). Ghost has a wider aperture and softer terminals than those neo-grotesks; substituting Inter at 72px loses the personality. Editorial New or Migra approximate Ghost more closely.
• Don't use the glow-coral "#ff584a" beyond a single accent glow. It appears exactly once in the extraction (the AI Teammate Gallery illustration); treating it as a usable accent breaks the rarity that gives it impact.

Known Gaps

• Dark-mode token values are referenced by CSS variable name (--darkmode-bg, --darkmode-text-strong, --darkmode-button-primary) but the marketing surface renders light-only — the dark theme is not captured here.
• Form-field error and validation states are not visible above the fold; {colors.semantic-error} "#a82424" lives in the variable layer but has no visible component instance.
• The richer in-product color-tag palette (red #a82424, green #0c6410, plus orange-yellow and purple tints living in the CSS variable layer) is used inside the workspace mockups but is not present on the marketing chrome itself.
• Motion timings were not extracted; 200ms ease-out is a safe default for hover transitions on the pill buttons.
• Ghost and TWK Lausanne are proprietary; an open-source substitute (Editorial New, Migra; Inter at weight 300) is acceptable but loses the display character.