shade___style_reference:
  info: "> Editorial paper cutouts on white"

  theme: "light"

  info: "Shade operates in a near-monochrome design language: white canvas, soft warm-charcoal text, and one restrained violet accent that appears almost exclusively as hairline borders and a single logo gradient. The interface feels editorial and unhurried — Inter Display at compressed negative tracking gives headlines a sculpted, magazine-cover quality rather than the typical SaaS breathing-room look. Buttons are pill-shaped with hard, solid-color offset shadows (no blur, no diffusion) that read as paper cutouts rather than Material elevations. Color is used as rare punctuation: the violet never fills large surfaces, it traces edges and marks selected states, letting the photographic content do the emotional work."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Charcoal Ink | `#131315` | `--color-charcoal-ink` | Primary text, dark pill button fill, heading borders — warm near-black, the only filled button color in the system |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, button text, ghost button background |"
    info: "| Bone | `#f7f5ff` | `--color-bone` | Secondary canvas, subtle violet-tinted off-white for alternating sections |"
    info: "| Cutout Gray | `#f1f1f1` | `--color-cutout-gray` | Solid offset shadow color under primary buttons and secondary surfaces |"
    info: "| Slate Mid | `#717173` | `--color-slate-mid` | Muted body text, secondary metadata, helper copy |"
    info: "| Hairline | `#d0d0d0` | `--color-hairline` | Subtle borders, dividers, inactive tab indicators |"
    info: "| Deep Charcoal | `#444444` | `--color-deep-charcoal` | Input borders, slightly heavier dividers than Hairline |"
    info: "| Logo Violet | `#855cf7` | `--color-logo-violet` | Brand mark gradient terminus, logo cube fill — the only saturated color in the system |"
    info: "| Lavender Trace | `#dacefd` | `--color-lavender-trace` | Selected tab underline, violet hairline accents, announcement pill border — violet at whisper volume |"

  tokens___typography:

    sans_serif___sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Role:** sans-serif — detected in extracted data but not described by AI"

    inter_display___primary_typeface_for_all_ui_text__body_and_headings_alike__single_weight_400_carries_the_entire_hierarchy_through_size_and_tracking_alone___no_bold__no_light__the_custom_stylistic_sets_ss01__ss07__ss08_reshape_the_g__a__and_l_terminals_into_a_more_geometric__editorial_silhouette_that_distinguishes_it_from_stock_inter_____font_inter_display:
      - "**Substitute:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 10px, 14px, 16px, 18px, 20px, 21px, 24px, 28px, 32px, 36px, 40px, 48px, 56px, 72px"
      - "**Line height:** 1.0–1.57 (size-dependent)"
      - "**Letter spacing:** -0.01em to -0.03em (tighter as size increases: -0.01em at body, -0.03em at display)"
      - "**OpenType features:** `\"ss01\", \"ss07\", \"ss08\", \"cv03\", \"cv04\", \"cv09\", \"cv11\", \"blwf\"`"
      - "**Role:** Primary typeface for all UI text, body and headings alike. Single weight 400 carries the entire hierarchy through size and tracking alone — no bold, no light. The custom stylistic sets (ss01, ss07, ss08) reshape the g, a, and l terminals into a more geometric, editorial silhouette that distinguishes it from stock Inter."

    aux_mono___monospaced_label_font_for_section_eyebrows_e_g___day_1___let_s_chat__nav_items__badge_text__sets_at_14px_with__0_04em_tracking_gives_timestamps_and_labels_a_technical__archival_feel_against_the_editorial_display_type_____font_aux_mono:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.29"
      - "**Letter spacing:** -0.04em"
      - "**Role:** Monospaced label font for section eyebrows (e.g. 'DAY 1', 'LET'S CHAT', nav items, badge text). Sets at 14px with -0.04em tracking gives timestamps and labels a technical, archival feel against the editorial display type."

    inter___secondary_fallback___system_level_utility_text_where_the_custom_display_features_aren_t_required____font_inter:
      - "**Substitute:** system-ui"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 14px, 16px"
      - "**Line height:** 1.2–1.5"
      - "**Role:** Secondary fallback / system-level utility text where the custom display features aren't required"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | -0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.29 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | -0.24px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.22 | -0.96px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.15 | -1.44px | `--text-heading-lg` |"
      info: "| display | 72px | 1.1 | -2.16px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tabs | 2px |"
      info: "| cards | 14px |"
      info: "| inputs | 9px |"
      info: "| buttons | 35px |"
      info: "| smallChips | 2px |"
      info: "| secondaryButtons | 20px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(241, 241, 241) 8px 8px 0px 0px` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(226, 226, 227, 0.5) 10px 10px 0px -2px` | `--shadow-subtle-2` |"
      info: "| sm | `rgba(19, 19, 21, 0.12) 0px 1px 4px 0px` | `--shadow-sm` |"
      info: "| sm-2 | `rgba(0, 0, 0, 0.2) 0px 3px 4px 0px` | `--shadow-sm-2` |"
      info: "| subtle-3 | `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 100px"
      - "**Card padding:** 24px"
      - "**Element gap:** 10px"

  components:

    primary_pill_button:
      role: "Highest-emphasis action"

      info: "Dark charcoal fill (#131315), white text, 35px border-radius, ~15px vertical / 24px horizontal padding, Inter Display 16px weight 400 with white color. Carries the signature 8px 8px 0px 0px #f1f1f1 hard offset shadow beneath — no blur, reads as a cutout hovering above the page."

    ghost_pill_button:
      role: "Secondary action paired with primary"

      info: "No fill, 1.5px solid #131315 border, #131315 text, 35px radius, same padding as primary. The 8px offset shadow is rendered in semi-transparent gray (rgba(226,226,227,0.5) 10px 10px 0px -2px) so the button appears to sit on a slightly lifted paper plane."

    top_navigation_bar:
      role: "Site-wide navigation"

      info: "Sticky white bar with 1px bottom hairline (#d0d0d0). Logo cube left, then 5–6 Inter Display 14px links in #131315 with 20px gap; right side: 'Log In' text link plus the primary pill CTA. Vertical padding ~20px."

    announcement_pill:
      role: "Inline news/feature flag above hero"

      info: "Lavender Trace (#dacefd) 1px border, fully rounded (~999px or matching button radius), Aux Mono 14px text in violet. No fill, no shadow. Floats centered above the hero headline."

    hero_headline:
      role: "Page-level display"

      info: "Inter Display 72px (desktop) / 48px (tablet) weight 400, #131315, line-height 1.1, letter-spacing -0.03em. Centered, max-width ~900px. No gradient, no mixed weight — the size and negative tracking do all the work."

    tab_navigation_strip:
      role: "In-section content switcher"

      info: "Four labels (Search / Access / Share / Archive) in Inter Display 16px, evenly spaced, separated by hairline dividers. Active tab is marked by a 2px-tall violet (#855cf7) underline directly beneath the text — not a pill background, just a precise accent line. Inactive tabs are #717173."

    product_screenshot_card:
      role: "Feature proof point"

      info: "Product UI rendered as a browser-frame screenshot, slight tilt or straight, sitting on the bone (#f7f5ff) surface. Card has 1px inset #00000014 hairline, 14px radius, no outer shadow. Image bleeds nearly to the card edge."

    logo_strip:
      role: "Social proof / partner bar"

      info: "Horizontal row of 7–8 partner logos in mid-gray (#717173 or desaturated), evenly spaced with ~40px gaps, all rendered at uniform height (~20px). No labels, no borders — just quiet marks."

    timeline_onboarding_row:
      role: "Step-based explanation"

      info: "Three columns headed by Aux Mono 14px labels ('DAY 1', 'DAY 14', 'DAY 21') in #717173, then Inter Display 24px headings in #131315, then body text. Below the columns runs a full-width hairline with 2px solid charcoal circles at each step; active step is filled, future steps are outlined."

    cookie_consent_banner:
      role: "Bottom-right compliance notice"

      info: "Fixed bottom-right card, white fill, 1px #d0d0d0 border, 9px radius, ~16px padding. Body text in 12px #717173, small 'Okay' button with #131315 text and no background."

    brand_logo_mark:
      role: "Identity"

      info: "A small cube/diamond glyph filled with a conic gradient from transparent to #855cf7, ~24px square, followed by 'shade' wordmark in Inter Display 20px weight 400, #131315. The gradient is the only saturated color mark in the system."

  do_s_and_don_ts:

    do:
      - "Use the hard offset shadow (8px 8px 0px 0px #f1f1f1) exclusively on primary pill buttons — never apply blur or diffusion to elevation"
      - "Set Inter Display at weight 400 only; let size and -0.03em tracking carry hierarchy, never switch to bold"
      - "Reserve #855cf7 for the logo gradient and the active tab underline — every other accent must be the muted #dacefd lavender"
      - "Pair every primary CTA with a ghost secondary button of identical 35px radius and padding"
      - "Use 100px between major sections, 10–12px between inline elements, 24px inside cards"
      - "Treat photography as full-bleed and unbordered — let the white canvas frame it like a gallery wall"
      - "Apply Aux Mono 14px -0.04em to all eyebrow labels, timestamps, and tab headings"

    don_t:
      - "Do not introduce additional brand colors or saturated fills — the system is 99% achromatic by design"
      - "Do not use soft blurred shadows on buttons; the signature is hard, solid, paper-cutout offsets"
      - "Do not bold headlines or use weight 500+ in Inter Display — the single-weight hierarchy is intentional"
      - "Do not round the active tab into a pill background; the 2px violet underline is the only acceptable indicator"
      - "Do not add gradient backgrounds to sections or cards — gradients are reserved for the brand mark"
      - "Do not use border-radius values outside the defined scale (35/20/14/9/2px)"
      - "Do not center-align body paragraphs longer than two lines — the system is left-aligned with a centered display headline only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Primary page background |"
    info: "| 1 | Bone | `#f7f5ff` | Alternating section background, subtle violet-tinted band |"
    info: "| 2 | Cutout | `#f1f1f1` | Offset shadow plane under elevated buttons and cards |"

  elevation:

    - "**Primary CTA Button:** `#f1f1f1 8px 8px 0px 0px (hard solid offset, no blur — reads as paper cutout)`"
    - "**Ghost/Link Button:** `rgba(226,226,227,0.5) 10px 10px 0px -2px (hard offset, partially behind element)`"
    - "**Secondary Action Button:** `rgba(19,19,21,0.12) 0px 1px 4px 0px (subtle soft shadow for small buttons)`"
    - "**Product Card:** `rgba(0,0,0,0.05) 0px 0px 0px 1px inset (inset hairline, no outer shadow)`"

  imagery:

    photography_is_the_emotional_engine: "full-bleed, high-saturation action and lifestyle imagery (surfing, fashion, vibrant product crops) that contrast sharply against the bone-white interface. Images are treated raw — no overlays, no duotone, no rounded corners, no borders. The interface frames the photography like a gallery wall. Product UI is shown as tilted browser-frame screenshots floating on the canvas. Logo strip is desaturated grayscale partner marks at mid-gray opacity, each monochrome and small. Icons are minimal: a purple gradient cube/diamond for the brand mark, otherwise absent or hairline."

  layout:

    info: "Max-width 1200px centered content column on a full-width white canvas. Hero is vertically centered with a display headline, short muted paragraph, and two side-by-side pill CTAs; no hero image — the first visual break is the logo strip, then a large full-bleed photograph. Sections alternate white and bone (#f7f5ff) bands with 100px vertical breathing room. Feature blocks use a 4-column card grid for product screenshots, each card on the bone surface with a 1px inset hairline. Onboarding uses a 3-column timeline with circle checkpoints on a hairline rule. Navigation is a single fixed top bar: logo left, link cluster center-left, login + dark pill CTA right. No sidebar, no mega-menu."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    text: "#131315 (charcoal)"
    background: "#ffffff (canvas), #f7f5ff (bone secondary)"
    border: "#d0d0d0 (hairline), #444444 (input)"
    accent: "#855cf7 (logo/active tab), #dacefd (lavender whisper)"
    primary_action: "#131315 (filled action)"

    info: "3-5 Example Component Prompts:"

    - "Hero section: white #ffffff canvas. Display headline at 72px Inter Display weight 400, color #131315, letter-spacing -0.03em (-2.16px), line-height 1.1. Muted paragraph at 18px weight 400, #717173. Two buttons side by side: ghost pill (1.5px #131315 border, 35px radius, #131315 text, 15px 24px padding) + dark pill (#131315 fill, white text, 35px radius, hard 8px 8px 0px 0px #f1f1f1 shadow, 15px 24px padding). Centered stack, max-width 900px."

    - "Announcement pill: 1px #dacefd border, fully rounded (999px), Aux Mono 14px text in #855cf7, transparent fill, 6px 14px padding, centered above hero with 16px bottom margin."

    - "Tab nav strip: four labels in Inter Display 16px #717173, evenly spaced across full width, 1px #d0d0d0 hairline beneath entire row, 2px solid #855cf7 underline directly below the active tab label only."

    - "Product screenshot card: 14px radius, 1px inset rgba(0,0,0,0.05) border, no outer shadow, 24px padding, sitting on #f7f5ff bone surface. Image fills the card edge-to-edge with no rounded inner clipping."

    - "Timeline step row: three columns with Aux Mono 14px eyebrow in #717173, Inter Display 24px heading in #131315, 16px body text in #717173. Full-width 1px #d0d0d0 rule below, 2px solid #131315 circle markers (10px diameter) at each step column position; outlined circle for inactive steps."

  similar_brands:

    - "**Linear** — Same single-weight display type, near-monochrome canvas, pill CTAs with offset flat shadows, and editorial negative tracking on headlines"
    - "**Vercel** — Inter-family typography with compressed letter-spacing, bone-white canvas, full-bleed photography breaks, and minimal component ornamentation"
    - "**Frame.io** — Media-product focus, dark pill primary button on white, and a restrained palette that lets imagery carry the brand"
    - "**Pitch** — Editorial SaaS sensibility with single-weight display headlines, generous section breathing room, and a single muted accent color against monochrome UI"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-charcoal-ink: #131315;
          --color-pure-white: #ffffff;
          --color-bone: #f7f5ff;
          --color-cutout-gray: #f1f1f1;
          --color-slate-mid: #717173;
          --color-hairline: #d0d0d0;
          --color-deep-charcoal: #444444;
          --color-logo-violet: #855cf7;
          --color-lavender-trace: #dacefd;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-aux-mono: 'Aux Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.22;
          --tracking-heading: -0.96px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: -1.44px;
          --text-display: 72px;
          --leading-display: 1.1;
          --tracking-display: -2.16px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-100: 100px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 100px;
          --card-padding: 24px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 9px;
          --radius-xl: 14px;
          --radius-2xl: 20px;
          --radius-2xl-2: 23px;
          --radius-3xl: 35px;
        
          /* Named Radii */
          --radius-tabs: 2px;
          --radius-cards: 14px;
          --radius-inputs: 9px;
          --radius-buttons: 35px;
          --radius-smallchips: 2px;
          --radius-secondarybuttons: 20px;
        
          /* Shadows */
          --shadow-subtle: rgb(241, 241, 241) 8px 8px 0px 0px;
          --shadow-subtle-2: rgba(226, 226, 227, 0.5) 10px 10px 0px -2px;
          --shadow-sm: rgba(19, 19, 21, 0.12) 0px 1px 4px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 3px 4px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-bone: #f7f5ff;
          --surface-cutout: #f1f1f1;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-charcoal-ink: #131315;
          --color-pure-white: #ffffff;
          --color-bone: #f7f5ff;
          --color-cutout-gray: #f1f1f1;
          --color-slate-mid: #717173;
          --color-hairline: #d0d0d0;
          --color-deep-charcoal: #444444;
          --color-logo-violet: #855cf7;
          --color-lavender-trace: #dacefd;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-aux-mono: 'Aux Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.22;
          --tracking-heading: -0.96px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: -1.44px;
          --text-display: 72px;
          --leading-display: 1.1;
          --tracking-display: -2.16px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-100: 100px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 9px;
          --radius-xl: 14px;
          --radius-2xl: 20px;
          --radius-2xl-2: 23px;
          --radius-3xl: 35px;
        
          /* Shadows */
          --shadow-subtle: rgb(241, 241, 241) 8px 8px 0px 0px;
          --shadow-subtle-2: rgba(226, 226, 227, 0.5) 10px 10px 0px -2px;
          --shadow-sm: rgba(19, 19, 21, 0.12) 0px 1px 4px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 3px 4px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
        }