Light interfaceMeasured asana.com

Asana

A friendly, confident workspace with big bold type and fully-rounded pill buttons.

This page is styled with Asana’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#F3F3F3
Cards, panels, menus

Text#0D0D0D
Headings and body

Muted text#3D3D3D
Secondary info

Line#E7E7E7
Dividers and outlines

Accent#0D0D0D
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 19.4:1Muted on background 10.9:1Text on accent 19.4:1

Every colour found on their site

#0D0D0D#3D3D3D#FFFFFF#0D0E10#3E3E3E#F3F3F3#FAFAFA#E7E7E7#6E6E6E#CFCFCF#D5DCE0

Typography

Headings use TWK Lausanne (company-only; shown here with the free look-alike Inter Tight). Body text uses TWK Lausanne (company-only; shown with Inter Tight).

h1	TWK Lausanne · 102px · 300 · -2.55px	Supercharge your teams with AI
h2	TWK Lausanne · 54px · 300 · -1.08px	AI that works the way your team works
h3	TWK Lausanne · 20px · 400	Agentic Work Management
h4	TWK Lausanne · 30px · 400	85% of Fortune 100 companies choose Asana¹
p	TWK Lausanne · 26px · 300 · 0.52px	AI that understands your work, keeps projects moving, and ge
li	TWK Lausanne · 12px · 400	Contact sales

Corners & shadows

Corner sizes used

7px

16px

pill

8px

3px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Asana’s live website. Click to enlarge.

Buttons · 4

Asana button: Contact sales — #FFFFFF · corners 100px · 44px

Asana button: Get started — #0D0D0D · corners 100px · 44px

Asana button: Continue — #0D0D0D · corners 100px · 50px

Asana button: Learn more — #FAFAFA · corners 100px · 58px

Navigation bar · 1

Asana Navigation bar: Products — no fill · square · TWK Lausanne 16px

Buttons · 5

Asana Buttons: Contact sales — fill #FFFFFF · corners 100px · TWK Lausanne 14px

Asana Buttons: Get started — fill #0D0D0D · corners 100px · TWK Lausanne 14px

Asana Buttons: Continue — fill #0D0D0D · corners 100px · TWK Lausanne 16px

Asana Buttons: Agentic Work Management — fill #FFC9FF · corners 64px · TWK Lausanne 16px

Asana Buttons: Asana Service Management — fill #3D3D3D · corners 64px · TWK Lausanne 16px

Inputs and search · 1

Asana Inputs and search: name@company.com — fill #FFFFFF · corners 4px · TWK Lausanne 16px

Icons

12 icons copied exactly from their site’s code.

Product screens

9 real screens from web image search, each linked to where it was found.

Asana product screen: List View Redesign • Asana Product Guide — List View Redesign • Asana Product Guide

Asana product screen: List view — List view

Asana product screen: Using Asana list layout | Product guide • Asana — Using Asana list layout | Product guide • Asana

Asana product screen: Introducing the new project List View: More clarity, less clutter - The ... — Introducing the new project List View: More clarity, less clutter - The ...

Asana product screen: Overview Of Asana Views Options Product Guides Asana — Overview Of Asana Views Options Product Guides Asana

Asana product screen: 19 Asana features to start using right now | Zapier — 19 Asana features to start using right now | Zapier

Asana product screen: List View: Display "Projects" - Ask the Community - Asana Forum — List View: Display "Projects" - Ask the Community - Asana Forum

Do & don’t

What makes it Asana

Giant, light-weight display headlines
Fully rounded pill-shaped buttons everywhere, no sharp corners
Near-black primary colour instead of a bright brand colour

Use fully rounded (pill) buttons for primary and secondary actions
Let headlines be large and light-weight for a confident feel
Keep the palette mostly black, white, and light grey

Don’t

Don't use sharp-cornered buttons
Don't use heavy bold weights for big headlines
Don't add bright saturated colours to the core UI

For AltLeads: Borrow the pill-shaped buttons and generous whitespace to make the call/dial action feel like the single obvious next step.

Copy the tokens

Paste into any project to try this look.

/* Asana · values measured from https://asana.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F3F3F3;
  --text: #0D0D0D;
  --muted: #3D3D3D;
  --line: #E7E7E7;
  --accent: #0D0D0D;
  --on-accent: #FFFFFF;
  --radius-button: 100px;
  --radius-card: 8px;
  --radius-small: 3px;
  --button-height: 44px;
  --font-heading: "TWK Lausanne", "Inter Tight", system-ui, sans-serif;
  --font-body: "TWK Lausanne", "Inter Tight", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
}