# Asana: brand book and build spec

White pages and black panels, a coral three-dot mark, very large Light Swiss headlines with one coral-to-fuchsia gradient phrase, and product UI turned into graphics: workflow lines, nodes, pills and Workling characters on a faded dot grid. Fisheye photos keep people at the centre.

From unfairly.ai/brand-guidelines/asana, checked 2026-10-31. Unofficial study; not affiliated with Asana.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** People and agents in one flow, drawn literally. Asana turns its own interface into the brand: workflow lines connect human avatars to Workling agents and task pills, while the type stays quiet and black-and-white so a single coral-to-fuchsia phrase carries the energy. Based on: The guide builds its design elements from the product (dot grid from the logo, pills from the interface, workflows connecting humans and agents) and limits gradients to headline type in simple layouts.

## Purpose

Mission: To help humanity thrive by enabling the world's teams to work together effortlessly. (published; https://asana.com/company)

Story: Founders Dustin Moskovitz and Justin Rosenstein saw talented people at Facebook lose their days to meetings and status chasing, so they built a shared picture of who is doing what, by when. That Work Graph, built for people, is now the base for people and AI agents working together. (observed)

| Value | What it means in the work | Source |
|---|---|---|
| Know your customer | Start with customers: listen to their needs and design what they will love (paraphrase). | published: https://asana.com/company |
| Cut to the core | Focus on what matters and simplify complexity (paraphrase). | published: https://asana.com/company |
| Get to Beta | Progress beats perfection: ship lovable work fast and learn (paraphrase). | published: https://asana.com/company |
| Solve it together | Collaborate early and trust each other (paraphrase). | published: https://asana.com/company |
| Act like you own it | Take responsibility, individually and together (paraphrase). | published: https://asana.com/company |
| Start with heart | How we work matters as much as what we build (paraphrase). | published: https://asana.com/company |

## Fixed and flexible

Never changes:
- Coral three-dot symbol beside the lowercase wordmark; the symbol is always coral
- White or black grounds for content; coral, fuchsia and pink as accents
- TWK Lausanne Light headlines, tight tracking, sentence case
- Pill-shaped buttons
- Workflow lines, nodes and pills built from the product UI
- Worklings for every AI agent
- Fisheye, human-centred photography

The one thing that varies: How loud the system gets: one gradient phrase and a quiet product UI on a web page, full workflow scenes with Worklings and the dot grid on billboards and posters.

## Positioning

- **Statement**: The operating system for human-agent teams. (observed)
- **Category**: Work management, reframed as the OS for teams of people and AI agents (published)
- **Audience**: Organizations and their cross-functional teams: operations, marketing, client delivery, IT, PMO and R&D (the homepage department tabs) (observed)
- **Problem**: "Work about work": meetings and status chasing crowd out skilled work, and AI has helped individuals more than teams (observed)
- **Promise**: People and agents run critical workflows from one shared plan, with shared memory and governance (observed)
- **Differentiators**: The Asana Work Graph® as the shared data model under every workflow.; Multiplayer collaboration architecture, built over 18 years.; Pre-built AI Teammates that work inside real workflows from day one.; Enterprise governance for agents: identity, scoped permissions, audit trail.
- **Alternatives**: Scattered work: tasks in spreadsheets, decisions in chat, files in email.; AI tools that help individuals but not teams.

## Messaging

Boilerplate (observed): Asana is the operating system for human-agent teams. Built on the Asana Work Graph and years of multiplayer architecture, it is where an organization's people and AI agents run critical workflows together, from a shared plan with shared memory and enterprise governance.

Taglines:
- The OS for human-agent teams (Billboards and the homepage H1 (observed 2026-10-31 as one of two A/B hero variants))
- Where humans + agents workflow together (Type hierarchy sample and the poster (p.41))
- Work has a new flow. (Street-level billboard)
- Supercharge your teams to get things done (Homepage hero lead)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Asana Work Graph® | One connected map of every person, task, project, goal and dependency, so people and agents know who does what, by when. | 85% of Fortune 100 companies choose Asana (footnote: accurate as of December 2023, includes free and paid users).; 18 years of multiplayer architecture (company page). | observed |
| Multiplayer | Every workflow, app and agent runs in one shared space with people. | 18 years of multiplayer architecture (company page). | observed |
| Shared memory | AI Teammates learn from the work and keep context across projects. | Pre-built AI Teammates (Launch Coordinator, Portfolio Advisor, Compliance Manager, Project Manager, Content Writer) shown on the homepage. | observed |
| Enterprise governance | Every agent has an identity, scoped permissions and an audit trail. | COS (Simone Williams, Chief Digital, Technology & Business Development Officer) credits scalable workflows and AI with more visibility and speed. | observed |

They never claim:
- The Fortune 100 share is always printed with its December 2023 footnote.
- Never imply Asana endorses or sponsors a third party's use of its marks.

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "The OS for human-agent teams" | billboard, homepage H1 | https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=40 |
| "Where humans + agents workflow together" | poster | https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=41 |
| "Work has a new flow." | street-level billboard | https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=42 |
| "Your team just got bigger" | homepage | https://asana.com/ |

## Voice

Tone words: Clear, Human, Energetic, Productive.

Traits:
- Human at the center, but not Overpowered by systems (published)
- Expressive, but not Intense (published)
- Precise and productive, but not Overwhelming (published)
- Moving forward, but not Stuck in a loop (published)

- The guide (FY27) publishes no voice section; everything below is observed on asana.com or inferred from the visual rules.
- Headlines are short sentence-case declaratives, often a pairing of humans and agents ("humans + agents").
- Body copy names the concrete work: briefs, status updates, intake, launches, audits.
- Problem copy is plain and specific (spreadsheet, chat, email, Friday status decks), then turns to the fix in one line.

