---
title: "Asana design system"
variant: extended
source: https://asana.com/
captured_at: 2026-10-12
theme: dark
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/asana-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Asana · Design System

> Airy product storytelling with a vivid human-agent gradient

**Theme:** dark · **Industry:** productivity · **Source:** https://asana.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Asana pairs an expansive white canvas and restrained black typography with vivid pink-to-coral accents and detailed product imagery. A long, spacious narrative moves from a sign-up hero through product capabilities and proof points to dark product and footer sections.

## North star

Keep the page airy and editorial on white, using black for structure, gradient only for emphasis, and product visuals as the main source of complexity.

## Overview

The page is led by a white canvas, with black text and selective dark bands providing strong contrast rather than a consistently dark theme. Coral and pink hues form a linear gradient for the hero’s “human-agent” message and appear as small accents; many other bright colors belong to workflow cards and product illustrations, not the core page palette. TWK Lausanne’s light sans-serif weights create large, open headlines, balanced by small, tightly functional labels and navigation. The opening hero centers a sign-up form inside a full-width network illustration. Below, sections alternate between two-column explanatory layouts, horizontal AI teammate cards, testimonial proof, and award graphics. Generous vertical gaps separate these blocks, while product UI screenshots and illustrations supply detail. The later black showcase and footer are deliberate contrast points, with white copy, bright interface previews, and sparse CTA styling.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Workflow Charcoal | `#3d3d3d` | `--color-workflow-charcoal` | surface | Charcoal surface for product feature cards and service CTA variants; not the dominant page canvas in the screenshots. |
| Core Ink | `#0d0d0d` | `--color-core-ink` | brand | Primary text, headings, dark CTA fills, and the deep product showcase and footer bands. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas across the hero and most content sections; also appears in reversed text and CTA surfaces. |
| Quiet Line | `#e7e7e7` | `--color-quiet-line` | semantic | Fine borders, card separators, and muted supporting text. |
| Signal Coral | `#ff453e` | `--color-signal-coral` | accent | Coral endpoint in the headline gradient and decorative workflow paths, rather than a large solid section fill. |
| Soft Fog | `#f3f3f3` | `--color-soft-fog` | neutral | Light badge fills and subtle secondary UI surfaces. |
| Orchid Glow | `#f481f4` | `--color-orchid-glow` | accent | Pink midpoint in the human-agent gradient and small accent details. |
| Petal Pink | `#ffc9ff` | `--color-petal-pink` | accent | Pale pink fill for the featured Agentic Work Management CTA. |
| Muted Graphite | `#6e6e6e` | `--color-muted-graphite` | neutral | Secondary copy and subdued controls against the white canvas. |
| Input Silver | `#cfcfcf` | `--color-input-silver` | semantic | Subtle input outline and minor UI boundaries. |

### Semantic aliases

`--color-canvas` → `#3d3d3d` (Workflow Charcoal) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#0d0d0d` (Core Ink) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#0d0d0d` (Core Ink) · `--color-text-subtle` → `#e7e7e7` (Quiet Line) · `--color-border` → `#e7e7e7` (Quiet Line) · `--color-accent` → `#ff453e` (Signal Coral) · `--color-accent-2` → `#f481f4` (Orchid Glow) · `--color-accent-3` → `#ffc9ff` (Petal Pink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#3d3d3d` | 10.86:1 | AAA |
| `#ffffff` | `#0d0d0d` | 19.44:1 | AAA |
| `#0d0d0d` | `#3d3d3d` | 1.79:1 | fail |
| `#0d0d0d` | `#ffffff` | 19.44:1 | AAA |
| `#e7e7e7` | `#3d3d3d` | 8.78:1 | AAA |
| `#e7e7e7` | `#ffffff` | 1.24:1 | fail |
| `#e7e7e7` | `#0d0d0d` | 15.72:1 | AAA |
| `#ff453e` | `#3d3d3d` | 3.19:1 | AA-large |
| `#ff453e` | `#ffffff` | 3.4:1 | AA-large |
| `#ff453e` | `#0d0d0d` | 5.71:1 | AA |

### Gradients

