Notion
MIT
Minimal, content-first design system with clean typography and subtle interactions, built for productivity tools and knowledge work platforms
Colour (139)
color.heronavbgvar(--color-gray-900)
color.colorblack#000
color.colorwhite#fff
color.colorred100#fef3f1
color.colorred200#fdd3cd
color.colorred300#ff8b7c
color.colorred400#f77463
color.colorred500#f64932
color.colorred600#e32d14
color.colorred700#b01601
color.colorred800#6f0d00
color.colorred900#4f0900
color.borderwidth11px
color.borderwidth22px
color.borderwidth44px
color.colorblue100#f2f9ff
color.colorblue200#e6f3fe
color.colorblue300#93cdfe
color.colorblue400#62aef0
color.colorblue500#097fe8
color.colorblue600#0075de
color.colorblue700#005bab
color.colorblue800#00396b
color.colorblue900#002a4f
color.colorgray100#f9f9f8
color.colorgray200#f6f5f4
color.colorgray300#dfdcd9
color.colorgray400#a39e98
color.colorgray500#78736f
color.colorgray600#615d59
color.colorgray700#494744
color.colorgray800#31302e
color.colorgray900#191918
color.colorpink100#fff5fc
color.colorpink200#ffcdf1
color.colorpink300#ffb5eb
color.colorpink400#ff83dd
color.colorpink500#ff64c8
color.colorpink600#d13f9d
color.colorpink700#9d2472
color.colorpink800#6c1b4f
color.colorpink900#481034
color.colorteal100#f2fafa
color.colorteal200#bde6e4
color.colorteal300#83cbc9
color.colorteal400#2a9d99
color.colorteal500#27918d
color.colorteal600#0a7b77
Spacing (41)
spacing.spacing00
spacing.decorationlinkunderlineoffset0.1em
spacing.spacing40.25rem
spacing.spacing80.5rem
spacing.spacing120.75rem
spacing.spacing161rem
spacing.decorationlinkunderlinethickness1px
spacing.spacing201.25rem
spacing.spacing241.5rem
spacing.spacing281.75rem
spacing.spacing301.875rem
spacing.spacing322rem
spacing.decorationfocusringoutlineoffset2px
spacing.spacing402.5rem
spacing.spacing483rem
spacing.spacing563.5rem
spacing.spacing644rem
spacing.borderwidth44px
spacing.spacing724.5rem
spacing.spacing805rem
spacing.spacing966rem
spacing.spacexs8px
spacing.spacing1288rem
spacing.spacing16010rem
spacing.gridsmgutter12px
spacing.spacesm16px
spacing.spacingxs20px
spacing.spacingblocks20px
spacing.spacingblockm24px
spacing.sizeblockheadericon26px
spacing.gridgutter28px
spacing.spacingblockl32px
spacing.spacings40px
spacing.spacingm60px
spacing.basepadding60px
spacing.headerheight60px
spacing.globalnavigationheight64px
spacing.space2xl80px
spacing.spacingl120px
spacing.space3xl125px
spacing.spacingxl160px
Radius (13)
borderradius2000.25rem
borderradius3000.3125rem
borderradius4000.375rem
borderradius5000.5rem
borderradius6000.625rem
borderradius7000.75rem
borderradius8000.875rem
borderradius9001rem
radiussm4px
radiusmd8px
radiuslg12px
radiusfull50%
borderradiusround624.9375rem
Shadow (23)
effect.shadowsmrgba(0, 0, 0, 0.04) 0px 4px 18px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.84688px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.01) 0px 0.175px 1.04062px 0px
effect.direction1
effect.gridcolumns12
effect.zindexpopup500
effect.shadowfilter0 4px 18px #0000004d
effect.zindexbanner90
effect.zindexheader100
effect.shadowlevel1000px 3px 9px #00000008,0px 0.7px 1.4625px rgba(0,0,0,.015)
effect.shadowlevel2000px 4px 18px #0000000a, 0px 2.025px 7.84688px rgba(0,0,0,.027), 0px 0.8px 2.925px #00000005, 0px 0.175px 1.04062px rgba(0,0,0,.013)
effect.shadowlevel3000px 20px 50px #00000014,0px 6px 16px #0000000a
effect.zindexlightboxvar(--z-index-popup)
effect.gridcolumnwidth1fr
effect.zindexmobilenav200
effect.motionduration100100ms
effect.motionduration150150ms
effect.motionduration200200ms
effect.motionduration250250ms
effect.motionduration300300ms
effect.motiontimingfunctioneaseinease-in
effect.motiontimingfunctionlinearlinear
effect.backdropfilterbuttonprimarybackdrop-filter: blur(12px)
effect.motiontimingfunctioneaseoutease-out
effect.motionglobalnavigationnavshadowscrolledpzkcg@keyframes globalNavigation_navShadowScrolled__pZKcg {
0% { box-shadow: rgba(0, 0, 0, 0) 0px 1px
# layout.md — Notion Design System
---
## 0. Quick Reference
**Stack:** Next.js · CSS custom properties · Custom font (NotionInter) · No utility framework
**Token source:** `extracted-css-vars` — 408 CSS custom properties, high confidence. Use original variable names exactly.
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.
```css
/* ── Core Tokens (copy into :root) ── */
:root {
/* Fonts */
--font-family-sans: NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-family-serif: "Lyon Text", Georgia, serif;
--font-family-mono: "iA Writer Mono", Nitti, Menlo, Courier, monospace;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Colour — Brand */
--brand-primary-cta: rgb(69, 93, 211); /* primary button bg */
--brand-secondary-cta: rgb(33, 49, 131); /* primary button hover bg */
--color-black: #000;
--color-white: #fff;
/* Colour — Text */
--text-color-regular: #040404;
--text-color-dark: #111;
--text-color-medium: #0009;
--text-color-light: #0006;
--text-color-extra-light: #0003;
/* Colour — Surface */
--color-gray-100: #f9f9f8;
--color-gray-900: #191918;
--border-color-regular: #00000014;
/* Spacing */
--spacing-8: 0.5rem; --spacing-16: 1rem; --spacing-24: 1.5rem;
--spacing-32: 2rem; --spacing-40: 2.5rem; --spacing-64: 4rem;
--spacing-80: 5rem;
--spacing-block-s: 20px; --spacing-block-m: 24px; --spacing-block-l: 32px;
--spacing-xs: 20px; --spacing-s: 40px; --spacing-m: 60px;
--spacing-l: 120px; --spacing-xl: 160px;
--header-height: 60px; --global-navigation-height: 64px;
/* Radius */
--border-radius-500: 0.5rem; /* 8px — most common: tabs, accordions */
--border-radius-900: 1rem; /* 16px */
--border-radius-round: 624.9375rem; /* pill — nav links */
/* Shadow */
--shadow-level-200: 0px 4px 18px #0000000a, 0px 2.025px 7.84688px rgba(0,0,0,.027), 0px 0.8px 2.925px #00000005, 0px 0.175px 1.04062px rgba(0,0,0,.013);
/* Motion */
--motion-duration-150: 150ms;
--motion-duration-200: 200ms;
--motion-timing-function-ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
}
```
<!-- Quick Reference truncated to fit the 75-line cap. See later sections for the full design system. -->
## 1. Design Direction & Philosophy
### Character & Mood
Notion's visual language is **calm, precise, and editorial**. The homepage presents a dark-mode hero that transitions to a clean white-background product surface — signalling power in darkness, clarity in light. Typography is the primary design tool: large, tightly tracked sans-serif headlines communicate confidence; the serif (`Lyon Text`) is reserved for editorial warmth.
### Aesthetic Intent
- **Minimal chrome:** Interface elements recede; content is the hero. Borders are near-invisible (`#00000014`). Shadows are subtle multi-layer fringe shadows, not heavy drop shadows.
- **Typography-first hierarchy:** Scale and weight carry visual hierarchy. Colour is used sparingly as accent, not decoration.
- **Editorial restraint:** The palette is near-monochromatic in the product UI. Brand blue (`rgb(69, 93, 211)`) appears only on primary CTAs and key links.
- **Smooth motion:** Transitions are short (150–200ms), eased with custom cubic-bezier curves. Animation is purposeful — scroll-triggered, not decorative loops.
### What This Design Explicitly Rejects
- **Rounded-everything UI:** Cards use 12px radius, not 24px+. Only pill-shaped elements (nav links, icon buttons) use `--border-radius-round`.
- **Heavy drop shadows:** No `box-shadow: 0 10px 40px rgba(0,0,0,0.3)`. All shadows are `--shadow-level-100` or `--shadow-level-200`.
- **Saturated colour palettes:** Status colours (green, orange, red) appear as soft 100-level tints, not vivid primaries.
- **Gradient-heavy backgrounds:** Hero uses a solid dark background (`--color-gray-900`), not a colourful gradient.
- **Tight line-heights:** Notion uses generous line-heights at body size (24px for 16px text = 1.5 ratio).
- **Generic system fonts:** The custom `NotionInter` is non-negotiable; system `Inter` is only the first fallback.
---
## 2. Colour System
### Tier 1 — Primitive Values
```css
/* ── Gray Scale ── */
--color-gray-100: #f9f9f8; /* near-white warm background */
--color-gray-200: #f6f5f4; /* subtle section background */
--color-gray-300: #dfdcd9; /* dividers, disabled borders */
--color-gray-400: #a39e98; /* placeholder text */
--color-gray-500: #78736f; /* muted UI text */
--color-gray-600: #615d59; /* secondary body text */
--color-gray-700: #494744; /* strong secondary text */
--color-gray-800: #31302e; /* near-black text */
--color-gray-900: #191918; /* hero/dark backgrounds */
/* ── Pure Endpoints ── */
--color-black: #000;
--color-white: #fff;
--color-transparent: #fff0;
/* ── Alpha Black (for overlays on light) ── */
--color-alpha-black-100: #0000000d; /* 5% black */
--color-alpha-black-200: #0000001a; /* 10% black */
--color-alpha-black-300: #0003; /* 20% black */
--color-alpha-black-400: #0000004d; /* 30% black */
--color-alpha-black-500: #0000008a; /* 54% black */
--color-alpha-black-600: #00000096; /* 59% black */
--color-alpha-black-700: #000000bf; /* 75% black */
--color-alpha-black-800: #000000e6; /* 90% black */
--color-alpha-black-900: #000000f2; /* 95% black */
/* ── Alpha White (for overlays on dark) ── */
--color-alpha-white-100: #ffffff0d; /* 5% white */
--color-alpha-white-200: #ffffff1a; /* 10% white */
--color-alpha-white-300: #fff3; /* 20% white */
--color-alpha-white-400: #ffffff4d; /* 30% white */
--color-alpha-white-500: #ffffff80; /* 50% white */
--color-alpha-white-600: #ffffffa8; /* 66% white */
--color-alpha-white-700: #ffffffbf; /* 75% white */
--color-alpha-white-800: #ffffffd9; /* 85% white */
--color-alpha-white-900: #fffffff2; /* 95% white */
/* ── Red ── */
--color-red-100: #fef3f1; --color-red-200: #fdd3cd; --color-red-300: #ff8b7c;
--color-red-400: #f77463; --color-red-500: #f64932; --color-red-600: #e32d14;
--color-red-700: #b01601; --color-red-800: #6f0d00; --color-red-900: #4f0900;
/* ── Orange ── */
--color-orange-100: #fff5ed; --color-orange-200: #ffdec4; --color-orange-300: #ffad71;
--color-orange-400: #ff8a33; --color-orange-500: #ff6d00; --color-orange-600: #dd5b00;
--color-orange-700: #ab4a00; --color-orange-800: #793400; --color-orange-900: #532200;
/* ── Yellow ── */
--color-yellow-100: #fff5e0; --color-yellow-200: #ffe4af; --color-yellow-300: #ffd786;
--color-yellow-400: #ffc95e; --color-yellow-500: #ffb110; --color-yellow-600: #e89d01;
--color-yellow-700: #c78600; --color-yellow-800: #a16c00; --color-yellow-900: #704b00;
/* ── Green ── */
--color-green-100: #f0faf2; --color-green-200: #d0f4d8; --color-green-300: #abe5b8;
--color-green-400: #68ce7e; --color-green-500: #1aae39; --color-green-600: #14832b;
--color-green-700: #0f6220; --color-green-800: #0a4216; --color-green-900: #05210b;
/* ── Blue ── */
--color-blue-100: #f2f9ff; --color-blue-200: #e6f3fe; --color-blue-300: #93cdfe;
--color-blue-400: #62aef0; --color-blue-500: #097fe8; --color-blue-600: #0075de;
--color-blue-700: #005bab; --color-blue-800: #00396b; --color-blue-900: #002a4f;
/* ── Purple ── */
--color-purple-100: #f8f5fc; --color-purple-200: #eadbfa; --color-purple-300: #d6b6f6;
--color-purple-400: #ad6ded; --color-purple-500: #9849e8; --color-purple-600: #7237ae;
--color-purple-700: #562983; --color-purple-800: #391c57; --color-purple-900: #1c0e2c;
/* ── Teal ── */
--color-teal-100: #f2fafa; --color-teal-200: #bde6e4; --color-teal-300: #83cbc9;
--color-teal-400: #2a9d99; --color-teal-500: #27918d; --color-teal-600: #0a7b77;
--color-teal-700: #126764; --color-teal-800: #0a4d4b; --color-teal-900: #042b29;
/* ── Pink ── */
--color-pink-100: #fff5fc; --color-pink-200: #ffcdf1; --color-pink-300: #ffb5eb;
--color-pink-400: #ff83dd; --color-pink-500: #ff64c8; --color-pink-600: #d13f9d;
--color-pink-700: #9d2472; --color-pink-800: #6c1b4f; --color-pink-900: #481034;
/* ── Brown ── */
--color-brown-100: #fcf8f5; --color-brown-200: #ebd5c5; --color-brown-300: #d9b79f;
--color-brown-400: #b18164; --color-brown-500: #9c7054; --color-brown-600: #885d3d;
--color-brown-700: #744d2d; --color-brown-800: #654124; --color-brown-900: #523410;
/* ── Campaign / Agents Launch ── */
--color-campaigns-agents-launch-blue-300: #607df6;
--color-campaigns-agents-launch-blue-400: #455dd3;
--color-campaigns-agents-launch-blue-500: #394ea3;
--color-campaigns-agents-launch-blue-600: #213183;
--color-campaigns-agents-launch-blue-900: #02093a;
--color-campaigns-agents-launch-yellow: #fefcd5;
```
### Tier 2 — Semantic Aliases
```css
/* ── Text ── */
--text-color-regular: #040404; /* default body and UI text */
--text-color-dark: #111; /* headings, emphasis */
--text-color-medium: #0009; /* secondary body text */
--text-color-light: #0006; /* tertiary text, metadata */
--text-color-extra-light: #0003; /* ghost text, placeholders */
/* ── Borders ── */
--border-color-regular: #00000014; /* default border — nearly all dividers and card edges */
/* ── Brand Actions (curated semantic names, extracted from computed styles) ── */
--brand-primary-cta: rgb(69, 93, 211); /* "Get Notion free" button background */
--brand-secondary-cta: rgb(33, 49, 131); /* primary button hover state */
```
### Tier 3 — Component Tokens
```css
/* ── Buttons (referenced by component CSS classes) ── */
/* --color-button-primary-text → var(--color-white) */
/* --color-button-primary-background → var(--brand-primary-cta) */
/* --color-button-primary-background-hover → var(--brand-secondary-cta) */
/* --color-text-muted → used for disabled state text */
/* ── Status (surfaces only — use 100-level tints) ── */
--color-green-100: #f0faf2; /* success surface */
--color-orange-100: #fff5ed; /* warning surface */
--color-red-100: #fef3f1; /* error surface */
--color-blue-100: #f2f9ff; /* info surface */
```
### Colour Palette at a Glance
| Role | Token | Value |
|---|---|---|
| Primary CTA | `--brand-primary-cta` | `rgb(69, 93, 211)` |
| Primary CTA Hover | `--brand-secondary-cta` | `rgb(33, 49, 131)` |
| Body Text | `--text-color-regular` | `#040404` |
| Muted Text | `--text-color-light` | `#0006` |
| Ghost Text | `--text-color-extra-light` | `#0003` |
| App Background | `--color-white` | `#fff` |
| Dark Background | `--color-gray-900` | `#191918` |
| Default Border | `--border-color-regular` | `#00000014` |
| Success Surface | `--color-green-100` | `#f0faf2` |
| Warning Surface | `--color-orange-100` | `#fff5ed` |
| Error Surface | `--color-red-100` | `#fef3f1` |
| Info Surface | `--color-blue-100` | `#f2f9ff` |
| Link | `--color-blue-600` | `#0075de` |
---
## 3. Typography System
### Font Stacks
```css
--font-family-sans: NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-serif: "Lyon Text", Georgia, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
--font-family-mono: "iA Writer Mono", Nitti, Menlo, Courier, monospace;
--font-family-handwriting: "Permanent Marker", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
/* i18n overrides */
--font-family-sans-arabic: "Noto Sans Arabic", NotionInter, Inter, Arial, sans-serif;
--font-family-sans-hebrew: "Noto Sans Hebrew", NotionInter, Inter, Arial, sans-serif;
--font-family-sans-vietnamese: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
```
### Weight Scale
```css
--font-weight-regular: 400; /* body, body-large */
--font-weight-medium: 500; /* UI labels, nav, captions */
--font-weight-semibold: 600; /* subheadings, card titles */
--font-weight-bold: 700; /* h1, h2, hero text */
/* Variable font optical weights (when using variable font file) */
--font-weight-variable-regular: 420;
--font-weight-variable-medium: 520;
--font-weight-variable-semibold: 620;
--font-weight-variable-bold: 680;
```
### Font Size Scale
```css
--font-size-50: 0.75rem; /* 12px — captions, overlines */
--font-size-100: 0.875rem; /* 14px — small labels, badges, links */
--font-size-150: 0.9375rem; /* 15px — secondary body */
--font-size-200: 1rem; /* 16px — body, UI default */
--font-size-300: 1.125rem; /* 18px — large body, card intro */
--font-size-350: 1.25rem; /* 20px — small heading */
--font-size-400: 1.375rem; /* 22px — card titles */
--font-size-500: 1.625rem; /* 26px — section subheadings */
--font-size-600: 2rem; /* 32px — h3-level section headings */
--font-size-700: 2.625rem; /* 42px — h2-level */
--font-size-800: 3.375rem; /* 54px — large display */
--font-size-900: 4rem; /* 64px — hero headline */
--font-size-1000: 4.75rem; /* 76px — max display */
```
### Line Height Scale
```css
--font-line-height-50: var(--spacing-16); /* 16px */
--font-line-height-100: var(--spacing-20); /* 20px */
--font-line-height-150: var(--spacing-20); /* 20px */
--font-line-height-200: var(--spacing-24); /* 24px */
--font-line-height-300: var(--spacing-28); /* 28px */
--font-line-height-350: var(--spacing-28); /* 28px */
--font-line-height-400: var(--spacing-28); /* 28px */
--font-line-height-450: var(--spacing-30); /* 30px */
--font-line-height-500: var(--spacing-32); /* 32px */
--font-line-height-600: var(--spacing-40); /* 40px */
--font-line-height-700: var(--spacing-48); /* 48px */
--font-line-height-800: var(--spacing-56); /* 56px */
--font-line-height-900: var(--spacing-64); /* 64px */
--font-line-height-1000: var(--spacing-80); /* 80px */
```
### Composite Typography Groups
Notion defines these as CSS `font` shorthand tokens. **ALWAYS use the composite token** — never compose size + weight + family from scratch.
```css
/* ── Sans Composites (most common) ── */
--typography-sans-50-regular-font: var(--font-weight-regular) var(--font-size-50) / var(--font-line-height-50) var(--font-family-sans);
--typography-sans-50-medium-font: var(--font-weight-medium) var(--font-size-50) / var(--font-line-height-50) var(--font-family-sans);
--typography-sans-100-regular-font: var(--font-weight-regular) var(--font-size-100) / var(--font-line-height-100) var(--font-family-sans);
--typography-sans-100-medium-font: var(--font-weight-medium) var(--font-size-100) / var(--font-line-height-100) var(--font-family-sans);
--typography-sans-100-semibold-font: var(--font-weight-semibold) var(--font-size-100) / var(--font-line-height-100) var(--font-family-sans);
--typography-sans-150-regular-font: var(--font-weight-regular) var(--font-size-150) / var(--font-line-height-150) var(--font-family-sans);
--typography-sans-200-regular-font: var(--font-weight-regular) var(--font-size-200) / var(--font-line-height-200) var(--font-family-sans);
--typography-sans-200-medium-font: var(--font-weight-medium) var(--font-size-200) / var(--font-line-height-200) var(--font-family-sans);
--typography-sans-200-semibold-font: var(--font-weight-semibold) var(--font-size-200) / var(--font-line-height-200) var(--font-family-sans);
--typography-sans-200-bold-font: var(--font-weight-bold) var(--font-size-200) / var(--font-line-height-200) var(--font-family-sans);
--typography-sans-300-regular-font: var(--font-weight-regular) var(--font-size-300) / var(--font-line-height-300) var(--font-family-sans);
--typography-sans-300-semibold-font: var(--font-weight-semibold) var(--font-size-300) / var(--font-line-height-300) var(--font-family-sans);
--typography-sans-400-regular-font: var(--font-weight-regular) var(--font-size-400) / var(--font-line-height-400) var(--font-family-sans);
--typography-sans-400-semibold-font: var(--font-weight-semibold) var(--font-size-400) / var(--font-line-height-400) var(--font-family-sans);
--typography-sans-400-bold-font: var(--font-weight-bold) var(--font-size-400) / var(--font-line-height-400) var(--font-family-sans);
--typography-sans-500-medium-font: var(--font-weight-medium) var(--font-size-500) / var(--font-line-height-500) var(--font-family-sans);
--typography-sans-500-semibold-font: var(--font-weight-semibold) var(--font-size-500) / var(--font-line-height-500) var(--font-family-sans);
--typography-sans-500-bold-font: var(--font-weight-bold) var(--font-size-500) / var(--font-line-height-500) var(--font-family-sans);
--typography-sans-600-semibold-font: var(--font-weight-semibold) var(--font-size-600) / var(--font-line-height-600) var(--font-family-sans);
--typography-sans-600-bold-font: var(--font-weight-bold) var(--font-size-600) / var(--font-line-height-600) var(--font-family-sans);
--typography-sans-700-semibold-font: var(--font-weight-semibold) var(--font-size-700) / var(--font-line-height-700) var(--font-family-sans);
--typography-sans-700-bold-font: var(--font-weight-bold) var(--font-size-700) / var(--font-line-height-700) var(--font-family-sans);
--typography-sans-800-semibold-font: var(--font-weight-semibold) var(--font-size-800) / var(--font-line-height-800) var(--font-family-sans);
--typography-sans-800-bold-font: var(--font-weight-bold) var(--font-size-800) / var(--font-line-height-800) var(--font-family-sans);
--typography-sans-900-regular-font: var(--font-weight-regular) var(--font-size-900) / var(--font-line-height-900) var(--font-family-sans);
--typography-sans-900-semibold-font: var(--font-weight-semibold) var(--font-size-900) / var(--font-line-height-900) var(--font-family-sans);
--typography-sans-900-bold-font: var(--font-weight-bold) var(--font-size-900) / var(--font-line-height-900) var(--font-family-sans);
--typography-sans-1000-regular-font: var(--font-weight-regular) var(--font-size-1000) / var(--font-line-height-1000) var(--font-family-sans);
--typography-sans-1000-bold-font: var(--font-weight-bold) var(--font-size-1000) / var(--font-line-height-1000) var(--font-family-sans);
/* ── Serif Composites (editorial / blog contexts) ── */
--typography-serif-200-regular-font: var(--font-weight-regular) var(--font-size-200) / var(--font-line-height-200) var(--font-family-serif);
--typography-serif-300-regular-font: var(--font-weight-regular) var(--font-size-300) / var(--font-line-height-300) var(--font-family-serif);
--typography-serif-400-regular-font: var(--font-weight-regular) var(--font-size-400) / var(--font-line-height-400) var(--font-family-serif);
--typography-serif-500-regular-font: var(--font-weight-regular) var(--font-size-500) / var(--font-line-height-500) var(--font-family-serif);
--typography-serif-600-regular-font: var(--font-weight-regular) var(--font-size-600) / var(--font-line-height-600) var(--font-family-serif);
--typography-serif-700-regular-font: var(--font-weight-regular) var(--font-size-700) / var(--font-line-height-700) var(--font-family-serif);
--typography-serif-800-regular-font: var(--font-weight-regular) var(--font-size-800) / var(--font-line-height-800) var(--font-family-serif);
--typography-serif-900-regular-font: var(--font-weight-regular) var(--font-size-900) / var(--font-line-height-900) var(--font-family-serif);
```
### Letter-Spacing Rules
**Critical:** Large sans-serif sizes use aggressive negative tracking. This is intentional and brand-defining.
| Size | Regular | Semibold/Bold |
|---|---|---|
| 50 (12px) | `+0.0078125rem` | `+0.0078125rem` |
| 100–200 | `0` | `0` |
| 300–350 | `-0.0078125rem` | `-0.0078125rem` |
| 400 (22px) | `-0.015625rem` | `-0.015625rem` |
| 500 | `-0.0390625rem` | `-0.0390625rem` |
| 600 (32px) | `-0.0625rem` | `-0.046875rem` |
| 700 (42px) | `-0.125rem` | `-0.09375rem` |
| 800 (54px) | `-0.21875rem` | `-0.1171875rem` |
| 900 (64px) | `-0.171875rem` | `-0.1328125rem` |
| 1000 (76px) | `-0.25rem` | `-0.15625rem` |
### Typography Pairing Rules
- **Hero headlines:** `--typography-sans-900-bold-font` with `--font-letter-spacing-sans-900-bold` (`-0.1328125rem`)
- **Section headings:** `--typography-sans-700-semibold-font` with `--font-letter-spacing-sans-700-semibold`
- **Card titles:** `--typography-sans-400-bold-font` (22px/28px) — confirmed by computed card element
- **Body:** `--typography-sans-200-regular-font` (16px/24px)
- **Captions/Labels:** `--typography-sans-100-medium-font` (14px/20px)
- **Overline/Eyebrow:** `--typography-sans-50-medium-font` (12px/16px)
- **Serif use:** Editorial long-form content only; never for UI chrome, buttons, or labels
---
## 4. Spacing & Layout
### Base Unit
**4px base grid.** All spacing tokens are multiples of 4px.
### Full Spacing Scale
```css
/* ── Primitive spacing (rem-based, 4px grid) ── */
--spacing-0: 0;
--spacing-4: 0.25rem; /* 4px */
--spacing-8: 0.5rem; /* 8px */
--spacing-12: 0.75rem; /* 12px */
--spacing-16: 1rem; /* 16px */
--spacing-20: 1.25rem; /* 20px */
--spacing-24: 1.5rem; /* 24px */
--spacing-28: 1.75rem; /* 28px */
--spacing-30: 1.875rem; /* 30px — used for spacing-block-m line heights */
--spacing-32: 2rem; /* 32px */
--spacing-40: 2.5rem; /* 40px */
--spacing-48: 3rem; /* 48px */
--spacing-56: 3.5rem; /* 56px */
--spacing-64: 4rem; /* 64px */
--spacing-72: 4.5rem; /* 72px */
--spacing-80: 5rem; /* 80px */
--spacing-96: 6rem; /* 96px */
--spacing-128: 8rem; /* 128px */
--spacing-160: 10rem; /* 160px */
/* ── Section-level spacing (semantic) ── */
--spacing-xs: 20px; /* tight section padding */
--spacing-s: 40px; /* small section gap */
--spacing-m: 60px; /* standard section padding */
--spacing-l: 120px; /* large section vertical gap */
--spacing-xl: 160px; /* hero-level vertical padding */
/* ── Block spacing (component-level) ── */
--spacing-block-s: 20px; /* small component internal padding */
--spacing-block-m: 24px; /* standard component internal padding */
--spacing-block-l: 32px; /* large component internal padding */
/* ── Layout structure ── */
--header-height: 60px;
--global-navigation-height: 64px;
--base-padding: 60px;
--grid-gutter: 28px;
--grid-sm-gutter: 12px;
--grid-columns: 12;
--grid-column-width: 1fr;
```
### Grid System
- **Columns:** 12-column grid (`--grid-columns: 12`)
- **Gutter:** `28px` desktop, `12px` mobile (`--grid-gutter`, `--grid-sm-gutter`)
- **Container padding:** `60px` horizontal (`--base-padding`)
- **Max-width:** `1440px` (from breakpoint ceiling); content constrained at approximately `1280px` for readability
### Breakpoints
| Name | Value | Use |
|---|---|---|
| xs | 374–375px | Small phones |
| sm | 440px | Phone landscape |
| md | 668–712px | Large phones / small tablets |
| lg | 768–840px | Tablets |
| xl | 1032–1080px | Small desktops |
| 2xl | 1200–1280px | Standard desktops |
| 3xl | 1440px | Wide desktops |
| 4xl | 1800–1900px | Ultra-wide |
### Border Radius Scale
```css
--border-radius-200: 0.25rem; /* 4px — smallest: tooltips, tags */
--border-radius-300: 0.3125rem; /* 5px */
--border-radius-400: 0.375rem; /* 6px */
--border-radius-500: 0.5rem; /* 8px — tabs, accordions (43 elements) */
--border-radius-600: 0.625rem; /* 10px */
--border-radius-700: 0.75rem; /* 12px — cards, modals (confirmed) */
--border-radius-800: 0.875rem; /* 14px */
--border-radius-900: 1rem; /* 16px */
--border-radius-round: 624.9375rem; /* pill — nav links, icon buttons, CTAs */
```
**Key radius facts from computed styles:**
- Tabs: `8px` (`--border-radius-500`)
- Cards (`.cls_card`): `12px` (`--border-radius-700`)
- Modals: `12px` (`--border-radius-700`)
- Primary CTA buttons: `--border-radius-round` (pill-shaped, confirmed computed `borderRadius: 50%` on hero play button; pill on nav links)
- Nav link chips: `4px` (`--border-radius-200`)
### Border Widths
```css
--border-width-1: 1px; /* standard — card borders, dividers */
--border-width-2: 2px; /* focus rings, emphasis borders */
--border-width-4: 4px; /* accent left-border, callout */
```
### Flex / Grid Decision Rules
- **Navigation:** `display: grid` with `align-items: center` — confirmed from `role_navigation` computed style
- **Cards:** `display: flex; flex-direction: row; gap: 16px` — confirmed from `cls_card`
- **Buttons:** `display: flex; flex-direction: row; justify-content: center; align-items: center`
- **Labels:** `display: flex; flex-direction: row; align-items: flex-start; gap: 8px`
- **Badges:** `display: flex; flex-direction: row; align-items: center; gap: 4px`
- **Section layouts:** CSS Grid, 12-column, `28px` gutter
---
## 5. Page Structure & Layout Patterns
*Source: layout digest + component inventory. No screenshots available. Rows marked (inferred) are not visually confirmed.*
### 5.1 Section Map
| Order | Section | Layout Type | Approx. Height | Key Elements |
|---|---|---|---|---|
| 1 | Global Navigation | CSS Grid, sticky, 64px | 64px | Logo, nav links (pill chips), "Get Notion free" primary CTA, "Request a demo" secondary CTA |
| 2 | Hero | Full-width, dark bg (`--color-gray-900`) | ~100vh | H1 64px/700, body 16px/400 white at 75% opacity, primary CTA button (`--brand-primary-cta`), media/video with play/pause controller |
| 3 | Logo Wall / Social Proof bar | Full-width, Marquee scroll | ~120–180px | Customer logos, animated marquee |
| 4 | Feature / Bento grid (inferred) | CSS Grid, 12-col, `28px` gutter | ~600–800px | Accordion trigger tabs, feature cards (`border-radius: 12px`), carousel |
| 5 | Card grid (inferred) | Flex row, gap 16px, wraps | ~400–600px | `.cls_card` components: `24px` padding, `1px solid #0000001a` border, `12px` radius |
| 6 | Testimonials / Social Proof (inferred) | CSS Grid or Flex | ~400px | Testimonial cards with hover shadow (`--shadow-level-200`) |
| 7 | CTA Banner (inferred) | Full-width centered | ~200–300px | Large heading, primary CTA button (`--brand-primary-cta`) |
| 8 | Footer | CSS Grid, multi-column | ~300–400px | Column links, social icons, "Do Not Sell" link |
### 5.2 Layout Patterns
**Navigation:**
- `display: grid; align-items: center` — full-width sticky bar
- Height: `64px` (`--global-navigation-height`) / `60px` (`--header-height`)
- Nav links: pill chips (`--border-radius-round`) with 4px radius on active state
- On scroll: `box-shadow` animates from `rgba(0,0,0,0) 0px 1px 0px 0px` to `0 1px var(--color-border-base)` via `globalNavigation_navShadowScrolled` keyframe
- Hero context: nav background transitions from `--color-campaigns-agents-launch-blue-900` (dark) to `--color-background-base` (white) via scroll animation
**Hero:**
- Background: `--color-gray-900` (`#191918`) transitioning out as user scrolls
- H1 centred, `margin: 0 185.312px` (computed) — effectively max-width capped
- Body text: `rgba(255, 255, 255, 0.75)` — white at 75% on dark bg
- Primary CTA: `--brand-primary-cta` fill, pill radius, centred
- Video play button: `border-radius: 50%`, `backdrop-filter: blur(12px)`, `background: rgba(0,0,0,0.05)`
**Feature/Bento Cards:**
- `display: flex; flex-direction: row; align-items: start; gap: 16px`
- `padding: 24px` (`--spacing-block-m`)
- `border: 1px solid rgba(0, 0, 0, 0.1)` (equivalent to `--border-color-regular`)
- `border-radius: 12px` (`--border-radius-700`)
- Background: `rgb(255, 255, 255)`
**Accordion/Tabs (Bento carousel):**
- Tab: `border-radius: 8px`, `padding: 12px 16px`, `gap: 12px`
- Transition: `color 0.15s cubic-bezier(0.45, 0, 0.55, 1), background-color 0.15s cubic-bezier(0.45, 0, 0.55, 1)`
**Footer:**
- Multi-column link grid
- Links hover to `--color-link-primary-text` with `text-decoration: underline`
- Social icons hover to platform brand colours (Twitter/Instagram → black, LinkedIn → `rgb(48, 113, 170)`, Facebook → `rgb(66, 103, 178)`, YouTube → `red`)
### 5.3 Visual Hierarchy
1. **Hero H1** at 64px/700 weight is the dominant visual element — always centred on dark background
2. **Primary CTA** (`--brand-primary-cta`, pill-shaped) appears twice: in nav and in hero, anchoring conversion action
3. **Section headings** at 700 (42px) or 800 (54px) with negative letter-spacing establish content hierarchy
4. **Cards** are content-forward: the card title at 22px/700 (`--typography-sans-400-bold-font`) is the strongest element inside the card
5. **Whitespace rhythm:** Section vertical gaps follow `--spacing-l` (120px) between major sections, `--spacing-m` (60px) for sub-sections
### 5.4 Content Patterns
**Icon + Text card (most common):**
```
[Icon 26px] [Heading 22px bold]
[Body 16px regular, muted]
```
Cards use `display: flex; flex-direction: row; gap: 16px`.
**Section with eyebrow:**
```
[Eyebrow 12px medium, muted uppercase-style]
[Heading 42–64px bold, tight tracking]
[Subheading 16–18px regular]
[CTA button, pill, brand-primary-cta]
```
**Testimonial card:**
- Default: no shadow. Hover: `--shadow-level-200` reveals. Text shifts to `--color-text-normal`.
- Links within testimonials: `display: flex; gap: 4px; align-items: center` (icon + label pattern).
**Marquee logos:**
- Animated via `Marquee_marqueeFrames` keyframe: `translateX(0) → translateX(calc(-50% - var(--marquee-item-gap) / 2))`
---
## 6. Component Patterns
### 6.1 Primary Button
**Anatomy:** Container `<button>` → Icon (optional) + Label text
**Token mappings:**
| State | Background | Text | Border | Cursor |
|---|---|---|---|---|
| Default | `--brand-primary-cta` | `--color-white` | none | pointer |
| Hover | `--brand-secondary-cta` | `--color-white` | none | pointer |
| Focus | `--brand-primary-cta` | `--color-white` | `box-shadow: 0 0 0 2px --color-black, 0 0 0 4px --color-white` | pointer |
| Active | `--brand-secondary-cta` (darker) | `--color-white` | none | pointer |
| Disabled | `--color-text-muted` (text), bg cleared | `--color-text-muted` | none | auto |
```tsx
// Primary Button — production-ready with all states
import { ButtonHTMLAttributes, forwardRef } from 'react';
interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
children: React.ReactNode;
loading?: boolean;
}
const PrimaryButton = forwardRef<HTMLButtonElement, PrimaryButtonProps>(
({ children, disabled, loading, ...props }, ref) => {
return (
<button
ref={ref}
disabled={disabled || loading}
aria-busy={loading}
{...props}
style={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
gap: 'var(--spacing-8)',
fontFamily: 'var(--font-family-sans)',
fontSize: 'var(--font-size-200)', /* 16px */
fontWeight: 'var(--font-weight-medium)', /* 500 */
lineHeight: 'var(--font-line-height-200)', /* 24px */
letterSpacing: '0',
color: 'var(--color-white)',
backgroundColor: (disabled || loading)
? 'var(--color-alpha-black-200)'
: 'var(--brand-primary-cta)',
border: 'none',
borderRadius: 'var(--border-radius-round)',
padding: '10px var(--spacing-24)', /* 10px 24px */
cursor: (disabled || loading) ? 'not-allowed' : 'pointer',
opacity: (disabled || loading) ? 0.5 : 1,
transition: `background-color var(--motion-duration-150) ease,
opacity var(--motion-duration-150) ease`,
textDecoration: 'none',
whiteSpace: 'nowrap',
...props.style,
}}
onMouseEnter={e => {
if (!disabled && !loading) {
(e.currentTarget as HTMLButtonElement).style.backgroundColor =
'var(--brand-secondary-cta)';
}
}}
onMouseLeave={e => {
if (!disabled && !loading) {
(e.currentTarget as HTMLButtonElement).style.backgroundColor =
'var(--brand-primary-cta)';
}
}}
onFocus={e => {
(e.currentTarget as HTMLButtonElement).style.outline = 'none';
(e.currentTarget as HTMLButtonElement).style.boxShadow =
'0 0 0 2px var(--color-black), 0 0 0 4px var(--color-white)';
}}
onBlur={e => {
(e.currentTarget as HTMLButtonElement).style.boxShadow = 'none';
}}
onMouseDown={e => {
if (!disabled && !loading) {
(e.currentTarget as HTMLButtonElement).style.backgroundColor =
'var(--brand-secondary-cta)';
}
}}
>
{loading ? (
<span aria-hidden="true" style={{ opacity: 0.75 }}>•••</span>
) : children}
</button>
);
}
);
PrimaryButton.displayName = 'PrimaryButton';
export default PrimaryButton;
```
---
### 6.2 Card (`.cls_card`)
**Anatomy:** Container → [Icon/Media] + [Title] + [Body text] + [Action link (optional)]
**Token mappings:**
| State | Background | Border | Shadow | Text |
|---|---|---|---|---|
| Default | `--color-white` | `1px solid rgba(0,0,0,0.1)` | none | `--text-color-regular` |
| Hover | `--color-white` | `1px solid rgba(0,0,0,0.1)` | `--shadow-level-200` | `--color-text-normal` |
| Focus-within | `--color-white` | `outline-color` transition | `--shadow-level-200` | `--text-color-regular` |
```tsx
interface CardProps {
icon?: React.ReactNode;
title: string;
body: string;
action?: { label: string; href: string };
}
function Card({ icon, title, body, action }: CardProps) {
return (
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-start',
gap: 'var(--spacing-16)', /* 16px */
padding: 'var(--spacing-block-m)', /* 24px */
backgroundColor: 'var(--color-white)',
borderRadius: 'var(--border-radius-700)', /* 12px */
border: '1px solid rgba(0, 0, 0, 0.1)',
transition: 'outline-color var(--motion-duration-200) ease-in, box-shadow var(--motion-duration-200) ease-in',
}}
onMouseEnter={e => {
(e.currentTarget as HTMLDivElement).style.boxShadow =
'var(--shadow-level-200)';
}}
onMouseLeave={e => {
(e.currentTarget as HTMLDivElement).style.boxShadow = 'none';
}}
>
{icon && (
<div style={{ flexShrink: 0, width: 'var(--size-block-header-icon)', height: 'var(--size-block-header-icon)' }}>
{icon}
</div>
)}
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-8)' }}>
<h3
style={{
font: 'var(--typography-sans-400-bold-font)', /* 22px/28px bold */
letterSpacing: '-0.015625rem',
color: 'var(--text-color-dark)',
margin: 0,
}}
>
{title}
</h3>
<p
style={{
font: 'var(--typography-sans-200-regular-font)', /* 16px/24px */
color: 'var(--text-color-medium)',
margin: 0,
}}
>
{body}
</p>
{action && (
<a
href={action.href}
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--spacing-4)',
font: 'var(--typography-sans-100-medium-font)', /* 14px/20px */
color: 'var(--color-blue-600)',
textDecoration: 'none',
textUnderlineOffset: 'var(--decoration-link-underline-offset)',
}}
>
{action.label}
</a>
)}
</div>
</div>
);
}
```
---
### 6.3 Navigation Item (Global Nav Link)
**Anatomy:** `<button>` or `<a>` → [Badge (optional)] + Label
**Token mappings:**
| State | Color | Background | Notes |
|---|---|---|---|
| Default | `--text-color-medium` | transparent | Pill chip, 4px radius |
| Hover | `--color-text-normal` | `--color-alpha-black-100` (dropdown items) | Nav links use `--border-radius-200` (4px) |
| Focus | `--color-text-normal` | transparent | No outline on `:focus:not(:focus-visible)` |
| Active/Current | `--text-color-dark` | transparent | |
```tsx
function NavLink({ href, label, badge }: { href: string; label: string; badge?: string }) {
return (
<a
href={href}
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--spacing-4)',
fontFamily: 'var(--font-family-sans)',
fontSize: 'var(--font-size-150)', /* 15px */
fontWeight: 'var(--font-weight-medium)',
lineHeight: 'var(--font-line-height-150)',
color: 'var(--text-color-medium)',
borderRadius: 'var(--border-radius-200)', /* 4px pill chip */
padding: '6px var(--spacing-8)',
textDecoration: 'none',
transition: `color var(--motion-duration-150) ease`,
}}
onMouseEnter={e => {
(e.currentTarget as HTMLAnchorElement).style.color = 'var(--text-color-dark)';
}}
onMouseLeave={e => {
(e.currentTarget as HTMLAnchorElement).style.color = 'var(--text-color-medium)';
}}
>
{label}
{badge && (
<span
style={{
fontSize: 'var(--font-size-50)', /* 12px */
fontWeight: 'var(--font-weight-medium)',
padding: '1px 6px',
borderRadius: 'var(--border-radius-round)',
background: 'var(--color-alpha-black-100)',
}}
>
{badge}
</span>
)}
</a>
);
}
```
---
### 6.4 Badge
**Anatomy:** Container → Icon (optional) + Label text
**Token mappings:**
| State | Color | Background | Notes |
|---|---|---|---|
| Default | `rgba(0,0,0,0.9)` | transparent | 14px/500, flex row, gap 4px |
| Hover (in nav) | `--color-white` | via `--color-badge-tertiary` CSS var | Context-dependent |
```tsx
function Badge({ icon, label }: { icon?: React.ReactNode; label: string }) {
return (
<span
style={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'flex-start',
gap: 'var(--spacing-4)', /* 4px */
fontFamily: 'var(--font-family-sans)',
fontSize: 'var(--font-size-100)', /* 14px */
fontWeight: 'var(--font-weight-medium)',
lineHeight: 'var(--font-line-height-100)',
color: 'rgba(0, 0, 0, 0.9)',
borderRadius: 'var(--border-radius-round)',
padding: '2px var(--spacing-8)',
background: 'var(--color-alpha-black-100)',
}}
>
{icon && <span aria-hidden="true" style={{ display: 'flex' }}>{icon}</span>}
{label}
</span>
);
}
```
---
### 6.5 Tab
**Anatomy:** `<button role="tab">` → Icon (optional) + Label
**Token mappings:**
| State | Background | Color | Transition |
|---|---|---|---|
| Default | transparent | `rgba(0,0,0,0.95)` | `color 0.15s cubic-bezier(0.45,0,0.55,1)` |
| Hover | `--color-alpha-black-100` | `rgba(0,0,0,0.95)` | `background-color 0.15s cubic-bezier(0.45,0,0.55,1)` |
| Active/Selected | `--color-white` or `--color-alpha-black-100` | `--text-color-dark` | immediate |
| Focus-visible | focus ring box-shadow | | 2px offset |
```tsx
function Tab({ label, icon, isSelected, onClick }: {
label: string;
icon?: React.ReactNode;
isSelected: boolean;
onClick: () => void;
}) {
return (
<button
role="tab"
aria-selected={isSelected}
onClick={onClick}
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: 'var(--spacing-12)', /* 12px */
padding: 'var(--spacing-12) var(--spacing-16)', /* 12px 16px */
fontFamily: 'var(--font-family-sans)',
fontSize: 'var(--font-size-200)', /* 16px */
fontWeight: isSelected ? 'var(--font-weight-medium)' : 'var(--font-weight-regular)',
color: 'rgba(0, 0, 0, 0.95)',
backgroundColor: isSelected
? 'var(--color-alpha-black-100)'
: 'transparent',
borderRadius: 'var(--border-radius-500)', /* 8px */
border: 'none',
cursor: 'pointer',
transition: 'color var(--motion-duration-150) var(--motion-timing-function-ease-in-out-quad), background-color var(--motion-duration-150) var(--motion-timing-function-ease-in-out-quad)',
textAlign: 'start',
}}
>
{icon && <span aria-hidden="true">{icon}</span>}
{label}
</button>
);
}
```
---
### 6.6 Inline Link
**Token mappings:**
| State | Color | Decoration |
|---|---|---|
| Default | `--color-blue-600` (`#0075de`) | none |
| Hover | `--color-link-primary-text-hover` | `underline` |
| Focus | box-shadow focus ring | none |
| Focus-visible | `box-shadow: 0 0 0 2px --color-black, 0 0 0 4px --color-white` | none |
```tsx
function InlineLink({ href, children }: { href: string; children: React.ReactNode }) {
return (
<a
href={href}
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--spacing-4)',
fontFamily: 'var(--font-family-sans)',
fontSize: 'var(--font-size-100)', /* 14px */
lineHeight: 'var(--font-line-height-100)',
color: 'var(--color-blue-600)',
textDecoration: 'none',
textUnderlineOffset: 'var(--decoration-link-underline-offset)', /* 0.1em */
textDecorationThickness: 'var(--decoration-link-underline-thickness)', /* 1px */
outline: 'none',
borderRadius: '2px',
}}
onMouseEnter={e => {
(e.currentTarget as HTMLAnchorElement).style.textDecorationLine = 'underline';
}}
onMouseLeave={e => {
(e.currentTarget as HTMLAnchorElement).style.textDecorationLine = 'none';
}}
onFocus={e => {
(e.currentTarget as HTMLAnchorElement).style.boxShadow =
'0 0 0 2px var(--color-black), 0 0 0 4px var(--color-white)';
}}
onBlur={e => {
(e.currentTarget as HTMLAnchorElement).style.boxShadow = 'none';
}}
>
{children}
</a>
);
}
```
---
### 6.7 Input / Form Field
**Anatomy:** Label → Input container → Input `<input>` + Helper/Error text
*(computed styles for input are minimal — one instance found. Token mappings are partially inferred.)*
| State | Border | Background | Notes |
|---|---|---|---|
| Default | `1px solid var(--border-color-regular)` | `var(--color-white)` | |
| Hover | `1px solid var(--color-gray-400)` | `var(--color-white)` | /* reconstructed: moderate confidence */ |
| Focus | `1px solid var(--brand-primary-cta)` | `var(--color-white)` | focus ring via box-shadow |
| Error | `1px solid var(--color-red-500)` | `var(--color-red-100)` | |
| Disabled | `1px solid var(--color-gray-300)` | `var(--color-gray-100)` | `cursor: not-allowed` |
```tsx
function Input({
label, error, disabled, ...props
}: { label: string; error?: string; disabled?: boolean } & React.InputHTMLAttributes<HTMLInputElement>) {
return (
<label
style={{
display: 'flex',
flexDirection: 'column',
gap: 'var(--spacing-8)',
fontFamily: 'var(--font-family-sans)',
fontSize: 'var(--font-size-200)',
color: 'rgba(0, 0, 0, 0.9)',
cursor: disabled ? 'not-allowed' : 'default',
}}
>
<span style={{ fontWeight: 'var(--font-weight-medium)' }}>{label}</span>
<input
disabled={disabled}
aria-invalid={!!error}
aria-describedby={error ? `${props.id}-error` : undefined}
{...props}
style={{
fontFamily: 'var(--font-family-sans)',
fontSize: 'var(--font-size-200)',
lineHeight: 'var(--font-line-height-200)',
color: disabled ? 'var(--text-color-light)' : 'var(--text-color-regular)',
backgroundColor: disabled ? 'var(--color-gray-100)' : 'var(--color-white)',
border: error
? '1px solid var(--color-red-500
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (130) */
--border-color-regular: #00000014;
--text-color-extra-light: #0003;
--text-color-light: #0006;
--text-color-medium: #0009;
--text-color-dark: #111;
--text-color-regular: #040404;
--color-gray-100: #f9f9f8;
--color-gray-200: #f6f5f4;
--color-gray-300: #dfdcd9;
--color-gray-400: #a39e98;
--color-gray-500: #78736f;
--color-gray-600: #615d59;
--color-gray-700: #494744;
--color-gray-800: #31302e;
--color-gray-900: #191918;
--color-red-100: #fef3f1;
--color-red-200: #fdd3cd;
--color-red-300: #ff8b7c;
--color-red-400: #f77463;
--color-red-500: #f64932;
--color-red-600: #e32d14;
--color-red-700: #b01601;
--color-red-800: #6f0d00;
--color-red-900: #4f0900;
--color-orange-100: #fff5ed;
--color-orange-200: #ffdec4;
--color-orange-300: #ffad71;
--color-orange-400: #ff8a33;
--color-orange-500: #ff6d00;
--color-orange-600: #dd5b00;
--color-orange-700: #ab4a00;
--color-orange-800: #793400;
--color-orange-900: #532200;
--color-yellow-100: #fff5e0;
--color-yellow-200: #ffe4af;
--color-yellow-300: #ffd786;
--color-yellow-400: #ffc95e;
--color-yellow-500: #ffb110;
--color-yellow-600: #e89d01;
--color-yellow-700: #c78600;
--color-yellow-800: #a16c00;
--color-yellow-900: #704b00;
--color-teal-100: #f2fafa;
--color-teal-200: #bde6e4;
--color-teal-300: #83cbc9;
--color-teal-400: #2a9d99;
--color-teal-500: #27918d;
--color-teal-600: #0a7b77;
--color-teal-700: #126764;
--color-teal-800: #0a4d4b;
--color-teal-900: #042b29;
--color-blue-100: #f2f9ff;
--color-blue-200: #e6f3fe;
--color-blue-300: #93cdfe;
--color-blue-400: #62aef0;
--color-blue-500: #097fe8;
--color-blue-600: #0075de;
--color-blue-700: #005bab;
--color-blue-800: #00396b;
--color-blue-900: #002a4f;
--color-purple-100: #f8f5fc;
--color-purple-200: #eadbfa;
--color-purple-300: #d6b6f6;
--color-purple-400: #ad6ded;
--color-purple-500: #9849e8;
--color-purple-600: #7237ae;
--color-purple-700: #562983;
--color-purple-800: #391c57;
--color-purple-900: #1c0e2c;
--color-green-100: #f0faf2;
--color-green-200: #d0f4d8;
--color-green-300: #abe5b8;
--color-green-400: #68ce7e;
--color-green-500: #1aae39;
--color-green-600: #14832b;
--color-green-700: #0f6220;
--color-green-800: #0a4216;
--color-green-900: #05210b;
--color-pink-100: #fff5fc;
--color-pink-200: #ffcdf1;
--color-pink-300: #ffb5eb;
--color-pink-400: #ff83dd;
--color-pink-500: #ff64c8;
--color-pink-600: #d13f9d;
--color-pink-700: #9d2472;
--color-pink-800: #6c1b4f;
--color-pink-900: #481034;
--color-brown-100: #fcf8f5;
--color-brown-200: #ebd5c5;
--color-brown-300: #d9b79f;
--color-brown-400: #b18164;
--color-brown-500: #9c7054;
--color-brown-600: #885d3d;
--color-brown-700: #744d2d;
--color-brown-800: #654124;
--color-brown-900: #523410;
--color-black: #000;
--color-white: #fff;
--color-alpha-black-100: #0000000d;
--color-alpha-black-200: #0000001a;
--color-alpha-black-400: #0000004d;
--color-alpha-black-500: #0000008a;
--color-alpha-black-600: #00000096;
--color-alpha-black-700: #000000bf;
--color-alpha-black-800: #000000e6;
--color-alpha-black-900: #000000f2;
--color-alpha-white-100: #ffffff0d;
--color-alpha-white-200: #ffffff1a;
--color-alpha-white-300: #fff3;
--color-alpha-white-400: #ffffff4d;
--color-alpha-white-500: #ffffff80;
--color-alpha-white-600: #ffffffa8;
--color-alpha-white-700: #ffffffbf;
--color-alpha-white-800: #ffffffd9;
--color-alpha-white-900: #fffffff2;
--color-transparent: #fff0;
--color-campaigns-agents-launch-blue-300: #607df6;
--color-campaigns-agents-launch-blue-400: #455dd3;
--color-campaigns-agents-launch-blue-500: #394ea3;
--color-campaigns-agents-launch-blue-600: #213183;
--color-campaigns-agents-launch-blue-900: #02093a;
--color-campaigns-agents-launch-yellow: #fefcd5;
--brand-primary-cta: rgb(69, 93, 211); /* Primary CTA background, dominant on 3 buttons — e.g. "Get Notion free" /* mined from computed styles */ */
--brand-secondary-cta: rgb(33, 49, 131); /* Secondary CTA background, dominant on 2 buttons — e.g. "Request a demo" /* mined from computed styles */ */
--brand-primary-cta: rgb(69, 93, 211);
--brand-secondary-cta: rgb(33, 49, 131);
--color-alpha-black-300: #0003;
--border-width-1: 1px;
--border-width-2: 2px;
--border-width-4: 4px;
/* Typography (154) */
--size-block-header-icon: 26px;
--font-family-primary-sans: NotionInter;
--font-family-primary-serif: "Lyon Text";
--font-family-primary-sans-vietnamese: ui-sans-serif;
--font-family-primary-serif-vietnamese: ui-serif;
--font-family-primary-sans-arabic: "Noto Sans Arabic";
--font-family-primary-sans-hebrew: "Noto Sans Hebrew";
--font-family-primary-handwriting: "Permanent Marker";
--font-family-primary-mono: "iA Writer Mono";
--font-family-primary-emoji: "Apple Color Emoji";
--font-family-fallback-sans: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
--font-family-fallback-serif: Georgia,YuMincho,"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Songti TC","Songti SC",SimSun,"Nanum Myeongjo",NanumMyeongjo,Batang,serif;
--font-family-fallback-serif-japanese: Georgia,YuMincho,"Yu Mincho","Hiragino Mincho ProN",serif;
--font-family-fallback-serif-chinese-simplified: Georgia,"Songti TC",SimSun,serif;
--font-family-fallback-serif-chinese-traditional: Georgia,"Songti SC",SimSun,serif;
--font-family-fallback-sans-vietnamese: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
--font-family-fallback-serif-vietnamese: "Times New Roman",serif;
--font-family-fallback-sans-arabic: NotionInter,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
--font-family-fallback-handwriting: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
--font-family-fallback-mono: Nitti,Menlo,Courier,monospace;
--font-family-fallback-emoji: "Segoe UI Emoji",NotoColorEmoji,"Noto Color Emoji","Segoe UI Symbol","Android Emoji",EmojiSymbols;
--font-family-sans: NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-serif: "Lyon Text", Georgia, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
--font-family-serif-japanese: var(--font-family-primary-serif-japanese),var(--font-family-fallback-serif-japanese);
--font-family-serif-chinese-simplified: var( --font-family-primary-serif-chinese-simplified ),var(--font-family-fallback-serif-chinese-simplified);
--font-family-serif-chinese-traditional: var( --font-family-primary-serif-chinese-traditional ),var(--font-family-fallback-serif-chinese-traditional);
--font-family-sans-vietnamese: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-family-serif-vietnamese: var(--font-family-primary-serif-vietnamese),var(--font-family-fallback-serif-vietnamese);
--font-family-sans-arabic: "Noto Sans Arabic", NotionInter, Inter, Arial, sans-serif;
--font-family-sans-hebrew: "Noto Sans Hebrew", NotionInter, Inter, Arial, sans-serif;
--font-family-handwriting: "Permanent Marker", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-family-mono: "iA Writer Mono", Nitti, Menlo, Courier, monospace;
--font-family-emoji: var(--font-family-primary-emoji),var(--font-family-fallback-emoji);
--font-size-50: 0.75rem;
--font-size-100: 0.875rem;
--font-size-150: 0.9375rem;
--font-size-200: 1rem;
--font-size-300: 1.125rem;
--font-size-350: 1.25rem;
--font-size-400: 1.375rem;
--font-size-500: 1.625rem;
--font-size-600: 2rem;
--font-size-700: 2.625rem;
--font-size-800: 3.375rem;
--font-size-900: 4rem;
--font-size-1000: 4.75rem;
--font-line-height-50: var(--spacing-16);
--font-line-height-100: var(--spacing-20);
--font-line-height-200: var(--spacing-24);
--font-line-height-300: var(--spacing-28);
--font-line-height-450: var(--spacing-30);
--font-line-height-500: var(--spacing-32);
--font-line-height-600: var(--spacing-40);
--font-line-height-700: var(--spacing-48);
--font-line-height-800: var(--spacing-56);
--font-line-height-900: var(--spacing-64);
--font-line-height-1000: var(--spacing-80);
--typography-sans-50-regular-letter-spacing: 0.0078125rem;
--typography-sans-100-regular-letter-spacing: 0;
--typography-sans-300-regular-letter-spacing: -0.0078125rem;
--typography-sans-400-regular-letter-spacing: -0.015625rem;
--typography-sans-500-medium-letter-spacing: -0.0390625rem;
--font-letter-spacing-sans-600-regular: -0.0625rem;
--font-letter-spacing-sans-600-semibold: -0.046875rem;
--font-letter-spacing-sans-700-regular: -0.125rem;
--font-letter-spacing-sans-700-semibold: -0.09375rem;
--font-letter-spacing-sans-800-regular: -0.21875rem;
--font-letter-spacing-sans-800-semibold: -0.1171875rem;
--font-letter-spacing-sans-900-regular: -0.171875rem;
--font-letter-spacing-sans-900-semibold: -0.1328125rem;
--font-letter-spacing-sans-1000-regular: -0.25rem;
--font-letter-spacing-sans-1000-bold: -0.15625rem;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-variable-regular: 420;
--font-weight-variable-medium: 520;
--font-weight-variable-semibold: 620;
--font-weight-variable-bold: 680;
--motion-timing-function-ease-in-out-quint: cubic-bezier(0.86,0,0.07,1);
--motion-timing-function-ease-in-out-quart: cubic-bezier(0.76,0,0.24,1);
--motion-timing-function-ease-in-out-quad: cubic-bezier(0.45,0,0.55,1);
--motion-timing-function-ease-in-out-cubic: cubic-bezier(0.645,0.045,0.355,1);
--motion-timing-function-ease-in-out-linear: cubic-bezier(0.5,0,0.5,1);
--shadow-level-100: 0px 3px 9px #00000008,0px 0.7px 1.4625px rgba(0,0,0,.015);
--shadow-level-200: 0px 4px 18px #0000000a,0px 2.025px 7.84688px rgba(0,0,0,.027),0px 0.8px 2.925px #00000005,0px 0.175px 1.04062px rgba(0,0,0,.013);
--shadow-level-300: 0px 20px 50px #00000014,0px 6px 16px #0000000a;
--typography-sans-50-regular-font: var(--font-weight-regular) var(--font-size-50) / var(--font-line-height-50) var(--font-family-sans);
--typography-sans-50-medium-font: var(--font-weight-medium) var(--font-size-50) / var(--font-line-height-50) var(--font-family-sans);
--typography-sans-50-semibold-font: var(--font-weight-semibold) var(--font-size-50) /var(--font-line-height-50) var(--font-family-sans);
--typography-sans-50-bold-font: var(--font-weight-bold) var(--font-size-50) /var(--font-line-height-50) var(--font-family-sans);
--typography-sans-100-regular-font: var(--font-weight-regular) var(--font-size-100) / var(--font-line-height-100) var(--font-family-sans);
--typography-sans-100-medium-font: var(--font-weight-medium) var(--font-size-100) / var(--font-line-height-100) var(--font-family-sans);
--typography-sans-100-semibold-font: var(--font-weight-semibold) var(--font-size-100) / var(--font-line-height-100) var(--font-family-sans);
--typography-sans-100-bold-font: var(--font-weight-bold) var(--font-size-100) /var(--font-line-height-100) var(--font-family-sans);
--typography-sans-150-regular-font: var(--font-weight-regular) var(--font-size-150) / var(--font-line-height-150) var(--font-family-sans);
--typography-sans-150-medium-font: var(--font-weight-medium) var(--font-size-150) /var(--font-line-height-150) var(--font-family-sans);
--typography-sans-150-semibold-font: var(--font-weight-semibold) var(--font-size-150) /var(--font-line-height-150) var(--font-family-sans);
--typography-sans-150-bold-font: var(--font-weight-bold) var(--font-size-150) /var(--font-line-height-150) var(--font-family-sans);
--typography-sans-200-regular-font: var(--font-weight-regular) var(--font-size-200) / var(--font-line-height-200) var(--font-family-sans);
--typography-sans-200-medium-font: var(--font-weight-medium) var(--font-size-200) / var(--font-line-height-200) var(--font-family-sans);
--typography-sans-200-semibold-font: var(--font-weight-semibold) var(--font-size-200) / var(--font-line-height-200) var(--font-family-sans);
--typography-sans-200-bold-font: var(--font-weight-bold) var(--font-size-200) / var(--font-line-height-200) var(--font-family-sans);
--typography-sans-300-regular-font: var(--font-weight-regular) var(--font-size-300) / var(--font-line-height-300) var(--font-family-sans);
--typography-sans-300-medium-font: var(--font-weight-medium) var(--font-size-300) /var(--font-line-height-300) var(--font-family-sans);
--typography-sans-300-semibold-font: var(--font-weight-semibold) var(--font-size-300) / var(--font-line-height-300) var(--font-family-sans);
--typography-sans-300-bold-font: var(--font-weight-bold) var(--font-size-300) /var(--font-line-height-300) var(--font-family-sans);
--typography-sans-350-regular-font: var(--font-weight-regular) var(--font-size-350) /var(--font-line-height-350) var(--font-family-sans);
--typography-sans-350-medium-font: var(--font-weight-medium) var(--font-size-350) /var(--font-line-height-350) var(--font-family-sans);
--typography-sans-350-semibold-font: var(--font-weight-semibold) var(--font-size-350) /var(--font-line-height-350) var(--font-family-sans);
--typography-sans-350-bold-font: var(--font-weight-bold) var(--font-size-350) /var(--font-line-height-350) var(--font-family-sans);
--typography-sans-400-regular-font: var(--font-weight-regular) var(--font-size-400) / var(--font-line-height-400) var(--font-family-sans);
--typography-sans-400-medium-font: var(--font-weight-medium) var(--font-size-400) /var(--font-line-height-400) var(--font-family-sans);
--typography-sans-400-semibold-font: var(--font-weight-semibold) var(--font-size-400) / var(--font-line-height-400) var(--font-family-sans);
--typography-sans-400-bold-font: var(--font-weight-bold) var(--font-size-400) / var(--font-line-height-400) var(--font-family-sans);
--typography-sans-500-medium-font: var(--font-weight-medium) var(--font-size-500) / var(--font-line-height-500) var(--font-family-sans);
--typography-sans-500-semibold-font: var(--font-weight-semibold) var(--font-size-500) / var(--font-line-height-500) var(--font-family-sans);
--typography-sans-500-bold-font: var(--font-weight-bold) var(--font-size-500) / var(--font-line-height-500) var(--font-family-sans);
--typography-sans-600-regular-font: var(--font-weight-regular) var(--font-size-600) /var(--font-line-height-600) var(--font-family-sans);
--typography-sans-600-semibold-font: var(--font-weight-semibold) var(--font-size-600) / var(--font-line-height-600) var(--font-family-sans);
--typography-sans-600-bold-font: var(--font-weight-bold) var(--font-size-600) / var(--font-line-height-600) var(--font-family-sans);
--typography-sans-700-regular-font: var(--font-weight-regular) var(--font-size-700) /var(--font-line-height-700) var(--font-family-sans);
--typography-sans-700-semibold-font: var(--font-weight-semibold) var(--font-size-700) / var(--font-line-height-700) var(--font-family-sans);
--typography-sans-700-bold-font: var(--font-weight-bold) var(--font-size-700) / var(--font-line-height-700) var(--font-family-sans);
--typography-sans-800-regular-font: var(--font-weight-regular) var(--font-size-800) /var(--font-line-height-800) var(--font-family-sans);
--typography-sans-800-semibold-font: var(--font-weight-semibold) var(--font-size-800) / var(--font-line-height-800) var(--font-family-sans);
--typography-sans-800-bold-font: var(--font-weight-bold) var(--font-size-800) / var(--font-line-height-800) var(--font-family-sans);
--typography-sans-900-regular-font: var(--font-weight-regular) var(--font-size-900) / var(--font-line-height-900) var(--font-family-sans);
--typography-sans-900-semibold-font: var(--font-weight-semibold) var(--font-size-900) / var(--font-line-height-900) var(--font-family-sans);
--typography-sans-900-bold-font: var(--font-weight-bold) var(--font-size-900) / var(--font-line-height-900) var(--font-family-sans);
--typography-sans-1000-regular-font: var(--font-weight-regular) var(--font-size-1000) / var(--font-line-height-1000) var(--font-family-sans);
--typography-sans-1000-bold-font: var(--font-weight-bold) var(--font-size-1000) / var(--font-line-height-1000) var(--font-family-sans);
--typography-serif-200-regular-font: var(--font-weight-regular) var(--font-size-200) / var(--font-line-height-200) var(--font-family-serif);
--typography-serif-300-regular-font: var(--font-weight-regular) var(--font-size-300) / var(--font-line-height-300) var(--font-family-serif);
--typography-serif-350-regular-font: var(--font-weight-regular) var(--font-size-350) /var(--font-line-height-350) var(--font-family-serif);
--typography-serif-400-regular-font: var(--font-weight-regular) var(--font-size-400) / var(--font-line-height-400) var(--font-family-serif);
--typography-serif-500-regular-font: var(--font-weight-regular) var(--font-size-500) / var(--font-line-height-500) var(--font-family-serif);
--typography-serif-600-regular-font: var(--font-weight-regular) var(--font-size-600) / var(--font-line-height-600) var(--font-family-serif);
--typography-serif-700-regular-font: var(--font-weight-regular) var(--font-size-700) / var(--font-line-height-700) var(--font-family-serif);
--typography-serif-800-regular-font: var(--font-weight-regular) var(--font-size-800) / var(--font-line-height-800) var(--font-family-serif);
--typography-serif-900-regular-font: var(--font-weight-regular) var(--font-size-900) / var(--font-line-height-900) var(--font-family-serif);
--font-size-xs: 14px; /* 13 elements — e.g. h3 "See what Custom Agen", p "Trusted by 98% of th", p "Answers questions in" /* mined from computed styles */ */
--font-size-sm: 15px; /* 5 elements — e.g. p "Company", p "Download", p "Resources" /* mined from computed styles */ */
--font-size-md: 16px; /* 74 elements — e.g. h3 "Triage product feedb", h3 "Resolve support tick", h3 "Respond to security " /* mined from computed styles */ */
--font-size-lg: 22px; /* 7 elements — e.g. h2 "Automate repetitive ", h2 "You assign the tasks", h2 "One search for every" /* mined from computed styles */ */
--font-size-2xl: 54px; /* 6 elements — e.g. h2 "Keep work moving 24/", h2 "Ask your on-demand a", h2 "Bring all your work " /* mined from computed styles */ */
--font-size-3xl: 64px; /* 1 element — e.g. h1 "Meet the night shift" /* mined from computed styles */ */
--line-height-tight: 20px; /* 18 elements — e.g. h3 "See what Custom Agen", p "Trusted by 98% of th", p "Answers questions in" /* mined from computed styles */ */
--line-height-normal: 21.6px; /* 21 elements — e.g. li "About us", li "Careers", li "Security" /* mined from computed styles */ */
--line-height-loose: 24px; /* 52 elements — e.g. h3 "Triage product feedb", h3 "Resolve support tick", h3 "Respond to security " /* mined from computed styles */ */
--font-line-height-150: var(--spacing-20);
--font-line-height-350: var(--spacing-28);
--font-line-height-400: var(--spacing-28);
/* Spacing (40) */
--grid-gutter: 28px;
--grid-sm-gutter: 12px;
--spacing-xs: 20px;
--spacing-block-m: 24px;
--spacing-block-l: 32px;
--global-navigation-height: 64px;
--base-padding: 60px;
--spacing-s: 40px;
--spacing-l: 120px;
--spacing-xl: 160px;
--decoration-link-underline-thickness: 1px;
--decoration-focus-ring-outline-offset: 2px;
--border-width-4: 4px;
--decoration-link-underline-offset: 0.1em;
--spacing-0: 0;
--spacing-4: 0.25rem;
--spacing-8: 0.5rem;
--spacing-12: 0.75rem;
--spacing-16: 1rem;
--spacing-20: 1.25rem;
--spacing-24: 1.5rem;
--spacing-28: 1.75rem;
--spacing-30: 1.875rem;
--spacing-32: 2rem;
--spacing-40: 2.5rem;
--spacing-48: 3rem;
--spacing-56: 3.5rem;
--spacing-64: 4rem;
--spacing-72: 4.5rem;
--spacing-80: 5rem;
--spacing-96: 6rem;
--spacing-128: 8rem;
--spacing-160: 10rem;
--space-xs: 8px; /* 57 elements — e.g. header .bento_bentoHeader__v_SR2, header .bento_bentoHeader__v_SR2, header .bento_bentoHeader__v_SR2 /* mined from computed styles */ */
--space-sm: 16px; /* 45 elements — e.g. div .flex, div .flex, div .flex /* mined from computed styles */ */
--space-2xl: 80px; /* 5 elements — e.g. header .flex, nav .footer_footerInner__MQQSo, nav .footer_footerInner__MQQSo /* mined from computed styles */ */
--space-3xl: 125px; /* 2 elements — e.g. nav .footer_footerInner__MQQSo, nav .footer_footerInner__MQQSo /* mined from computed styles */ */
--spacing-block-s: 20px;
--spacing-m: 60px;
--header-height: 60px;
/* Radius (13) */
--border-radius-200: 0.25rem;
--border-radius-300: 0.3125rem;
--border-radius-400: 0.375rem;
--border-radius-500: 0.5rem;
--border-radius-600: 0.625rem;
--border-radius-700: 0.75rem;
--border-radius-800: 0.875rem;
--border-radius-900: 1rem;
--border-radius-round: 624.9375rem;
--radius-sm: 4px; /* 5 elements — e.g. button .globalNavigation_link__ofzIw "Product", button .globalNavigation_link__ofzIw "AI", button .globalNavigation_link__ofzIw "Solutions" /* mined from computed styles */ */
--radius-md: 8px; /* 43 elements — e.g. button .bentoCarouselHeader_accordionTrigger__JkTAA "Q&A agentsAnswers qu", button .bentoCarouselHeader_accordionTrigger__JkTAA "Task routing agentsA", button .bentoCarouselHeader_accordionTrigger__JkTAA "Reporting agentsSumm" /* mined from computed styles */ */
--radius-lg: 12px; /* 6 elements — e.g. button .socialProof_videoButtonContainer___2Bfb "View the video", div .flex "Triage product feedb", div .flex "Resolve support tick" /* mined from computed styles */ */
--radius-full: 50%; /* 1 element — e.g. button .HeroMedia_playPauseController__3hTu3 "Pause" /* mined from computed styles */ */
/* Effects (20) */
--direction: 1;
--grid-column-width: 1fr;
--grid-columns: 12;
--motion-timing-function-ease-in: ease-in;
--motion-timing-function-ease-out: ease-out;
--motion-timing-function-linear: linear;
--motion-duration-100: 100ms;
--motion-duration-150: 150ms;
--motion-duration-200: 200ms;
--motion-duration-250: 250ms;
--motion-duration-300: 300ms;
--shadow-filter: 0 4px 18px #0000004d;
--z-index-header: 100;
--z-index-banner: 90;
--z-index-mobile-nav: 200;
--z-index-popup: 500;
--z-index-lightbox: var(--z-index-popup);
----backdrop-filter-button_primary: backdrop-filter: blur(12px); /* Backdrop filter from button_primary /* reconstructed */ */
--shadow-sm: rgba(0, 0, 0, 0.04) 0px 4px 18px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.84688px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.01) 0px 0.175px 1.04062px 0px; /* 2 elements — e.g. ul .menu_menu__rkuLN, button .flex /* mined from computed styles */ */
--shadow-level-200: 0px 4px 18px #0000000a, 0px 2.025px 7.84688px rgba(0,0,0,.027), 0px 0.8px 2.925px #00000005, 0px 0.175px 1.04062px rgba(0,0,0,.013);
/* Motion (40) */
----motion-fadeIn: @keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn */
----motion-fadeOut: @keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeOut */
----motion-scaleIn: @keyframes scaleIn {
0% { transform: scale(0.975); }
100% { transform: scale(1); }
}; /* @keyframes scaleIn */
----motion-scaleOut: @keyframes scaleOut {
0% { transform: scale(1); }
100% { transform: scale(0.975); }
}; /* @keyframes scaleOut */
----motion-popIn: @keyframes popIn {
0% { opacity: 0; transform: scale(0.75); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes popIn */
----motion-rotate: @keyframes rotate {
0% { transform: rotate(0deg) translateZ(0px); }
100% { transform: rotate(1turn) translateZ(0px); }
}; /* @keyframes rotate */
----motion-loadingDots_pulse__d8LYi: @keyframes loadingDots_pulse__d8LYi {
0% { opacity: 0.2; }
100% { opacity: 0.75; }
}; /* @keyframes loadingDots_pulse__d8LYi */
----motion-globalNavigation_navShadowScrolled__pZKcg: @keyframes globalNavigation_navShadowScrolled__pZKcg {
0% { box-shadow: rgba(0, 0, 0, 0) 0px 1px; }
100% { box-shadow: 0 1px var(--color-border-base); }
}; /* @keyframes globalNavigation_navShadowScrolled__pZKcg */
----motion-globalNavigation_fadeIn__BTvkx: @keyframes globalNavigation_fadeIn__BTvkx {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes globalNavigation_fadeIn__BTvkx */
----motion-globalNavigation_fadeOut__UET7A: @keyframes globalNavigation_fadeOut__UET7A {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes globalNavigation_fadeOut__UET7A */
----motion-globalNavigation_slideDown__fiX_y: @keyframes globalNavigation_slideDown__fiX_y {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes globalNavigation_slideDown__fiX_y */
----motion-globalNavigation_navTokensHeroExit__nkR7m: @keyframes globalNavigation_navTokensHeroExit__nkR7m {
0% { --color-text-norm… <0.5KB elided>; /* @keyframes globalNavigation_navTokensHeroExit__nkR7m */
----motion-globalNavigation_navBgVarHeroExit__Kk6M2: @keyframes globalNavigation_navBgVarHeroExit__Kk6M2 {
0% { --campaign-nav-bg: var(--color-campaigns-agents-launch-blue-900); }
100% { --campaign-nav-bg: var(--color-background-base); }
}; /* @keyframes globalNavigation_navBgVarHeroExit__Kk6M2 */
----motion-globalNavigation_logoFillHeroExit__liWYo: @keyframes globalNavigation_logoFillHeroExit__liWYo {
0% { --notion-logo-fill: var(--color-campaigns-agents-launch-blue-900); }
100% { --notion-logo-fill: var(--color-black); }
}; /* @keyframes globalNavigation_logoFillHeroExit__liWYo */
----motion-globalNavigation_navBgScrolled__qcb4e: @keyframes globalNavigation_navBgScrolled__qcb4e {
0% { --campaign-nav-bg: #0000; }
100% { --campaign-nav-bg: var(--color-campaigns-agents-launch-blue-900); }
}; /* @keyframes globalNavigation_navBgScrolled__qcb4e */
----motion-globalNavigation_thinkTogetherNavTokensHeroExit__P9vdt: @keyframes globalNavigation_thinkTogetherNavTokensHeroExit__P9vdt {
0% { --co… <0.5KB elided>; /* @keyframes globalNavigation_thinkTogetherNavTokensHeroExit__P9vdt */
----motion-globalNavigation_thinkTogetherNavBgHeroExit__vSKro: @keyframes globalNavigation_thinkTogetherNavBgHeroExit__vSKro {
0% { --hero-nav-bg: var(--color-gray-900); }
100% { --hero-nav-bg: var(--color-white); }
}; /* @keyframes globalNavigation_thinkTogetherNavBgHeroExit__vSKro */
----motion-globalNavigation_thinkTogetherLogoFillHeroExit__33UgN: @keyframes globalNavigation_thinkTogetherLogoFillHeroExit__33UgN {
0% { --notion-logo-fill: var(--color-gray-900); }
100% { --notion-logo-fill: var(--color-black); }
}; /* @keyframes globalNavigation_thinkTogetherLogoFillHeroExit__33UgN */
----motion-globalNavigation_thinkTogetherNavBgScrolled__HeD6_: @keyframes globalNavigation_thinkTogetherNavBgScrolled__HeD6_ {
0% { --hero-nav-bg: #0000; }
100% { --hero-nav-bg: var(--color-gray-900); }
}; /* @keyframes globalNavigation_thinkTogetherNavBgScrolled__HeD6_ */
----motion-homepageLogoWall_revealStickyBar__Glf7s: @keyframes homepageLogoWall_revealStickyBar__Glf7s {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes homepageLogoWall_revealStickyBar__Glf7s */
----motion-Agent_agentEnter__D6zdB: @keyframes Agent_agentEnter__D6zdB {
0% { translate: var(--translate-agent-start); transform: rotate(var(--rotate-agent-start)); }
100% { translate: 0px; transform: rotate(0deg); }
}; /* @keyframes Agent_agentEnter__D6zdB */
----motion-Agent_agentScroll__R_Ymn: @keyframes Agent_agentScroll__R_Ymn {
0% { translate: 0px; transform: rotate(0deg); }
100% { translate: var(--translate-agent-end); transform: rotate(var(--rotate-agent-end)); }
}; /* @keyframes Agent_agentScroll__R_Ymn */
----motion-Agent_agentTaskEnter__ZpDY1: @keyframes Agent_agentTaskEnter__ZpDY1 {
0% { translate: var(--translate-task… <0.2KB elided>; /* @keyframes Agent_agentTaskEnter__ZpDY1 */
----motion-Agent_agentTaskScroll__bimxl: @keyframes Agent_agentTaskScroll__bimxl {
0% { translate: 0px; transform: rotate(0deg); }
100% { translate: var(--translate-task-end); transform: rotate(var(--rotate-task-end)); }
}; /* @keyframes Agent_agentTaskScroll__bimxl */
----motion-Agent_agentMarkEnter__54wKq: @keyframes Agent_agentMarkEnter__54wKq {
0% { translate: var(--translate-mark… <0.2KB elided>; /* @keyframes Agent_agentMarkEnter__54wKq */
----motion-Agent_agentMarkScroll__8jDZS: @keyframes Agent_agentMarkScroll__8jDZS {
0% { translate: 0px; transform: rotate(0deg); }
100% { translate: var(--translate-mark-end); transform: rotate(var(--rotate-mark-end)); }
}; /* @keyframes Agent_agentMarkScroll__8jDZS */
----motion-Agent_notifCountScroll__2TpV_: @keyframes Agent_notifCountScroll__2TpV_ {
0% { --notif-step: 0; }
100% { --notif-step: 7; }
}; /* @keyframes Agent_notifCountScroll__2TpV_ */
----motion-Agent_notifCountScrollFast__Ty0lv: @keyframes Agent_notifCountScrollFast__Ty0lv {
0% { --notif-step: 0; }
100% { --notif-step: 14; }
}; /* @keyframes Agent_notifCountScrollFast__Ty0lv */
----motion-Illustrations_rotate__NJalO: @keyframes Illustrations_rotate__NJalO {
0% { transform: rotate(0deg); }
100% { transform: rotate(var(--rotate-end)); }
}; /* @keyframes Illustrations_rotate__NJalO */
----motion-Illustrations_rotateEnter__XYlPM: @keyframes Illustrations_rotateEnter__XYlPM {
0% { transform: rotate(var(--rotate-start)); }
100% { transform: rotate(0deg); }
}; /* @keyframes Illustrations_rotateEnter__XYlPM */
----motion-HomepageHeroAgents_flicker-on__xJ_1J: @keyframes HomepageHeroAgents_flicker-on__xJ_1J {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes HomepageHeroAgents_flicker-on__xJ_1J */
----motion-HomepageHeroAgents_flicker__k9DWp: @keyframes HomepageHeroAgents_flicker__k9DWp {
0%, 100% { opacity: 1; }
12%… <0.5KB elided>; /* @keyframes HomepageHeroAgents_flicker__k9DWp */
----motion-HomepageHeroAgents_fade-in__HBybG: @keyframes HomepageHeroAgents_fade-in__HBybG {
0% { opacity: var(--opacity-start); }
100% { opacity: var(--opacity-end); }
}; /* @keyframes HomepageHeroAgents_fade-in__HBybG */
----motion-homepage_bodyBgHeroExit__Ur0t_: @keyframes homepage_bodyBgHeroExit__Ur0t_ {
0% { background-color: var(--color-gray-900); }
100% { background-color: rgba(0, 0, 0, 0); }
}; /* @keyframes homepage_bodyBgHeroExit__Ur0t_ */
----motion-TemplateModal_backgroundFadeOut__ny0kV: @keyframes TemplateModal_backgroundFadeOut__ny0kV {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes TemplateModal_backgroundFadeOut__ny0kV */
----motion-modal_backgroundFadeOut__jw_M8: @keyframes modal_backgroundFadeOut__jw_M8 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes modal_backgroundFadeOut__jw_M8 */
----motion-Marquee_marqueeFrames__WsEH6: @keyframes Marquee_marqueeFrames__WsEH6 {
0% { transform: translateX(0px); }
100% { transform: translateX(calc(-50% - var(--marquee-item-gap) / 2)); }
}; /* @keyframes Marquee_marqueeFrames__WsEH6 */
--duration-fast: 0.15s; /* 20 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-base: 0.2s; /* 38 elements — e.g. button, button, button /* mined from computed styles */ */
--ease-default: ease; /* 162 elements — e.g. button, button, button /* mined from computed styles */ */
```
More from the gallery
Browse all kits →You may also like

Vercel
MITClean, minimal developer-focused design system built on Geist typography with light surfaces, precise spacing, and fast interactions for modern web applications
00
lightminimaldeveloper-toolsaas

Sentry
MITDark, minimal design system for developer tools with a sophisticated purple palette and refined typography, tailored for error monitoring and performance platforms
00
darkminimaldeveloper-toolsaas

OpenAI
MITClean, minimal design system for AI-native products built on Next.js and Tailwind, featuring a light monochromatic palette with precise token-based spacing and typography
02
lightminimalsaasdeveloper-tool