PPP
ppp.tokyo.jp · 5 days ago
SaveUnofficial A style guide made by SiteStyleGuide from asana.com’s public web pages. Not affiliated with or endorsed by Asana. The real site is asana.com ↗
Unofficial style guide
Asanastyle guide
Asana’s website (asana.com) uses TWK Lausanne for its headings and body text. Its palette is led by Medium Slate Blue (#796EFF), Light Coral (#F06A6A) and Deep Sky Blue (#00B2FF), with #0D0E10 text on #FFFFFF. Captured from the live site on 21 October 2026.
- Website
- asana.com
- Typefaces
- TWK Lausanne, Hiragino Kaku Gothic ProN, Ghost
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 21 Oct 2026 · added by @sitestyleguide
https://asana.com/
Screenshot
asana.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Work & Project Management for Human-Agent Teams • Asana
- ● 55 / 60 characters
- Meta description
- Work management software for teams and AI agents. Plan, automate, and execute critical workflows together.
- ● 106 / 160 characters
- Site name
- Asana
- og:title
- Asana: The OS for human-agent teams
- og:description
- Supercharge your team with AI that gets work done.
- Language
- en
- Theme colour
- #2e3c54
In search results
Asanahttps://asana.com/
Work & Project Management for Human-Agent Teams • Asana
Work management software for teams and AI agents. Plan, automate, and execute critical workflows together.
When shared
asana.com
Asana: The OS for human-agent teams
Supercharge your team with AI that gets work done.
Logo & favicons
Found as: schema.org logo. PNG, 1200 × 1200.
Logo
On white
On black
On Medium Slate Blue
Favicons
0 foundThe site doesn’t seem to have a favicon.
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#0D0E10) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 52.2%
- Near Black 14.1%
- Cool Charcoal 7.3%
- Cool Near Black 7.2%
- Medium Slate Blue 4.7%
- Light Coral 3.8%
- Deep Sky Blue 1.9%
- Indian Red 1.8%
- Dim Grey 1.4%
- Midnight Blue 0.8%
- Black 0.8%
- Slate Blue 0.8%
- Orchid 0.8%
- Hot Pink 0.8%
- Pale Violet Red 0.8%
- Golden Rod 0.7%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 19.31:1 AAA
- On white
- —
Background, text, border · .css-l4xdm2-p3, button.-light
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 19 12 0 94
- On text
- —
- On white
- 19.31:1 AAA
Text, background, border · .css-1ubdndg, button.-dark
-
Cool Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 38 22 0 78
- On text
- 1.35:1 Fail
- On white
- 14.30:1 AAA
Background, text, border · .masthead.-bg-gray, .masthead.-bg-slanted.-bg-gray:before
-
Cool Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 45 29 0 85
- On text
- 1.12:1 Fail
- On white
- 17.26:1 AAA
Text, background, border · button.-dark.-border, button.-white
Colours
Brand colours and accents, most used first-
Medium Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 53 57 0 0
- On text
- 5.05:1 AA
- On white
- 3.83:1 AA large
Background, text, border · .apps-mobile-nav-container .-is-active button, .masthead.-bg-gradient-purple
-
Light Coral
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 56 56 6
- On text
- 6.41:1 AA
- On white
- 3.01:1 AA large
Background, border, text · button.-border:not(.-light):hover, button:hover
-
Deep Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 30 0 0
- On text
- 8.10:1 AAA
- On white
- 2.38:1 Fail
Background, text, border · .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:bef, .plyr__control--overlaid
-
Indian Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 65 65 20
- On text
- 4.25:1 AA large
- On white
- 4.55:1 AA
Text, graphic, background · .email-resend-container button:hover, .sidebar-item.-is-active:after
-
Dim Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 26 16 0 61
- On text
- 2.52:1 Fail
- On white
- 7.65:1 AAA
Text, background · .plyr__badge, .plyr__menu__container
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 71 66 0 54
- On text
- 1.50:1 Fail
- On white
- 12.90:1 AAA
Background, text, graphic · .tab_button__4anE8.tab_button--blue___CYCr, .tab_button__4anE8.tab_button--blue___CYCr.tab_button--active__LbwXp
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 72 43 0 82
- On text
- 1.12:1 Fail
- On white
- 17.28:1 AAA
Background · .page-portfolios .portfolios-hero:before, .page-forms .footer-background
-
Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 50 55 0 22
- On text
- 3.51:1 AA large
- On white
- 5.50:1 AA
Border, background, text · .page--page-builder .narrowCtaBanner .button:hover, .input-message--warning
-
Orchid
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 46 7 17
- On text
- 6.45:1 AA
- On white
- 2.99:1 Fail
Background · .masthead.-bg-gradient-purple, .masthead.-bg-slanted.-bg-gradient-purple:before
-
Hot Pink
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 50 17 13
- On text
- 6.57:1 AA
- On white
- 2.94:1 Fail
Background · .masthead.-bg-gradient-purple, .masthead.-bg-slanted.-bg-gradient-purple:before
-
Pale Violet Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 57 43 0
- On text
- 7.22:1 AAA
- On white
- 2.67:1 Fail
Background · .masthead.-bg-gradient-purple, .masthead.-bg-slanted.-bg-gradient-purple:before
-
Golden Rod
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 25 100 1
- On text
- 11.42:1 AAA
- On white
- 1.69:1 Fail
Background, text · .socialCard.-bg-instagram, .customerMarquee-item.-bg-gold
Gradients
-
linear-gradient(to bottom, #FFFFFF 0%, #F6F8F9 100%)
-
linear-gradient(to right, #796eff 0%, #d472c5 45%, #df70b8 65%, #ff6d92 100%)
-
linear-gradient(#0000,#000000bf)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
TWK Lausanne
Aa
250
Aa
550
TWK Lausanne
Self-hosted · weights 250, 300, 350, 400, 450, 500, 550 · headings, buttons, body · shown in a stand-in if you don’t have it
Aa
300
Aa
500
Hiragino Kaku Gothic ProN
Self-hosted · weights 300, 400, 500 · headings, buttons · shown in a stand-in if you don’t have it
Aa
500
Ghost
Self-hosted · weights 500 · headings · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
38px / 100%
weight 300 · TWK Lausanne
Asana
Heading 2
30px / 110%
weight 300 · TWK Lausanne
Work & Project Management for Human-Agent Teams…
Heading 3
23px / 120%
weight 400 · TWK Lausanne
Work & Project Management for Human-Agent Teams…
Heading 4
20px / 140%
weight 400 · TWK Lausanne
Work & Project Management for Human-Agent Teams…
Heading 5
18px / 140%
weight 500 · TWK Lausanne
Work & Project Management for Human-Agent Teams…
Heading 6
12px / 150%
weight 500 · TWK Lausanne
Work & Project Management for Human-Agent Teams…
Paragraph
14px / 150%
weight 300 · TWK Lausanne
Work management software for teams and AI agents. Plan, automate, and execute critical workflows together.
Small
80%
Work management software for teams and AI agents. Plan, automate, and execute critical workflows together.
Button
14px / 36px
weight 500 · none
Get started
Link
14px / 150%
weight 500 · TWK Lausanne
Read more about Asana
Sizes in use
Most common across the site- 22pxline 1.5 · 18 rules
- 20pxline 140% · 16 rules
- 18pxline 140% · 19 rules
- 16pxline 150% · 31 rules
- 15pxline 150% · 17 rules
- 14pxline 150% · 61 rules
- 12pxline 150% · 46 rules
- 11pxline 150% · 12 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Button
Get started
button · #0D0E10 · radius 3px
Corner radius
- 3px · 40×
- 8px · 22×
- 50% · 21×
- 100px · 18×
- 4px · 12×
- 16px · 12×
Shadows
- 0 20px 30px 0 rgba(36, 50, 66, 0.14)
- 0 3px 5px 0 rgba(36, 50, 66, 0.1)
- 0 1px 2px #00000026
- 0 1px 1px #23282f26,0 0 0 1px #23282f33
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
480
768
959
960
1120
1280
1440
1680
On a scale of 0 to 1680 px.
Content widths (max-width)
1440 px
1432 px
1120 px
600 px
550 px
500 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 55 characters, short enough to show in full in search results.
- ▲ CheckNo favicon could be found.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Asana use?
- Asana’s website uses three typefaces: TWK Lausanne (headings and body text), self-hosted; Hiragino Kaku Gothic ProN, self-hosted; Ghost, self-hosted.
- What are Asana’s brand colours?
- The main colours on asana.com are Medium Slate Blue (#796EFF), Light Coral (#F06A6A), Deep Sky Blue (#00B2FF), Indian Red (#CD4848), Dim Grey (#4A5464) and Midnight Blue (#222875).
- What colour is Asana’s text and background?
- Body text is #0D0E10 on a #FFFFFF background.
- Where is Asana’s logo from?
- The logo shown in this guide was found on asana.com’s homepage. For official logo files and usage rules, check Asana’s own brand or press page.
- Is this Asana’s official style guide?
- No. SiteStyleGuide made it from asana.com’s public web pages on 21 October 2026, and isn’t affiliated with Asana. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
asana-com-tokens.css
/* asana.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/asana.com) */
:root {
/* Colours */
--text: #0D0E10;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-near-black: #0D0E10;
--colour-cool-charcoal: #222B37;
--colour-cool-near-black: #151B26;
--colour-medium-slate-blue: #796EFF;
--colour-light-coral: #F06A6A;
--colour-deep-sky-blue: #00B2FF;
--colour-indian-red: #CD4848;
--colour-dim-grey: #4A5464;
--colour-midnight-blue: #222875;
--colour-black: #0D1B2F;
--colour-slate-blue: #635AC7;
--colour-orchid: #D472C5;
--colour-hot-pink: #DF70B8;
--colour-pale-violet-red: #FF6D92;
--colour-golden-rod: #FCBD01;
--gradient-1: linear-gradient(to bottom, #FFFFFF 0%, #F6F8F9 100%);
--gradient-2: linear-gradient(to right, #796eff 0%, #d472c5 45%, #df70b8 65%, #ff6d92 100%);
--gradient-3: linear-gradient(#0000,#000000bf);
/* Typefaces */
--font-headings: 'TWK Lausanne', 'Helvetica Neue', 'Helvetica', sans-serif;
--font-buttons: 'TWK Lausanne', 'Helvetica Neue', 'Helvetica', sans-serif;
--font-body: 'TWK Lausanne', 'Helvetica Neue', 'Helvetica', sans-serif;
/* Type scale */
--text-h1: 38px;
--leading-h1: 100%;
--text-h2: 30px;
--leading-h2: 110%;
--text-h3: 23px;
--leading-h3: 120%;
--text-h4: 20px;
--leading-h4: 140%;
--text-h5: 18px;
--leading-h5: 140%;
--text-h6: 12px;
--leading-h6: 150%;
--text-p: 14px;
--leading-p: 150%;
--text-small: 80%;
--text-button: 14px;
--leading-button: 36px;
--text-a: 14px;
--leading-a: 150%;
/* Shape */
--radius-1: 3px;
--radius-2: 8px;
--radius-3: 50%;
--radius-4: 100px;
--radius-5: 4px;
--radius-6: 16px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 480px;
--breakpoint-2: 768px;
--breakpoint-3: 959px;
--breakpoint-4: 960px;
--breakpoint-5: 1120px;
--breakpoint-6: 1280px;
--breakpoint-7: 1440px;
--breakpoint-8: 1680px;
--max-width-1: 1440px;
--max-width-2: 1432px;
--max-width-3: 1120px;
--max-width-4: 600px;
--max-width-5: 550px;
--max-width-6: 500px;
}
{
"site": "asana.com",
"source": "https://sitestyleguide.com/asana.com",
"text": "#0D0E10",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Near Black",
"hex": "#0D0E10",
"rgb": [
13,
14,
16
]
},
{
"name": "Cool Charcoal",
"hex": "#222B37",
"rgb": [
34,
43,
55
]
},
{
"name": "Cool Near Black",
"hex": "#151B26",
"rgb": [
21,
27,
38
]
},
{
"name": "Medium Slate Blue",
"hex": "#796EFF",
"rgb": [
121,
110,
255
]
},
{
"name": "Light Coral",
"hex": "#F06A6A",
"rgb": [
240,
106,
106
]
},
{
"name": "Deep Sky Blue",
"hex": "#00B2FF",
"rgb": [
0,
178,
255
]
},
{
"name": "Indian Red",
"hex": "#CD4848",
"rgb": [
205,
72,
72
]
},
{
"name": "Dim Grey",
"hex": "#4A5464",
"rgb": [
74,
84,
100
]
},
{
"name": "Midnight Blue",
"hex": "#222875",
"rgb": [
34,
40,
117
]
},
{
"name": "Black",
"hex": "#0D1B2F",
"rgb": [
13,
27,
47
]
},
{
"name": "Slate Blue",
"hex": "#635AC7",
"rgb": [
99,
90,
199
]
},
{
"name": "Orchid",
"hex": "#D472C5",
"rgb": [
212,
114,
197
]
},
{
"name": "Hot Pink",
"hex": "#DF70B8",
"rgb": [
223,
112,
184
]
},
{
"name": "Pale Violet Red",
"hex": "#FF6D92",
"rgb": [
255,
109,
146
]
},
{
"name": "Golden Rod",
"hex": "#FCBD01",
"rgb": [
252,
189,
1
]
}
],
"fonts": [
{
"name": "TWK Lausanne",
"stack": "\"TWK Lausanne\", \"Helvetica Neue\", \"Helvetica\", sans-serif",
"weights": [
250,
300,
350,
400,
450,
500,
550
],
"source": "Self-hosted"
},
{
"name": "Hiragino Kaku Gothic ProN",
"stack": "\"Hiragino Kaku Gothic ProN\", \"Helvetica Neue\", \"Helvetica\", sans-serif",
"weights": [
300,
400,
500
],
"source": "Self-hosted"
},
{
"name": "Ghost",
"stack": "Ghost, Helvetica Neue, Helvetica, sans-serif",
"weights": [
500
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run asana.com?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/asana.com" title="Asana style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to Asana’s
Captured from asana.com on 21 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Asana; this guide describes the public website for reference.