--- version: alpha name: "notion.com" description: "Design system extracted from https://www.notion.com/ on 2026-10-28" colors: background: "#ffffff" surface: "#ffdec4" surface-2: "#e6f3fe" foreground: "#0d0d0d" muted-foreground: "#615d59" primary: "#0075de" on-primary: "#ffffff" secondary: "#ffb110" border: "#e6e6e6" typography: headline-display: fontFamily: "NotionInter" fontSize: "96px" fontWeight: 600 lineHeight: "100px" letterSpacing: "-4.6px" headline-lg: fontFamily: "NotionInter" fontSize: "22px" fontWeight: 700 lineHeight: "28px" letterSpacing: "-0.25px" headline-md: fontFamily: "NotionInter" fontSize: "16px" fontWeight: 700 lineHeight: "24px" body-md: fontFamily: "Lyon Text" fontSize: "18px" fontWeight: 400 lineHeight: "28px" label-md: fontFamily: "NotionInter" fontSize: "14px" fontWeight: 400 lineHeight: "20px" button: fontFamily: "NotionInter" fontSize: "14px" fontWeight: 400 lineHeight: "20px" rounded: none: "0px" md: "8px" lg: "12px" sm: "4px" full: "9999px" spacing: unit: "4px" 1: "4px" 2: "8px" 3: "12px" 4: "16px" 5: "24px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "8px" height: "36px" padding: "4px 14px" button-ghost: backgroundColor: "#ffffff" textColor: "#000000e5" typography: "{typography.button}" rounded: "4px" height: "30px" padding: "5px 10px" button-secondary: backgroundColor: "#e6f3fe" textColor: "#005bab" typography: "{typography.button}" rounded: "8px" height: "38px" padding: "6px 15px" card: backgroundColor: "#ffffff" rounded: "12px" padding: "24px" --- # notion.com ## Overview The AI workspace that works for you. | Notion: Build Custom Agents, search across all your apps, and automate busywork. The AI workspace where teams get more done, faster. Gently rounded controls, layered shadows for depth, large display type at 96px / 600, a single blue accent on neutrals. The site ships in light mode by default. Measured from 761 rendered elements at 1440px wide on 2026-10-28. Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot: - `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold - `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page - `screenshots/brand-logo.png`: primary logo lockup - `screenshots/brand-symbol.png`: possible standalone brand symbol - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/brand-icon-2.png`: representative interface icon - `screenshots/brand-icon-3.png`: representative interface icon - `screenshots/brand-icon-4.png`: representative interface icon - `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture - `screenshots/media-symbol-source-hd.png`: possible standalone brand symbol / high-resolution source capture - `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/brand-favicon-source.png`: Favicon source - `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail - `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail - `screenshots/region-r3-context.jpg`: r3 context: page context - `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail - `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold - `screenshots/tablet-768-fold.png`: Tablet 768, above the fold - `screenshots/phone-390-fold.png`: Phone 390, above the fold - `screenshots/phone-390-full.jpg`: Phone 390, full page - `screenshots/phone-390-menu.png`: Phone 390, navigation menu open - `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png - `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png - `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp - `screenshots/media-symbol-upscaled.png`: possible standalone brand symbol / upscaled.png - `screenshots/media-symbol-transparent.png`: possible standalone brand symbol / transparent.png - `screenshots/media-symbol-optimized.webp`: possible standalone brand symbol / optimized.webp - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png - `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp - `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png - `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png - `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png - `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png - `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png - `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico - `screenshots/c-button-1--rest.png`: Button 1 ("Get Notion free"), rest - `screenshots/c-button-1--hover.png`: Button 1 ("Get Notion free"), hover - `screenshots/c-button-1--focus.png`: Button 1 ("Get Notion free"), focus - `screenshots/c-button-1--active.png`: Button 1 ("Get Notion free"), active - `screenshots/c-button-1--disabled.png`: Button 1 ("Get Notion free"), disabled - `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest - `screenshots/c-icon-button-1--hover.png`: Icon button 1, hover - `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus - `screenshots/c-icon-button-1--active.png`: Icon button 1, active - `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled - `screenshots/c-link-1--rest.png`: Text link 1 ("Using the most AI-native"), rest - `screenshots/c-link-1--hover.png`: Text link 1 ("Using the most AI-native"), hover - `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Pricing"), rest - `screenshots/c-nav-link-1--hover.png`: Navigation link 1 ("Pricing"), hover - `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Pricing"), focus - `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Product"), rest - `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Product"), hover - `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by menu-button "Product" - `screenshots/c-menu-button-1--open.png`: Menu / dropdown trigger 1 ("Product"), open (trigger) - `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Features"), rest - `screenshots/c-card-1--rest.png`: Card 1 ("Triage product feedback→"), rest - `screenshots/c-card-1--hover.png`: Card 1 ("Triage product feedback→"), hover - `screenshots/c-blockquote-1--rest.png`: Blockquote 1 ("Using the most AI-native"), rest - `screenshots/c-image-1--rest.png`: Image / figure 1, rest - `screenshots/c-video-1--rest.png`: Video / media embed 1, rest - `screenshots/c-button-2--rest.png`: Button 2 ("Do Not Sell or Share My "), rest - `screenshots/c-button-2--hover.png`: Button 2 ("Do Not Sell or Share My "), hover - `screenshots/c-button-2--focus.png`: Button 2 ("Do Not Sell or Share My "), focus - `screenshots/c-button-2--active.png`: Button 2 ("Do Not Sell or Share My "), active - `screenshots/c-button-3--rest.png`: Button 3 ("Get Notion free"), rest - `screenshots/c-button-3--hover.png`: Button 3 ("Get Notion free"), hover - `screenshots/c-button-3--focus.png`: Button 3 ("Get Notion free"), focus - `screenshots/c-button-3--active.png`: Button 3 ("Get Notion free"), active - `screenshots/c-button-3--disabled.png`: Button 3 ("Get Notion free"), disabled - `screenshots/c-image-3--rest.png`: Image / figure 3, rest - `screenshots/c-button-4--rest.png`: Button 4 ("Request a demo"), rest - `screenshots/c-button-4--hover.png`: Button 4 ("Request a demo"), hover - `screenshots/c-button-4--focus.png`: Button 4 ("Request a demo"), focus - `screenshots/c-button-4--active.png`: Button 4 ("Request a demo"), active - `screenshots/c-button-4--disabled.png`: Button 4 ("Request a demo"), disabled - `screenshots/c-button-5--rest.png`: Button 5 ("Pause"), rest - `screenshots/c-button-5--hover.png`: Button 5 ("Pause"), hover - `screenshots/c-button-5--focus.png`: Button 5 ("Pause"), focus - `screenshots/c-button-5--active.png`: Button 5 ("Pause"), active - `screenshots/c-button-6--rest.png`: Button 6 ("Request a demo"), rest - `screenshots/c-button-6--hover.png`: Button 6 ("Request a demo"), hover - `screenshots/c-button-6--focus.png`: Button 6 ("Request a demo"), focus - `screenshots/c-button-6--active.png`: Button 6 ("Request a demo"), active - `screenshots/c-button-6--disabled.png`: Button 6 ("Request a demo"), disabled ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#ffffff` | Page background | | surface | `#ffdec4` | Cards, panels, raised or recessed surfaces | | surface-2 | `#e6f3fe` | Secondary surface | | foreground | `#0d0d0d` | Primary text | | muted-foreground | `#615d59` | Secondary text, captions | | primary | `#0075de` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. | | on-primary | `#ffffff` | Text on the accent | | secondary | `#ffb110` | Secondary accent (yellow) | | border | `#e6e6e6` | Hairlines, dividers, input borders | Full painted palette by area (largest first): `#ffffff`, `#097fe8`, `#ffb110`, `#f64932`, `#005bab`, `#e32d14`, `#e89d01`, `#404040`. Gradients in use: `linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%)`. The accent `#0075de` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral. ## Typography - **NotionInter** for h1, h2, h3, body, button, label: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. - **Lyon Text** for body: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | NotionInter | 96px | 600 | 100px | -4.6px | | headline-lg | NotionInter | 22px | 700 | 28px | -0.25px | | headline-md | NotionInter | 16px | 700 | 24px | normal | | body-md | Lyon Text | 18px | 400 | 28px | normal | | label-md | NotionInter | 14px | 400 | 20px | normal | | button | NotionInter | 14px | 400 | 20px | normal | Type scale in use: 14px, 16px, 18px, 20px, 22px, 42px, 54px, 72px, 96px. Base body size 18px. The hero heading (h1) renders at 96px / 600, center aligned, up to 1252px wide, tracking -4.6px. Sample: "Where teams and agents Create together.". See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## Layout - Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 24 (px). - Flex and grid gaps: 8, 12, 16, 24, 32 px. - Content max width: 1229px, centred. - Breakpoints: 600px, 840px, 1080px, 1280px, 1440px. - Header: 64px tall, relative, background `rgb(255, 255, 255)`; 12 nav links at 16px / 400 (See all features→ · See what’s new→ · Notion App→ · Enterprise · Small businesses · Startups · Developers · What's New). ## Elevation & Depth Shadows in use, most common first: - shadow-1: `rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px` - shadow-2: `rgba(0, 0, 0, 0) 0px 1px 0px 0px` - shadow-3: `rgba(0, 0, 0, 0.008) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px` ## Shapes - Buttons: 8px - Inputs: 8px - Cards and panels: 12px - Images and media: 0px - Radius scale: none 0px, md 8px, lg 12px, sm 4px, full 9999px ## Components ### Button, primary Background `#0075de`, text `#ffffff`, border 1px solid transparent, radius 8px, height 36px, padding 4px 14px, 16px / 500. Sample label: "Get Notion free". ### Button, ghost Background transparent (it sits on `#ffffff`, so place it on that colour), text `#000000e5`, border none, radius 4px, height 30px, padding 5px 10px, 16px / 400. Sample label: "Product". ### Button, secondary Background `#e6f3fe`, text `#005bab`, border 1px solid transparent, radius 8px, height 38px, padding 6px 15px, 16px / 500. Sample label: "Request a demo". ### Card Background `#ffffff`, border 1px solid #0000001a, radius 12px, padding 24px, no shadow. Typical size about 239×160px. ### Link Colour `#000000e5`, no underline at rest, weight 400. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (17 of 87 in the checklist, 24 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 34 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | primary, ghost sm, primary, secondary, secondary-icon-right, secondary, secondary-with-icon | hover, focus, active, disabled | "Get Notion free" | | Icon button | outline | hover, focus, active, disabled | | | Text link | plain | hover, focus, active | "Using the most AI-native tools" | | Navigation link | plain | hover, focus | "Pricing" | | Menu / dropdown trigger | ghost | hover, open | "Product" | | Footer | default | rest only | "We shape our tools, and therea" | | Footer link | plain | rest only | "Features" | | Card | outlined-with-media | hover | "Triage product feedback→" | | Blockquote | default | rest only | "Using the most AI-native tools" | | Image / figure | aspect-3.5, aspect-1, aspect-3.21 | rest only | | | Video / media embed | default | rest only | | | Icon | filled-24px | rest only | | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Text input, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Header / navbar, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, Styled list, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar. ## Dark Mode No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute. ## Responsive Behavior | Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | desktop 1440px | 1229px | 94px | 16px | 96px, 2 lines, center | 64px, 4 links, 1 CTA | text only | 2→1 col; 3→2 col; 2→1 col | content-width | | laptop 1024px | 870px | 32px | 16px | 89.7px, 2 lines, center | 64px, hamburger (Toggle main menu), 1 CTA | text only | 3→2 col; 2→1 col; 5→1 col | content-width | | tablet 768px | 653px | 32px | 16px | 60.9px, 2 lines, center | 64px, hamburger (Toggle main menu), 1 CTA | media above text | 3→1 col; 2→1 col; 5→1 col | content-width | | phone 390px | 358px | 16px | 16px | 42px, 3 lines, center | 64px, hamburger (Toggle main menu), 1 CTA | media above text | 2→1 col; 3→3 col; 4→2 col | 2 full-width | - H1 goes 96px → 42px (44%), 2 → 3 lines. - Nav collapses to a hamburger by 390px (first seen at 1024px); header 64px → 64px. - Hero: text only → media above text. - Body text is 16px at the sampled desktop and phone widths. - Phone side gutter 16px. - 2 buttons stretch full-width on phones. - Section top padding 96px → 32px. ## Interaction & Motion 126 elements carry transitions; typical 0.2s with cubic-bezier(0.42, 0, 1, 1), mostly on background-color, color, text-decoration-color. 4 running keyframe animations (HWB10a_navShadowScrolled auto 1; X75v-G_marqueeFrames 60s infinite; njy5Hq_popoverFadeIn 0.15s 1). - Hover on button-primary ("Get Notion free"): background #0075de → #005bab; cursor pointer. - Hover on button-secondary ("Get Notion free"): background #0075de → #005bab; cursor pointer; transition background-color, color | 0.2s | cubic-bezier(0.42, 0, 1, 1). - Hover on nav-link ("Pricing"): background transparent → #0000000d; cursor pointer; transition background-color | 0.15s | ease. - Focus on button-primary: outline 2px solid rgba(0, 117, 222, 0.925), offset 2px. - Tooltip triggers exist (1 × aria-describedby) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip. - Hover/click menus: below the trigger, 29px gap, shifted right; #ffffff, radius 16px, padding 16px 16px, shadow yes; 10 items, 16px tall, 12px, padding 0px 8px, with icons, with descriptions, 3 columns; n/a; n/a. - No scroll-reveal: content is visible without scrolling into view. - Portal roots present: portal. Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`. ## Do's and Don'ts - Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Use `#0075de` where supported by measured component or regional evidence; its accent role is inferred. - Do keep body text at 18px in NotionInter. - Do match corner radii per element class (buttons 8px, cards 12px); do not pick one radius for everything. - Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from body; large surface colors remain in the palette.