W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Asana
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.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/asana/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/asana/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Asana
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Asana
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Asana
A clear hierarchy in Asana's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ asana-coral #F06A6A accent-hover
→ asana-coral-hover #F58A8A background-dark
→ asana-canvas-dark #1E1F21 background-light
→ asana-white #FFFFFF error
→ asana-coral #F06A6A identity
→ asana-coral #F06A6A on-identity
→ asana-white #FFFFFF primary
→ asana-coral #F06A6A primary-hover
→ asana-coral-hover #F58A8A success
→ asana-coral #F06A6A surface-dark
→ asana-surface-dark #2D2E30 surface-light
→ asana-surface-light #F6F4F2 text-primary-dark
→ asana-white #FFFFFF text-primary-light
→ asana-black #1E1F21 warning
→ asana-coral #F06A6A Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from asana)
Light mode (14 roles)
accent
→ asana-coral accent-hover
→ asana-coral-hover background
→ asana-white error
→ asana-coral primary
→ asana-coral primary-hover
→ asana-coral-hover success
→ asana-coral surface
→ asana-surface-light surface-elevated
→ asana-white text-primary
→ asana-black text-secondary
→ asana-text-secondary text-tertiary
→ asana-text-tertiary warning
→ asana-coral warning-hover
→ asana-coral-hover Dark mode (14 roles)
accent
→ asana-coral accent-hover
→ asana-coral-hover background
→ asana-canvas-dark error
→ asana-coral primary
→ asana-coral primary-hover
→ asana-coral-hover success
→ asana-coral surface
→ asana-surface-dark surface-elevated
→ asana-surface-dark text-primary
→ asana-white text-secondary
→ asana-text-tertiary text-tertiary
→ asana-text-secondary warning
→ asana-coral warning-hover
→ asana-coral-hover Rules (9 typed constraints)
error · 6 rules
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 rule
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 rules
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.