Notion AI

Utilitarian and friendly. Minimal monochrome document layouts accented by signature black-and-white character illustrations and precise cobalt blue actions.

playful clinical editorial warm quiet

Visit site

Colour

Background#ffffff

Text#000000

Accent#0075de

Surface#f6f5f4

Muted#000000

Typefaces

Display: NotionInter
Body: NotionInter
Mono: —
Source: self_hosted
Scale: 12 · 14 · 16 · 18 · 20 · 22

Layout

Grid: 16 columns
Container: 1024px
Spacing base: 4px
Radius: 6px · 12px

Capture

Category: ai
Sections: 9
Captured: 2026-08-30
Rhythm: light x9

Type rules

display type set in sentence case with tight negative tracking
body text set at 16px with line height 1.5 and 69 character measure

Colour rules

accent blue is restricted strictly to active buttons, badges, and text links
canvas is predominantly pure white with neutral gray paneling for structure

Voice rules

lead with plain direct capabilities
short subheaders under every display title

Holds it together

pair major feature headlines with thematic hand-drawn badge illustrations
confine interactive product UI previews to rounded tinted canvas boxes
use soft gray fill cards to organize enterprise compliance and team feature grids

Contrast

text on background21.0:1 AAA

muted text on background21.0:1 AAA

text on surface19.3:1 AAA

accent on background4.6:1 AA

background on accent4.6:1 AA

Type, measured

Body: 16px / 1.5
Measure: 69 characters
Display: 64px / 1
Tracking: -0.033em display
Scale ratio: 1.41

Voice

Tone: approachable, confident, practical
Sentences: short
Person: second
Vocabulary: plain
Calls to action: try, request, learn, get, start

Built with

Builder: —
Framework: next
Motion: —
WebGL: —
Nav: top_bar, 25 items
Length: 11.3 screens

Sections in page order

3 marked strong · 9

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

00
hero
Strong
Approachable and crisp product hero pairing Notion's signature character illustrations with an interactive feature workbench.
Mood
playful + warm
Layout
11 col · stacked · balanced
Open section →
01
pricing
Clean, functional SaaS pricing cards and feature overview with a disciplined neutral layout and crisp modern typography.
Mood
clinical + quiet
Layout
16 col · grid · balanced
Open section →
02
feature
Clean, airy product feature section framed with an editorial serif pull quote and signature playful line-art illustrations.
Mood
editorial + playful
Layout
16 col · stacked · airy
Open section →
03
feature
Clean and approachable product feature section pairing bold sans-serif copy with a framed software interface demo and warm illustrated accents.
Mood
warm + playful
Layout
8 col · stacked · airy
Open section →
04
feature
Crisp white productivity showcase pairing clean software mockups with charming hand-drawn line illustrations and blue accents.
Mood
playful + clinical
Layout
16 col · stacked · airy
Open section →
05
feature grid
Strong
Crisp and structured feature cards displaying realistic interactive software controls and model selector UI mockups.
Mood
clinical + quiet
Layout
16 col · grid · balanced
Open section →
06
feature grid
Clean and reassuring enterprise compliance grid set on soft rounded cards with precise typography and signature line art.
Mood
clinical + quiet
Layout
3 col · grid · balanced
Open section →
07
faq
Clean, systematic product FAQ with minimalist typography, crisp dividers, and a row of subtle action cards above.
Mood
quiet + clinical
Layout
13 col · stacked · balanced
Open section →
08
footer
Strong
Clean, structured corporate footer balanced by an intellectual quote on the left and an airy, methodical link grid.
Mood
quiet + clinical
Layout
14 col · grid · airy
Open section →