notion.com · TechHow modern is Notion's CSS?
Checked 2 November 2026, the CSS on its home page as any visitor gets it. Sites change, so check it now for today's numbers.
Each weekly check lands in your dashboard.
Already modern
Custom properties 5,445Logical properties 1,909gap 1,027Grid 105:focus-visible 96:is(), :where() 86:has() 83@layer 82text-wrap: balance, pretty 82Container queries 64object-fit 48clamp(), min(), max() 44aspect-ratio 44Scroll-driven animations 18position: sticky 17Anchor positioning 14dvh, svh, lvh 9Scroll snap 7oklch(), color-mix(), light-dark() 5@property 3accent-color 1<dialog> and popover 1
11 old techniques still there
Each with the modern way to replace it. Old CSS that works is fine; these are suggestions.
- Vendor prefixes browsers no longer needUse the unprefixed property36
- [dir=rtl] overridesUse logical properties9
- Sass color functionsUse color-mix(), relative colors5
- Text pushed off screen with text-indentUse real text, visually hidden or aria-label1
- Internet Explorer hacksUse delete them1
- Negative-margin guttersUse gap18
- Font sizes set in media queriesUse clamp()13
- 100vhUse dvh units8
- font-size: 0 whitespace hackUse flexbox with gap7
- translate(-50%, -50%) centeringUse place-items: center7
- Floats and clearfixUse grid, flexbox, flow-root1
Also worth a look
These don't change the score, because modern code uses them too.
- High-specificity selectorsUse @layer, :where()231
- Doubled classes for weightUse @layer52
- !importantUse @layer39
- Repeated selector listsUse :is()29
- html or body prefixes for weightUse @layer4
- z-index of 1000 or moreUse the top layer (dialog, popover)1
- Physical left and rightUse logical properties324
- Dark theme blocks that repeat valuesUse light-dark()1
- Old names for current CSSUse gap, overflow-wrap, break-before1
What Notion's CSS is built with
Only what the page and its CSS show, with the evidencePartFoundEvidenceHow sure
- FontsNotionInter, Noto Sans Arabic, Noto Sans Hebrew, Lyon Text and 2 moreLoaded with @font-face from the site's own files.Very sure
- Site frameworkNext.jsIts files are served from /_next/static/.Very sure
- PreprocessorCan't tellSass, Less and PostCSS leave no trace in the CSS a browser gets.—
Design tokens
CSS custom properties Notion defines, and how much of its CSS uses themTokens defined1,709custom properties
Colors from tokens85%827 of 972
Spacing from tokens70%2,388 of 3,414
Font sizes from tokens29%47 of 164
Themes2same tokens, other values
What the 1,709 tokens hold
- Colors151
- Sizes and spacing400
- Motion12
- Fonts16
- Shadows5
- Point at other tokens808
- Other values317
Main colors (first theme)
- --tatami-color-black#000
- --tatami-color-white#fff
- --text-color-dark#111
- --text-color-regular#040404
- --tatami-color-gray-500#78736f
- --tatami-color-red-500#f64932
- --tatami-color-orange-500#ff6d00
- --tatami-color-yellow-500#ffb110
- --tatami-color-teal-500#27918d
- --tatami-color-blue-500#097fe8
Spacing scale--tatami-dimension-spacing-* · 22 steps
- 4
- 8
- 12
- 16
- 20
- 24
- 28
- 30
- 32
- 36
- 40
- 44
- 48
- 52
- 56
- 64
- 72
- 80
- 96
- 100
- 128
- 160
Colors written out
145 color declarations skip the tokens, with 42 different values. The most common: #37352f (28), #fff (23) and #37352fa6 (22).
Tokens a build step turns into plain values (Sass variables, most CSS-in-JS) never reach the browser, so they don't show here.