Rules a copy check enforces:
- Sentence case headlines
- Write as "we", to "you"
- American spelling
- Third parties writing about Asana: use the name as an adjective before a noun, not as a verb or plural (trademark guidelines; Asana's own pages use the possessive)
- Write Asana Work Graph with the registered mark on first use
- Name humans and agents together when describing who does the work
- Card and product summaries lead with the outcome for the team, not the mechanism
- In campaign headlines a plus sign may join humans and agents (humans + agents)
- Every customer-count stat carries its dated footnote
- Headlines run 4 to 11 words; hero headlines 5 or fewer

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Asana White | #FFFFFF | paper | Primary. Page and module ground; wordmark color on dark and color grounds |
| Asana Black | #0B0505 | ink | Primary. Type, buttons, dark grounds, workflow nodes; the wordmark color on white. Pantone Black C |
| Asana Coral | #FF584A | accent | Primary. The logomark (always coral); start of every brand gradient. Pantone 171 C |
| Fuchsia | #FD3FFD | accent_secondary | Primary. End of the headline gradient on light grounds; eyebrow tag fill in the type hierarchy sample. Pantone 807 C. Called "Asana Fucsia" on the pairings page |
| Light Fuchsia (Asana Pink) | #FFC9FF | accent | Primary. End of the headline gradient on dark grounds; secondary CTA fill; the pill drop shadow; active tab fill. Pantone 7436 C |
| Neutral Grey (Asana Grey) | #F3F3F3 | surface | Primary. Light module ground; node outline on workflows. 5% Black C |
| Blue | #0071FF | secondary | Secondary. Accent and Workling color; pairs with white text. Process Blue C |
| Green | #0FA042 | secondary | Secondary. Accent and Workling color; pairs with white text. 347 C |
| Yellow | #C6CD00 | secondary | Secondary. Accent and Workling color; pairs with black or white. 7744 C |
| Grey (Asana Dark Grey) | #808080 | secondary | Secondary. Neutral accent; pairs with white. 877 C |
| Magenta | #F20D83 | tertiary | Tertiary. Accent; pairs with Asana Black. 225 C |
| Turquoise | #009271 | tertiary | Tertiary. Accent and Workling color. 327 C |
| Purple | #745BFA | tertiary | Tertiary. Accent and Workling color. 2725 C |
| Orange | #FF7A00 | tertiary | Tertiary. Accent and Workling color. 151 C |
| Site black | #0D0D0D | night | The black the site actually renders: body text, primary buttons, dark bands, footer |
| Hero lead grey | #3E3E3E | ink_muted | Hero lead, at 80% opacity (rgba(62,62,62,0.8)) |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | TWK Lausanne | Commercial typeface (TWK prefix: the Weltkern foundry); Asana's licence does not transfer | Figtree | Figtree, Arial, sans-serif |
| body | TWK Lausanne | Commercial | Figtree | Figtree, Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 | --text-display-xl-* | display | 102px | 48px | 0.9 | -2.55px | 400 |
| Section H2 | --text-display-l-* | display | 54px | 30px | 1 | -1.08px | 400 |
| Quote | --text-quote-* | display | 36px | 20px | 1.3 | -0.36px | 400 |
| Subhead (logo stat, link-card and problem titles) | --text-subhead-* | display | 30px | 20px | 1.2 | 0px | 500 |
| Hero lead | --text-hero-lead-* | body | 26px | 18px | 1.3 | 0.52px | 350 |
| Card and accordion title | --text-title-* | body | 24px | 18px | 1.2 | 0px | 500 |
| Body large | --text-body-l-* | body | 20px | 15px | 1.5 | 0.4px | 350 |
| Body | --text-body-* | body | 16px | 14px | 1.5 | 0.32px | 350 |
| Small / legal / meta | --text-small-* | body | 13px | 12px | 1.5 | 0.26px | 350 |
| Eyebrow (uppercase) | --text-eyebrow-* | body | 16px | 11px | 1.5 | 0.64px | 500 |
| Skill chip (uppercase) | --text-chip-* | body | 11px | 11px | 1.5 | 0.44px | 500 |
| Button | --text-button-* | body | 16px | 14px | 1.5 | 0px | 500 |
| Nav link | --text-nav-* | body | 14px | 16px | 1.5 | 0px | 500 |
| Footer heading | --text-footer-heading-* | body | 14px | 14px | 1.75 | 0px | 500 |
| Footer link | --text-footer-link-* | body | 16px | 16px | 1.5 | 0px | 400 |

## Layout

Measured on https://asana.com/: computed styles and geometry of the live homepage (the "The OS for human-agent teams" A/B variant) at 1440 and 390, headless Chromium, 2026-10-31.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 76px | 24px |
| Section padding | 120px | 48px |
| Container max width | 1288px | full |
| Hero text width | max 873px | full |
| Grid columns | 2 | 1 |
| Gutter | 32px | 16px |
| Card gap | 22px | 22px |
| Navigation height | 68px | 68px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Asana's.

Homepage bands, top to bottom (observed):
1. Navigation
   - Desktop: 1440x68 sticky
   - Phone: 390x64: logo, Get started, hamburger
   - Pills radius 100px, 44px tall
2. Hero
   - Desktop: y 56-879; centred 102px H1 + lead + sign-up form; workflow canvas behind
   - Phone: y 64-863; 48px H1 in 3 lines; workflow graphic under the form
   - Workflow canvas image placed behind the copy, never redrawn
3. Logo band
   - Desktop: y 959-1087: stat left, 5 logos right
   - Phone: stat then a scrolling logo row
   - 85% of Fortune 100 stat with superscript 1
4. AI accordion
   - Desktop: y 1207-2035: H2, 628px dark image left, accordion right
   - Phone: accordion first, image inside the open item
   - 4 items, #E7E7E7 rules, 2px black progress segment
5. AI Teammates
   - Desktop: y 2195-3365: eyebrow, H2, lead, Learn more; 304px cards running off the right edge
   - Phone: 299px cards, second peeks
   - Card: image, name, tagline, integrations, skill chips, 3 prompts
6. Products
   - Desktop: y 3525-4695: rounded dark panel, 5 pills, 936px grey card with peeking neighbours
   - Phone: full-bleed, pills stacked
   - Active pill #FFC9FF, others #3D3D3D
7. Customer quote
   - Desktop: y 4735-5362: workflow divider, photo left, quote right
   - Phone: stacked
   - 36px Light quote, 48px grey quote-mark disc
8. Get started easily
   - Desktop: y 5442-6140: rounded #FAFAFA panel, 3 white link cards with black arrow circles
   - Phone: full-bleed panel
   - Cards 628x142 radius 10px
9. Problem columns
   - Desktop: y 6220-6927: divider, centred H2, 3 columns
   - Phone: stacked columns
   - 48px line icons
10. Closing CTA
   - Desktop: y 7047-7518: dark panel, white H2, white Get started pill, footnote, rule
   - Phone: full-bleed
   - Footnote: accurate as of December 2023
11. Footer
   - Desktop: y 7517-8363
   - Phone: 2-column links
   - Social discs white 32px, app badges at right

## Page anatomy

How Asana's own landing pages are built, part by part (observed; https://asana.com/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: White sticky bar, 68px: Asana logo left, four text menus, then globe, Log in, an outlined Contact sales pill and a black Get started pill at right. No bottom border.
- ground: #FFFFFF, sticky at top (z-index above everything), no border or shadow at rest
- height: 68px desktop (12px top/bottom padding around 44px items); 64px phone
- border: none
- logo: variant combination logo: coral #FF584A three-dot logomark + #0D0E10 wordmark (asana-logo.svg); px 112x22; position x 76, y 23 (vertically centred)
- links: count 4; labels Products (dropdown), Solutions (dropdown), Learning & support (dropdown), Pricing; chevron chevron-down.svg at 10px; size 14px/36px; weight 500; color #0D0D0D; alignment left group: buttons at x 232, 352, 474 (each a 44px-tall pill hit area with 8px 24px padding, 10px chevron-down 4px after the label) and Pricing link at x 658
- container: nav content runs x 64-1376 (1312px): the logo link has 12px inner padding, so the logo art starts at x 76; the Get started pill ends at x 1376 (64px right margin)
- actions:
  - Language globe (globe.svg): a 28px button box at x 1028 whose visible drawing is about 20x20 (render the SVG at 20px, centred in the 28px box), #0D0D0D
  - Log in: text link 14px 500 #0D0D0D, x 1084 (hit area x 1072, padding 0 12px)
  - Contact sales: 120x44 pill, #FFFFFF fill, 1px inset ring #0D0D0D, 14px 500 #0D0D0D, padding 0 16px, radius 100px, x 1143
  - Get started: 105x44 pill, #0D0D0D fill, 14px 500 #FFFFFF, padding 0 16px, radius 100px, x 1271 (right edge 1376); hover fill #6E6E6E over 0.3s
- sticky: position sticky, stays white
- phone: shows logo 112x22 left at x 24, Get started black pill (12px 500 white, about 94x40) at x 224, 24px hamburger (three lines) at right; menu white drawer: rows Products, Solutions, Learning & support, Pricing (16px 500, 60px rows), then Contact sales / View demo / Download app (12px), then Log in (#F3F3F3 pill, #3D3D3D text) and Contact sales (#0D0D0D pill, white text), 47px tall, full width minus 28px sides; cta Get started pill stays visible in the bar

**Hero**
- summary: White hero, 823px tall under the nav: a full-width canvas of workflow lines, pills and avatars frames a centred two-line 102px Light headline with one gradient phrase, a grey lead, two outline sign-up pills (Google, Microsoft), an "or" divider, an email field with a black Continue pill, and a legal line.
- desktop: section y 56-879 (the hero starts 12px under the top of the 68px nav, which overlays it), ground #FFFFFF, everything centred. Follow the y anchors below, not a padding value: the H1 starts 197px below the section top; workflow canvas PLACE hero-workflow-desk.png (1440x823, transparent) as an absolutely positioned layer at x 0, y 56, behind the copy (z below the text). Never redraw it; vertical anchors H1 top y 253 (line 1 "The OS for" baseline box y 253-345, line 2 y 345-437); lead y 465-498; sign-up pills y 515-584; "or" row y 584-640 (text y 600); form row y 640-690; legal line y 706-726; section bottom y 879; text max width H1 box x 283-1156 (873px), centred; exactly 2 lines with a forced break after "The OS for" and no wrap inside line 2 (white-space: nowrap; Figtree may run up to about 900px); lead 521px single line; form column x 451-989 (537px); sign up pills two 265x69 pills side by side (x 451 and x 724, 8px gap): #FAFAFA fill, 1px solid #6E6E6E, radius 100px, padding 16px; content centred: 35px white disc holding the 24px colour Google G (icon-google.svg) or the four-square Microsoft logo (icon-microsoft.svg), 8px gap, label "Google" / "Microsoft" 16px 500 #0D0D0D; or divider row 537px wide, padding 16px 0: two 1px #CFCFCF lines (249px each) either side of "or" 16px 300 #6E6E6E, 12px gaps, line at y 611; form email input 388x50 (x 451): #FFFFFF, 1px solid #CFCFCF, radius 4px, padding 12px 16px, placeholder "name@company.com" 16px 300 #6E6E6E. At rest in the reference the field is focused: 1px #005FCC ring. 16px gap, then Continue pill 134x50 #0D0D0D, 16px 500 #FFFFFF, radius 100px, padding 12px 32px; legal ONE line on desktop (white-space: nowrap; it is 537px wide in the real face and may run a few px wider in Figtree), centred 13px/19.5px #0D0D0D (Figtree 350), 0.26px tracking: a one-sentence consent line linking Terms of Service and Privacy Statement, both link phrases underlined; cta size 134x50 (Continue); sign-up pills 265x69
- phone: order H1 (3 lines), lead (2 lines), Google + Microsoft pills side by side, or, field + Continue row, legal (2 lines), then the workflow graphic below the form; alignment centred, 24px side gutters; sizes section y 64-863 (overflow hidden); H1 48px/43.2px -0.96px, lines "The OS for" / "human-agent" / "teams", y 96-226; lead 18px/23.4px 0.36px y 242-297; pills 167x58 each (8px gap, filling the 342px column) y ~306, labels 14px 500; or y 381; input 201x47 + Continue 125x47 (14px 500) y 418; legal 12px/18px y 481-517; workflow canvas PLACE hero-workflow-phone.png (390x707, transparent) at x 0, y 257 behind the copy; its drawing sits in the lower half, below the form (y ~550-830)
- at rest: ground #FFFFFF; state the workflow canvas animates on the site; the supplied PNG is the resting frame the reference shows; gradient the phrase "human-agent" starts coral at "h" and ends pink at "t" (background-size 200%, position 0%)
- type: H1 TWK Lausanne 300 102px/91.8px, -2.55px, #0D0E10 (set Figtree 400); lead 26px/33.8px, 0.52px, rgba(62,62,62,0.8) (set Figtree 350)
- cta: Continue (black pill) after an email field; Google and Microsoft single sign-on pills above
- proof: none in the hero; the logo band follows
- media: the workflow canvas only (avatars, Worklings, task pills joined by coral-to-pink lines); no photo panel

**Customer logo band**
- summary: A two-line stat at left and five customer logos in a row at right.
- ground: #FFFFFF
- desktop: y 959-1087 (80px below the hero). Heading "85% of Fortune 100 companies choose Asana¹" 30px/36px 400 #0D0D0D at x 76, w 376, 2 lines (break after "100"), vertically centred. Five logo images 150x100 each at x 516, 691, 865, 1040, 1214 (174.5px pitch), y 973, object-fit fill (the files carry their own padding)
- phone: y 911-1061: heading 20px/28px 400, 2 lines, x 25; logos 105x70 in a continuously scrolling marquee row at y 991 (at rest: Dell, Merck, Amazon visible from x 24)
- anatomy:
  - Logos: logo-amazon.png, logo-accenture.png, logo-jj.png, logo-dell.png, logo-merck.png in that order, black monochrome
  - The superscript ¹ ties to the footnote printed in the closing dark band
- components:
  - logo row

**AI that works the way your team works**
- summary: Section H2, then a dark product image left and a four-item accordion right.
- ground: #FFFFFF
- desktop: y 1207-2035. H2 54px/54px -1.08px #0D0D0D at x 76, 2 lines (break after "your"; allow the box up to 660px so Figtree keeps that break). Row from y 1379: media 628x629 at x 76, radius 16px (workgraph.jpg, a dark #0D0D0D network diagram); accordion column x 846-1364 (518px), top-aligned with the image: its first rule sits at y 1379, the same y as the image top (align-items: start, never centred)
- phone: y 1109-1961: H2 30px/33px -0.6px, 2 lines; accordion first (x 25, 340 wide); the open item's image (340x341, radius 16px) sits under its body text; closed items below
- anatomy:
  - Accordion: 4 items, each with a 1px #E7E7E7 rule at the top (and one under the last); a 2px #0D0D0D progress segment runs from the left end of the open item's top rule (about 22-32px long at rest; it grows as the item auto-advances: animation only)
  - Item header: title 24px/28.8px 500 #0D0D0D left, a 24px #F3F3F3 disc with a 12px chevron at right (up when open, down when closed)
  - Open item (first, "Asana Work Graph®"): padding 32px 0, title then 18px gap, body 20px/30px 300 0.4px #3D3D3D, 4 lines
  - Closed items: Multiplayer, Shared memory, Enterprise governance, each 100px tall (32px padding); toggle icon chevron-up.svg / chevron-down.svg at 12px
  - Body length when open: 30-38 words, 4 lines at 518px; the open item measures 266px from its top rule to the next rule
- components:
  - accordion

**AI Teammates carousel**
- summary: Eyebrow, H2, lead and an outline Learn more pill; then a row of white Teammate cards running off the right edge, with two round arrows above.
- ground: #FFFFFF
- desktop: y 2195-3365. Eyebrow "AI TEAMMATES" 16px/24px 500 uppercase 0.64px #0D0D0D at x 76 y 2195; H2 "Your team just got bigger" 54px y 2227 (1 line); lead 16px/24px 0.32px, about 30 words in 3 lines, w 628, y 2297; Learn more outline pill 149x58 y 2393. Arrows: two 44px circles at x 1260 (prev, disabled: #F3F3F3 fill, 1px #D5DCE0 ring, grey arrow) and x 1320 (next: #0D0D0D fill, white arrow), y 2495. Cards from y 2555: 304x796, x 76, 402, 727, 1053, 1379 (326px pitch, 22px gaps); the 5th card is cut by the viewport edge
- phone: y 2009-3064: eyebrow 11px/16.5px 0.44px; H2 30px; lead 14px/21px; Learn more 122x47; cards 299x733 at x 25 and 330 (second card peeks), no arrows
- anatomy:
  - Card: #FFFFFF, 1px solid #E7E7E7, radius 8px; top image 302x129 flush to the top edge (radius 7px 7px 0 0): the Teammate's Workling on white (teammate-*.png)
  - Vertical positions inside the 796px card (from its top edge): image 1-130; name at 195 (a 41px gap under the image plus 24px padding); tagline 240-330; "Integrations" 354; icon row 381-413; "Skills" 437; chips from 469 to about 596; rule at 613; prompts at 630, 681 and 732; 24px bottom padding. Content fills the card: no empty band
  - Card body padding 24px: name 24px/28.8px 500; tagline 20px/30px 300 0.4px #3D3D3D, 3 lines; "Integrations" 13px 300 #6E6E6E then a row of 32px white discs (1px #F3F3F3 ring) each holding an 18px app icon, overlapping at 26px pitch
  - "Skills" 13px 300 #6E6E6E then chips: 11px/16.5px 500 uppercase 0.44px #0D0D0D on #F3F3F3, radius 4px, padding 4px 8px, 4px gaps, wrapping; a "+N" chip ends the list
  - A 1px #E7E7E7 rule, then three example prompts: 16px check-circle outline icon + 13px/19.5px 300 text, 2 lines each, 12px apart
  - Card order: Launch Coordinator, Portfolio Advisor, Compliance Manager, Project Manager, Content Writer
  - Content density per card: tagline 8-11 words (3 lines); 1-7 integration icons; exactly three skill chips of 2-5 words each (long ones wrap to 2 lines inside the chip) plus a +N chip; three prompts of 7-12 words (2 lines each)
  - Skill chips as published: Launch Coordinator: Event Logistics Tracking, Vendor & Speaker Management, Cross-Functional Launch Alignment, +8. Portfolio Advisor: Portfolio Health Monitoring, Cross-Portfolio Dependency Mapping, Strategic Alignment, +7. Compliance Manager: Compliance Controls Monitoring, Audit Evidence Collection, Policy Writing, +7. Project Manager: Project Scoping & Task Breakdown, Timeline & Dependency Planning, Blocker & Dependency Flagging, +3. Content Writer: Brief Writing, Template Automation, Meeting Summary & Action Capture, +5
  - Integration icons: card 1 Drive, Microsoft, Slack, Gmail, Outlook, HubSpot; card 2 Slack; card 3 Drive, Microsoft; card 4 Drive, Microsoft, Slack, Gmail, Outlook, Figma; card 5 Drive, Microsoft and more
  - Prompt icon: 16px outlined circle with a check mark, 1.2px #0D0D0D line, at x 25 of the card; prompt text starts at x 49
  - Arrow icons: arrow-left-grey.svg in the disabled prev button, arrow-right-white-sm.svg in the next button, both 21px
- components:
  - teammate_card
  - skill_chip
  - carousel_arrow
  - button_outline

**Products (dark tabbed carousel)**
- summary: A dark rounded band: white H2, a row of five product pills (first active in pink), and a centred grey product card with neighbours peeking either side.
- ground: #0D0D0D
- desktop: y 3525-4695: panel x 28-1412 (1384px), radius 20px, padding 120px 48px (the area outside the panel is also #0D0D0D, so it reads full-bleed). H2 "Deliver real productivity for every team" 54px #FFFFFF, 2 lines broken after "for" ("Deliver real productivity for" / "every team"), x 76 y 3645. Pills at y 3793 from x 105, 8px gaps: 56px tall, radius 64px, padding 16px 32px, 16px 500: active "Agentic Work Management" #FFC9FF fill + #0D0D0D text; others #3D3D3D fill + #FFFFFF text (Asana Service Management, Asana Client Management, Command by Asana, StackAI by Asana). Card at y 3897: 936x678, x 252-1188, flat #3D3D3D, radius 20px, padding 32px 24px 0 32px. No visible texture at rest (a dot grid fades in only on hover: opacity 0 at rest). Neighbour cards sit 40px away at both sides at opacity 0.3: left = StackAI by Asana (product-stackai-ui.jpg showing at its right edge), right = Asana Service Management
- phone: y 3113-4073, full-bleed #0D0D0D, no radius: H2 30px; the five pills stack vertically, centred, 45px tall, 8px gaps; card 318x413 at x 36 (icon 36px, body 12px/18px, UI image 286x165 at the bottom), next card peeks at x 366
- anatomy:
  - Card header: 64x64 product icon tile (product-icon-awm.svg: white four-dot mark on a #FFC9FF rounded square), 24px gap, title "Agentic Work Management" 20px/30px 400 #FFFFFF, body 16px/24px 300 0.32px #E7E7E7, 3 lines, w 520
  - Card media: product-awm-ui.jpg 880x508 at x 284, y 4067, radius 8px 8px 0 0, flush to the card bottom (the UI screenshot fades to pink at its foot)
  - Right neighbour shows product-service-ui.jpg and product-icon-service.svg (green tile); left neighbour shows product-stackai-ui.jpg
  - Body lengths: Agentic Work Management 27 words (3 lines); Service Management 12; Client Management 12; Command by Asana 8; StackAI by Asana 15
  - A Learn more outline pill (13px 500 white, 1px #FAFAFA ring, #0D0D0D fill) sits at the card's top right only on hover; not visible at rest
- components:
  - product_tab
  - product_card

**Customer quote**
- summary: A workflow-line divider image, then a rounded photo left and a logo, quote and attribution right.
- ground: #FFFFFF
- desktop: y 4735-5362 (40px under the dark band). Divider: workflow-divider-1.png 1288x127 at x 76 y 4735 (radius 16px, fill). Row from y 4942: photo cos-photo.jpg 628x419 radius 16px at x 76; right column x 736-1364: COS logo cos-logo.png 580x40 (contain, left) at y 4946; 48px #F3F3F3 disc with a black closing-quote glyph at x 1316 y 4942; quote 36px/46.8px 300 -0.36px #0D0D0D at y 5022, 5 lines, w 628; name "Simone Williams" 16px/24px 500 0.4px y 5288; title 13px/19.5px 300 y 5312
- phone: y 4120-4741: divider 340x34; photo 340x227 at y 4202; logo 340x40; quote 20px/26px 300, 5 lines; name 12px 500; title 12px 300
- anatomy:
  - Quote text: a 26-word customer quote on scaling workflows and using AI with intention to gain visibility and speed (5 lines at 628px); it opens "By building scalable workflows"
  - Attribution: Chief Digital, Technology & Business Development Officer, COS
  - Set the quote with NO quotation marks in the text: the only quote glyph is quote-mark.svg (20px, #0D0D0D) inside the 48px #F3F3F3 disc at the top right
- components:
  - quote_block

**Get started easily**
- summary: A rounded off-white panel: H2 and lead at left, three white link cards with black round arrow buttons at right.
- ground: #FAFAFA
- desktop: y 5442-6140: panel x 28-1412, radius 20px, padding 120px 48px, #FAFAFA on the white page. H2 54px x 76 y 5562 (1 line), lead 20px/30px 0.4px #0D0D0D, about 18 words in 2 lines, w 518, 24px under the H2. Cards at x 736, w 628, h 142, 16px gaps (y 5562, 5720, 5878): #FFFFFF, radius 10px, padding 32px; title 30px/36px 400 #0D0D0D, subline 20px/30px 300 #6E6E6E, 12px apart; 59px #0D0D0D circle with a 32px white arrow-right, right-aligned and vertically centred
- phone: y 4789-5297, panel full-bleed (no radius): H2 30px, lead 15px; cards 342x87 (title 20px/28px, subline 15px), 8px gaps
- anatomy:
  - Cards: "Try the Asana demo" / "See Asana in action"; "Discover resources" / "Help articles and tutorials"; "Start with a template" / "Get started faster with a template"
- components:
  - link_card

**Why projects slip when work is scattered**
- summary: Second workflow-line divider, then a centred H2 over three problem columns with line icons.
- ground: #FFFFFF
- desktop: Divider workflow-divider-2.png 1288x127 at y 6220. Section y 6427-6927: H2 54px centred, x 406-1034 (628px), 2 lines (break after "when"); three columns 408px wide at x 76, 516, 956 (32px gaps): 48px line icon at y 6575 (icon-tasks.svg, icon-dependency.svg, icon-rules.svg), title 30px/36px 400 at y 6635 (2, 2 and 1 lines), body 20px/30px 300 0.4px #0D0D0D, 6-7 lines
- phone: divider 340x34 at y 5345; H2 30px centred y 5427; columns stack (title 20px/28px, body 15px/22.5px), about 311px pitch
- anatomy:
  - Column titles as published: "Projects are spread across tools and inboxes", "No shared view of progress and deadlines", "Status updates eat the week"
  - Bodies 47, 52 and 58 words: concrete scenes (a spreadsheet, chat, email; a contract stalled in review; Friday status decks)
  - Third column ends with the line "This is exactly what we built Asana to fix." as its own paragraph
- components:

**Closing CTA band**
- summary: A dark rounded panel: white H2 left, white Get started pill right, the stat footnote and a rule underneath.
- ground: #0D0D0D
- desktop: y 7047-7518: panel x 28-1412, radius 20px, padding 120px 48px (outer ground also #0D0D0D, so it joins the footer). H2 "The only platform that can support your company at any scale" 54px 300 #FFFFFF, 3 lines, w 628, x 76 y 7167; Get started pill 168x64 at x 846 y 7167: #FFFFFF fill, 20px/30px 400 #0D0D0D, radius 100px; footnote "1. Accurate as of December 2023, includes free and paid users." 13px #FFFFFF at y 7409; 1px #565656 rule x 76-1364 at y 7476; the panel ends at y 7518, 42px under the rule (so the bottom padding is 42px, not 120)
- phone: y 6516-6865, full-bleed: H2 30px/33px 3 lines; Get started 128x49 (15px 500) under it; footnote 12px
- anatomy:
  - The band runs straight into the footer with no visible seam
- components:
  - button_primary_on_dark

**Footer**
- summary: Black footer: coral logomark at left, five link columns, then a bottom row with copyright, language, five white social discs, Terms & Privacy and the two app-store badges.
- ground: #0D0D0D
- anatomy:
  - Main area y 7517-8259, padding 80px 0: coral logomark (asana-logomark.svg) 32px at x 76 y 7593
  - Columns at x 188, 407, 626, 844, 1063 (219px pitch, 189px wide): headings 14px/24.5px 500 #FFFFFF at y 7597; links 16px/24px #F3F3F3 (Figtree 400, not heavier) from y 7657, 38.5px pitch, no underline
  - Column 1: New to Asana?: Product overview, All features, Latest feature release, Pricing, Starter plan, Advanced plan, Enterprise, App integrations, AI work management, Project management, Resource management
  - Column 2: Use cases: Campaign management, Content calendar, Creative production, Goal management, New hire onboarding, Organizational planning, Product launches, Resource planning, Strategic planning, Project intake, Task Management, All use cases
  - Column 3: Solutions: Small business, Marketing, Operations, IT, Product, Sales, Healthcare, Retail, Government, Education, Manufacturing, Nonprofits, Agencies, All teams
  - Column 4: Resources: Help Center, Get support, Asana Academy, Certifications, Forum, Resource center, Events and webinars, Project templates, Customer Success, Developers and API, Partners, Sitemap
  - Column 5: Company: About us, Leadership, Customers, Careers, Inside Asana, Culture, Press, Investor relations, Trust and security, Privacy, Supplier responsibility, Sustainability and ESG
  - Bottom row y 8259-8363 (#0D0D0D): "© 2026 Asana, Inc." 14px #FFFFFF at x 173; globe-light.svg at 20px + "English" 14px #F3F3F3 at x 380; social discs 32px #FFFFFF with 16px #0D0E10 glyphs (social-x.svg, social-linkedin.svg, social-instagram.svg, social-facebook.svg, social-youtube.svg) at x 542-714, 3px apart; "Terms & Privacy" 14px #FFFFFF at x ~800; App Store badge 120x40 (badge-app-store.svg) at x 991 and Google Play badge 135x40 (badge-google-play.svg) at x 1116, y 8291
- phone: logomark top left (x 31), columns in 2 columns at x 31 and 210 (New to Asana? + Use cases, Solutions + Resources, Company), then the bottom row stacked and centred

**On dark grounds**
- secondary button: On dark: #FFFFFF pill with #0D0D0D text (Get started 168x64); outline variant #0D0D0D fill with 1px #FAFAFA ring and white 13px 500 text
- link: #FFFFFF / #F3F3F3, no underline
- muted text: #E7E7E7 body on #3D3D3D cards
- hairline: #565656 1px
- logo variant: coral logomark alone in the footer; combination logo with a white wordmark (asana-logo-on-dark.svg) when a full logo is needed on black

## Components

- **button primary** (observed): fill #0D0D0D, text #FFFFFF, radius 100, height 50, padding x 32, font size 16, weight 500, face body, example Continue 134x50; nav Get started 105x44 (14px, padding 0 16px). pill radius 100px
  - hover (observed): fill #6E6E6E, transition background-color 0.15-0.3s
- **button secondary nav** (observed): fill #FFFFFF, text #0D0D0D, radius 100, height 44, padding x 16, font size 14, weight 500, face body, example Contact sales 120x44, ring #0D0D0D, ring px 1
  - hover (observed): fill #FAFAFA, transition 0.3s
- **button outline** (observed): fill #FAFAFA, text #0D0D0D, radius 100, height 58, padding x 32, font size 16, weight 500, face body, example Learn more 149x58 (padding 16px 32px), ring #6E6E6E, ring px 1
  - hover (observed): fill #F3F3F3, transition color 0.3s, border 0.3s
- **button sso** (observed): fill #FAFAFA, text #0D0D0D, radius 100, height 69, padding x 16, font size 16, weight 500, face body, example Google / Microsoft 265x69: 35px white disc with the provider icon, 8px gap, label, ring #6E6E6E, ring px 1
- **button primary on dark** (observed): fill #FFFFFF, text #0D0D0D, radius 100, height 64, padding x 32, font size 20, weight 400, face body, example Get started 168x64 (20px 400)
- **button secondary** (observed): fill #FAFAFA, text #0D0D0D, radius 100, height 58, padding x 32, font size 16, weight 500, face body, example Learn more 149x58: the outline pill beside or after a black primary, ring #6E6E6E, ring px 1
  - hover (observed): fill #F3F3F3, transition color 0.3s, border 0.3s
- **card** (observed): fill paper, on surface, radius 8, border 1px solid #E7E7E7. Card: white, 1px #E7E7E7 border, 8px corners (Teammate cards); link cards use 10px on #FAFAFA panels; media 16px; panels 20px.
- **product tab** (observed): fill #3D3D3D, text #FFFFFF, on #FFC9FF, radius 64, height 56, padding 16px 32px, text style 16px 500. active tab: #FFC9FF fill, #0D0D0D text
- **input** (observed): fill #FFFFFF, border 1px solid #CFCFCF, radius 4, height 50, padding 12px 16px, text style 16px, Figtree 350, focus 1px #005FCC ring
- **teammate card** (observed): fill #FFFFFF, border 1px solid #E7E7E7, radius 8, size 304x796 desktop, 299x733 phone, padding 24px
- **skill chip** (observed): fill #F3F3F3, text #0D0D0D, radius 4, padding 4px 8px, text style 11px/16.5px 500 uppercase 0.44px
- **carousel arrow** (observed): size 44px circle, next #0D0D0D fill, white arrow, prev disabled #F3F3F3 fill, 1px #D5DCE0 ring, grey arrow
- **accordion** (observed): rule 1px #E7E7E7, progress 2px #0D0D0D segment on the open item's top rule, toggle 24px #F3F3F3 disc with chevron, item padding 32px 0
- **product card** (observed): fill #3D3D3D, radius 20, padding 32px 24px 0 32px, size 936x678, texture none at rest; a 14px white dot grid (radial-gradient(rgba(255,255,255,0.35) 0.72px, transparent 1.2px)) fades in on hover, neighbours opacity 0.3
- **link card** (observed): fill #FFFFFF, radius 10, padding 32px, size 628x142, arrow 59px #0D0D0D circle, 32px white arrow
- **quote block** (observed): mark 48px #F3F3F3 disc, black closing-quote glyph, text style 36px/46.8px 300 -0.36px, photo radius 16
- **panel** (observed): radius 20, inset x 28-1412 (1384px), padding 120px 48px, grounds #0D0D0D or #FAFAFA

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| image-reveal | cubic-bezier(0, 1.08, 0.77, 1.01) | 500ms | Accordion media panel entrance (0.25s delay, slight overshoot) | observed |
| button-hover | ease | 300ms | Nav and section buttons: black fill to #6E6E6E, white to #FAFAFA, outline to #F3F3F3 | observed |
| form-button-hover | ease-in-out | 150ms | Hero Continue and the Google/Microsoft buttons | observed |
| headline-gradient-drift |  |  | Hero gradient phrase: background-size 200% (coral, pink, coral) at position 0% at rest; any drift is animation only | observed |

## Icon tokens

Grid not published, stroke Worklings: bold black outline line around a white shape (weight not published) (published).
| Name | Size | Use |
|---|---|---|
| problem-icon | 48px | Line icons over problem columns (observed) |
| integration | 18px | App icons inside 32px white discs on teammate cards (observed) |
| product-tile | 64px | Product icon tile in the dark carousel (observed) |

## Signature moves

### Coral-to-fuchsia gradient phrase

Where: one phrase of a hero or billboard headline (human-agent, workflow, agent).
Do: Linear gradient left to right through the phrase only: Asana Coral #FF584A to Fuchsia #FD3FFD on light grounds, Coral to Light Fuchsia #FFC9FF on dark. On asana.com the span is coded #FF453E 0%, #F481F4 50%, #FF453E 100% at background-size 200% (so at rest it reads coral to pink across the phrase) with background-clip text. Rest of the headline stays Asana Black or white. One gradient phrase per headline, in simple layouts where type is the focal point.
Don't: use gradients that feel too intense or hurt legibility, or gradient whole paragraphs.
Example: "The OS for human-agent teams", with "human-agent" set as color.

### Workflow lines and nodes

Where: hero and billboard backgrounds, section dividers, diagrams.
Do: Thin lines run as one continuous path from plan to outcome with rounded 90-degree turns; important, active stretches carry a Coral #FF584A to Light Fuchsia #FFC9FF gradient, the rest Light Grey #D7D9DB. Small Asana Black #0B0505 dot nodes with an Asana Grey #F3F3F3 outline sit where the line meets a pill, avatar or task card. One continuous path per composition.
Don't: draw the workflow as a circle or a loop: it should never look stuck.
Example: "Launch Planner: GTM in 4 weeks", with "GTM in 4 weeks" set as box.

### Product-native pills

Where: on workflow paths and in copy-led layouts.
Do: White rounded frames from the Asana interface: Human + Agent (avatar plus Worklings), Human + Description, Actions, Resource, Task + Agent, Task + Human, Text only. Each carries a subtle Asana Pink #FFC9FF drop shadow; small colored label tags (Light Green, Light Yellow, Light Purple) name the agent.
Don't: let pills overpower the headline; typography leads.
Example: "Reviewer Kim", with "Kim" set as box.

### Infrastructure dot grid

Where: only behind brand diagrams and workflows.
Do: A dotted grid derived from the logo's dots, spaced at 10x (x = dot size): #C4C7C9 dots on light grounds, #FFFFFF on dark. Masked by a free shape and faded so it reads as infrastructure under the content; may carry a soft gradient (#FF1CFF, #FFFFFF, #FF584A). On asana.com it appears inside the workflow graphics; the dark product cards only reveal a 14px white dot grid (masked to the top-right corner) on hover.
Don't: use the grid as a general texture or let it reduce readability.
Example: "Agentic Work Management".

### Worklings (AI Teammate characters)

Where: anywhere an AI agent appears: product icons, pills, cards, over photography.
Do: Each AI Teammate is a blob character with two simple eyes. Product icons: white shape, bold black outline, one solid palette color circle behind. Expressive icons: dimensional, softly lit color shapes used mainly over photography.
Don't: mix product and expressive styles in one composition or redraw a Workling with new features.
Example: "Launch Coordinator".

## Messaging: rules

The FY27 guide carries its messaging inside the visuals: the billboard line "The OS for human-agent teams", the poster line "Where humans + agents workflow together" and "Work has a new flow." The homepage repeats the first as its H1 (in one A/B variant) and backs it with four pillars: Work Graph, Multiplayer, Shared memory and Enterprise governance.

Why it works: One idea, people and agents working in the same flow, is said in words, drawn as workflow lines and shown as Worklings beside human avatars.

- Lead with humans and agents together
- Back claims with the Work Graph, multiplayer, shared memory or governance
- Keep the customer-count stat with its dated footnote

Real examples, to look at on Asana's own pages (not for reuse):
- Billboard: The OS for human-agent teams: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=40

Sources: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=40, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=41, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=42, https://asana.com/company, https://asana.com/

## Voice: rules

Not published in the guide. On asana.com: sentence-case declaratives, short problem statements in plain words (spreadsheets, chat, Friday status decks), and claims about humans and agents working together. The trademark guidelines add one hard rule: Asana is an adjective.

Why it works: Plain, concrete copy suits a product sold as relief from "work about work".

- Sentence case headlines
- We to you
- Name the concrete work
- Asana as an adjective, never a verb, plural or possessive
- Don't use Asana as a verb or plural
- Don't imply sponsorship or endorsement by Asana

Not published: tone of voice, word lists or editorial style.

Sources: https://asana.com/brand, https://asana.com/, https://asana.com/company

## Logo: rules

Two lockups: the combination logo (coral three-dot logomark left of the lowercase asana wordmark) and the logomark. The web brand page (updated June 25, 2026) also names a vertical lockup for space-constrained digital displays. The symbol is always coral; the wordmark is black on white or light grey and white on black.

Why it works: Three dots arranged as a triangle read as people coming together; keeping them coral everywhere makes the mark recognizable at any size.

|  |  |
|---|---|
| Clear space | height of the symbol |
| Symbol color | Asana Coral #FF584A |
| Wordmark | Asana Black #0B0505 or white |

- Horizontal combination logo for most communications; vertical only when space is constrained
- Clear space for both lockups equals the height of the symbol (web brand page)
- Dark backgrounds: white wordmark (#FFFFFF), coral logomark (#FF584A)
- Color backgrounds: all-white logo on dark color, all-black (#0B0505) on light color
- Black and white: white logo on black, black logo on white
- Partnerships: logos equal in size and optically balanced, separated by the width of the three-dot symbol; Asana left of or above the partner in Asana-led co-branding
- Don't fill the logo with unapproved colors
- Don't rotate, reflect or angle the logo
- Don't rescale or remove parts of the logo
- Don't place images or icons behind or in front of it
- Don't distort or skew it
- Don't restack or rearrange its elements
- Don't add 3D or gradients
- Don't use low-contrast colorways
- Don't use past versions
- Don't use secondary brand colors as backgrounds (web page)
- Don't use the wordmark without the symbol

Not published: minimum size.

Real examples, to look at on Asana's own pages (not for reuse):
- Logo variations: combination logo and logomark: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=4
- Approved logo colorways: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=5
- Logo misuse: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=6

Sources: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=4, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=5, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=6, https://asana.com/brand

## Color: rules

Six primaries (Asana White, Asana Black, Asana Coral, Fuchsia, Light Fuchsia, Neutral Grey), a secondary set (Blue, Green, Yellow, Grey with light tints) and a tertiary set (Magenta, Turquoise, Purple, Orange with tints), each with RGB, CMYK and Pantone. Content modules sit on white or black; coral and fuchsia arrive as the logo, a gradient phrase and accents.

Why it works: Neutral black-and-white modules keep product content legible, so a single coral-to-fuchsia gradient carries the brand energy.

|  |  |
|---|---|
| Gradient on light | #FF584A to #FD3FFD |
| Gradient on dark | #FF584A to #FFC9FF |
| Site gradient (observed) | #FF453E to #F481F4 |

- Primary pairings: White/Black, Grey/Black, Fuchsia/Black, Pink/Black, Pink/Fuchsia, White/Fuchsia, Grey/Fuchsia, White/Coral, Pink/Coral, White/Dark Grey
- Secondary pairings: light tints with Asana Black; Blue, Green and Yellow with Asana White
- Content modules: white or black grounds; black buttons with a Light Fuchsia secondary
- Gradients: coral to fuchsia on light, coral to light fuchsia on dark, on headline type only
- Choose any extra pairing for clarity, accessibility and consistency
- Don't fill a content module with Coral or Light Fuchsia behind body copy (the guide's usage page marks these wrong)
- Don't set fuchsia copy on a pink ground
- Don't make gradients intense enough to hurt legibility

Not published: color proportions or ratios; a contrast standard.

Do and don't:
- Do: "The OS for human-agent teams". A coral-to-fuchsia gradient on one phrase of a Light headline, everything else black (guide p.10).
- Don't: "Amplify your impact with AI". A coral content module behind headline and body copy: the guide marks it wrong (p.11).
- Do: "View demo". Light Fuchsia pill as the secondary CTA beside a black one (guide p.16).
- Don't: "What work will your AI Teammates do?". Fuchsia copy on a pink ground lacks contrast (guide p.11).

Real examples, to look at on Asana's own pages (not for reuse):
- Color palette with RGB, CMYK and Pantone: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8
- Approved color pairings: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=9
- Headline gradients on light and dark: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=10
- Color usage: do and don't for content modules: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=11

Sources: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=9, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=10, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=11

## Typography: rules

One family, TWK Lausanne, a Swiss sans in three weights: 300 (primary: titles and copy), 600 (secondary: CTAs) and 900 (tertiary: eyebrows and subtitles). The guide publishes a full size scale from 12 to 128px with line heights from 130% down to 100% and tracking down to -3%. Arial is the fallback. asana.com sets everything in Lausanne 300-500.

Why it works: Very large Light headlines with tight tracking feel calm and modern, and leave the coral-to-fuchsia phrase to carry the emphasis.

|  |  |
|---|---|
| Face | TWK Lausanne 300 / 600 / 900 |
| Fallback | Arial |
| Stand-in (ours) | Figtree at real weight +100 |

- Titles and copy in 300; CTAs in 600; eyebrows and subtitles in 900 (guide)
- Line height shrinks as size grows: 130% at 12-16px, 120% at 20-24, 115% at 32-36, 110% at 40-64, 100% at 96-128 (300 weight)
- Tracking 0 at 12-20px, -2% at 24-64px, -3% at 96-128px (300); -2.5% at 96+ for 600 and 900, -1.5% for 900 at 24-64
- Metric kerning throughout
- Fallback: Arial Regular and Bold
- Sentence case
- Don't use other typefaces in brand layouts

Real examples, to look at on Asana's own pages (not for reuse):
- Type hierarchy: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=16
- Type scale, TWK Lausanne 300: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=18

Sources: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=14, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=15, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=16, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=17, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=18, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=19, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=20

## Graphic elements: rules

Three product-derived elements: the infrastructure dot grid (from the logo's dots), workflow lines with nodes (connecting humans, agents, tasks and projects) and pills (interface frames for people, agents, tasks and resources).

Why it works: Every element is a piece of the product's own UI, so a billboard reads as Asana even without the logo.

- Dot grid only behind brand diagrams; masked and faded; #C4C7C9 dots on light, #FFFFFF on dark, 10x spacing
- Workflows tell one continuous story from plan to outcome; gradient marks the active path
- Nodes: Asana Black #0B0505 dot with an Asana Grey #F3F3F3 outline
- Pills carry a subtle Asana Pink #FFC9FF drop shadow
- Don't draw workflows as loops or circles
- Don't let pills overpower the type
- Don't use the grid as decoration without a diagram

Real examples, to look at on Asana's own pages (not for reuse):
- Infrastructure grid: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=36
- Workflow and nodes: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=37
- Pills: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=38

Sources: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=36, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=37, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=38

## Iconography: rules

AI Teammates appear as Worklings, blob characters with two simple eyes. Product icons: white shape, bold black line, colored circular background, built for recognition at any size. Expressive icons: dimensional, softly lit versions for marketing, mainly over photography.

Why it works: Giving each agent a face makes "human-agent teams" literal: agents sit beside human avatars as teammates.

- Product style in product and graphic elements
- Expressive style for marketing, mainly over photography
- Colored backgrounds from the palette

Not published: icon grid, stroke weight or sizes.

Real examples, to look at on Asana's own pages (not for reuse):
- Workling product icons: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=31
- Workling expressive icons: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=32

Sources: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=31, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=32, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=33

## Photography: rules

Art direction "Human at the Center": people at the core of every frame, shot with a fisheye lens so the environment bends around them, close, active, often engaging the camera, in bright high-contrast light. Avatars are cropped to a circle around the face.

Why it works: The fisheye bend says systems support people rather than overpower them, the same idea as the tagline.

- Fisheye lens, subject centred
- Subjects close, active, interacting with the camera or in motion
- Bright, high-contrast lighting
- Avatars: circular crop centred on the face
- Don't crop avatars so the face is small or off-centre in the circle

Real examples, to look at on Asana's own pages (not for reuse):
- Art direction: Human at the Center: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=25
- Avatar cropping, correct and incorrect: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=28

Sources: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=25, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=26, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=27, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=28, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=29

## Motion: rules

Not published in the guide. On asana.com the hero workflow animates on a canvas, accordion images enter with a short overshoot (0.5s cubic-bezier(0, 1.08, 0.77, 1.01)), and buttons fade their fill in 0.15-0.3s.

- Media reveal: 0.5s cubic-bezier(0, 1.08, 0.77, 1.01), 0.25s delay
- Button hover: background fade 0.3s (0.15s on form buttons)

Not published: motion principles, durations or easing.

Sources: https://asana.com/

## Interface and layout: rules

The guide shows applications, not a grid: big Light headline centred or top-left, a workflow of pills around it on a faded dot grid, asana.com in a corner. The homepage is white with rounded inset black and off-white panels, a 1288px content column and two 628px columns.

- Lots of white; type leads
- Rounded inset panels (radius 20px) for dark and off-white bands
- Pill buttons only

Not published: a grid, margins or spacing scale.

Real examples, to look at on Asana's own pages (not for reuse):
- Poster layout: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=41
- Digital billboard layout: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=43

Sources: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=40, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=41, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=42, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=43, https://asana.com/

## Rules: rules

The guide's do and don't pages cover the logo and color modules; the web brand page adds trademark rules.

- Symbol always coral
- Content modules on white or black
- One gradient phrase per headline
- Workflows never loop
- Worklings: product or expressive style, one per composition
- Asana is an adjective
- Don't recolor, distort or rebuild the logo
- Don't use secondary colors as logo backgrounds
- Don't imitate Asana's look as your own brand (trademark guidelines)

Sources: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=6, https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=11, https://asana.com/brand

## Campaigns

### The OS for human-agent teams (FY27 identity) (2026)

The 2026 Brand Identity Guidelines show the identity applied to out-of-home: a giant billboard and a digital billboard carrying "The OS for human-agent teams", a poster with "Where humans + agents workflow together", and a street-level board with "Work has a new flow." The homepage tests the same line as its H1.

How the system shows: Light Lausanne headline with one gradient phrase, Worklings and human avatars in pills joined by coral-to-pink workflow lines on a faded dot grid, asana.com in a corner.
Why it works: The layout is the product promise: the workflow drawn around the headline shows people and agents working together before any copy is read.
Channels: billboard, poster, street-level billboard, digital billboard, web. Source: https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=40

## Applications

| Format | What | Source |
|---|---|---|
| billboard | White board, logo top centre, centred two-line headline with a gradient phrase, workflow pills around it, lead line under it. | https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=40 |
| poster | Portrait: logo top left, asana.com top right, three-line left-aligned headline with a gradient word, workflow of Workling and avatar pills down the right. | https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=41 |
| street-level billboard | Fisheye photo of a person with task pills and the line "Work has a new flow." | https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=42 |
| digital billboard | Landscape screen: centred "The OS for human agent teams" with avatar and Workling pills inside the line, workflow around it. | https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=43 |
| web page | asana.com homepage: white page, centred 102px Light headline with a gradient phrase over a workflow canvas, black pill buttons, rounded dark panels. | https://asana.com/ |

## By format

How our engine applies Asana's system to each format. This is our recipe built from their rules, not something Asana publishes. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Build it the way asana.com is built (kit.spec.page): white page, sticky white 68px nav with pill buttons, centred Light hero headline (stand-in Figtree 400) with one coral-to-pink gradient phrase over the workflow canvas, black pill CTAs, 1288px content, rounded inset #0D0D0D and #FAFAFA panels (radius 20px), black footer with the coral logomark | which sections and how many cards; the guide's Light Fuchsia #FFC9FF secondary CTA in place of the outline pill |
| Deck | 3 | White or black slides, large Light headlines, one gradient phrase per title, pill labels, logo bottom or top corner | a workflow diagram on a faded dot grid for process slides |
| Billboard / poster | 5 | Headline with a gradient phrase, Worklings and avatar pills on a workflow, faded dot grid, asana.com | photo (fisheye) or white ground |
| Social post | 4 | One headline with a gradient phrase or a fisheye photo with an expressive Workling | pills and a short workflow |
| Email | 1 | White ground, black type, black pill CTA, coral logo | one gradient word in the hero line |
| Product UI | 1 | Product-style Worklings, black and white surfaces, Light Fuchsia active states | palette colors for project and agent tags |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as Asana: Light Swiss headline with one coral-to-fuchsia phrase, black pill buttons, and workflow lines connecting avatars, Worklings and task pills.
- **Swap test**: Put another work-management logo on it. If the workflow-and-Workling graphics and the gradient phrase don't feel borrowed, it is generic.
- **Legibility**: Every gradient sits on headline type only, never on a colored content ground.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Asana's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Voice and tone guidelines: not published in the FY27 guide.
- Logo minimum size: not published.
- Color proportions or contrast standard: not published.
- Layout grid, margins and spacing scale: not published (homepage measurements are observed).
- Motion principles, durations and easing: not published (homepage values are observed).
- Icon grid and stroke weights for Worklings: not published.
- The table of contents lists a "Website" application page (45) that the 44-page PDF does not include.
- The PDF shows the logomark as a standalone variation (p.4), while the web brand page says not to use the symbol by itself; both are kept, each scoped to its source.
- The site renders black as #0D0D0D and the hero gradient as #FF453E to #F481F4, not the published #0B0505 and #FF584A to #FD3FFD.

Logos and reference images belong to Asana. Look at them on Asana's own pages; don't reuse them.