Notion
Body copy at reading size.
- Headings
- NotionInter
- Body
- NotionInter
- WCAG AA
- 8/9
- WCAG AAA
- 4/9
- Tech SEO
- 100
Notion leads with #0075DE (blue) set in NotionInter; Asana with #FF584A (red) set in TWK Lausanne. Controls are 8px versus pill-shaped, and 8 of 9 versus 6 of 8 key color pairings pass WCAG 2.1 AA.
Body copy at reading size.
Body copy at reading size.
Measured values side by side. The last column is arithmetic on those values, not a judgment.
| Attribute | Notion | Asana | Difference |
|---|---|---|---|
| Primary color | #0075DE · Blue | #FF584A · Red | Different hue, OKLab ΔE 37.5 |
| Text color | #191918 | #0B0505 | OKLab ΔE 8.8 |
| Canvas | #FFFFFF · Neutral white | #FFFFFF · Neutral white | Identical |
| Mode | Light | Light | Same |
| Heading font | NotionInter | TWK Lausanne (free stand-in Inter) | Same free stand-in (Inter) |
| Body font | NotionInter | TWK Lausanne (free stand-in Inter) | Different families |
| Control radius | 8px | pill (9999px) | Asana uses pill controls |
| Card radius | 12px | 16px | Asana rounder by 4px |
| Radius style | Rounded | Pill | Different |
| WCAG 2.1 AA | 8 of 9 (89%) | 6 of 8 (75%) | Notion higher by 14 pts |
| WCAG 2.1 AAA | 4 of 9 (44%) | 3 of 8 (38%) | Notion higher by 6 pts |
| Button label contrast | 4.57:1 | 6.06:1 | Asana higher by 1.49 |
| Technical SEO | 100/100 | 96/100 | Notion higher by 4 |
| SEO checks passing | 14 of 14 | 13 of 14 | Notion passes 1 more |
| XML sitemap | 278 URLs | 3,911 URLs | Both found |
| Structured data | Organization, WebSite, SoftwareApplication | Organization, WebSite, BreadcrumbList | Both publish JSON-LD |
| Data from | 10 Nov 2026 | 11 Nov 2026 | Both reference snapshots |
| Pairing | Notion | Asana |
|---|---|---|
| Body text on surface | Aa17.59:1AA | Aa20.23:1AA |
| Secondary text on surface | Aa6.53:1AA | Aa5.13:1AA |
| Primary as link/text on surface | Aa4.57:1AA | Aa3.11:1Large |
| Button label on primary | Aa4.57:1AA | Aa6.06:1AA |
| Accent on surface | Aa3.88:1Large | Aa2.87:1Fail |
| Secondary on surface | Aa13.18:1AA | same colors as another pairing |
| White on secondary | Aa13.18:1AA | Aa20.23:1AA |
| Dark mode: text on canvas | Aa17.77:1AA | Aa17.67:1AA |
| Dark mode: primary on canvas | Aa4.54:1AA | Aa6.18:1AA |
Homepage checks from each dated scan. Sites that refuse automated requests show no score rather than an estimate.
Notion uses #0075DE as primary, #31302E as secondary and #2383E2 as accent, with #191918 text on #FFFFFF. Asana uses #FF584A as primary, #0B0505 as secondary and #FD3FFD as accent, with #0B0505 text on #FFFFFF. Click any swatch on this page to copy its hex code.
Notion sets headings in NotionInter. Asana sets headings in TWK Lausanne (free stand-in Inter). Proprietary faces are previewed with the named free Google Fonts stand-in.
Notion uses 8px controls and 12px cards (rounded geometry). Asana uses pill-shaped controls and 16px cards (pill geometry). Control radius: asana uses pill controls.
Notion passes 8 of 9 key pairings at WCAG 2.1 AA (89%) and 4 at AAA. Asana passes 6 of 8 at AA (75%) and 3 at AAA. The pairings cover body text, links, buttons and dark mode.
Notion's homepage scores 100/100, with 14 of 14 checks passing. Asana's homepage scores 96/100, with 13 of 14 checks passing. Scores come from SuiteAnvil's 14 weighted technical checks (title, description, H1, canonical, Open Graph, structured data, sitemap, HTTPS and more) and are never estimated.
Enter your URL in the benchmark form on this page. SuiteAnvil scans your homepage, CSS and sitemap, then opens the same side-by-side view of your site against Asana, or against Notion.
Dated snapshots of each company's public website styling for educational and interoperability purposes. Brands evolve; values may change. Names and logos are trademarks of their owners, shown for identification only; SuiteAnvil is not affiliated with or endorsed by Notion or Asana.
SuiteAnvil extracts publicly visible design tokens, logos, and font references for workflow automation. You are responsible for ensuring you hold valid commercial rights or client authorization for any proprietary fonts, trademarks, and brand assets before commercial publication. Licensing notice