notion-design-system.md5.8 KBView on GitHub # Notion Design System
Extracted from `https://www.notion.so/Welcome-to-Notion-339218cdf34680afb2f7e4a86374aefa`
> Note: Notion is a client-side React app. The tokens below come from the static HTML shell + embedded CSS that loads before hydration. This captures Notion's real design tokens — the skeleton, spinner, layout, and color system.
---
## Typography
### Font Stack
```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji",
Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
```
### Font Rendering
```css
-webkit-font-smoothing: auto;
```
### Line Height
```css
line-height: 1.5;
```
### Font Size Scale (Notion content blocks)
| Element | Size | Weight |
|------------------|---------|--------|
| Page title | 40px | 700 |
| H1 | 1.875em | 600 |
| H2 | 1.5em | 600 |
| H3 | 1.25em | 600 |
| Body / paragraph | 16px | 400 |
| Caption / sub | 14px | 400 |
| Inline code | 85% | 400 |
---
## Color Palette
### Light Mode
| Token | Value | Usage |
|--------------------|-------------|-------------------------------|
| Background (main) | `#fffefc` | Page canvas |
| Background (body) | `#fff` | Body / modals |
| Text (primary) | `#37352f` | All body text |
| Sidebar background | `#f9f8f7` | Left sidebar |
| Border / inset | `#f0efed` | Dividers, inset borders |
| Spinner arc | `#383836` | Loading spinner active arc |
| Spinner border | `rgba(28,19,1,.11)` | Loading spinner track |
| Shimmer base | `rgba(227,226,224,.5)` | Skeleton shimmer base |
| Shimmer overlay | `rgba(0,0,0,0.03)` | Shimmer sweep |
### Dark Mode
| Token | Value | Usage |
|--------------------|-------------|-------------------------------|
| Background (main) | `#191919` | Page canvas |
| Sidebar background | `#202020` | Left sidebar |
| Border / inset | `#2c2c2b` | Dividers, inset borders |
| Shimmer base | `#2f2f2f` | Skeleton shimmer base |
| Shimmer overlay | `rgba(86,86,86,.1)` | Shimmer sweep |
| Spinner border | `rgba(255,255,235,.1)` | Loading spinner track |
| Spinner arc | `#f0efed` | Loading spinner active arc |
### Notion Named Colors (content block colors)
| Name | Text | Background |
|---------|-------------|-------------|
| Default | `#37352f` | — |
| Gray | `#787774` | `#f1f1ef` |
| Brown | `#9f6b53` | `#f4eeee` |
| Orange | `#d9730d` | `#fbecdd` |
| Yellow | `#cb912f` | `#fbf3db` |
| Green | `#448361` | `#edf3ec` |
| Blue | `#337ea9` | `#e7f3f8` |
| Purple | `#9065b0` | `#f6f3f8` |
| Pink | `#c14c8a` | `#faf1f5` |
| Red | `#d44c47` | `#fdebec` |
---
## Spacing
### Layout Spacing
| Context | Value |
|---------------------------|--------------------|
| Page content padding | `40px 20px 60px 20px` (top / sides / bottom) |
| Sidebar padding | `12px 14px` |
| Sidebar width (default) | `240px` |
| Row spacing | `11px` |
| Icon margin | `4px` |
### Component Sizing
| Component | Value |
|----------------------|--------|
| Sidebar icon | `20px × 20px` |
| Loading spinner | `22px × 22px` |
| Spinner border width | `2px` |
| Chevron width | `12px` |
| Draggable bar height | `36px` |
| Electron top pad | `46px` (macOS titlebar offset) |
---
## Border Radius
| Context | Value |
|------------------|--------|
| Skeleton icons | `4px` |
| Skeleton text | `10px` |
| Circular elements| `50%` |
| General UI cards | `3px` |
| Tooltips / menus | `4px` |
---
## Shadows
```css
/* Floating menus / dropdowns */
box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
rgba(15, 15, 15, 0.1) 0px 3px 6px,
rgba(15, 15, 15, 0.2) 0px 9px 24px;
/* Modal / dialog */
box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
rgba(15, 15, 15, 0.1) 0px 5px 10px,
rgba(15, 15, 15, 0.2) 0px 15px 40px;
/* Inline peek / sidebar overlay */
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
rgba(15, 15, 15, 0.1) 0px 2px 4px;
```
---
## Animations
| Name | Value | Usage |
|-----------|------------------------|---------------------------|
| Spinner | `1.2s linear infinite` | Loading spinner rotation |
| Fade-in | `1s ease-in` | Page content fade-in |
| Shimmer | `1s linear infinite` | Skeleton loading shimmer |
### Shimmer keyframe
```css
@keyframes shimmer {
0% { background-position: -1200px 0; }
100% { background-position: 1200px 0; }
}
```
---
## Layout
```css
/* Full-viewport shell */
height: 100vh;
width: 100vw;
/* Primary flex layout */
display: flex;
/* Directional support */
--direction: 1; /* 1 = LTR, -1 = RTL */
```
---
## Z-Index Scale
| Layer | Value |
|---------------------|-------|
| Background skeleton | `-1` |
| Shimmer overlay | `1` |
| Sticky headers | `10` |
| Sidebar | `100` |
| Floating menu | `1000`|
| Modal overlay | `1001`|
| Modal content | `1002`|
| Tooltip | `1003`|
---
## Scrollbar
Notion hides the default scrollbar with a thin, transparent custom track:
```css
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
background: rgba(55, 53, 47, 0.16);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(55, 53, 47, 0.3);
}
::-webkit-scrollbar-track {
background: transparent;
}
```