shortcut___style_reference:
  info: "> indigo ink on white paper — A whiteboard surface where one confident violet stroke does all the work."

  theme: "light"

  info: "Shortcut's visual language is an indigo-ink-on-white-paper system: a quiet, high-key canvas interrupted by a single vivid violet that does the talking. The product lives on flat white surfaces with near-invisible hairline borders; depth comes from generous whitespace and the occasional pale lavender card, never from drop shadows. Typography is a single geometric sans (Satoshi) set tight and confident at modest sizes — the interface never shouts, it narrates. Color is rationed like punctuation: deep midnight (#08093f) anchors dark sections and footers, vivid indigo (#494bcb) marks every primary action, and a single warm yellow badge appears as decorative accent. The mood is professional, restrained, and tool-like — a workhorse product UI dressed in just enough brand to feel deliberate without becoming decorative."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Vivid Indigo | `#494bcb` | `--color-vivid-indigo` | Primary action background, filled buttons, active nav, brand focal point — the one chromatic color that carries the entire brand |"
    info: "| Midnight Ink | `#08093f` | `--color-midnight-ink` | Footer background, dark section canvases, heading accent on dark surfaces — near-black with violet undertone ties it to the brand |"
    info: "| Soft Violet | `#8a8ac6` | `--color-soft-violet` | Icon strokes, decorative SVG borders, illustration outlines — the muted cousin of the brand color, used where saturated indigo would be too loud |"
    info: "| Pale Lavender | `#9f7ad0` | `--color-pale-lavender` | Badge accent border, decorative illustration strokes — provides warmth without competing with the primary |"
    info: "| Sunlit Yellow | `#ffde87` | `--color-sunlit-yellow` | Decorative badge fill, section eyebrow pills, highlight wash — a single warm note against the cool indigo system |"
    info: "| Pale Lilac | `#eaeaf7` | `--color-pale-lilac` | Subtle button surface, card hover wash, ghost UI background — the lightest tint of the brand violet |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Primary page canvas, card surface, button text, image backgrounds |"
    info: "| Frost Gray | `#f6f6fa` | `--color-frost-gray` | Alternate section background, subtle surface lift above white, badge surface |"
    info: "| Slate | `#686878` | `--color-slate` | Body text borders, hairline dividers, card outlines — the structural neutral |"
    info: "| Graphite | `#222222` | `--color-graphite` | Primary text on light surfaces, nav text, button text — high-contrast reading color |"
    info: "| Ash | `#333333` | `--color-ash` | Secondary text, image borders, link text on white |"
    info: "| Stone | `#6d737d` | `--color-stone` | Muted helper borders, inactive UI outlines |"
    info: "| Fog | `#aaaab0` | `--color-fog` | Nav dividers, inactive nav text, subtle UI separators |"

  tokens___typography:

    satoshi___sole_typeface_across_the_entire_system___satoshi_700_for_display_and_headings__satoshi_500_for_body__labels__and_buttons__the_geometric__slightly_rounded_letterforms_feel_modern_but_not_trendy__the_tight__0_02em_tracking_at_all_sizes_gives_everything_a_compact__engineered_quality__use_inter_as_a_freely_available_substitute__geist_is_also_close_____font_satoshi:
      - "**Substitute:** Inter"
      - "**Weights:** 500, 700"
      - "**Sizes:** 10px, 13px, 14px, 15px, 17px, 19px, 21px, 46px, 61px"
      - "**Line height:** 1.10–1.80"
      - "**Letter spacing:** -0.02em consistently at all sizes"
      - "**Role:** Sole typeface across the entire system — Satoshi 700 for display and headings, Satoshi 500 for body, labels, and buttons. The geometric, slightly rounded letterforms feel modern but not trendy; the tight -0.02em tracking at all sizes gives everything a compact, engineered quality. Use Inter as a freely available substitute; Geist is also close."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | -0.26px | `--text-caption` |"
      info: "| body | 15px | 1.5 | -0.3px | `--text-body` |"
      info: "| heading-sm | 19px | 1.27 | -0.38px | `--text-heading-sm` |"
      info: "| heading | 21px | 1.27 | -0.42px | `--text-heading` |"
      info: "| heading-lg | 46px | 1.1 | -0.92px | `--text-heading-lg` |"
      info: "| display | 61px | 1.1 | -1.22px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 76 | 76px | `--spacing-76` |"
      info: "| 84 | 84px | `--spacing-84` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 7.6px |"
      info: "| pills | 35.8px |"
      info: "| badges | 7.6px |"
      info: "| images | 7.6px |"
      info: "| buttons | 7.6px |"
      info: "| largeCards | 15.2px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.04) 0px 20px 13px 0px` | `--shadow-md` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 73px"
      - "**Card padding:** 19px"
      - "**Element gap:** 4-8px"

  components:

    primary_filled_button:
      role: "Main conversion action — the only chromatic button fill in the system"

      background: "#494bcb (Vivid Indigo). Text: #ffffff, Satoshi 500, 15px, -0.02em letter-spacing, 1.27 line-height. Padding: 11px 19px. Radius: 7.6px. No border. Appears on both light and dark backgrounds — on dark, the same indigo fill holds because the section is already midnight-toned."

    ghost_outlined_button:
      role: "Secondary action paired with the primary"

      info: "Transparent background, 1px border in #ffffff (on dark sections) or #222222 (on light sections). Text matches border color. Satoshi 500, 15px. Padding: 11px 19px. Radius: 7.6px. Never uses the brand color for the outline — ghost means neutral."

    section_eyebrow_badge:
      role: "Tiny label above a section heading — names the topic without claiming hierarchy"

      horizontal_pill__background: "#f6f6fa on light sections, #eaeaf7 on dark sections. Text: Graphite (#222222) on light, #ffffff on dark. Satoshi 500, 13px. Padding: 4px 15px. Radius: 35.8px (full pill). Examples in data: \"Product Development\", \"Product Planning\", \"Customizations\"."

    decorative_yellow_badge:
      role: "Annotation badge with warm accent — sparingly used, never functional"

      background: "#ffde87. Text: Graphite (#222222). Satoshi 700, 10-13px. Border: 1px #ffde87. Radius: 7.6px or 35.8px. Appears as decorative callout annotation (like the \"Add Health Updates\" hand-drawn label in the dark hero)."

    feature_card_light:
      role: "Content card on the customizations/features grid"

      background: "#ffffff. Border: 1px #686878. Radius: 15.2px (larger than buttons). Padding: 19px. Contains an icon (muted violet #8a8ac6 stroke), heading-sm, body text, and a small UI preview. No shadow — the border does the lifting."

    top_navigation_bar:
      role: "Persistent site navigation"

      background: "#ffffff (transparent over content). Height: ~56px. Logo left (Shortcut wordmark + icon mark in #494bcb). Nav links: Satoshi 500, 14px, Graphite (#222222) with #aaaab0 hover underline. Right side: primary filled CTA \"Get started — it's free\" + \"Log In\" text link in Ash (#333333). No drop shadow; uses 1px #aaaab0 bottom border."

    dark_hero_section:
      role: "Full-bleed dark band with centered headline and product UI preview"

      background: "#08093f (Midnight Ink) or its gradient variant. Centered content stack: eyebrow badge → heading-lg in #ffffff → body text in Soft Violet (#8a8ac6) → two-button row (primary indigo + ghost white). Product UI card sits below with the single diffuse shadow, showing colored status badges (green/yellow/red) from the actual app."

    status_pill_in_product:
      role: "Status indicators in the product UI preview — On Track / At Risk / Off Track"

      info: "Satoshi 500, 13px. Pill shape (35.8px radius). Green variants for \"On Track\" / \"Complete\", yellow (#ffde87) for \"At Risk\", red/muted for \"Off Track\". These are product-internal, not marketing-page tokens, but appear in the hero product preview."

    hand_drawn_annotation:
      role: "Doodle-style callout pointing to product UI features"

      info: "Yellow (#ffde87) text in Satoshi 500, 13px, with curved Soft Violet (#8a8ac6) arrow strokes. Radius on text: none. Decorative only — sells the product by showing real UI being annotated, not polished marketing renders."

    footer:
      role: "Site footer with links and brand signoff"

      background: "#08093f (Midnight Ink). Text: #ffffff headings, Soft Violet (#8a8ac6) body. 4-5 column link grid. Logo mark in Vivid Indigo (#494bcb) repeated from nav."

    dot_grid_background:
      role: "Decorative texture on the top white hero section"

      info: "Repeating dot pattern in #f6f6fa on #ffffff canvas. Fills the hero as atmosphere — no information content, just a subtle signal that this is the \"above the fold\" surface."

  do_s_and_don_ts:

    do:
      - "Use #494bcb exclusively as the filled action color — it is the only chromatic button background in the system."
      - "Set every text style in Satoshi with -0.02em letter-spacing, including buttons and badges — the tight tracking is signature."
      - "Use 7.6px radius for buttons, badges, and images; reserve 15.2px for larger feature cards and 35.8px only for full pill shapes."
      - "Reach for the eyebrow badge pattern (small label → heading → body → two-button row) as the default section opener."
      - "Alternate between #ffffff and #f6f6fa for section backgrounds to create rhythm without shadows."
      - "Keep the dark Midnight Ink (#08093f) reserved for the footer and one or two feature sections — it should feel like a destination, not a default."
      - "Let Soft Violet (#8a8ac6) carry all decorative SVG strokes and muted body text on dark backgrounds — it ties back to the brand without competing with the primary indigo."

    don_t:
      - "Do not introduce a second chromatic button color — the system is monochromatic-by-default with one action hue."
      - "Do not use drop shadows for card elevation — use 1px #686878 borders or surface color shifts instead."
      - "Do not apply the brand yellow (#ffde87) to functional UI like warnings or alerts — it is decorative only."
      - "Do not set body text in anything heavier than Satoshi 500 — 700 is reserved for display and headings."
      - "Do not use large border radii (>16px) on standard cards or buttons — only pill badges earn the 35.8px radius."
      - "Do not let letter-spacing drift to 0 or positive values — the -0.02em tracking is part of the visual identity."
      - "Do not use vivid #494bcb for body text or headings on light backgrounds — its job is action and brand focal points, not reading copy."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas White | `#ffffff` | Primary page background, default surface |"
    info: "| 2 | Frost Gray | `#f6f6fa` | Alternate section bands, subtle card lift |"
    info: "| 3 | Pale Lilac | `#eaeaf7` | Ghost button fill, hover wash |"
    info: "| 4 | Sunlit Yellow | `#ffde87` | Decorative badge surface, highlight wash |"
    info: "| 5 | Midnight Ink | `#08093f` | Dark section canvas, footer background |"

  elevation:

    - "**Product UI card:** `rgba(0, 0, 0, 0.04) 0px 20px 13px 0px`"

  imagery:

    imagery_is_product_first__not_lifestyle: "the hero shows real app UI (a project tracking table with colored status pills) rather than stock photography. The product UI is annotated with hand-drawn yellow labels and violet arrows — a 'see what we mean' device, not a marketing render. Decorative dot grids and dotted halftone patterns provide atmosphere on white sections. No photography of people or environments appears; the brand is represented entirely through the product interface itself, UI mockups, and geometric SVG icons (outlined, 1.5px stroke weight, muted violet)."

  layout:

    info: "Max-width 1200px centered container with generous outer margins. The page reads as alternating full-bleed bands: a white hero with dot grid texture, a midnight-navy section centered around a product UI preview, a frost-gray section with a 3-column feature card grid, then another dark section. Hero pattern is centered headline-over-background (no split image+text). Content stacks vertically with eyebrow badge → heading-lg → body → two-button row → product preview as the repeating section unit. Navigation is a single flat top bar with no mega-menu, no sidebar, no sticky behavior beyond standard scroll. The grid system is implicit — feature cards auto-arrange into 2- or 3-up layouts depending on card count, with consistent 19px padding and 15.2px radius."

  agent_prompt_guide:

    quick_color_reference:
    - "text (primary): #222222"
    - "text (secondary): #686878"
    - "background (canvas): #ffffff"
    - "background (alternate): #f6f6fa"
    - "border (hairline): #686878"
    - "accent (brand): #494bcb"
    - "primary action: #494bcb (filled action)"

    3_5_example_component_prompts:

    - "Create a Primary Action Button: #494bcb background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."


    - "*Feature Card (Light Grid):* #ffffff background, 1px #686878 border, 15.2px radius, 19px padding. Icon at top: outlined SVG in #8a8ac6 stroke. Title: Satoshi 700, 19px, #222222. Description: Satoshi 500, 15px, #686878. Optional mini-UI preview at bottom with 7.6px radius on any embedded images."


    - "*Eyebrow Badge:* Horizontal pill, #f6f6fa fill, Satoshi 500 13px, #222222 text, 4px 15px padding, 35.8px radius. Centered above section heading. On dark sections, swap to #eaeaf7 fill with #ffffff text."

  color_rationing_philosophy:

    shortcut_treats_color_like_currency: "#494bcb is the only chromatic action color in the entire system, and it's spent deliberately on primary CTAs, the logo mark, and the darkest brand moments. The midnight navy (#08093f) is reserved for the footer and one or two destination sections. The sunlit yellow (#ffde87) appears only as decorative annotation — never as a functional warning. The result: when an indigo button or yellow callout does appear, it earns attention because everything around it is white, gray, or pale lavender. The system is built on restraint, not saturation."

  radius___shape_language:

    info: "Three discrete radii create the entire shape system: 7.6px for buttons, badges, images, and small cards (the workhorse); 15.2px for larger feature cards that need more softness; 35.8px exclusively for full-pill shapes (section eyebrows, status pills). No element should use a radius outside this set — the discipline of only three values is what makes the system feel cohesive rather than arbitrary."

  similar_brands:

    - "**Linear** — Same compact geometric sans typography approach, single vivid chromatic accent (Linear's purple vs Shortcut's indigo) against a near-white canvas, minimal shadows, and tight letter-spacing on all text."
    - "**Notion** — Light, restrained product UI with hairline borders instead of shadows, small pill-shaped section eyebrows, and a calm monochromatic default that lets a single accent color carry the brand."
    - "**Height** — Project management tool with the same dark-and-light alternating section rhythm, vivid single-accent CTA buttons, and product-UI-as-marketing-asset hero approach."
    - "**Pitch** — Geometric sans throughout, tight tracking, flat white surfaces with minimal elevation, and a single saturated brand color used only for actions — same editorial restraint."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-vivid-indigo: #494bcb;
          --color-midnight-ink: #08093f;
          --color-soft-violet: #8a8ac6;
          --color-pale-lavender: #9f7ad0;
          --color-sunlit-yellow: #ffde87;
          --color-pale-lilac: #eaeaf7;
          --color-pure-white: #ffffff;
          --color-frost-gray: #f6f6fa;
          --color-slate: #686878;
          --color-graphite: #222222;
          --color-ash: #333333;
          --color-stone: #6d737d;
          --color-fog: #aaaab0;
        
          /* Typography — Font Families */
          --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: -0.26px;
          --text-body: 15px;
          --leading-body: 1.5;
          --tracking-body: -0.3px;
          --text-heading-sm: 19px;
          --leading-heading-sm: 1.27;
          --tracking-heading-sm: -0.38px;
          --text-heading: 21px;
          --leading-heading: 1.27;
          --tracking-heading: -0.42px;
          --text-heading-lg: 46px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.92px;
          --text-display: 61px;
          --leading-display: 1.1;
          --tracking-display: -1.22px;
        
          /* Typography — Weights */
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-76: 76px;
          --spacing-84: 84px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 73px;
          --card-padding: 19px;
          --element-gap: 4-8px;
        
          /* Border Radius */
          --radius-lg: 7.61927px;
          --radius-xl: 11.4289px;
          --radius-2xl: 15.2385px;
          --radius-3xl: 35.8106px;
        
          /* Named Radii */
          --radius-cards: 7.6px;
          --radius-pills: 35.8px;
          --radius-badges: 7.6px;
          --radius-images: 7.6px;
          --radius-buttons: 7.6px;
          --radius-largecards: 15.2px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.04) 0px 20px 13px 0px;
        
          /* Surfaces */
          --surface-canvas-white: #ffffff;
          --surface-frost-gray: #f6f6fa;
          --surface-pale-lilac: #eaeaf7;
          --surface-sunlit-yellow: #ffde87;
          --surface-midnight-ink: #08093f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-vivid-indigo: #494bcb;
          --color-midnight-ink: #08093f;
          --color-soft-violet: #8a8ac6;
          --color-pale-lavender: #9f7ad0;
          --color-sunlit-yellow: #ffde87;
          --color-pale-lilac: #eaeaf7;
          --color-pure-white: #ffffff;
          --color-frost-gray: #f6f6fa;
          --color-slate: #686878;
          --color-graphite: #222222;
          --color-ash: #333333;
          --color-stone: #6d737d;
          --color-fog: #aaaab0;
        
          /* Typography */
          --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: -0.26px;
          --text-body: 15px;
          --leading-body: 1.5;
          --tracking-body: -0.3px;
          --text-heading-sm: 19px;
          --leading-heading-sm: 1.27;
          --tracking-heading-sm: -0.38px;
          --text-heading: 21px;
          --leading-heading: 1.27;
          --tracking-heading: -0.42px;
          --text-heading-lg: 46px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.92px;
          --text-display: 61px;
          --leading-display: 1.1;
          --tracking-display: -1.22px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-76: 76px;
          --spacing-84: 84px;
        
          /* Border Radius */
          --radius-lg: 7.61927px;
          --radius-xl: 11.4289px;
          --radius-2xl: 15.2385px;
          --radius-3xl: 35.8106px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.04) 0px 20px 13px 0px;
        }