W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Notion
Notion is a connected workspace for notes, docs, knowledge bases, and project management — "the AI workspace that works for you." The brand voice is calm, typographic, and disciplined: black ink on warm-white paper, a tiny rounded sans wordmark, generous whitespace, and a deliberate refusal of decorative color at the institutional level. Where competing productivity brands lead with hue, Notion leads with surface and type.
1 palette 3 fonts 0 assets 7 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/notion/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/notion/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Notion
Notion is a connected workspace for notes, docs, knowledge bases, and project management — "the AI workspace that works for you." The brand voice is calm, typographic, and disciplined: black ink on warm-white paper, a tiny rounded sans wordmark, generous whitespace, and a deliberate refusal of decorative color at the institutional level. Where competing productivity brands lead with hue, Notion leads with surface and type.
Tags: saas, productivity, notion, monochrome, minimal, ai
Atoms
Palette
Notion · [email protected] · Proprietary — All Rights Reserved
Notion's brand palette — radically near-monochrome. The institutional voice is black-on-white (or white-on-black in dark mode); the brand reads as restrained, typographic, and surface-driven. Where competing productivity brands lead with color, Notion leads with whitespace and type. This atom captures only the verified mark and surface tones; in the product, additional accent colors exist for callouts and tags but those are not published as brand-level hex values and are not catalogued here to avoid fabrication.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
notion-black |
Notion Black | #000000 |
notion-white |
Notion White | #FFFFFF |
notion-canvas-dark |
Notion Canvas Dark | #191919 |
notion-surface-dark |
Notion Surface Dark | #2F2F2F |
notion-text-secondary-light |
Notion Text Secondary (Light) | #787878 |
notion-text-tertiary-light |
Notion Text Tertiary (Light) | #A0A0A0 |
notion-text-secondary-dark |
Notion Text Secondary (Dark) | #A0A0A0 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
notion-white |
#FFFFFF |
surface |
notion-white |
#FFFFFF |
surface-elevated |
notion-white |
#FFFFFF |
text-primary |
notion-black |
#000000 |
text-secondary |
notion-text-secondary-light |
#787878 |
text-tertiary |
notion-text-tertiary-light |
#A0A0A0 |
primary |
notion-black |
#000000 |
primary-hover |
notion-text-secondary-light |
#787878 |
accent |
notion-black |
#000000 |
accent-hover |
notion-text-secondary-light |
#787878 |
warning |
notion-black |
#000000 |
warning-hover |
notion-text-secondary-light |
#787878 |
error |
notion-black |
#000000 |
success |
notion-black |
#000000 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
notion-canvas-dark |
#191919 |
surface |
notion-surface-dark |
#2F2F2F |
surface-elevated |
notion-surface-dark |
#2F2F2F |
text-primary |
notion-white |
#FFFFFF |
text-secondary |
notion-text-secondary-dark |
#A0A0A0 |
text-tertiary |
notion-text-tertiary-light |
#A0A0A0 |
primary |
notion-white |
#FFFFFF |
primary-hover |
notion-text-secondary-dark |
#A0A0A0 |
accent |
notion-white |
#FFFFFF |
accent-hover |
notion-text-secondary-dark |
#A0A0A0 |
warning |
notion-white |
#FFFFFF |
warning-hover |
notion-text-secondary-dark |
#A0A0A0 |
error |
notion-white |
#FFFFFF |
success |
notion-white |
#FFFFFF |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
notion-black |
#000000 |
on-identity |
notion-white |
#FFFFFF |
primary |
notion-black |
#000000 |
primary-hover |
notion-text-secondary-light |
#787878 |
accent |
notion-black |
#000000 |
accent-hover |
notion-text-secondary-light |
#787878 |
success |
notion-black |
#000000 |
warning |
notion-black |
#000000 |
error |
notion-black |
#000000 |
background-light |
notion-white |
#FFFFFF |
background-dark |
notion-canvas-dark |
#191919 |
surface-light |
notion-white |
#FFFFFF |
surface-dark |
notion-surface-dark |
#2F2F2F |
text-primary-light |
notion-black |
#000000 |
text-primary-dark |
notion-white |
#FFFFFF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
colorChoice → logo.mark
- allowed: notion-black, notion-white
- forbidden: any-non-brand-color
The Notion mark is monochrome by definition. Use black on light surfaces or white on dark surfaces — never a colored variant.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill
The Notion mark's reading depends on clean black/white contrast against a quiet surface. Effects, recoloring, and busy backgrounds break the mark's institutional voice.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text — the floor below which the surface no longer reads as Notion.
contextRestriction → roles.colors.identity
- forbiddenContexts: decorative-only, product-of-competitor, endorsement-implication
Notion's trademark and brand guidance restrict use of the mark in ways that imply endorsement or appear on competing-product surfaces without explicit license.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Notion's pure-black-on-white default starts well above AA; Notion-skinned surfaces must hold that floor.
⚠️ warning (1)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Notion's pure-black-on-white identity sits at 21:1 contrast — well above AAA's 7:1 floor. Skinning that drops below AAA on body text would betray the brand's documented commitment to legibility.
💡 recommendation (1)
numericRatio → typography.body.lineHeight
- min:
1.5 - max:
1.7
Notion's product surface reads with generous line-height — typically in the 1.5–1.7 band. Tighter values break the calm typographic rhythm; looser values feel decorative.
Provenance
- Source: https://www.notion.com
- License:
Proprietary — All Rights Reserved - Attribution: Notion and the Notion mark are trademarks of Notion Labs, Inc. The signature mark color (pure black, #000000) is verified via the simple-icons brand database, which cites notion.so as the source. The near-monochrome institutional identity is uniformly documented across notion.com.
- Imported:
2026-05-17 - Notes: Notion's brand reads heavily on typography. Inter is widely used on notion.com (verified by inspecting the rendered site) and is referenced here as the primary face. In-product accent colors (callout / tag colors) exist but are not published as brand-level hex values; brand-atoms therefore catalogues the near-monochrome identity only and intentionally omits accent hex values to satisfy the no-fabrication rule.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Notion
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Notion
A clear hierarchy in Notion's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ notion-black #000000 accent-hover
→ notion-text-secondary-light #787878 background-dark
→ notion-canvas-dark #191919 background-light
→ notion-white #FFFFFF error
→ notion-black #000000 identity
→ notion-black #000000 on-identity
→ notion-white #FFFFFF primary
→ notion-black #000000 primary-hover
→ notion-text-secondary-light #787878 success
→ notion-black #000000 surface-dark
→ notion-surface-dark #2F2F2F surface-light
→ notion-white #FFFFFF text-primary-dark
→ notion-white #FFFFFF text-primary-light
→ notion-black #000000 warning
→ notion-black #000000 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from notion)
Light mode (14 roles)
accent
→ notion-black accent-hover
→ notion-text-secondary-light background
→ notion-white error
→ notion-black primary
→ notion-black primary-hover
→ notion-text-secondary-light success
→ notion-black surface
→ notion-white surface-elevated
→ notion-white text-primary
→ notion-black text-secondary
→ notion-text-secondary-light text-tertiary
→ notion-text-tertiary-light warning
→ notion-black warning-hover
→ notion-text-secondary-light Dark mode (14 roles)
accent
→ notion-white accent-hover
→ notion-text-secondary-dark background
→ notion-canvas-dark error
→ notion-white primary
→ notion-white primary-hover
→ notion-text-secondary-dark success
→ notion-white surface
→ notion-surface-dark surface-elevated
→ notion-surface-dark text-primary
→ notion-white text-secondary
→ notion-text-secondary-dark text-tertiary
→ notion-text-tertiary-light warning
→ notion-white warning-hover
→ notion-text-secondary-dark Rules (7 typed constraints)
error · 5 rules
colorChoice logo.mark allowed notion-black, notion-white forbidden any-non-brand-color The Notion mark is monochrome by definition. Use black on light surfaces or white on dark surfaces — never a colored variant.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill The Notion mark's reading depends on clean black/white contrast against a quiet surface. Effects, recoloring, and busy backgrounds break the mark's institutional voice.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text — the floor below which the surface no longer reads as Notion.
contextRestriction roles.colors.identity forbiddenContexts decorative-only, product-of-competitor, endorsement-implication Notion's trademark and brand guidance restrict use of the mark in ways that imply endorsement or appear on competing-product surfaces without explicit license.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Notion's pure-black-on-white default starts well above AA; Notion-skinned surfaces must hold that floor.
warning · 1 rule
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Notion's pure-black-on-white identity sits at 21:1 contrast — well above AAA's 7:1 floor. Skinning that drops below AAA on body text would betray the brand's documented commitment to legibility.
recommendation · 1 rule
numericRatio typography.body.lineHeight min 1.5 max 1.7 Notion's product surface reads with generous line-height — typically in the 1.5–1.7 band. Tighter values break the calm typographic rhythm; looser values feel decorative.
Provenance
- Source
- https://www.notion.com
- License
Proprietary — All Rights Reserved- Attribution
- Notion and the Notion mark are trademarks of Notion Labs, Inc. The signature mark color (pure black, #000000) is verified via the simple-icons brand database, which cites notion.so as the source. The near-monochrome institutional identity is uniformly documented across notion.com.
- Imported
2026-05-17- Notes
- Notion's brand reads heavily on typography. Inter is widely used on notion.com (verified by inspecting the rendered site) and is referenced here as the primary face. In-product accent colors (callout / tag colors) exist but are not published as brand-level hex values; brand-atoms therefore catalogues the near-monochrome identity only and intentionally omits accent hex values to satisfy the no-fabrication rule.