---
version: alpha
name: Asana
website: "https://asana.com"
description: >-
  Asana's marketing canvas pairs an off-white page floor with a saturated deep-indigo brand voltage at "#222875" — used as the "What sets Asana apart" panel fill, the hero AI Teammate Gallery band, and the workspace-mockup chrome inside the fold. The primary CTA geometry is a near-black pill ("#0d0d0d", 100px radius, 14/500 type at +0.5px tracking), the secondary CTA inverts to white with a hairline border, and a coral-leaning support palette ("#e1bbc7", "#ffeaec", "#690031", "#ff584a") fills mockup chips and decorative dots. Display type runs Ghost at 60–72px weight 500 against TWK Lausanne body at weight 300 with a +0.4px letterspacing — the weight pairing flips the conventional fintech ramp.
seo:
  title: "Asana Design System for React — Indigo #222875, Ghost + TWK Lausanne, 18 components"
  metaDescription: "Asana's marketing system as a DESIGN.md file. Indigo #222875, Ghost display, TWK Lausanne body, 22 colors, 18 components. For React, Next.js, and AI tools."
  highlights:
    - "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 ramp — Ghost carries display at 60–72px weight 500, TWK Lausanne carries body at weight 300 with +0.4px letterspacing"
    - "Pill CTA at 100px radius — primary 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 callouts — body sits on \"#ffffff\" while \"What sets Asana apart\" opens a \"#cbefff\" pale-sky section before dropping into the indigo cards"
  tags:
    - "Project Management"
    - "Productivity & SaaS"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://asana.com"
      title: "Asana — official site"
      description: "Asana's marketing surface — the source of the indigo, coral, and Ghost-display token set captured here."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Asana's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typography does Asana use, and what should I substitute?"
      answer: "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."
    - id: "cta-geometry"
      title: "How does Asana shape its primary CTA?"
      answer: "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."
    - id: "indigo-usage"
      title: "Why is \"#222875\" a panel fill rather than a CTA color?"
      answer: "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."
    - id: "coral-palette"
      title: "What is the coral palette for?"
      answer: "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."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "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."

colors:
  primary: "#0d0d0d"
  on-primary: "#ffffff"
  primary-hover: "#3d3d3d"
  brand-indigo: "#222875"
  brand-indigo-mid: "#333c83"
  brand-indigo-soft: "#879fc8"
  brand-indigo-deep: "#6678ac"
  accent-sky: "#cbefff"
  accent-sky-soft: "#badbf1"
  accent-coral: "#e1bbc7"
  accent-coral-soft: "#ffeaec"
  accent-coral-deep: "#690031"
  accent-coral-glow: "#ff584a"
  accent-green: "#b5e9ca"
  canvas: "#ffffff"
  surface-muted: "#ffeaec"
  hairline: "#e7e7e7"
  ink: "#0d0d0d"
  ink-soft: "#3d3d3d"
  ink-muted: "#646f79"
  ink-subtle: "#9ca6af"
  ink-tertiary: "#474748"
  semantic-error: "#a82424"
  semantic-success: "#0c6410"

typography:
  display-xl:
    fontFamily: "Ghost, \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 72px
    letterSpacing: "-0.5px"
  display-lg:
    fontFamily: "Ghost, \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 60px
    letterSpacing: 0
  display-md:
    fontFamily: "\"TWK Lausanne\", \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 43.2px
    letterSpacing: "-0.36px"
  display-md-light:
    fontFamily: "\"TWK Lausanne\", \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 36px
    fontWeight: 300
    lineHeight: 46.8px
    letterSpacing: "-0.36px"
  heading-md:
    fontFamily: "\"TWK Lausanne\", \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: 0
  heading-sm:
    fontFamily: "\"TWK Lausanne\", \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 28.8px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"TWK Lausanne\", \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 30px
    letterSpacing: 0.4px
  body-md:
    fontFamily: "\"TWK Lausanne\", \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-md-light:
    fontFamily: "\"TWK Lausanne\", \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 24px
    letterSpacing: 0.32px
  body-sm:
    fontFamily: "\"TWK Lausanne\", \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0
  button:
    fontFamily: "\"TWK Lausanne\", \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 21px
    letterSpacing: 0.5px
  eyebrow:
    fontFamily: "\"TWK Lausanne\", \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 16.5px
    letterSpacing: 0.44px

rounded:
  xs: "4px"
  sm: "8px"
  md: "10px"
  lg: "16px"
  xl: "20px"
  pill: "100px"
  capsule: "146px"

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "12px"
  base: "14px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  xxl: "40px"
  section: "80px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "12px 19px"
    height: "36px"
    border: "1px solid {colors.on-primary}"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "12px 19px"
    height: "36px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "12px 19px"
    height: "36px"
    border: "1px solid {colors.hairline}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "12px 19px"
    height: "36px"
    border: "1px solid {colors.ink-muted}"
  pill-tab-default:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    border: "1px solid {colors.hairline}"
  pill-tab-selected:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    border: "1px solid {colors.ink}"
  ai-gallery-band:
    backgroundColor: "{colors.brand-indigo}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "32px"
  ai-prompt-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "16px"
    border: "1px solid {colors.hairline}"
    height: "64px"
  use-case-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "24px"
    border: "1px solid {colors.hairline}"
  feature-card-indigo:
    backgroundColor: "{colors.brand-indigo}"
    textColor: "{colors.on-primary}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.lg}"
    padding: "32px"
  feature-card-sky:
    backgroundColor: "{colors.accent-sky}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.lg}"
    padding: "32px"
  mockup-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px"
    border: "1px solid {colors.hairline}"
  mockup-chip-coral:
    backgroundColor: "{colors.accent-coral-soft}"
    textColor: "{colors.accent-coral-deep}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  customer-logo-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xs}"
    padding: "16px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    height: "56px"
    padding: "0 32px"
  top-nav-link:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: "0 12px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "12px 16px"
    border: "1px solid {colors.hairline}"
    height: "44px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xs}"
    padding: "64px 32px"
---

## 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.