Asana Design System

# Asana Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Asana. "Asana Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Asana Design System
**Owner:** Asana
**Official documentation:** https://asana.design/
**Visual character:** Work-management calm: soft coral warmth over near-white canvases, pastel status hues, and density dialed for all-day task lists.

---

## Summary

Design system for Asana's project management platform.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Coral / Brand | `#f06a6a` | `--asana-coral` | Asana brand accent |
| Text | `#1e1f21` | `--asana-text` | Primary text |
| Secondary Text | `#6d6e6f` | `--asana-text-secondary` | Secondary text |
| White | `#ffffff` | `--asana-white` | Surfaces |
| Background | `#f9f8f8` | `--asana-background` | App background |
| Border | `#edeae9` | `--asana-border` | Borders |
| Success Green | `#58a182` | `--asana-success` | Completed states |
| Warning Orange | `#f1bd6c` | `--asana-warning` | At-risk states |
| Danger Red | `#de5f73` | `--asana-danger` | Blocked states |

## Typography

- **Body:** TWK Lausanne / system — weights 400, 500, 700 — `'TWK Lausanne', -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| display | `40px` | `48px` |
| heading-1 | `28px` | `36px` |
| heading-2 | `20px` | `28px` |
| body | `14px` | `22px` |
| small | `12px` | `18px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `6px` |
| default | `8px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| card | `0 1px 3px rgba(0,0,0,0.1)` |

## Quick start (CSS)

```css
/* Asana Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://asana.design/ */

:root {
  /* Color */
  --asana-coral: #f06a6a; /* Asana brand accent */
  --asana-text: #1e1f21; /* Primary text */
  --asana-text-secondary: #6d6e6f; /* Secondary text */
  --asana-white: #ffffff; /* Surfaces */
  --asana-background: #f9f8f8; /* App background */
  --asana-border: #edeae9; /* Borders */
  --asana-success: #58a182; /* Completed states */
  --asana-warning: #f1bd6c; /* At-risk states */
  --asana-danger: #de5f73; /* Blocked states */

  /* Typography */
  --font-body: 'TWK Lausanne', -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* Type scale */
  --text-display: 40px /* line-height 48px */;
  --text-heading-1: 28px /* line-height 36px */;
  --text-heading-2: 20px /* line-height 28px */;
  --text-body: 14px /* line-height 22px */;
  --text-small: 12px /* line-height 18px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --radius-small: 6px;
  --radius-default: 8px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.1);
}
```

## Engineering profile

- **Ships for:** React
- **Source model:** Closed

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Asana Design System by Asana — Design system for Asana's project management platform. Character: Work-management calm: soft coral warmth over near-white canvases, pastel status hues, and density dialed for all-day task lists. Use a primary colour near #f06a6a, the typeface "TWK Lausanne / system" (or a close equivalent), corner radius around 6px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Asana Design System documentation](https://asana.design/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/asana-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._