# Asana

> `asana@1.0.0`

Asana is a work-management platform built around tasks, projects, goals, and portfolios — "where teams do their best work together." The brand voice is calm, organized, and human. Visually, the identity is carried by the three-dot Asana Coral mark (#F06A6A) on a clean white canvas with near-black body text and generous whitespace. Where competing work-management brands lean on blues and greens, Asana commits to a warm, distinctive coral.


**Tags:** `saas`, `productivity`, `asana`, `work-management`

## Atoms

### Palette

**Asana** · `asana@1.0.0` · Proprietary — All Rights Reserved

> Asana's brand palette, anchored on the three-dot coral mark — a warm Asana Coral (#F06A6A) carrying the institutional voice on a clean white canvas with near-black body text. Asana's product also uses a documented purple supporting accent, but its exact published brand hex is not catalogued here to avoid fabrication; consumers needing the supporting purple should pull it from Asana's in-product brand documentation at consumption time. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `asana-coral` | Asana Coral | `#F06A6A` |
| `asana-white` | Asana White | `#FFFFFF` |
| `asana-black` | Asana Black | `#1E1F21` |
| `asana-canvas-dark` | Asana Canvas Dark | `#1E1F21` |
| `asana-surface-light` | Asana Surface Light | `#F6F4F2` |
| `asana-surface-dark` | Asana Surface Dark | `#2D2E30` |
| `asana-text-secondary` | Asana Text Secondary | `#6D6E6F` |
| `asana-text-tertiary` | Asana Text Tertiary | `#9CA6AF` |
| `asana-coral-hover` | Asana Coral Hover | `#F58A8A` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `asana-white` | `#FFFFFF` |
| `surface` | `asana-surface-light` | `#F6F4F2` |
| `surface-elevated` | `asana-white` | `#FFFFFF` |
| `text-primary` | `asana-black` | `#1E1F21` |
| `text-secondary` | `asana-text-secondary` | `#6D6E6F` |
| `text-tertiary` | `asana-text-tertiary` | `#9CA6AF` |
| `primary` | `asana-coral` | `#F06A6A` |
| `primary-hover` | `asana-coral-hover` | `#F58A8A` |
| `accent` | `asana-coral` | `#F06A6A` |
| `accent-hover` | `asana-coral-hover` | `#F58A8A` |
| `warning` | `asana-coral` | `#F06A6A` |
| `warning-hover` | `asana-coral-hover` | `#F58A8A` |
| `error` | `asana-coral` | `#F06A6A` |
| `success` | `asana-coral` | `#F06A6A` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `asana-canvas-dark` | `#1E1F21` |
| `surface` | `asana-surface-dark` | `#2D2E30` |
| `surface-elevated` | `asana-surface-dark` | `#2D2E30` |
| `text-primary` | `asana-white` | `#FFFFFF` |
| `text-secondary` | `asana-text-tertiary` | `#9CA6AF` |
| `text-tertiary` | `asana-text-secondary` | `#6D6E6F` |
| `primary` | `asana-coral` | `#F06A6A` |
| `primary-hover` | `asana-coral-hover` | `#F58A8A` |
| `accent` | `asana-coral` | `#F06A6A` |
| `accent-hover` | `asana-coral-hover` | `#F58A8A` |
| `warning` | `asana-coral` | `#F06A6A` |
| `warning-hover` | `asana-coral-hover` | `#F58A8A` |
| `error` | `asana-coral` | `#F06A6A` |
| `success` | `asana-coral` | `#F06A6A` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `asana-coral` | `#F06A6A` |
| `on-identity` | `asana-white` | `#FFFFFF` |
| `primary` | `asana-coral` | `#F06A6A` |
| `primary-hover` | `asana-coral-hover` | `#F58A8A` |
| `accent` | `asana-coral` | `#F06A6A` |
| `accent-hover` | `asana-coral-hover` | `#F58A8A` |
| `success` | `asana-coral` | `#F06A6A` |
| `warning` | `asana-coral` | `#F06A6A` |
| `error` | `asana-coral` | `#F06A6A` |
| `background-light` | `asana-white` | `#FFFFFF` |
| `background-dark` | `asana-canvas-dark` | `#1E1F21` |
| `surface-light` | `asana-surface-light` | `#F6F4F2` |
| `surface-dark` | `asana-surface-dark` | `#2D2E30` |
| `text-primary-light` | `asana-black` | `#1E1F21` |
| `text-primary-dark` | `asana-white` | `#FFFFFF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.mark`

- **allowed:** asana-coral, asana-white, asana-black
- **forbidden:** any-non-brand-color

> The Asana three-dot mark is rendered in Asana Coral on light surfaces and in white on dark surfaces. Recoloring the mark into off-brand hues violates Asana's brand-use guidance. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill

> Asana's brand resources prohibit stretching, rotating, recoloring, or applying decorative effects to the three-dot mark. The geometry and color of the mark are fixed. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. Asana Black (#1E1F21) on Asana White (#FFFFFF) clears AA comfortably. 

#### `variantSelection` → `logo`

- **use:** `logo-light`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces, use the light-fill three-dot variant; do not place the coral mark on a busy or dark canvas where the three dots fail contrast. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** product-of-competitor, merchandise, endorsement-implication, company-name-or-domain

> Asana's trademark guidance forbids use of the Asana name and mark in third-party company names, domains, and uses that imply affiliation or endorsement. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Asana-skinned surfaces must clear AA on body text. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700

> Asana's marketing surfaces render headings in the 500–700 band; lighter weights undermine the confident, organized voice of the brand. 

### 💡 recommendation (2)

#### `compositionConstraint` → `roles.colors.identity`

- **pairsWith:** asana-white, asana-black, asana-surface-light

> Asana Coral is calibrated to read on white, on warm off-white, and on near-black. Pairing it with another saturated hue at the same weight breaks the calm typographic voice of the brand surface. 

#### `numericRatio` → `typography.body.lineHeight`

- **min:** `1.4`
- **max:** `1.65`

> Asana's product surface reads with disciplined line-height in the 1.4–1.65 band. Tighter values feel cramped; looser values break the calm, organized rhythm. 

## Provenance

- **Source:** <https://asana.com/press>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Asana and the Asana logo are trademarks of Asana, Inc. The primary brand color Asana Coral (#F06A6A) is documented on Asana's press and brand resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Asana name and mark is governed by Asana's brand-use guidance at asana.com/press. 
- **Imported:** `2026-05-18`
- **Notes:** Asana's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. Asana also uses a documented supporting purple, but the exact published brand hex is not catalogued in the referenced palette to avoid fabrication; consumers needing it should pull from Asana's in-product brand documentation at consumption time. 

---

*Generated by the brand-atoms converter. Source: `asana@1.0.0` from the encyclopedia.*