Asana Design System Reference

Foundation

Color Tokens

The full color palette extracted from Asana's design system, including primary neutrals, accent colors, and functional states.

Deep Charcoal

#0D0E10

Primary text · UI elements · Foundational base

Pure Black

#0D0D0D

High-contrast text · Primary surfaces

Sky Blue

#00B2FF

Primary accent · Interactive · Links

Light Sky Blue

#C8EBFC

Secondary background · Soft tint

Coral Red

#F06A6A

Status alerts · Error states · Warnings

Slate Purple

#55649E

Secondary accent · Alternative actions

Charcoal Gray

#646F79

Secondary text · Muted elements · Disabled

Dark Slate

#23282F

Hover states · Interactive emphasis

Pure White

#FFFFFF

Primary background · Card surfaces

Off-White

#F5F4F3

Soft background · Secondary surface

Border Gray

#DBDBDB

Borders · Dividers · Hairlines

Medium Gray

#6E6E6E

Body text · Secondary content

Typography

Type Scale

Inter provides a clear, professional hierarchy through weight and size variation — optimized for both web and mobile interfaces.

Primary Inter UI · Headings · Body · Forms

Display XL Build together 102px · 300 · 1.0

Display Lg The quick brown 80px · 300 · 1.0

Heading XL The quick brown fox 54px · 300 · 1.0

Heading Large The quick brown fox jumps 36px · 400 · 1.0

Heading Medium The quick brown fox jumps over 30px · 400 · 1.2

Heading Small The quick brown fox jumps over the lazy dog 24px · 500 · 1.2

Body Regular The quick brown fox jumps over the lazy dog and back again 16px · 400 · 1.75

Body Small The quick brown fox jumps over the lazy dog 14px · 500 · 1.5

Link The quick brown fox jumps 16px · 500 · 1.5

UI Label THE QUICK BROWN FOX 14px · 500 · 1.5

Caption The quick brown fox jumps over 13px · 300 · 1.5

Layout

Spacing & Shapes

4px base unit grid — all spacing is a multiple of 4. Border radii scale from sharp (3px) to fully rounded (100px).

Spacing Scale

4px xs

8px sm

12px sm+

16px md

20px md+

24px lg

32px xl

48px 2xl

Border Radius

None 0px

SM 3px

MD 4px

LG 8px

XL 16px

Full 100px

Shadows

Level 0 Flat · no elevation

Level 1 Cards · subtle lift

Level 2 Dropdowns · popovers

Level 3 Modals · overlays

Border Widths

Thin 1px

Medium 2px

Opacity

Full 100%

Disabled 30%

Z-index / Layering

Base 1

Fixed 3

Dropdown 100

Modal 1001

Elevation

Depth & Surfaces

Asana uses minimal elevation — depth is created through layering and spacing rather than heavy shadows. Surfaces are clean and professional.

Primary Surface

Cards, containers, primary background

Base · #FFFFFF

Secondary Surface

Soft background tint, secondary containers

L1 · #F5F4F3

Dark Surface

Buttons, high-contrast elements

L2 · #0D0E10

White #FFFFFF

Off-White #F5F4F3

Charcoal #0D0E10

Border #DBDBDB

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #0D0D0D bg · #FFFFFF text · 100px radius · 8/24px padding · 44px height. Secondary: transparent bg · #DBDBDB border. Ghost: muted text, minimal styling. Height minimum 44px for touch accessibility.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #CFCFCF border · 4px radius · 50px height · 12/16px padding. Focus: #00B2FF border · 3px focus ring rgba(0,178,255,.1). Font: 16px, weight 300.

Card

Content container — elevated surface with subtle shadow

.card

Feature name

Brief description of this feature. It helps teams collaborate more effectively.

#FFFFFF bg · #DBDBDB border · 16px radius · 24px padding · L1 shadow 0 4px 12px rgba(0,0,0,.08). Title: 16px/500/#0D0E10. Body: 14px/#646F79. CTA: primary button.

Badges

Status indicators — Success, Error, Info

.badge

Active Error Info

12px/500 · 4/12px padding · 4px radius. Success: #28A745. Error: #F06A6A. Info: #00B2FF. Provides status at a glance.

Guidelines

Do's & Don'ts

Principles for consistent application of the Asana design language across all surfaces and contexts.

Do — Embrace

Use Deep Charcoal (#0D0E10) for all primary body text and UI elements
Leverage generous whitespace to reduce cognitive load and create breathing room
Apply Sky Blue (#00B2FF) sparingly for primary CTAs and focus states only
Stack typography using weight variation (300, 400, 500) for nuanced hierarchy
Maintain 44px minimum height for all clickable interactive elements
Use pill-shaped buttons (100px radius) for primary and secondary CTAs
Build cards with 16px border-radius and 1px solid borders for consistency
Apply subtle shadows (0 4px 12px) for elevation, not heavy shadows

Don't — Avoid

Don't use multiple accent colors in a single composition
Don't apply heavy shadows to normal components; reserve for modals only
Don't create buttons smaller than 44px height or text below 12px
Don't mix border-radius values inconsistently across components
Don't crowd components without sufficient gap spacing (minimum 24px)
Don't override Inter typeface with alternatives; maintain consistency
Don't reduce line-height below 1.3x font size; maintain generous spacing
Don't disable elements without clear visual indication (use 30% opacity)

asana.com

Preview