Prism prismd.fr
Extracted · 10 sections · 39 colors · grade A

notion.so

Accent #455dd3 · NotionInter — chaque valeur ci-dessous est mesurée via getComputedStyle(), jamais affirmée à la main.

39
colors
5
faces
6
shadows
39
keyframes
Get DESIGN.md tokens.json Repeindre ce design
notion.so
rendu réel · source de vérité

notion.so is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(69, 93, 211) as the accent for primary actions and brand signals. Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside NotionInter as the primary typeface. NotionInter is paired with Inter for secondary roles. A layered elevation system (6 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 39 keyframe animations plus transition-driven interactions.

01

Color — roles, semantics & the full census

39 colors measured · click any swatch to copy

Canvas
#ffffff
AAA 21:1
Ink
#000000
AAA 21:1
Accent
#455dd3
AA 5.59:1
Line
#e5e5e5
Fail 1.26:1
Semantic states
error#f64932success#14832bwarning#ff6d00

3 semantic roles found.

39 colors mined from the live renderexpand
02

Type — the ladder, in the real face

6 roles · rendered live in the real NotionInter (captured woff2) · lines are editable, click any spec to copy

display xl
display-xl64px · 700
display md
display-md14px · 400 · ×4.57
body
body12px · 500 · ×1.17
body sm
body-sm12px · 500 · ×1.00
caption
caption22px · 700 · ×0.55
button
button16px · 500 · ×1.38
03

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale
xxs · 2px
xs · 12px
sm · 16px
md · 20px
base · 24px
lg · 26px
xl · 32px
2xl · 48px
3xl · 64px
Radius
none
0px
xs
4px
sm
8px
md
12px
lg
16px
xl
9999px
full
9999px
04

Depth — elevation is extracted, not invented

6 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
05

Motion — easings, transitions & live keyframes

8 easing curves · 39 keyframes · hover a tile to preview

Easing & transitions
transition-2linear
transition-3ease-in
motion-timing-function-ease-in-out-quintcubic-bezier(0.86,0,0.07,1)
motion-timing-function-ease-in-out-cubiccubic-bezier(0.645,0.045,0.355,1)
motion-timing-function-ease-in-out-quadcubic-bezier(0.45,0,0.55,1)
motion-timing-function-ease-outease-out
motion-timing-function-ease-in-out-linearcubic-bezier(0.5,0,0.5,1)
motion-timing-function-ease-in-out-quartcubic-bezier(0.76,0,0.24,1)
39 keyframe animations extracted
fadeIn
fadeOut
scaleIn
scaleOut
popIn
rotate
loadingDots_pulse__d8LYi
globalNavigation_navShadowScrolled__pZKcg
globalNavigation_fadeIn__BTvkx
globalNavigation_fadeOut__UET7A
globalNavigation_slideDown__fiX_y
globalNavigation_navTokensHeroExit__nkR7m
06

Components — the closed vocabulary

15 component families · 84 variants counted on the live DOM

ComponentVariants found
buttons×10
nav Links×10
links×10
accordion×10
cards×9
testimonial×8
footer Links×4
cta Banner×4
heading H2×4
heading H3×4
badges×3
tabs×3
captions×3
heading H1×1
eyebrow Labels×1
Component style specs (§4)expand

Buttons

Ghost

  • Background: transparent {colors.hairline}
  • Text: #f6f5f4 {colors.surface-1}
  • Padding: 5px 10px
  • Radius: 4px
  • Font: 16px weight 400
  • Use: Subtle action, toolbar, nav button
  • Focus: backgroundColor: rgba(255, 255, 255, 0.01), outline: rgb(0, 117, 222) solid 2px

Primary Brand

  • Background: #455dd3 {colors.primary}
  • Text: #ffffff {colors.on-primary}
  • Padding: 4px 14px
  • Radius: 8px
  • Border: 1px solid rgba(255, 255, 255, 0)
  • Font: 16px weight 500
  • Use: Primary CTA / brand action
  • Focus: backgroundColor: rgba(255, 255, 255, 0.01), outline: rgb(0, 117, 222) solid 2px

Primary Brand

  • Background: #455dd3 {colors.primary}
  • Text: #ffffff {colors.on-primary}
  • Padding: 6px 15px
  • Radius: 8px
  • Border: 1px solid rgba(255, 255, 255, 0)
  • Font: 16px weight 500
  • Use: Primary CTA / brand action
  • Focus: backgroundColor: rgba(255, 255, 255, 0.01), outline: rgb(0, 117, 222) solid 2px

Primary Brand

  • Background: #213183
  • Text: #ffffff {colors.on-primary}
  • Padding: 6px 15px
  • Radius: 8px
  • Border: 1px solid rgba(255, 255, 255, 0)
  • Font: 16px weight 500
  • Use: Primary CTA / brand action
  • Focus: backgroundColor: rgba(255, 255, 255, 0.01), outline: rgb(0, 117, 222) solid 2px

Outline

  • Background: transparent {colors.hairline}
  • Text: #ffffff {colors.on-primary}
  • Padding: 6px 15px
  • Radius: 8px
  • Border: 1px solid rgba(255, 255, 255, 0)
  • Font: 16px weight 500
  • Use: Secondary action with border
  • Focus: backgroundColor: rgba(255, 255, 255, 0.01), outline: rgb(0, 117, 222) solid 2px

Ghost

  • Background: transparent {colors.hairline}
  • Text: rgba(0, 0, 0, 0.95)
  • Padding: 12px 16px
  • Radius: 8px
  • Font: 16px weight 400
  • Use: Subtle action, toolbar, nav button
  • Focus: backgroundColor: rgba(255, 255, 255, 0.01), outline: rgb(0, 117, 222) solid 2px
07

Layout — structure & dimensions

4 layout metrics measured

header 256px 78.25rem max-width
max Width78.25rem
header Height256px
sidebar Width0px
container Padding0px
08

Responsive — real breakpoints

22 media-query stops read from the live CSS

375px
400px
440px
599px
600px
712px
768px
839px
840px
908px
919px
942px
1032px
1080px
1120px
1156px
1200px
1280px
1300px
1440px
1800px
1900px
09

Do's & Don'ts

21 enforceable rules pulled verbatim from the spec

Do
Use NotionInter as the primary typeface — it defines the brand personality
Use negative letter-spacing (-2.125px) at display sizes for compressed, editorial headlines
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
Use Royal Blue (`#455dd3`) as the primary accent — it's the brand's signature interactive color
Use 8px border-radius on buttons — the standard corner rounding for interactive elements
Style form inputs with a `1px solid rgba(0, 0, 0, 0.08)` border — use border-based inputs, not floating labels or underline-only
Maintain nav height at 64px — consistent vertical space for the navigation bar
Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
Include a theme toggle in the nav — dark mode is a first-class feature
Each card includes a top image — imagery is part of the card identity, not optional
Show company logos with testimonials — social proof relies on brand recognition, not avatars
Lay out testimonials in a grid (12+ items) — quantity signals scale and trust
Don't
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't increase letter-spacing on headings — the type is designed to run tight at scale
Don't invent new shadow values — use only the extracted shadow levels
Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't remove the input border — the border is the primary affordance indicator for form fields
Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
Don't make the nav sticky — this design lets it scroll away to maximize content focus
10

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the notion.so design system. Canvas #ffffff · ink #000000 · accent #455dd3. Type: NotionInter — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.
Every value above was getComputedStyle-verified.
$ npx prismd add notion
DESIGN.md · narrative spec tokens.json