savant-code 0.0.22 → 0.0.24

package/savant-design-systems/resources/notion-design-analysis.json

@@ -0,0 +1,1368 @@
+{
+  "schemaVersion": "1",
+  "id": "notion-design-analysis",
+  "displayName": "Notion-design-analysis",
+  "description": "Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice — anchored by a deep navy hero band ({colors.brand-navy}) decorated with brand-colored sticky-note dots and mesh wire illustrations, a signature purple pill primary CTA ({colors.primary}), and a rich palette of pastel-tinted feature cards that echo the colorful database properties of the live product. The system uses a Notion-Sans (Inter-based) typeface across every UI surface, anchors a 4-tier pricing comparison (Free / Plus / Business / Enterprise), and presents the live workspace UI mockup directly inside the hero band. Coverage spans homepage, Enterprise, Product AI, Product Agents, Startups, and Pricing surfaces.",
+  "source": "embedded",
+  "status": "curated-reference",
+  "targets": [
+    "terminal",
+    "react"
+  ],
+  "contentPath": "packages/design-systems/library/notion.design.md",
+  "sourceContentHash": "fa9d6e78216d8f3e5d3990709ca2de6bc2e268e945bb94f255fd1bfb15455266",
+  "normalizedContentHash": "7583edc4752a5b1055b9d15cfbb51f99d5f1c6654ea4f0c97a3c86d71cd71834",
+  "provenance": {
+    "sourceRepository": "VoltAgent/awesome-design-md",
+    "sourceRevision": "working-tree-curated-snapshot",
+    "sourcePath": "packages/design-systems/library/notion.design.md",
+    "license": "MIT"
+  },
+  "fonts": [
+    {
+      "family": "Notion Sans",
+      "fallback": [
+        "system-ui",
+        "sans-serif"
+      ],
+      "redistributable": false
+    }
+  ],
+  "tokens": {
+    "colors": {
+      "brand-brown": "#523410",
+      "brand-green": "#1aae39",
+      "brand-navy": "#0a1530",
+      "brand-navy-deep": "#070f24",
+      "brand-navy-mid": "#1a2a52",
+      "brand-orange": "#dd5b00",
+      "brand-orange-deep": "#793400",
+      "brand-pink": "#ff64c8",
+      "brand-pink-deep": "#a02e6d",
+      "brand-purple": "#7b3ff2",
+      "brand-purple-300": "#d6b6f6",
+      "brand-purple-800": "#391c57",
+      "brand-teal": "#2a9d99",
+      "brand-yellow": "#f5d75e",
+      "canvas": "#ffffff",
+      "card-tint-cream": "#f8f5e8",
+      "card-tint-gray": "#f0eeec",
+      "card-tint-lavender": "#e6e0f5",
+      "card-tint-mint": "#d9f3e1",
+      "card-tint-peach": "#ffe8d4",
+      "card-tint-rose": "#fde0ec",
+      "card-tint-sky": "#dcecfa",
+      "card-tint-yellow": "#fef7d6",
+      "card-tint-yellow-bold": "#f9e79f",
+      "charcoal": "#37352f",
+      "hairline": "#e5e3df",
+      "hairline-soft": "#ede9e4",
+      "hairline-strong": "#c8c4be",
+      "ink": "#1a1a1a",
+      "ink-deep": "#000000",
+      "link-blue": "#0075de",
+      "link-blue-pressed": "#005bab",
+      "muted": "#bbb8b1",
+      "on-dark": "#ffffff",
+      "on-dark-muted": "#a4a097",
+      "on-primary": "#ffffff",
+      "primary": "#5645d4",
+      "primary-deep": "#3a2a99",
+      "primary-pressed": "#4534b3",
+      "semantic-error": "#e03131",
+      "semantic-success": "#1aae39",
+      "semantic-warning": "#dd5b00",
+      "slate": "#5d5b54",
+      "steel": "#787671",
+      "stone": "#a4a097",
+      "surface": "#f6f5f4",
+      "surface-soft": "#fafaf9"
+    },
+    "typography": {
+      "hero-display": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "80px",
+        "fontWeight": 600,
+        "letterSpacing": "-2px",
+        "lineHeight": 1.05
+      },
+      "display-lg": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "56px",
+        "fontWeight": 600,
+        "letterSpacing": "-1px",
+        "lineHeight": 1.1
+      },
+      "heading-1": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "48px",
+        "fontWeight": 600,
+        "letterSpacing": "-0.5px",
+        "lineHeight": 1.15
+      },
+      "heading-2": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "36px",
+        "fontWeight": 600,
+        "letterSpacing": "-0.5px",
+        "lineHeight": 1.2
+      },
+      "heading-3": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "28px",
+        "fontWeight": 600,
+        "lineHeight": 1.25
+      },
+      "heading-4": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "22px",
+        "fontWeight": 600,
+        "lineHeight": 1.3
+      },
+      "heading-5": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "18px",
+        "fontWeight": 600,
+        "lineHeight": 1.4
+      },
+      "subtitle": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "18px",
+        "fontWeight": 400,
+        "lineHeight": 1.5
+      },
+      "body-md": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "16px",
+        "fontWeight": 400,
+        "lineHeight": 1.55
+      },
+      "body-md-medium": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "16px",
+        "fontWeight": 500,
+        "lineHeight": 1.55
+      },
+      "body-sm": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "14px",
+        "fontWeight": 400,
+        "lineHeight": 1.5
+      },
+      "body-sm-medium": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "14px",
+        "fontWeight": 500,
+        "lineHeight": 1.5
+      },
+      "caption": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "13px",
+        "fontWeight": 400,
+        "lineHeight": 1.4
+      },
+      "caption-bold": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "13px",
+        "fontWeight": 600,
+        "lineHeight": 1.4
+      },
+      "micro": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "12px",
+        "fontWeight": 500,
+        "lineHeight": 1.4
+      },
+      "micro-uppercase": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "11px",
+        "fontWeight": 600,
+        "letterSpacing": "1px",
+        "lineHeight": 1.4
+      },
+      "button-md": {
+        "fontFamily": "Notion Sans",
+        "fontSize": "14px",
+        "fontWeight": 500,
+        "lineHeight": 1.3
+      }
+    },
+    "spacing": {
+      "hero": "120px",
+      "lg": "20px",
+      "md": "16px",
+      "section": "64px",
+      "section-lg": "96px",
+      "section-sm": "48px",
+      "sm": "12px",
+      "xl": "24px",
+      "xs": "8px",
+      "xxl": "32px",
+      "xxs": "4px",
+      "xxxl": "40px"
+    },
+    "radius": {
+      "full": "9999px",
+      "lg": "12px",
+      "md": "8px",
+      "sm": "6px",
+      "xl": "16px",
+      "xs": "4px",
+      "xxl": "20px",
+      "xxxl": "24px"
+    },
+    "components": {
+      "button-primary": {
+        "backgroundColor": "{colors.primary}",
+        "padding": "10px 18px",
+        "rounded": "{rounded.md}",
+        "textColor": "{colors.on-primary}",
+        "typography": "{typography.button-md}"
+      },
+      "button-primary-pressed": {
+        "backgroundColor": "{colors.primary-pressed}",
+        "textColor": "{colors.on-primary}"
+      },
+      "button-primary-disabled": {
+        "backgroundColor": "{colors.hairline}",
+        "textColor": "{colors.muted}"
+      },
+      "button-dark": {
+        "backgroundColor": "{colors.ink-deep}",
+        "padding": "10px 18px",
+        "rounded": "{rounded.md}",
+        "textColor": "{colors.on-dark}",
+        "typography": "{typography.button-md}"
+      },
+      "button-secondary": {
+        "backgroundColor": "transparent",
+        "border": "1px solid {colors.hairline-strong}",
+        "padding": "10px 18px",
+        "rounded": "{rounded.md}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.button-md}"
+      },
+      "button-on-dark": {
+        "backgroundColor": "{colors.on-dark}",
+        "padding": "10px 18px",
+        "rounded": "{rounded.md}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.button-md}"
+      },
+      "button-secondary-on-dark": {
+        "backgroundColor": "transparent",
+        "border": "1px solid {colors.on-dark-muted}",
+        "padding": "10px 18px",
+        "rounded": "{rounded.md}",
+        "textColor": "{colors.on-dark}",
+        "typography": "{typography.button-md}"
+      },
+      "button-ghost": {
+        "backgroundColor": "transparent",
+        "padding": "8px 12px",
+        "rounded": "{rounded.sm}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.button-md}"
+      },
+      "button-link": {
+        "backgroundColor": "transparent",
+        "padding": "0",
+        "textColor": "{colors.link-blue}",
+        "typography": "{typography.body-sm-medium}"
+      },
+      "card-base": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "1px solid {colors.hairline}",
+        "padding": "{spacing.xl}",
+        "rounded": "{rounded.lg}"
+      },
+      "card-feature": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "1px solid {colors.hairline}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}"
+      },
+      "card-feature-yellow-bold": {
+        "backgroundColor": "{colors.card-tint-yellow-bold}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}",
+        "textColor": "{colors.charcoal}"
+      },
+      "card-feature-peach": {
+        "backgroundColor": "{colors.card-tint-peach}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}",
+        "textColor": "{colors.charcoal}"
+      },
+      "card-feature-rose": {
+        "backgroundColor": "{colors.card-tint-rose}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}",
+        "textColor": "{colors.charcoal}"
+      },
+      "card-feature-mint": {
+        "backgroundColor": "{colors.card-tint-mint}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}",
+        "textColor": "{colors.charcoal}"
+      },
+      "card-feature-sky": {
+        "backgroundColor": "{colors.card-tint-sky}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}",
+        "textColor": "{colors.charcoal}"
+      },
+      "card-feature-lavender": {
+        "backgroundColor": "{colors.card-tint-lavender}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}",
+        "textColor": "{colors.charcoal}"
+      },
+      "card-feature-yellow": {
+        "backgroundColor": "{colors.card-tint-yellow}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}",
+        "textColor": "{colors.charcoal}"
+      },
+      "card-feature-cream": {
+        "backgroundColor": "{colors.card-tint-cream}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}",
+        "textColor": "{colors.charcoal}"
+      },
+      "card-agent-tile": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "1px solid {colors.hairline}",
+        "padding": "{spacing.xl}",
+        "rounded": "{rounded.lg}"
+      },
+      "card-template": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "1px solid {colors.hairline}",
+        "padding": "{spacing.lg}",
+        "rounded": "{rounded.lg}"
+      },
+      "card-startup-perk": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "1px solid {colors.hairline}",
+        "padding": "{spacing.xl}",
+        "rounded": "{rounded.lg}"
+      },
+      "pricing-card": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "1px solid {colors.hairline}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}"
+      },
+      "pricing-card-featured": {
+        "backgroundColor": "{colors.surface}",
+        "border": "2px solid {colors.primary}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}"
+      },
+      "text-input": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "1px solid {colors.hairline-strong}",
+        "height": "44px",
+        "padding": "{spacing.sm} {spacing.md}",
+        "rounded": "{rounded.md}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.body-md}"
+      },
+      "text-input-focused": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "2px solid {colors.primary}",
+        "textColor": "{colors.ink}"
+      },
+      "search-pill": {
+        "backgroundColor": "{colors.surface}",
+        "border": "1px solid {colors.hairline}",
+        "height": "44px",
+        "padding": "{spacing.sm} {spacing.md}",
+        "rounded": "{rounded.md}",
+        "textColor": "{colors.steel}",
+        "typography": "{typography.body-md}"
+      },
+      "pill-tab": {
+        "backgroundColor": "transparent",
+        "border": "1px solid {colors.hairline}",
+        "padding": "{spacing.xs} {spacing.md}",
+        "rounded": "{rounded.full}",
+        "textColor": "{colors.steel}",
+        "typography": "{typography.body-sm-medium}"
+      },
+      "pill-tab-active": {
+        "backgroundColor": "{colors.ink-deep}",
+        "border": "1px solid {colors.ink-deep}",
+        "rounded": "{rounded.full}",
+        "textColor": "{colors.on-dark}"
+      },
+      "segmented-tab": {
+        "backgroundColor": "transparent",
+        "border": "0 0 2px transparent solid",
+        "padding": "{spacing.sm} {spacing.md}",
+        "textColor": "{colors.steel}",
+        "typography": "{typography.body-sm-medium}"
+      },
+      "segmented-tab-active": {
+        "backgroundColor": "transparent",
+        "border": "0 0 2px {colors.ink} solid",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.body-sm-medium}"
+      },
+      "badge-purple": {
+        "backgroundColor": "{colors.primary}",
+        "padding": "4px 10px",
+        "rounded": "{rounded.full}",
+        "textColor": "{colors.on-primary}",
+        "typography": "{typography.caption-bold}"
+      },
+      "badge-pink": {
+        "backgroundColor": "{colors.brand-pink}",
+        "padding": "4px 10px",
+        "rounded": "{rounded.full}",
+        "textColor": "{colors.on-primary}",
+        "typography": "{typography.caption-bold}"
+      },
+      "badge-orange": {
+        "backgroundColor": "{colors.brand-orange}",
+        "padding": "4px 10px",
+        "rounded": "{rounded.full}",
+        "textColor": "{colors.on-primary}",
+        "typography": "{typography.caption-bold}"
+      },
+      "badge-tag-purple": {
+        "backgroundColor": "{colors.card-tint-lavender}",
+        "padding": "2px 8px",
+        "rounded": "{rounded.sm}",
+        "textColor": "{colors.brand-purple-800}",
+        "typography": "{typography.caption-bold}"
+      },
+      "badge-tag-orange": {
+        "backgroundColor": "{colors.card-tint-peach}",
+        "padding": "2px 8px",
+        "rounded": "{rounded.sm}",
+        "textColor": "{colors.brand-orange-deep}",
+        "typography": "{typography.caption-bold}"
+      },
+      "badge-tag-green": {
+        "backgroundColor": "{colors.card-tint-mint}",
+        "padding": "2px 8px",
+        "rounded": "{rounded.sm}",
+        "textColor": "{colors.brand-green}",
+        "typography": "{typography.caption-bold}"
+      },
+      "badge-popular": {
+        "backgroundColor": "{colors.primary}",
+        "padding": "4px 10px",
+        "rounded": "{rounded.full}",
+        "textColor": "{colors.on-primary}",
+        "typography": "{typography.caption-bold}"
+      },
+      "promo-banner": {
+        "backgroundColor": "{colors.surface}",
+        "padding": "{spacing.sm} {spacing.md}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.body-sm-medium}"
+      },
+      "hero-band-dark": {
+        "backgroundColor": "{colors.brand-navy}",
+        "padding": "{spacing.hero}",
+        "rounded": "0",
+        "textColor": "{colors.on-dark}"
+      },
+      "workspace-mockup-card": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "1px solid {colors.hairline}",
+        "padding": "0",
+        "rounded": "{rounded.lg}",
+        "shadow": "rgba(15, 15, 15, 0.2) 0px 24px 48px -8px"
+      },
+      "cta-banner-light": {
+        "backgroundColor": "{colors.surface}",
+        "padding": "{spacing.section}",
+        "rounded": "{rounded.lg}",
+        "textColor": "{colors.ink}"
+      },
+      "comparison-table": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "1px solid {colors.hairline}",
+        "rounded": "{rounded.md}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.body-sm}"
+      },
+      "comparison-row": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "0 0 1px {colors.hairline-soft} solid",
+        "padding": "{spacing.md} {spacing.lg}",
+        "textColor": "{colors.ink}"
+      },
+      "testimonial-card": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "1px solid {colors.hairline}",
+        "padding": "{spacing.xxl}",
+        "rounded": "{rounded.lg}"
+      },
+      "logo-wall-item": {
+        "backgroundColor": "transparent",
+        "padding": "{spacing.lg}",
+        "textColor": "{colors.steel}",
+        "typography": "{typography.body-md-medium}"
+      },
+      "faq-accordion-item": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "0 0 1px {colors.hairline} solid",
+        "padding": "{spacing.xl}",
+        "rounded": "{rounded.md}"
+      },
+      "stat-row": {
+        "backgroundColor": "{colors.surface}",
+        "padding": "{spacing.section-sm}",
+        "rounded": "{rounded.lg}",
+        "textColor": "{colors.ink}"
+      },
+      "footer-region": {
+        "backgroundColor": "{colors.canvas}",
+        "border": "1px solid {colors.hairline}",
+        "padding": "{spacing.section} {spacing.xxl}",
+        "textColor": "{colors.charcoal}",
+        "typography": "{typography.body-sm}"
+      },
+      "footer-link": {
+        "backgroundColor": "transparent",
+        "padding": "{spacing.xxs} 0",
+        "textColor": "{colors.steel}",
+        "typography": "{typography.body-sm}"
+      }
+    },
+    "extensions": {
+      "description": "Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice — anchored by a deep navy hero band ({colors.brand-navy}) decorated with brand-colored sticky-note dots and mesh wire illustrations, a signature purple pill primary CTA ({colors.primary}), and a rich palette of pastel-tinted feature cards that echo the colorful database properties of the live product. The system uses a Notion-Sans (Inter-based) typeface across every UI surface, anchors a 4-tier pricing comparison (Free / Plus / Business / Enterprise), and presents the live workspace UI mockup directly inside the hero band. Coverage spans homepage, Enterprise, Product AI, Product Agents, Startups, and Pricing surfaces.",
+      "name": "Notion-design-analysis",
+      "version": "alpha"
+    }
+  }
+}
+
+---
+
+---
+version: alpha
+name: Notion-design-analysis
+description: Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice — anchored by a deep navy hero band ({colors.brand-navy}) decorated with brand-colored sticky-note dots and mesh wire illustrations, a signature purple pill primary CTA ({colors.primary}), and a rich palette of pastel-tinted feature cards that echo the colorful database properties of the live product. The system uses a Notion-Sans (Inter-based) typeface across every UI surface, anchors a 4-tier pricing comparison (Free / Plus / Business / Enterprise), and presents the live workspace UI mockup directly inside the hero band. Coverage spans homepage, Enterprise, Product AI, Product Agents, Startups, and Pricing surfaces.
+
+colors:
+  primary: "#5645d4"
+  primary-pressed: "#4534b3"
+  primary-deep: "#3a2a99"
+  on-primary: "#ffffff"
+  brand-navy: "#0a1530"
+  brand-navy-deep: "#070f24"
+  brand-navy-mid: "#1a2a52"
+  link-blue: "#0075de"
+  link-blue-pressed: "#005bab"
+  brand-orange: "#dd5b00"
+  brand-orange-deep: "#793400"
+  brand-pink: "#ff64c8"
+  brand-pink-deep: "#a02e6d"
+  brand-purple: "#7b3ff2"
+  brand-purple-300: "#d6b6f6"
+  brand-purple-800: "#391c57"
+  brand-teal: "#2a9d99"
+  brand-green: "#1aae39"
+  brand-yellow: "#f5d75e"
+  brand-brown: "#523410"
+  card-tint-peach: "#ffe8d4"
+  card-tint-rose: "#fde0ec"
+  card-tint-mint: "#d9f3e1"
+  card-tint-lavender: "#e6e0f5"
+  card-tint-sky: "#dcecfa"
+  card-tint-yellow: "#fef7d6"
+  card-tint-yellow-bold: "#f9e79f"
+  card-tint-cream: "#f8f5e8"
+  card-tint-gray: "#f0eeec"
+  canvas: "#ffffff"
+  surface: "#f6f5f4"
+  surface-soft: "#fafaf9"
+  hairline: "#e5e3df"
+  hairline-soft: "#ede9e4"
+  hairline-strong: "#c8c4be"
+  ink-deep: "#000000"
+  ink: "#1a1a1a"
+  charcoal: "#37352f"
+  slate: "#5d5b54"
+  steel: "#787671"
+  stone: "#a4a097"
+  muted: "#bbb8b1"
+  on-dark: "#ffffff"
+  on-dark-muted: "#a4a097"
+  semantic-success: "#1aae39"
+  semantic-warning: "#dd5b00"
+  semantic-error: "#e03131"
+
+typography:
+  hero-display:
+    fontFamily: Notion Sans
+    fontSize: 80px
+    fontWeight: 600
+    lineHeight: 1.05
+    letterSpacing: -2px
+  display-lg:
+    fontFamily: Notion Sans
+    fontSize: 56px
+    fontWeight: 600
+    lineHeight: 1.10
+    letterSpacing: -1px
+  heading-1:
+    fontFamily: Notion Sans
+    fontSize: 48px
+    fontWeight: 600
+    lineHeight: 1.15
+    letterSpacing: -0.5px
+  heading-2:
+    fontFamily: Notion Sans
+    fontSize: 36px
+    fontWeight: 600
+    lineHeight: 1.20
+    letterSpacing: -0.5px
+  heading-3:
+    fontFamily: Notion Sans
+    fontSize: 28px
+    fontWeight: 600
+    lineHeight: 1.25
+  heading-4:
+    fontFamily: Notion Sans
+    fontSize: 22px
+    fontWeight: 600
+    lineHeight: 1.30
+  heading-5:
+    fontFamily: Notion Sans
+    fontSize: 18px
+    fontWeight: 600
+    lineHeight: 1.40
+  subtitle:
+    fontFamily: Notion Sans
+    fontSize: 18px
+    fontWeight: 400
+    lineHeight: 1.50
+  body-md:
+    fontFamily: Notion Sans
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.55
+  body-md-medium:
+    fontFamily: Notion Sans
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.55
+  body-sm:
+    fontFamily: Notion Sans
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.50
+  body-sm-medium:
+    fontFamily: Notion Sans
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.50
+  caption:
+    fontFamily: Notion Sans
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 1.40
+  caption-bold:
+    fontFamily: Notion Sans
+    fontSize: 13px
+    fontWeight: 600
+    lineHeight: 1.40
+  micro:
+    fontFamily: Notion Sans
+    fontSize: 12px
+    fontWeight: 500
+    lineHeight: 1.40
+  micro-uppercase:
+    fontFamily: Notion Sans
+    fontSize: 11px
+    fontWeight: 600
+    lineHeight: 1.40
+    letterSpacing: 1px
+  button-md:
+    fontFamily: Notion Sans
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.30
+
+rounded:
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  xxl: 20px
+  xxxl: 24px
+  full: 9999px
+
+spacing:
+  xxs: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 20px
+  xl: 24px
+  xxl: 32px
+  xxxl: 40px
+  section-sm: 48px
+  section: 64px
+  section-lg: 96px
+  hero: 120px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: "10px 18px"
+  button-primary-pressed:
+    backgroundColor: "{colors.primary-pressed}"
+    textColor: "{colors.on-primary}"
+  button-primary-disabled:
+    backgroundColor: "{colors.hairline}"
+    textColor: "{colors.muted}"
+  button-dark:
+    backgroundColor: "{colors.ink-deep}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: "10px 18px"
+  button-secondary:
+    backgroundColor: "transparent"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: "10px 18px"
+    border: "1px solid {colors.hairline-strong}"
+  button-on-dark:
+    backgroundColor: "{colors.on-dark}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: "10px 18px"
+  button-secondary-on-dark:
+    backgroundColor: "transparent"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: "10px 18px"
+    border: "1px solid {colors.on-dark-muted}"
+  button-ghost:
+    backgroundColor: "transparent"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.sm}"
+    padding: "8px 12px"
+  button-link:
+    backgroundColor: "transparent"
+    textColor: "{colors.link-blue}"
+    typography: "{typography.body-sm-medium}"
+    padding: "0"
+  card-base:
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xl}"
+    border: "1px solid {colors.hairline}"
+  card-feature:
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+    border: "1px solid {colors.hairline}"
+  card-feature-yellow-bold:
+    backgroundColor: "{colors.card-tint-yellow-bold}"
+    textColor: "{colors.charcoal}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+  card-feature-peach:
+    backgroundColor: "{colors.card-tint-peach}"
+    textColor: "{colors.charcoal}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+  card-feature-rose:
+    backgroundColor: "{colors.card-tint-rose}"
+    textColor: "{colors.charcoal}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+  card-feature-mint:
+    backgroundColor: "{colors.card-tint-mint}"
+    textColor: "{colors.charcoal}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+  card-feature-sky:
+    backgroundColor: "{colors.card-tint-sky}"
+    textColor: "{colors.charcoal}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+  card-feature-lavender:
+    backgroundColor: "{colors.card-tint-lavender}"
+    textColor: "{colors.charcoal}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+  card-feature-yellow:
+    backgroundColor: "{colors.card-tint-yellow}"
+    textColor: "{colors.charcoal}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+  card-feature-cream:
+    backgroundColor: "{colors.card-tint-cream}"
+    textColor: "{colors.charcoal}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+  card-agent-tile:
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xl}"
+    border: "1px solid {colors.hairline}"
+  card-template:
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.lg}"
+    border: "1px solid {colors.hairline}"
+  card-startup-perk:
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xl}"
+    border: "1px solid {colors.hairline}"
+  pricing-card:
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+    border: "1px solid {colors.hairline}"
+  pricing-card-featured:
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+    border: "2px solid {colors.primary}"
+  text-input:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: "{spacing.sm} {spacing.md}"
+    border: "1px solid {colors.hairline-strong}"
+    height: 44px
+  text-input-focused:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    border: "2px solid {colors.primary}"
+  search-pill:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.steel}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: "{spacing.sm} {spacing.md}"
+    height: 44px
+    border: "1px solid {colors.hairline}"
+  pill-tab:
+    backgroundColor: "transparent"
+    textColor: "{colors.steel}"
+    typography: "{typography.body-sm-medium}"
+    rounded: "{rounded.full}"
+    padding: "{spacing.xs} {spacing.md}"
+    border: "1px solid {colors.hairline}"
+  pill-tab-active:
+    backgroundColor: "{colors.ink-deep}"
+    textColor: "{colors.on-dark}"
+    rounded: "{rounded.full}"
+    border: "1px solid {colors.ink-deep}"
+  segmented-tab:
+    backgroundColor: "transparent"
+    textColor: "{colors.steel}"
+    typography: "{typography.body-sm-medium}"
+    padding: "{spacing.sm} {spacing.md}"
+    border: "0 0 2px transparent solid"
+  segmented-tab-active:
+    backgroundColor: "transparent"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-sm-medium}"
+    border: "0 0 2px {colors.ink} solid"
+  badge-purple:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.caption-bold}"
+    rounded: "{rounded.full}"
+    padding: "4px 10px"
+  badge-pink:
+    backgroundColor: "{colors.brand-pink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.caption-bold}"
+    rounded: "{rounded.full}"
+    padding: "4px 10px"
+  badge-orange:
+    backgroundColor: "{colors.brand-orange}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.caption-bold}"
+    rounded: "{rounded.full}"
+    padding: "4px 10px"
+  badge-tag-purple:
+    backgroundColor: "{colors.card-tint-lavender}"
+    textColor: "{colors.brand-purple-800}"
+    typography: "{typography.caption-bold}"
+    rounded: "{rounded.sm}"
+    padding: "2px 8px"
+  badge-tag-orange:
+    backgroundColor: "{colors.card-tint-peach}"
+    textColor: "{colors.brand-orange-deep}"
+    typography: "{typography.caption-bold}"
+    rounded: "{rounded.sm}"
+    padding: "2px 8px"
+  badge-tag-green:
+    backgroundColor: "{colors.card-tint-mint}"
+    textColor: "{colors.brand-green}"
+    typography: "{typography.caption-bold}"
+    rounded: "{rounded.sm}"
+    padding: "2px 8px"
+  badge-popular:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.caption-bold}"
+    rounded: "{rounded.full}"
+    padding: "4px 10px"
+  promo-banner:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-sm-medium}"
+    padding: "{spacing.sm} {spacing.md}"
+  hero-band-dark:
+    backgroundColor: "{colors.brand-navy}"
+    textColor: "{colors.on-dark}"
+    rounded: "0"
+    padding: "{spacing.hero}"
+  workspace-mockup-card:
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.lg}"
+    padding: "0"
+    border: "1px solid {colors.hairline}"
+    shadow: "rgba(15, 15, 15, 0.2) 0px 24px 48px -8px"
+  cta-banner-light:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.section}"
+  comparison-table:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-sm}"
+    rounded: "{rounded.md}"
+    border: "1px solid {colors.hairline}"
+  comparison-row:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    padding: "{spacing.md} {spacing.lg}"
+    border: "0 0 1px {colors.hairline-soft} solid"
+  testimonial-card:
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.xxl}"
+    border: "1px solid {colors.hairline}"
+  logo-wall-item:
+    backgroundColor: "transparent"
+    textColor: "{colors.steel}"
+    typography: "{typography.body-md-medium}"
+    padding: "{spacing.lg}"
+  faq-accordion-item:
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.md}"
+    padding: "{spacing.xl}"
+    border: "0 0 1px {colors.hairline} solid"
+  stat-row:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.section-sm}"
+  footer-region:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.charcoal}"
+    typography: "{typography.body-sm}"
+    padding: "{spacing.section} {spacing.xxl}"
+    border: "1px solid {colors.hairline}"
+  footer-link:
+    backgroundColor: "transparent"
+    textColor: "{colors.steel}"
+    typography: "{typography.body-sm}"
+    padding: "{spacing.xxs} 0"
+---
+
+## Overview
+
+Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice. The homepage opens with **"Meet the night shift."** rendered centered over a deep navy hero band ({colors.brand-navy}), decorated with brand-colored sticky-note dots and mesh wire illustrations scattered around the headline. The signature **purple pill primary CTA** ({colors.primary}) "Get Notion free" sits at the visual center, paired with an outlined "Request a demo" secondary. Below the buttons, a real Notion workspace UI mockup card (the "Ramp HQ" kanban board) breaks out of the hero band with a deep diffuse drop shadow.
+
+Below the hero, the page cycles through a distinctive sequence of feature sections: a dense sticky-note "Keep work moving 24/7" panel with red/blue/green/purple/teal status icons; a **bold yellow** ({colors.card-tint-yellow-bold}) "Ask your on-demand assistants" banner card flanked by orange/rose/mint pastel feature tiles showing assistant UI mockups; and a "Bring all your work together" 3-column grid with brand-colored mockups (sky-blue tutorial card, light Notion calendar, brown/rust testimonial slate). The pricing page renders 4 tiers (Free / Plus / Business / Enterprise) horizontally with one tier featured (purple-bordered) and a dense feature comparison table running below.
+
+The system uses a Notion-Sans typeface (Inter-based) across every UI surface — humanist-geometric character that pairs naturally with the colorful illustrations. Buttons are `{rounded.md}` (8px) rectangles, NOT pills — distinguishing Notion's sober rectangular geometry from competitors that use pills universally. Cards use `{rounded.lg}` (12px) consistently.
+
+**Key Characteristics:**
+- Deep navy hero band ({colors.brand-navy}) with scattered sticky-note dots + mesh wire decorative illustrations
+- **Signature purple pill** ({colors.primary}) primary CTA — Notion's recognizable "Get Notion free" button color
+- Real Notion workspace UI mockup card embedded in the hero with deep drop shadow
+- Bold yellow feature banner ({colors.card-tint-yellow-bold}) for high-emphasis content sections
+- Pastel feature card palette (peach, rose, mint, lavender, sky, yellow) echoing the live product database properties
+- Notion-Sans (Inter-based) across every UI surface
+- 8px-rounded buttons (NOT pills), 12px-rounded cards — sober editorial geometry
+- 4-tier pricing comparison with dense feature table
+- Centered hero layout (different from the left-aligned norm of most B2B SaaS)
+
+## Colors
+
+> Source pages: notion.com/ (homepage), /enterprise, /product/ai, /product/agents, /startups, /pricing. Token coverage was identical across all six pages.
+
+### Brand & Primary
+- **Notion Purple** ({colors.primary}): Signature primary CTA color — the unmistakable "Get Notion free" pill button. Reserved for the dominant CTA only.
+- **Purple Pressed** ({colors.primary-pressed}): Pressed-state variant
+- **Purple Deep** ({colors.primary-deep}): Deeper variant for emphasis
+- **Brand Navy** ({colors.brand-navy}): Hero band background — deep navy
+- **Brand Navy Deep** ({colors.brand-navy-deep}): Deeper navy for promo banner
+- **Brand Navy Mid** ({colors.brand-navy-mid}): Mid-spectrum navy
+- **Link Blue** ({colors.link-blue}): Inline text link blue (NOT primary CTA)
+- **Link Blue Pressed** ({colors.link-blue-pressed}): Pressed-state link blue
+
+### Brand Color Spectrum (echoes live product database properties)
+- **Brand Pink** ({colors.brand-pink}): Pink accent
+- **Brand Pink Deep** ({colors.brand-pink-deep}): Deeper pink
+- **Brand Orange** ({colors.brand-orange}): Orange accent
+- **Brand Orange Deep** ({colors.brand-orange-deep}): Deeper orange-rust
+- **Brand Purple** ({colors.brand-purple}): Purple accent variant
+- **Brand Purple 300** ({colors.brand-purple-300}): Light purple
+- **Brand Purple 800** ({colors.brand-purple-800}): Deep purple for tag text
+- **Brand Teal** ({colors.brand-teal}): Teal accent
+- **Brand Green** ({colors.brand-green}): Bright green
+- **Brand Yellow** ({colors.brand-yellow}): Soft yellow
+- **Brand Brown** ({colors.brand-brown}): Brand brown for "earthy" tints
+
+### Card Tints (Pastel Feature Card Backgrounds)
+- **Tint Peach** ({colors.card-tint-peach}): Pale peach
+- **Tint Rose** ({colors.card-tint-rose}): Pale rose-pink
+- **Tint Mint** ({colors.card-tint-mint}): Pale mint-green
+- **Tint Lavender** ({colors.card-tint-lavender}): Pale lavender
+- **Tint Sky** ({colors.card-tint-sky}): Pale sky-blue
+- **Tint Yellow** ({colors.card-tint-yellow}): Pale yellow
+- **Tint Yellow Bold** ({colors.card-tint-yellow-bold}): Bold yellow for high-emphasis feature banners ("Ask your on-demand assistants")
+- **Tint Cream** ({colors.card-tint-cream}): Cream tint
+- **Tint Gray** ({colors.card-tint-gray}): Neutral surface
+
+### Surface
+- **Canvas White** ({colors.canvas}): Page background and primary card surface
+- **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest, featured pricing tier
+- **Surface Soft** ({colors.surface-soft}): Quieter section divisions
+- **Hairline** ({colors.hairline}): 1px borders and primary dividers
+- **Hairline Soft** ({colors.hairline-soft}): Quieter dividers
+- **Hairline Strong** ({colors.hairline-strong}): Stronger 1px border for inputs
+
+### Text
+- **Ink Deep** ({colors.ink-deep}): Pure black for emphasis
+- **Ink** ({colors.ink}): Primary headlines and body text
+- **Charcoal** ({colors.charcoal}): Body emphasis (Notion's signature warm-charcoal)
+- **Slate** ({colors.slate}): Secondary text
+- **Steel** ({colors.steel}): Tertiary, footer links
+- **Stone** ({colors.stone}): Muted labels
+- **Muted** ({colors.muted}): Disabled, placeholders
+- **On Dark** ({colors.on-dark}): White text on dark surfaces
+- **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white
+
+### Semantic
+- **Success** ({colors.semantic-success}): Confirmation green
+- **Warning** ({colors.semantic-warning}): Mid-priority alerts (orange)
+- **Error** ({colors.semantic-error}): Validation errors (red)
+
+## Typography
+
+### Font Family
+**Notion Sans** (primary): Notion's custom Inter-based variable typeface. Fallbacks: Inter, -apple-system, system-ui, 'Segoe UI', Helvetica, sans-serif. Humanist-geometric character used across every UI surface.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| `{typography.hero-display}` | 80px | 600 | 1.05 | -2px | Hero ("Meet the night shift") |
+| `{typography.display-lg}` | 56px | 600 | 1.10 | -1px | Section openers |
+| `{typography.heading-1}` | 48px | 600 | 1.15 | -0.5px | Page-level headlines ("Try for free") |
+| `{typography.heading-2}` | 36px | 600 | 1.20 | -0.5px | Subsection headlines ("Keep work moving 24/7") |
+| `{typography.heading-3}` | 28px | 600 | 1.25 | 0 | Card titles |
+| `{typography.heading-4}` | 22px | 600 | 1.30 | 0 | Feature tile titles |
+| `{typography.heading-5}` | 18px | 600 | 1.40 | 0 | FAQ questions |
+| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle |
+| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Primary body text |
+| `{typography.body-md-medium}` | 16px | 500 | 1.55 | 0 | Body emphasis |
+| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body |
+| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar, button labels |
+| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels |
+| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Button labels |
+
+### Principles
+- Tight hero leading (1.05) on 80px display
+- Negative letter-spacing on display sizes (-2px to -0.5px)
+- Generous body leading (1.55) for documentation readability
+- 600 weight for headlines + 500 for buttons; 400 body
+
+## Layout
+
+### Spacing System
+- **Base unit**: 4px (8px primary increment)
+- **Tokens**: `{spacing.xxs}` (4px) through `{spacing.hero}` (120px)
+- **Section rhythm**: Marketing pages use `{spacing.section-lg}` (96px); pricing tightens to `{spacing.section}` (64px)
+
+### Grid & Container
+- 1280px max-width with 32px gutters
+- Pricing: 4-tier card row at desktop with dense comparison table
+- Homepage: centered hero with workspace mockup below buttons; alternating colorful feature card sections
+
+### Whitespace Philosophy
+Marketing surfaces use generous breathing room between feature card bands. Workspace mockup card on hero gets full-width treatment with deep drop shadow.
+
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 (flat) | No shadow; `{colors.hairline}` border | Default cards, table rows |
+| 1 (subtle) | `rgba(15, 15, 15, 0.04) 0px 1px 2px 0px` | Hover-elevated tiles |
+| 2 (card) | `rgba(15, 15, 15, 0.08) 0px 4px 12px 0px` | Feature cards |
+| 3 (mockup) | `rgba(15, 15, 15, 0.20) 0px 24px 48px -8px` | Hero workspace mockup card |
+| 4 (modal) | `rgba(15, 15, 15, 0.16) 0px 16px 48px -8px` | Modals, dropdowns |
+
+### Decorative Depth
+- Hero workspace mockup card uses deep diffuse drop shadow (Level 3) — significant elevation against the navy band
+- Pastel feature cards carry their own visual weight via tint backgrounds
+- Sticky-note dot illustrations and mesh wires add atmospheric decoration to navy hero
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| `{rounded.xs}` | 4px | Tag chips |
+| `{rounded.sm}` | 6px | Type badges |
+| `{rounded.md}` | 8px | Buttons, inputs, search-pill |
+| `{rounded.lg}` | 12px | Cards, pricing tiers, agent tiles, workspace mockup |
+| `{rounded.xl}` | 16px | Larger feature panels |
+| `{rounded.xxl}` | 20px | Featured product showcases |
+| `{rounded.xxxl}` | 24px | Larger feature cards |
+| `{rounded.full}` | 9999px | Status badges, pill tabs (NOT regular buttons) |
+
+Notion's geometry is sober-editorial — `{rounded.md}` (8px) buttons distinguish it from pill-button-everywhere brands.
+
+## Components
+
+> Per the no-hover policy, hover states are NOT documented.
+
+### Buttons
+
+**`button-primary`** — Signature purple rectangular primary CTA, the dominant action.
+- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.
+- Pressed state `button-primary-pressed` deepens to `{colors.primary-pressed}`.
+- Disabled state uses `{colors.hairline}` background.
+
+**`button-dark`** — Black rectangular CTA on light backgrounds.
+- Background `{colors.ink-deep}`, text `{colors.on-dark}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.
+
+**`button-secondary`** — Outlined rectangular for secondary actions ("Request a demo").
+- Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.
+
+**`button-on-dark`** — White button on dark hero bands.
+- Background `{colors.on-dark}`, text `{colors.ink}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.
+
+**`button-secondary-on-dark`** — Outlined button on dark.
+- Background transparent, text `{colors.on-dark}`, border `1px solid {colors.on-dark-muted}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.
+
+**`button-ghost`** — Quieter ghost button.
+- Background transparent, text `{colors.ink}`, typography `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.sm}`.
+
+**`button-link`** — Inline blue text link (NOT primary purple).
+- Background transparent, text `{colors.link-blue}`, typography `{typography.body-sm-medium}`, padding `0`.
+
+### Cards & Containers
+
+**`card-base`** — Standard content card.
+- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
+
+**`card-feature`** — Feature card with larger padding.
+- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
+
+**`card-feature-yellow-bold`** — Bold yellow feature banner for high-emphasis content ("Ask your on-demand assistants").
+- Background `{colors.card-tint-yellow-bold}`, text `{colors.charcoal}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.
+
+**`card-feature-peach`** + **`card-feature-rose`** + **`card-feature-mint`** + **`card-feature-sky`** + **`card-feature-lavender`** + **`card-feature-yellow`** + **`card-feature-cream`** — Pastel-tinted feature cards.
+- Each variant uses its corresponding `card-tint-*` color as background, text `{colors.charcoal}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.
+
+**`card-agent-tile`** — Agent assistant tile.
+- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
+
+**`card-template`** — Template thumbnail card.
+- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`, border `1px solid {colors.hairline}`.
+
+**`card-startup-perk`** — Startup-program perk grid item.
+- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
+
+**`pricing-card`** — Standard pricing tier card.
+- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
+
+**`pricing-card-featured`** — Featured pricing tier (Plus or Business — purple-bordered).
+- Background `{colors.surface}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px solid {colors.primary}`.
+
+### Inputs & Forms
+
+**`text-input`** — Standard text field.
+- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px.
+
+**`text-input-focused`** — Activated state.
+- Border switches to `2px solid {colors.primary}` (purple).
+
+**`search-pill`** — Search bar.
+- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-md}`, rounded `{rounded.md}`, height 44px, border `1px solid {colors.hairline}`.
+
+### Tabs
+
+**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav for top-level switching.
+- Inactive: text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
+- Active: background `{colors.ink-deep}`, text `{colors.on-dark}`.
+
+**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation.
+- Inactive: text `{colors.steel}`, no border. Active: text `{colors.ink}`, 2px bottom border in `{colors.ink}`.
+
+### Badges & Status
+
+**`badge-purple`** — Purple status badge (matches primary CTA).
+- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
+
+**`badge-pink`** — Pink accent badge.
+- Background `{colors.brand-pink}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
+
+**`badge-orange`** — Orange accent badge.
+- Background `{colors.brand-orange}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
+
+**`badge-tag-purple`** — Soft-purple feature tag chip.
+- Background `{colors.card-tint-lavender}`, text `{colors.brand-purple-800}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.
+
+**`badge-tag-orange`** — Soft-orange feature tag.
+- Background `{colors.card-tint-peach}`, text `{colors.brand-orange-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.
+
+**`badge-tag-green`** — Soft-mint feature tag.
+- Background `{colors.card-tint-mint}`, text `{colors.brand-green}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.
+
+**`badge-popular`** — "Most Popular" tier indicator.
+- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
+
+**`promo-banner`** — Light surface promo strip ABOVE the top nav.
+- Background `{colors.surface}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`. ("Developers: Get a first look at our new Developer Platform on May 13.")
+
+### Tables
+
+**`comparison-table`** — Pricing feature comparison table.
+- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.
+
+**`comparison-row`** — Individual feature row.
+- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.lg}`, bottom border `1px solid {colors.hairline-soft}`.
+
+### Documentation Components
+
+**`workspace-mockup-card`** — Embedded Notion workspace UI mockup on hero band ("Ramp HQ" kanban board).
+- Background `{colors.canvas}`, rounded `{rounded.lg}`, border `1px solid {colors.hairline}`, deep shadow `rgba(15, 15, 15, 0.20) 0px 24px 48px -8px`. Carries actual Notion product UI mock.
+
+**`testimonial-card`** — Customer testimonial card.
+- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
+
+**`logo-wall-item`** — Customer logo wordmark cell.
+- Background transparent, text `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.
+
+**`faq-accordion-item`** — FAQ panel.
+- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px solid {colors.hairline}`.
+
+**`stat-row`** — Stats strip with bar chart visualization ("More productivity. Fewer tools.").
+- Background `{colors.surface}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.section-sm}`.
+
+**`cta-banner-light`** — Light surface CTA banner.
+- Background `{colors.surface}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.section}`.
+
+### Navigation
+
+**Top Navigation (Marketing)** — Sticky white bar.
+- Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline}`.
+- Left: Notion "N" logo + "Product / AI / Solutions / Resources / Enterprise / Pricing / Request a demo" links.
+- Right: "Get Notion free" purple button + "Log in" link.
+
+### Signature Components
+
+**`hero-band-dark`** — Deep navy hero band with embedded workspace mockup and decorative dots/wires.
+- Background `{colors.brand-navy}`, text `{colors.on-dark}`, padding `{spacing.hero}`.
+- Layout: centered headline `{typography.hero-display}`, subtitle, button row (`button-primary` purple + `button-secondary-on-dark`), `workspace-mockup-card` below.
+- Atmospheric decoration: scattered colorful sticky-note dots and mesh wire illustrations around the hero content (NOT a literal pattern fill — handled per-page via SVG/illustration).
+
+**`footer-region`** — Multi-column light footer.
+- Background `{colors.canvas}`, padding `{spacing.section} {spacing.xxl}`, top border `1px solid {colors.hairline}`.
+- 6-column link grid (Product / Download / Resources / Notion for / Company / Legal).
+
+**`footer-link`** — Individual footer link.
+- Background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.
+
+## Do's and Don'ts
+
+### Do
+- Use `{colors.primary}` (purple) as the dominant CTA across all surfaces — it's the brand's recognizable signal
+- Pair deep navy hero bands ({colors.brand-navy}) with the purple button + decorative sticky-note dots
+- Use pastel feature card tints (peach, rose, mint, lavender, sky, yellow) generously
+- Use `{colors.card-tint-yellow-bold}` for high-emphasis "Ask the assistant"-style banner cards
+- Apply `{rounded.md}` (8px) to buttons consistently — Notion uses rectangles, not pills
+- Apply `{rounded.lg}` (12px) to all card families
+- Maintain Notion-Sans across every UI surface
+- Use the workspace mockup card on hero bands to show actual product UI
+
+### Don't
+- Don't use the purple for body text or large background surfaces
+- Don't use pill-shaped buttons; Notion's geometry is rectangular-sober
+- Don't mix link-blue ({colors.link-blue}) with primary-purple ({colors.primary}) — they have distinct roles
+- Don't apply heavy shadows on flat documentation cards
+- Don't replace Notion-Sans with a generic Inter
+
+## Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile (small) | < 480px | Single column. Hero 36px. Pricing 1-up. |
+| Mobile (large) | 480 – 767px | Feature cards 2-up. Hero 48px. |
+| Tablet | 768 – 1023px | 2-column feature grids. Hero 56px. |
+| Desktop | 1024 – 1279px | 4-tier pricing card row. Hero 72px. |
+| Wide Desktop | ≥ 1280px | Full 80px hero presentation. |
+
+### Touch Targets
+- Buttons render at 40–44px effective height
+- Form inputs render at 44px height
+- Pill tabs ~32px → 44px on mobile
+
+### Collapsing Strategy
+- **Promo banner** stays full-width; truncates at < 480px
+- **Top nav** below 1024px collapses to hamburger
+- **Hero band**: workspace mockup card moves below text/buttons on mobile
+- **Pricing tiers**: 4-column → 2-column tablet → 1-column mobile
+- **Feature cards**: 3-up desktop → 2-up tablet → 1-up mobile
+- **Hero typography**: 80px → 56px → 48px → 36px
+- **Footer**: 6-column desktop → 3-column tablet → accordion mobile
+
+### Image Behavior
+- Workspace mockup card maintains aspect ratio
+- Pastel illustrations inside feature cards scale proportionally
+- Customer logo wall: wordmarks at consistent 60–80px height
+
+## Iteration Guide
+
+1. Focus on ONE component at a time
+2. Reference component names and tokens directly
+3. Run `npx @google/design.md lint DESIGN.md` after edits
+4. Add new variants as separate `components:` entries
+5. Default to `{typography.body-md}` for body
+6. Keep `{colors.primary}` (purple) as the primary CTA — distinct from `{colors.link-blue}` for inline links
+7. Use `{rounded.md}` for buttons (rectangles), `{rounded.lg}` for cards, `{rounded.full}` for pill tabs/badges only
+
+## Known Gaps
+
+- Specific dark-mode token values not surfaced beyond hero bands
+- Animation/transition timings not extracted; recommend 150–200ms ease
+- Form validation success state not explicitly captured
+- Pastel-tint mapping (which feature uses which tint) is observation-based — the actual brand library may have more entries