Skip to content
SuiteAnvil
Design system comparison · slack.com / notion.com

Slack vs Notion: brand colors, fonts & UI tokens

Slack leads with #730394 (fuchsia) set in Salesforce Avant Garde; Notion with #0075DE (blue) set in NotionInter. Controls are 4px versus 8px, and 8 of 9 versus 8 of 9 key color pairings pass WCAG 2.1 AA.

Slack: reference 11 Nov 2026Notion: reference 10 Nov 2026
slack

Slack

slack.com · reference 11 Nov 2026
Palette · click to copy
Typography
Aa Clarity

Body copy at reading size.

Headings
Salesforce Avant Garde
Body
Salesforce Sans
Free stand-in
Poppins / Lato
Technical · 4-6 px
Slack
PrimarySecondary
controls 4px · cards 16px
WCAG AA
8/9
WCAG AAA
6/9
Tech SEO
92

Notion

notion.com · reference 10 Nov 2026
Palette · click to copy
Typography
Aa Clarity

Body copy at reading size.

Headings
NotionInter
Body
NotionInter
Rounded · 8-14 px
Notion
PrimarySecondary
controls 8px · cards 12px
WCAG AA
8/9
WCAG AAA
4/9
Tech SEO
100

Differences at a glance

Measured values side by side. The last column is arithmetic on those values, not a judgment.

AttributeSlackNotionDifference
Primary color#730394 · Fuchsia#0075DE · BlueDifferent hue, OKLab ΔE 24.8
Text color#1D1C1D#191918OKLab ΔE 1.5
Canvas#FFFFFF · Neutral white#FFFFFF · Neutral whiteIdentical
ModeLightLightSame
Heading fontSalesforce Avant Garde (free stand-in Poppins)NotionInterDifferent families
Body fontSalesforce Sans (free stand-in Lato)NotionInterDifferent families
Control radius4px8pxNotion rounder by 4px
Card radius16px12pxSlack rounder by 4px
Radius styleTechnicalRoundedDifferent
WCAG 2.1 AA8 of 9 (89%)8 of 9 (89%)Equal pass rate
WCAG 2.1 AAA6 of 9 (67%)4 of 9 (44%)Slack higher by 23 pts
Button label contrast9.68:14.57:1Slack higher by 5.11
Technical SEO92/100100/100Notion higher by 8
SEO checks passing12 of 1414 of 14Notion passes 2 more
XML sitemap3,162 URLs278 URLsBoth found
Structured datanoneOrganization, WebSite, SoftwareApplicationOnly one publishes JSON-LD
Data from11 Nov 202610 Nov 2026Both reference snapshots

WCAG 2.1 contrast, pairing by pairing

PairingSlackNotion
Body text on surfaceAa16.99:1AAAa17.59:1AA
Secondary text on surfaceAa6.69:1AAAa6.53:1AA
Primary as link/text on surfaceAa9.68:1AAAa4.57:1AA
Button label on primaryAa9.68:1AAAa4.57:1AA
Accent on surfaceAa2.02:1FailAa3.88:1Large
Secondary on surfaceAa14.00:1AAAa13.18:1AA
White on secondaryAa14.00:1AAAa13.18:1AA
Dark mode: text on canvasAa18.02:1AAAa17.77:1AA
Dark mode: primary on canvasAa4.54:1AAAa4.54:1AA

Technical SEO snapshot

Homepage checks from each dated scan. Sites that refuse automated requests show no score rather than an estimate.

Slack
slack.com · 11 Nov 2026
92
12 of 14 checks pass
  • passTitle tag45 chars: “Slack | AI Work Platform & Productivity Tools”
  • warnMeta description173 chars
  • passSingle H1 heading1 H1 element(s)
  • passCanonical URLhttps://slack.com/
  • passHTML lang attributelang="en-US"
  • passMobile viewportwidth=device-width, initial-scale=1
  • passOpen Graph tags3/3 of og:title, og:description, og:image
  • passTwitter / X cardsummary_large_image
  • warnStructured data (JSON-LD)No JSON-LD found
  • passHTTPSServed over HTTPS
  • passIndexable (robots meta)No robots restrictions
  • passXML sitemap3162 URLs · https://slack.com/sitemap.xml
  • passFavicon / touch iconIcon link present
  • passImage alt text100% of 79 images
Notion
notion.com · 10 Nov 2026
100
14 of 14 checks pass
  • passTitle tag45 chars: “The AI workspace that works for you. | Notion”
  • passMeta description124 chars
  • passSingle H1 heading1 H1 element(s)
  • passCanonical URLhttps://www.notion.com/
  • passHTML lang attributelang="en-us"
  • passMobile viewportwidth=device-width, initial-scale=1
  • passOpen Graph tags3/3 of og:title, og:description, og:image
  • passTwitter / X cardsummary_large_image
  • passStructured data (JSON-LD)Organization, WebSite, SoftwareApplication
  • passHTTPSServed over HTTPS
  • passIndexable (robots meta)No robots restrictions
  • passXML sitemap278 URLs · https://www.notion.com/sitemap.xml
  • passFavicon / touch iconIcon link present
  • passImage alt text100% of 56 images

Benchmark your own site

Compare your site with Slack

We scan your homepage, CSS and sitemap, then put your palette, fonts, corner radius, WCAG contrast and technical SEO next to Slack's.

Benchmark pages are not indexed by search engines. Share them by link.

Slack vs Notion FAQ

What are the brand colors of Slack and Notion?

Slack uses #730394 as primary, #4A154B as secondary and #36C5F0 as accent, with #1D1C1D text on #FFFFFF. Notion uses #0075DE as primary, #31302E as secondary and #2383E2 as accent, with #191918 text on #FFFFFF. Click any swatch on this page to copy its hex code.

Which fonts do Slack and Notion use?

Slack sets headings in Salesforce Avant Garde (free stand-in Poppins) and body text in Salesforce Sans (free stand-in Lato). Notion sets headings in NotionInter. Proprietary faces are previewed with the named free Google Fonts stand-in.

Does Slack or Notion use rounder corners?

Slack uses 4px controls and 16px cards (technical geometry). Notion uses 8px controls and 12px cards (rounded geometry). Control radius: notion rounder by 4px.

Which brand palette passes more WCAG contrast checks?

Slack passes 8 of 9 key pairings at WCAG 2.1 AA (89%) and 6 at AAA. Notion passes 8 of 9 at AA (89%) and 4 at AAA. The pairings cover body text, links, buttons and dark mode.

How do Slack and Notion compare on technical SEO?

Slack's homepage scores 92/100, with 12 of 14 checks passing. Notion's homepage scores 100/100, with 14 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.

How can I compare my own website with Notion?

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 Notion, or against Slack.

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 Slack or Notion.

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