A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
10type steps
2radius steps
3pxspacing base
Asana, in one page
Asana's iOS app is a calm, structured productivity surface whose entire personality comes from one warm color and a disciplined list. The default canvas is white (#FFFFFF) in light mode and a near-neutral charcoal (#1E1F21) in dark mode — Asana's signature dark, NOT pure black. The app opens to My Tasks: a vertically scrolling list of task rows, each with a leading circular checkbox, a task name, and a row of small metadata pills (project, due date, assignee avatar). This list IS the product. Everything else — the project board, the timeline, the inbox — is a different rendering of the same task objects.
The one piece of chrome that defines Asana visually is the completion circle. Every task row begins with a 20pt hollow circle that, when tapped, fills with the success green (#62D26F) and draws a white checkmark with a soft "celebration" animation (occasionally a flying unicorn or narwhal "celebration creature" on full-section completion). This circle is the emotional core of Asana — the moment of marking something done is deliberately satisfying. The other signature moment is the coral floating action button (FAB) — a 56pt circular #F06A6A button bottom-right that creates a new task from anywhere.
The color system is built around Asana Coral (#F06A6A) — a soft, warm red-pink that is the single brand accent. It is identical in light and dark mode. Around it sits a multicolor object palette: every project, tag, and custom field can be assigned one of a fixed set of hues — Plum Blue (#4573D2), Aqua (#4ECBC4), Green (#62D26F), Yellow (#F8DF72), Orange (#F1BD6C), Magenta (#F26FD3), Indigo (#5A3FFF), and more. In the UI these appear as low-opacity tint chips: a green pill with green text on a 16% green background, an aqua "project" tag, etc. Project status updates use a four-state semantic system: On track (aqua/green), At risk (yellow), Off track (red), Complete (green). Asana avoids heavy fills — color is a soft glow, never a slab.
Typography is Inter — the modern geometric-humanist workhorse Asana adopted for its product UI and marketing site (its older custom face being phased toward Inter on web/mobile). On iOS it falls back to SF Pro when Inter isn't bundled. Hierarchy is product-UI: a large 32pt screen title ("My Tasks"), 26pt nav titles, 22pt section heads, 15pt task-row names, 14pt metadata, 12pt pills. Headings are weight 700-800; task names sit at a confident 500; body at 400. The type system is quiet and legible — it gets out of the way so the list reads fast.
Key Characteristics:
- White canvas (
#FFFFFF) light / charcoal (#1E1F21) dark — calm, near-neutral, NOT pure black - The task list IS the product — a scroll of rows, each = checkbox + name + metadata pills
- Completion circle — 20pt hollow circle fills green (
#62D26F) with a celebratory checkmark on tap - Coral FAB — 56pt circular
#F06A6A"create task" button bottom-right, identical in both themes - Multicolor object palette — projects/tags/fields each get a fixed hue (plum/aqua/green/yellow/orange/magenta/indigo)
- Color as soft tint — pills are 16-18% opacity backgrounds with saturated text, never solid slabs
- Four-state status updates — On track / At risk / Off track / Complete with a colored badge
- View switcher tabs — List / Board / Calendar / Timeline / Files — same tasks, different renderings
- Section headers with collapse caret — "Today", "Upcoming", "Later" group the task list
- Assignee avatars — 22pt circular initials/photo on the trailing edge of each task row
- Minimal navigation chrome — bottom tab bar (Home / My Tasks / Inbox / Search) + per-screen view tabs
Do's and don'ts
Do
- Use Asana Coral (
#F06A6A) as the single brand accent — FAB, active tab, primary CTA — identical in light & dark - Use the charcoal
#1E1F21for dark canvas — NOT pure black - Make the completion circle a delight: green fill (
#62D26F) + checkmark draw + haptic on tap - Render projects/tags/fields with their assigned hue as a ~16% tint fill + saturated text — never solid slabs
- Use the four-state status system (On track / At risk / Off track / Complete) for project updates
- Group the task list with collapsible section headers (caret + label + count)
- Keep the FAB persistently bottom-right with its soft coral shadow
- Give each task row an assignee avatar on the trailing edge
- Use tabular numerals for due dates, counts, and progress
- Offer the view-switcher tabs (List / Board / Calendar / Timeline / Files) over the same task data
Don't
- Don't introduce a second brand accent — coral is the only one; other hues are object colors, not UI accents
- Don't fill pills with solid saturated color — Asana uses ~16% tint + colored text
- Don't use pure black (
#000000) for the dark canvas or body text - Don't skip the completion-circle delight — a flat checkbox loses Asana's emotional core
- Don't make status updates look like list rows — they're composed posts with internal padding
- Don't hide the FAB behind content on scroll — it stays anchored and tappable
- Don't use heavy drop shadows on rows — only floating / dragged elements get shadow
- Don't use gray shadow as the FAB shadow — it must be a soft coral glow
- Don't bold task-row names heavily — 500 weight is correct; headings are 700-800
- Don't tint the whole row background per project — the tint lives in the small pill only
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Asana design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Asana Coral: #f06a6a
- Coral Pressed: #d85b5b
- Coral Tint: #f06a6a
- Link / Action Blue: #4573d2
- Canvas White: #ffffff
- Surface Gray: #f9f8f8
- Surface Pressed: #f0efef
- Divider: #edebe9
- Card Border: #e8e6e4
- Dark Canvas: #1e1f21
Type:
- families: Inter, Numeric, Fallback Stack
- scale: 10, 12, 13, 14, 15, 16, 18, 22, 26
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 8, 10
- elevation: Shadow: `rgba(240,106,106,0.45) 0 8px 20px` | Drag card between columns: lift shadow + 200ms settle | Keep the FAB persistently bottom-right with its soft coral shadow
Spacing: 3, 10, 11, 12, 13, 14
Rules:
- Use Asana Coral (`#F06A6A`) as the single brand accent — FAB, active tab, primary CTA — identical in light & dark
- Use the charcoal `#1E1F21` for dark canvas — NOT pure black
- Make the completion circle a delight: green fill (`#62D26F`) + checkmark draw + haptic on tap
- Render projects/tags/fields with their assigned hue as a ~16% tint fill + saturated text — never solid slabs
- Use the four-state status system (On track / At risk / Off track / Complete) for project updates
- Group the task list with collapsible section headers (caret + label + count)
Avoid:
- Don't introduce a second brand accent — coral is the only one; other hues are object colors, not UI accents
- Don't fill pills with solid saturated color — Asana uses ~16% tint + colored text
- Don't use pure black (`#000000`) for the dark canvas or body text
- Don't skip the completion-circle delight — a flat checkbox loses Asana's emotional core
- Don't make status updates look like list rows — they're composed posts with internal padding
- Don't hide the FAB behind content on scroll — it stays anchored and tappable
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Asana Coral (
#F06A6A): The single brand accent — FAB, primary CTAs, active tab, selection underline, links-as-buttons. Identical in light & dark. - Coral Pressed (
#D85B5B): Pressed/active state of coral surfaces. - Coral Tint (
#F06A6A1F): 12% coral wash behind selected rows / coral chips. - Link / Action Blue (
#4573D2): Inline text links, "Mark complete" text actions, mention chips.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas, task list background. - Surface Gray (
#F9F8F8): Sidebar, grouped surfaces, hovered rows. - Surface Pressed (
#F0EFEF): Pressed/selected rows. - Divider (
#EDEBE9): Hairline between task rows and sections. - Card Border (
#E8E6E4): 1pt border on board cards.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#1E1F21): Primary dark canvas — Asana's signature charcoal, NOT pure black. - Dark Surface 1 (
#252628): Cards, grouped surfaces. - Dark Surface 2 (
#2E2F31): Board columns, elevated chips, hovered rows. - Dark Divider (
#35363A): Hairline dividers. - Dark Card Border (
#3A3B3F): 1pt border on board cards in dark.
Text
- Text Primary Light (
#1E1F21): Primary body text in light mode. - Text Secondary Light (
#6D6E6F): Metadata, section counts, placeholders. - Text Tertiary Light (
#9CA3A6): Disabled, completed-task strikethrough. - Text Primary Dark (
#F5F4F2): Primary body on dark — warm off-white. - Text Secondary Dark (
#A9A9AA): Metadata on dark. - Text Tertiary Dark (
#6F7073): Disabled / completed on dark.
Object Palette (Project / Tag / Custom-field Hues)
These are the fixed colors a user assigns to projects, tags, sections, and custom fields. In UI they appear as a saturated text on a ~16% opacity fill of the same hue.
| Role | Solid Hue | Tint Fill (Light) | Tint Fill (Dark) |
|---|---|---|---|
| Plum Blue | #4573D2 | #4573D214 | #4573D229 |
| Aqua | #4ECBC4 | #4ECBC414 | #4ECBC429 |
| Green | #62D26F | #62D26F14 | #62D26F29 |
| Yellow | #F8DF72 | #F8DF7224 | #F8DF7229 |
| Orange | #F1BD6C | #F1BD6C1F | #F1BD6C29 |
| Magenta | #F26FD3 | #F26FD314 | #F26FD329 |
| Indigo | #5A3FFF | #5A3FFF14 | #5A3FFF29 |
| Cool Gray | #8DA3B0 | #8DA3B014 | #8DA3B029 |
Project Status (Semantic — Status Updates)
| Role | Color | Use |
|---|---|---|
| On Track | #4ECBC4 | Green/aqua status badge — project healthy |
| At Risk | #F8DF72 | Yellow status badge — needs attention |
| Off Track | #E8384F | Red status badge — blocked / slipping |
| Complete | #62D26F | Green status badge — project done |
Semantic
- Success Green (
#62D26F): Completed checkbox fill, success toast. - Error Red (
#E8384F): Overdue due-date pill, delete confirmation, off-track. - Warning Yellow (
#F8DF72): At-risk badge, warning callout. - Overdue Tint (
#E8384F2E): 18% red behind an overdue date pill. - Mention Background (
#4573D21A): 10% blue behind @-mention chips.
Type scaleRead the full spec
Font Family
- Primary:
Inter(by Rasmus Andersson, 2020, SIL OFL) — geometric humanist sans optimized for UI; the face Asana uses across its product and marketing surfaces. - Numeric: Inter tabular figures for due-dates, counts, and task numbers (
font-feature-settings: "tnum"). - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - iOS Note: On iOS the system falls back to SF Pro Text/Display when the bundled Inter face is absent — the metrics are close enough to preserve rhythm.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Inter | 32pt | 800 | 1.15 | -0.5pt | "My Tasks", "Inbox" — large nav title |
| Nav Title | Inter | 26pt | 700 | 1.2 | -0.3pt | Project / section detail title |
| Section Header | Inter | 22pt | 700 | 1.25 | -0.2pt | "Project status update" headings |
| Subsection | Inter | 18pt | 600 | 1.3 | -0.1pt | "Assigned to you", group labels |
| Body | Inter | 16pt | 400 | 1.5 | 0pt | Task descriptions, comments |
| Task Row | Inter | 15pt | 500 | 1.35 | 0pt | The task name in a list row |
| List Section Label | Inter | 13pt | 700 | 1.2 | 0.2pt | "Today" / "Upcoming" group caret rows |
| Meta | Inter | 14pt | 400 | 1.35 | 0pt | Due date, project name, counts |
| Pill | Inter | 12pt | 600 | 1.0 | 0.1pt | Project tag, status pill, due chip |
| Button | Inter | 15pt | 600 | 1.0 | 0pt | Primary / secondary buttons |
| Text Action | Inter | 14pt | 600 | 1.0 | 0pt | "Mark complete", "Add subtask" |
| Avatar Initials | Inter | 10pt | 700 | 1.0 | 0.2pt | Initials inside assignee circle |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels |
| Comment Author | Inter | 14pt | 700 | 1.3 | 0pt | Comment / story author name |
Principles
- List legibility first: the 15pt/500 task row is the most-read text in the app — it must stay crisp at scanning speed.
- Weight concentrated at 400 / 500 / 600 / 700 / 800: regular body, medium task rows, semibold buttons & pills, bold headings, extrabold screen titles. No thin.
- Tabular numerals everywhere there are dates/counts: due dates, section counts, "3 of 8 complete" must not jitter.
- Quiet by design: type carries no brand expression — Inter is neutral; the personality is the coral accent and the completion circle.
- Dynamic Type first-class: titles, headings, body, task rows, comments all scale; pills, tab labels, avatar initials stay fixed.
Components and layoutRead the full spec
Buttons
Primary Button (Add task / Save / Send update)
- Shape: Rounded rectangle, 8pt corner radius
- Background:
#F06A6A(Asana Coral) — identical light & dark - Text:
#FFFFFF, Inter 15pt weight 600 - Padding: 13pt vertical, 26pt horizontal
- Pressed: background
#D85B5B+ scale 0.98 - Disabled:
#F06A6Aat 40% opacity, text at 60%
Secondary / Outline Button (Assign / Set due date)
- Background: transparent
- Text:
#1E1F21light /#F5F4F2dark, Inter 14pt weight 600 - Border: 1pt
#EDEBE9light /#35363Adark - Corner radius: 8pt
- Padding: 12pt vertical, 20pt horizontal
- Pressed: background
#F0EFEFlight /#2E2F31dark
Pill Button (Filter / Sort / Group by)
- Background:
#F9F8F8light /#2E2F31dark - Border: 1pt
#EDEBE9/#35363A - Corner radius: 999pt (full pill)
- Text:
#1E1F21/#F5F4F2, Inter 14pt weight 600 - Padding: 10pt vertical, 18pt horizontal
Text Button (Mark complete / Add subtask)
- Font: Inter 14pt weight 600
- Color:
#4573D2(action blue) — or#62D26Ffor "Mark complete" - No background, no underline
- Pressed: 60% opacity
Floating Action Button (Create Task)
- Size: 56pt circle
- Background:
#F06A6A - Icon: white
plus24pt, stroke 2.5 - Shadow:
rgba(240,106,106,0.45) 0 8px 20px - Position: 18pt from trailing edge, 16pt above the tab bar
- Pressed: scale 0.94 +
#D85B5B
Task Row (the core atom)
Every task in any list view is a row:
- Height: auto, ~58pt with one metadata line
- Leading: 20pt completion circle, 12pt gap to content
- Content: task name (Inter 15pt w500), below it a metadata row (8pt gap)
- Metadata pills: project tag (tinted hue), due-date pill (orange normal / red overdue), inline subtask count
- Trailing: 22pt assignee avatar (circular initials or photo)
- Divider: 1pt
#EDEBE9/#35363Abetween rows - Swipe-left: reveals "Complete" (green) + "More" (gray) actions
Completion Circle
- Default: 20pt circle, 1.5pt border
#9CA3A6/#6F7073, transparent fill - Tapped: fills
#62D26F, white checkmark stroke 3pt, 200ms scale-bounce + soft haptic - Completed task: name turns
#9CA3A6/#6F7073with strikethrough - Section-complete: optional "celebration creature" flies across (unicorn/narwhal) — 1.2s
Section Header (List grouping)
- Leading caret: 5pt triangle
#6D6E6F(points right collapsed, down expanded) - Label: Inter 13pt w700
#1E1F21/#F5F4F2 - Trailing count: Inter 12pt
#9CA3A6 - Padding: 14pt top, 8pt bottom, 18pt horizontal
- Tap caret: collapse/expand children with 200ms ease-out
Pills & Tags
Project / Tag Pill
- Background: object hue at ~16% opacity (e.g.,
#4ECBC414) - Text: the solid hue (e.g.,
#4ECBC4), Inter 12pt w600 - Padding: 3pt vertical, 9pt horizontal
- Corner radius: 999pt
Due-Date Pill
- On-time: text
#F1BD6Con#F1BD6C1F - Overdue: text
#E8384Fon#E8384F2E - Same shape as project pill
Status Badge (Status Update)
- On track:
#4ECBC4text on#4ECBC42E - At risk:
#F8DF72text on#F8DF7229(dark text on dark — yellow uses a deeper tint) - Off track:
#E8384Ftext on#E8384F2E - Complete:
#62D26Ftext on#62D26F2E - Inter 12pt w700, 6pt vertical / 14pt horizontal, 999pt radius
Navigation
Bottom Tab Bar
- Height: 52pt + safe area
- Background:
#FFFFFF/#1E1F21with 1pt top border#EDEBE9/#35363A - Tabs (4): Home, My Tasks, Inbox, Search
- Icon size: 22pt; active filled, inactive stroked
- Active color:
#F06A6A; inactive#9CA3A6/#6F7073 - Labels: Inter 10pt w600, always shown
View Switcher Tabs (per screen)
- Below the screen title: a horizontal strip — List, Board, Calendar, Timeline, Files
- Active tab:
#1E1F21/#F5F4F2text with a 2pt coral#F06A6Aunderline - Inactive:
#6D6E6F/#A9A9AA - Inter 14pt w600, 22pt gap, 1pt bottom divider
Top Nav (detail screens)
- Height: 44pt + safe area
- Leading: back chevron / close X
- Center: compact title (shown when scrolled past large title)
- Trailing: 30pt user avatar or ⋯ actions menu
Input Fields
Search Bar
- Height: 40pt
- Background:
#F9F8F8/#2E2F31 - Border: none
- Corner radius: 10pt
- Leading icon
magnifyingglass16pt#9CA3A6 - Placeholder: "Search tasks, projects, people" 14pt
#9CA3A6 - Focus: 1.5pt
#F06A6Aborder
Task Name / Comment Field
- No box in inline-edit (text sits directly on canvas)
- Comment composer:
#F9F8F8/#2E2F31fill, 12pt radius, 12pt padding - Placeholder: "Add a comment"
#9CA3A6 - Send button: coral text "Comment" appears when non-empty
Distinctive Components
Completion Circle + Celebration
- The emotional core — see Task Row. The tap-to-complete moment is deliberately delightful: green fill, checkmark draw, haptic, occasional celebration creature.
My Tasks List
- The default screen: sectioned (Today / Upcoming / Later or custom sections), each task a row, FAB anchored bottom-right.
Project Board (Kanban)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Single column; metadata pills may wrap to a second line |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | Larger task rows; two metadata lines comfortable |
| iPad (portrait) | 768pt | Master-detail: project/task list (360pt) + detail pane |
| iPad (landscape) | 1024pt+ | Three-pane optional: sidebar + list + task detail |
Dynamic Type
- Screen title, nav title, section headers, body, task-row names, comments: full scale
- Pills, tab labels, avatar initials, list section labels: FIXED (layout-sensitive)
- Due dates / counts: scale but stay tabular
Orientation
- All screens support rotation
- iPad landscape unlocks the three-pane split (sidebar / list / detail)
- Board view scrolls horizontally in both orientations
Touch Targets
- Completion circle: 20pt glyph, 44pt hit area
- Tab bar icons: 22pt glyph, 44pt hit
- Task row: full-row tap opens detail; circle tap completes (separate 44pt zones)
- FAB: 56pt (exceeds minimum)
- Section caret: 16pt glyph, 44pt hit
Safe Area Handling
- Top: large title & top nav respect safe area + Dynamic Island
- Bottom: tab bar + home indicator respected; FAB sits 16pt above the tab bar
- Keyboard: comment composer & task-name field rise above keyboard
- Sides: 18pt content inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-asana {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1e1f21;
--heading-color: #1e1f21;
--link-color: #876f07;
--link-hover-color: #574704;
--border-color: #d7d7d7;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(30,31,33,0.06);
--card-hover-shadow: 0 6px 18px rgba(30,31,33,0.12);
--header-bg: #1e1f21;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6d6d6f;
--button-bg: #f8df72;
--button-text-color: #000000;
--button-hover-bg: #f6d441;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #f2f2f2;
--button-secondary-text-color: #1e1f21;
--button-secondary-hover-bg: #e4e4e4;
--button-secondary-border: 1px solid #d7d7d7;
--prompt-bg: #f4f4f4;
--prompt-text-color: #1e1f21;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/productivity/asana/DESIGN.md· 26.0 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.