Notion
MIT
Minimal, content-first design system with clean typography and subtle interactions, built for productivity tools and knowledge work platforms
Published by Layout23 importsminimal tierLayout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install notionUI themeReskin shadcn or Layout UI components to match Notion.
npx shadcn add https://layout.design/r/notion/theme.json# 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
atlassian.com
MITEnterprise design system for Atlassian's marketing site, featuring bold brand colours, custom typography, and structured spacing tokens built for large-scale SaaS platforms
Layout06
boldsaaslanding-pagelight
github.com
MITGitHub's production design system with 568 CSS custom properties, featuring clean typography, accessible colour tokens, and motion primitives built for developer platforms and collaborative workflows
Layout04
darkdeveloper-toolsaas
Customer.io
MITDark SaaS design system with mint-green accents and clean typography, built for product dashboards and developer-focused platforms
Layout011
darksaasdeveloper-tooldashboard