- `linear-gradient(90deg, rgb(255, 69, 62) 0%, rgb(244, 129, 244) 50%, rgb(255, 69, 62) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TWK Lausanne | `--font-body` | webfont | 300, 400, 500 | Shared typeface for display headlines, body copy, navigation, labels, buttons, and links. | Inter |

- **TWK Lausanne:** Use light weights for large headings and body; reserve medium weight for controls and eyebrow labels. Eyebrows are uppercase, with restrained tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.448, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 102px | 300 | 0.9 | -0.025em | — | TWK Lausanne | Oversized hero headline and prominent brand statement. |
| h1 | 54px | 300 | 1 | -0.02em | — | TWK Lausanne | Primary page and major section headlines. |
| h2 | 36px | 300 | 1.3 | -0.01em | — | TWK Lausanne | Section headings such as capability and proof-point titles. |
| h3 | 30px | 400 | 1.2 | 0 | — | TWK Lausanne | Subsection headings and prominent card titles. |
| h4 | 26px | 300 | 1.3 | 0.02em | — | TWK Lausanne | Secondary headings within product and content blocks. |
| body | 16px | 300 | 1.5 | 0.02em | — | TWK Lausanne | Explanatory copy, testimonials, and signup supporting text. |
| caption | 13px | 300 | 1.5 | 0.02em | — | TWK Lausanne | Footnotes, compact metadata, and fine-print descriptions. |
| button | 13px | 500 | 1.5 | 0 | — | TWK Lausanne | CTA labels and rounded action controls. |
| nav | 14px | 500 | 1.5 | 0 | — | TWK Lausanne | Primary navigation and menu labels. |
| link | 13px | 300 | 1.5 | 0 | — | TWK Lausanne | Inline links and resource actions. |
| eyebrow | 11px | 500 | 1.5 | 0.04em | uppercase | TWK Lausanne | Uppercase section labels such as AI TEAMMATES. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 8, 12, 14, 15, 16, 24, 32, 40, 52, 80, 120 px.
- Section rhythm 120px · element gap 8px · card padding 22px · max content width 1288px.

Use a spacious, vertically stacked page with a measured maximum content width of 1288px and a 120px section rhythm. The hero is full-bleed and center-aligned; most following sections use left-aligned headings and two-column layouts. Wider feature areas support multi-column or horizontally browsable cards. Keep content density low around headings and proof points, with denser detail confined to product UI and the footer. The page shifts between white content bands and a few full-width black bands.

## Shape & elevation

- Radius: button `9999px` · input `4px` · card `20px` · media `8px` · badge `4px` · nav `9999px` · link `10px` · xs `3px` · sm `4px` · md `7px` · lg `8px` · xl `10px` · 2xl `16px` · pill `9999px`
- Shadow `inset` (nav): `rgb(13, 13, 13) 0px 0px 0px 1px inset`
- Motion: standard transition `0.3s ease` on interactive elements.

Favor flat surfaces and crisp separation over pronounced shadows. Use thin pale borders and hairlines for inputs, cards, and content dividers; reserve rounded panels for product imagery and feature cards. Product previews layer interface content inside dark frames, while the overall page stays visually light and uncluttered.

## Imagery

Mix product-interface screenshots, workflow diagrams, logo marks, award graphics, and occasional customer photography. The hero uses a delicate connected workflow illustration around the centered signup form. Product graphics are often framed in dark rounded panels, while testimonials and logos sit on open white space. Treat colorful icons and badges as illustration content rather than expanding the core brand palette.

## Components

### Primary navigation

White, low-profile header with compact menu links, logo, account actions, and pill-shaped CTA controls.

### Signup hero

Centered display headline and supporting copy over a connected workflow illustration, followed by Google and Microsoft options, an outlined email input, and a dark pill CTA.

### Pill CTA

Rounded actions use dark fills with white text, or pale pink with dark text for a highlighted offering; button typography is medium-weight.

### Feature accordion

Two-column capability section pairs a visual product graphic with explanatory copy and stacked, hairline-separated topic rows.

### AI teammate cards

Horizontal product cards combine colorful agent icons, compact headings, descriptive copy, integration marks, and small capability labels.

### Proof-point cards

Customer quote, recognition, and award content combines concise text with imagery, logos, and restrained link actions.

### Dark product band

Black section presents a light headline and pill tabs above a framed product interface preview.

### Multi-column footer

Dark footer groups numerous compact navigation links into columns, with a thin divider and small legal and social controls.

### Measured component styles

- **Primary button** (“Learn more”): background #0d0d0d · text #ffffff · border 1px solid #fafafa · radius 100px · padding 16px 32px · 500 13px TWK Lausanne
- **Secondary button** (“Agentic Work Management”): background #ffc9ff · text #0d0d0d · radius 64px · padding 16px 32px · 500 16px TWK Lausanne
- **Link** (“Try the Asana demo See Asana in action”): background #ffffff · text #0d0e10 · radius 10px · padding 32px · 500 16px TWK Lausanne
- **Input**: transparent background · text #0d0d0d · border 1px solid #cfcfcf · radius 4px · padding 12px 16px · 300 16px TWK Lausanne
- **Card** (“Agentic Work Management Agentic Work Man”): background #3d3d3d · text #ffffff · radius 20px · padding 32px 24px 0px 32px · 400 16px TWK Lausanne
- **Badge** (“EVENT LOGISTICS TRACKING”): background #f3f3f3 · text #0d0d0d · radius 4px · padding 4px 8px · 500 11px TWK Lausanne · uppercase
- **Navigation item** (“Products Solutions Learning & support Pr”): transparent background · text #646f79 · radius 0px · padding 0px · 400 16px TWK Lausanne

## Do

- Use white as the default canvas for the main narrative.
- Set major headlines in a light, clean sans-serif style.
- Reserve the coral-to-pink gradient for emphasis and workflow details.
- Give sections generous separation and keep copy blocks readable.
- Use product interfaces and diagrams to explain capabilities.
- Use dark bands selectively for product showcase and footer contrast.

## Don't

- Do not make the whole page charcoal because the measured theme label says dark.
- Do not apply bright illustration colors as broad section backgrounds.
- Do not crowd the hero with additional competing content.
- Do not use heavy shadows as the default card treatment.
- Do not make every CTA pink; keep most actions dark or outlined.
- Do not use dense uppercase styling for general body copy.

## Agent prompt

Build a new Asana-style productivity page with a predominantly white canvas (#ffffff), Core Ink (#0d0d0d) typography, and restrained Quiet Line (#e7e7e7) dividers. Use TWK Lausanne or a close neutral sans-serif substitute, with light display headings and medium-weight compact controls. Make the layout spacious and editorial: a clear hero, generous section gaps, two-column feature explanations, and product-led cards. Use Signal Coral (#ff453e) and Orchid Glow (#f481f4) as selective gradient accents, not broad fills; Petal Pink (#ffc9ff) may highlight one featured CTA. Include convincing workflow diagrams or product UI previews, framing complex imagery within rounded panels. Keep elevation subtle, use pill-shaped buttons, and reserve Core Ink backgrounds for a focused showcase or footer. Maintain readable contrast and keep product illustration colors distinct from the core palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width hero with centered headline and form, surrounded by a connected workflow illustration. | social sign-in, email signup, primary CTA | oversized gradient headline, pill buttons, workflow diagram |
| 2 | logo-cloud | Single horizontal proof row with statement and customer logos. | trust signal | compact logo strip, small supporting heading |
| 3 | feature-split | Two-column feature block with product visualization beside explanatory accordion content. | accordion disclosure | dark media panel, hairline-separated rows |
| 4 | product-grid | Introductory copy above a horizontally browsable row of agent cards. | carousel navigation, learn more | agent icon cards, compact capability labels |
| 5 | product-showcase | Dark full-width showcase with heading, product tabs, and large interface preview. | tab switching | black band, pill tabs, framed product UI |
| 6 | testimonials | Two-column testimonial with customer image and quote, connected by a thin decorative path. | customer proof | quote typography, customer attribution |
| 7 | recommendations | Introductory copy beside a vertical list of three resource links. | resource navigation | stacked link rows, circular arrow actions |
| 8 | reviews | Heading above two side-by-side recognition cards. | review links, proof points | award graphics, dark media frame |
| 9 | cta | Dark two-column CTA with statement and action, followed by a small footnote. | conversion CTA | black background, white pill button, fine print |
| 10 | footer | Dark footer with multi-column link groups and a compact legal and social row. | site navigation, legal links | column link lists, thin divider, social icons |

## Source CSS custom properties (selected)

```css
--shadow-color: rgb(36, 50, 66);
--shadow-10: 0 3px 5px 0 rgba(36, 50, 66, 0.2);
--shadow-20: 0 11px 12px 0 rgba(36, 50, 66, 0.12);
--shadow-30: 0 20px 30px 0 rgba(36, 50, 66, 0.14);
--shadow-40: 0 50px 60px 0 rgba(36, 50, 66, 0.15);
--spacing-0: 0;
--spacing-1half: 8px;
--spacing-1: 16px;
--spacing-1plus: 24px;
--spacing-2: 32px;
--spacing-3: 48px;
--spacing-4: 64px;
--spacing-5: 80px;
--spacing-6: 96px;
--spacing-7: 112px;
--spacing-8: 128px;
--spacing-9: 144px;
--spacing-10: 160px;
--fontFamily-print: "Georgia","Times New Roman","Times",serif;
--fontFamily-mono: "Consolas",monospace;
--fontSize-base: 16px;
--fontSize-larger: 3.2rem;
--fontSize-large: 2.2rem;
--fontSize-medium: 2rem;
--fontSize-regular: 1.6rem;
--fontSize-small: 1.4rem;
--fontSize-smaller: 1.2rem;
--fontSize-xl: 82;
--fontSize-h1: 56;
--fontSize-h2: 56;
--fontSize-h3: 45;
--fontSize-h4: 31;
--fontSize-h5: 22;
--fontSize-h6: 16;
--fontWeight-thin: 300;
--fontWeight-light: 300;
--fontWeight-normal: normal;
--fontWeight-medium: 400;
--fontWeight-semibold: 500;
--fontWeight-bold: 500;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/asana-com