Notion

# 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 */ */
```