the_leap___style_reference:
  info: "> espresso ink on warm cream"

  theme: "light"

  info: "The Leap uses a warm-creator economy visual language: near-white canvas, espresso-brown text instead of black, a single acid lime-yellow CTA that pops against muted surfaces, and serif display headlines paired with a contemporary neo-grotesque body. Decorative pastels (lavender, mint, sky blue, lemon) appear inside product mockups and section washes rather than chrome. Cards are generously rounded (30px), buttons are fully pill-shaped (100px), and the whole system reads approachable and editorial — the opposite of corporate SaaS. The brown-on-cream + lime accent palette signals a brand built for individual creators, not enterprise buyers."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Espresso Ink | `#482317` | `--color-espresso-ink` | Primary text, headings, nav links, body copy, and outlined button borders — a warm dark brown that replaces pure black and gives the whole system a softer, editorial voice |"
    info: "| Fog Border | `#e5e7eb` | `--color-fog-border` | Hairline borders, dividers, input outlines, and icon strokes across cards, nav, and body containers |"
    info: "| Cream Canvas | `#fafafa` | `--color-cream-canvas` | Page background and card surfaces — the off-white that everything sits on, warmer than pure white |"
    info: "| Lime Spark | `#ecf956` | `--color-lime-spark` | Green action color for filled buttons, selected navigation states, and focused conversion moments. |"
    info: "| Lilac Whisper | `#efd8f0` | `--color-lilac-whisper` | Decorative pastel surface used inside product mockups and gradient washes — soft lavender that recedes behind content |"
    info: "| Mint Tint | `#c6e57d` | `--color-mint-tint` | Decorative pastel surface — light green used in card backgrounds and gradient endpoints |"
    info: "| Lemon Cream | `#f3fb9a` | `--color-lemon-cream` | Decorative pastel surface — pale lemon used in testimonial card washes and gradient stops |"
    info: "| Sky Hush | `#b1dcfc` | `--color-sky-hush` | Decorative pastel surface — muted blue used as occasional card background accent |"

  tokens___typography:

    favorit___body_text__links__nav_items__card_content___same_family_as_abc_favorit_with_slightly_looser_line_height_1_5_for_reading_comfort____font_favorit:
      - "**Substitute:** Inter"
      - "**Weights:** 350, 400"
      - "**Sizes:** 13px, 15px, 16px, 20px, 29px"
      - "**Line height:** 1.00, 1.50"
      - "**Letter spacing:** +0.01em at 13px, +0.008em at 16px"
      - "**Role:** Body text, links, nav items, card content — same family as ABC Favorit with slightly looser line-height (1.5) for reading comfort"

    tobias___display_serif_for_hero_and_section_headlines___large_sizes_with_tight_tracking__0_02em_create_editorial_gravitas__the_light_weight_300_is_anti_convention_for_hero_text__most_sites_use_600_700__this_whisper_weight_signals_confidence_and_restraint____font_tobias:
      - "**Substitute:** Source Serif Pro"
      - "**Weights:** 300"
      - "**Sizes:** 54px, 60px, 70px"
      - "**Line height:** 1.03, 1.20"
      - "**Letter spacing:** -1.4px at 70px, -1.2px at 60px, -1.08px at 54px"
      - "**Role:** Display serif for hero and section headlines — large sizes with tight tracking (-0.02em) create editorial gravitas. The light weight (300) is anti-convention for hero text; most sites use 600-700, this whisper-weight signals confidence and restraint"

    abc_favorit___primary_ui_and_body_typeface___neo_grotesque_with_slight_warmth__weight_350_for_body_and_400_for_emphasis__tight_tracking__0_02em_at_larger_sizes_gives_headings_a_compressed__modern_feel____font_abc_favorit:
      - "**Substitute:** Inter"
      - "**Weights:** 350, 400"
      - "**Sizes:** 14px, 15px, 16px, 20px, 22px, 25px, 27px, 30px"
      - "**Line height:** 1.00, 1.07, 1.20"
      - "**Letter spacing:** -0.02em at 30px, -0.015em at 16px, +0.008em at 14px"
      - "**Role:** Primary UI and body typeface — neo-grotesque with slight warmth, weight 350 for body and 400 for emphasis. Tight tracking (-0.02em) at larger sizes gives headings a compressed, modern feel"

    favorit_bold___emphasis_headings_and_subheads___bold_weight_with_aggressive_tracking__0_037em_creates_a_tight__assertive_counterpoint_to_the_light_serif_displays____font_favorit_bold:
      - "**Substitute:** Inter Bold"
      - "**Weights:** 700"
      - "**Sizes:** 18px, 24px"
      - "**Line height:** 1.00, 1.20"
      - "**Letter spacing:** -0.89px at 24px, -0.67px at 18px"
      - "**Role:** Emphasis headings and subheads — bold weight with aggressive tracking (-0.037em) creates a tight, assertive counterpoint to the light serif displays"

    favorit_regular___favorit_regular___detected_in_extracted_data_but_not_described_by_ai____font_favorit_regular:
      - "**Weights:** 400"
      - "**Sizes:** 20px"
      - "**Line height:** 1.2"
      - "**Letter spacing:** 0.008"
      - "**Role:** Favorit-Regular — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | 0.13px | `--text-caption` |"
      info: "| body | 16px | 1.5 | 0.13px | `--text-body` |"
      info: "| subheading | 20px | 1.2 | 0.16px | `--text-subheading` |"
      info: "| heading-sm | 27px | 1.07 | -0.54px | `--text-heading-sm` |"
      info: "| heading | 30px | 1.2 | -0.6px | `--text-heading` |"
      info: "| heading-lg | 54px | 1.03 | -1.08px | `--text-heading-lg` |"
      info: "| display | 70px | 1.03 | -1.4px | `--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: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 20px |"
      info: "| body | 6px |"
      info: "| cards | 30px |"
      info: "| links | 9px |"
      info: "| buttons | 100px |"
      info: "| smallCards | 15px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) ...` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 30px"
      - "**Element gap:** 16px"

  components:

    lime_cta_button:
      role: "Primary action — sign up, get started, submit"

      info: "Pill-shaped button with 100px border-radius, #ecf956 lime-yellow fill, #482317 espresso text, ABC Favorit weight 700 at 14-15px, 16px horizontal × 8px vertical padding. The only filled chromatic button in the system; its acid green against warm cream creates visual urgency without aggression"

    ghost_text_button:
      role: "Secondary action — learn more, sign in"

      info: "No background fill, #482317 espresso text, uppercase tracking, weight 700, sits inline with CTAs. Used for 'SIGN IN' in nav and secondary flow actions"

    outlined_brown_button:
      role: "Tertiary action with border emphasis"

      info: "1px #482317 espresso border, transparent fill, espresso text, 100px pill radius. Used when a secondary action needs more weight than a ghost link but less than the lime CTA"

    testimonial_card:
      role: "Social proof — customer review display"

      info: "30px border-radius, #fafafa cream background, 1px #e5e7eb fog border, 30px padding. Contains: review title (Favorit-Bold 18px), body text (Favorit 14-16px), 5 yellow stars, reviewer name and Trustpilot link. Cards sit in a 3-column grid with 16-24px gaps"

    product_card_mockup:
      role: "Hero visual — creator link-in-bio preview"

      info: "30px border-radius, floating card with pastel gradient fill (lavender to mint), contains avatar, creator name, social icons, and embedded product cards. Slightly rotated for playful composition, sits on the hero section"

    navigation_bar:
      role: "Top-level site navigation"

      info: "Horizontal bar with logo left, center nav links (FEATURES, PRICING, DISCOVER, RESOURCES) in uppercase ABC Favorit weight 350, right side has ghost 'SIGN IN' and lime CTA 'SIGN UP FREE'. Subtle drop shadow: rgba(0,0,0,0.1) 0px 4px 6px -1px. No background fill — transparent over page canvas"

    section_heading_group:
      role: "Section title and subtitle stack"

      info: "Tobias serif 54-60px for main heading, espresso ink color, -1.08 to -1.2px letter-spacing, line-height 1.03. Subtitle below in Favorit 16-20px, espresso ink, max-width ~600px, centered or left-aligned depending on section"

    step_illustration_block:
      role: "How-it-works step with phone mockup"

      info: "Numbered step (Tobias serif numeral), short label (Favorit), phone mockup with UI screenshot, decorative hand-drawn arrow connecting steps. Pastel background washes (mint, lavender) for visual separation"

    star_rating_display:
      role: "Review rating indicator"

      info: "5 solid yellow/gold stars (approximately #f5b800 implied), inline with testimonial cards. No container, no background — stars sit directly on cream card surface"

    pastel_section_background:
      role: "Decorative section wash"

      info: "Full-width section with gradient or solid pastel fill (lemon #f3fb9a, lavender #efd8f0, mint #c6e57d), 30px border-radius on contained content blocks, creates visual rhythm between white sections"

    creator_profile_badge:
      role: "Inline creator attribution"

      info: "Small pill badge with 20px border-radius, #fafafa background, 1px fog border, contains circular avatar + creator name + role. Used floating over product mockups in hero"

    nav_dropdown_indicator:
      role: "Expandable nav item chevron"

      info: "Small downward chevron icon (stroke #482317, 1px) next to nav items with submenus (FEATURES, RESOURCES). No background, sits inline with nav text"

  do_s_and_don_ts:

    do:
      - "Use #ecf956 lime as the only filled button color — it must remain the single chromatic action accent against the warm neutral system"
      - "Set all buttons to 100px pill radius; cards to 30px radius; never mix sharp corners with this system"
      - "Pair Tobias weight 300 serif displays (54-70px) with ABC Favorit weight 350-400 body — the serif/sans contrast is the system's editorial signature"
      - "Use #482317 espresso for all text — never pure #000000, the warm brown is what makes the system feel approachable"
      - "Apply pastel washes (#f3fb9a, #efd8f0, #c6e57d) to section backgrounds, not to text or interactive elements"
      - "Set hero and section headings to line-height 1.03 with negative letter-spacing — the tight rhythm is essential to the editorial feel"
      - "Use uppercase ABC Favorit weight 700 with positive tracking for nav items and button labels"

    don_t:
      - "Don't introduce a second action color — the lime CTA only works because everything else is neutral or pastel decorative"
      - "Don't use Tobias serif for body text or UI labels — reserve it for displays and large section headings only"
      - "Don't apply shadows to cards — the system uses flat surfaces with borders; the only shadow is the nav bar drop shadow"
      - "Don't use pure white #ffffff or pure black #000000 — cream #fafafa and espresso #482317 define the warm palette"
      - "Don't set card radius below 15px — the generous rounding (15-30px) is core to the friendly creator-economy feel"
      - "Don't add gradient text effects or color overlays to the serif headings — keep them flat espresso on cream"
      - "Don't use more than one pastel wash per section — multiple competing pastels will flatten the visual hierarchy"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#fafafa` | Off-white page background |"
    info: "| 1 | Card Surface | `#fafafa` | Testimonial cards, product cards, content blocks |"
    info: "| 2 | Decorative Wash | `#efd8f0` | Pastel lavender section or card accent |"
    info: "| 2 | Accent Wash | `#f3fb9a` | Pastel lemon section or card accent |"

  elevation:

    - "**Navigation bar:** `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px`"

  imagery:

    info: "Lifestyle photography of real creators (not stock models) is the primary visual: warm, candid, individual personality. Product mockups are the secondary visual: phone screens, link-in-bio cards, and course previews with pastel gradient backgrounds. Decorative elements are hand-drawn and playful — sketchy arrows, star stickers, organic shapes in lime and yellow. No 3D renders, no corporate stock photography, no abstract gradient meshes. Icons are thin-stroke (1px) line icons in espresso brown, no filled icon variants."

  layout:

    info: "Centered max-width container (1200px) with generous side padding. Hero is full-bleed with a two-column split: left text block (headline + subhead + CTA), right floating product card mockup at slight rotation. Sections alternate between cream canvas and pastel washes (lavender-to-mint gradient, solid lemon, solid mint) creating visual rhythm. How-it-works section uses centered text above a 2-step illustration flow with connecting arrow. Testimonials are a 3-column card grid on a lavender-mint gradient background. Vertical spacing is generous (80px section gaps) with comfortable density throughout. Navigation is a minimal top bar — no sidebar, no mega-menu, just centered text links with dropdown chevrons."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "Text: #482317 (Espresso Ink)"
    - "Background: #fafafa (Cream Canvas)"
    - "Border: #e5e7eb (Fog Border)"
    - "Accent: #ecf956 (Lime Spark)"
    - "Pastel washes: #efd8f0, #c6e57d, #f3fb9a"
    - "primary action: #ecf956 (filled action)"

    info: "Example Component Prompts:"

    - "Create a hero section: cream #fafafa background. Two-column layout (55/45 split). Left: Tobias serif headline at 60px weight 300, #482317, letter-spacing -1.2px, line-height 1.03. Subtitle in ABC Favorit 20px weight 400, #482317, max-width 500px. Lime CTA button (#ecf956 fill, 100px radius, 16px×40px padding, #482317 text weight 700, 15px uppercase). Right: floating product card mockup at 5° rotation, 30px radius, pastel gradient fill."

    - "Create a testimonial card grid: 3-column grid, 24px gap. Each card: #fafafa background, 1px #e5e7eb border, 30px border-radius, 30px padding. Title in Favorit-Bold 18px #482317. Body in Favorit 15px weight 350 #482317, line-height 1.5. Five yellow stars (solid #f5b800, 16px each) at bottom-left. Reviewer name in Favorit 14px weight 400."

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

    - "Create a section with pastel background: full-width lavender-to-mint gradient background (linear-gradient 129deg, #f3e8f3 to #dff5dd). Centered max-width 1200px content. Heading: Tobias 54px weight 300, #482317, centered. 80px top/bottom padding on the section."

    - "Create a how-it-works step block: numbered '1.' in Tobias 70px weight 300 #482317, label 'Discovers you' in Favorit 20px weight 400 below. Phone mockup centered, 15px radius, cream #fafafa fill, contains UI screenshot. Decorative lime hand-drawn arrow connecting to next step."

  similar_brands:

    - "**Substack** — Same warm-creator palette approach with editorial serif displays paired with simple sans body, generous card rounding, and a single accent color"
    - "**Gumroad** — Same creator-economy friendliness with pastel washes, pill buttons, and approachable rounded cards targeting individual sellers"
    - "**Kit (ConvertKit)** — Same warm neutral base with a single vivid accent color, generous spacing, and editorial typography mixing serif and sans"
    - "**Stan Store** — Same link-in-bio creator platform visual language with bold serif headlines, lime/bright CTAs, and pastel decorative cards"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-espresso-ink: #482317;
          --color-fog-border: #e5e7eb;
          --color-cream-canvas: #fafafa;
          --color-lime-spark: #ecf956;
          --color-lilac-whisper: #efd8f0;
          --color-mint-tint: #c6e57d;
          --color-lemon-cream: #f3fb9a;
          --color-sky-hush: #b1dcfc;
        
          /* Typography — Font Families */
          --font-favorit: 'Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tobias: 'Tobias', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-favorit: 'ABC Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit-bold: 'Favorit-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit-regular: 'Favorit-Regular', 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.13px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.13px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.16px;
          --text-heading-sm: 27px;
          --leading-heading-sm: 1.07;
          --tracking-heading-sm: -0.54px;
          --text-heading: 30px;
          --leading-heading: 1.2;
          --tracking-heading: -0.6px;
          --text-heading-lg: 54px;
          --leading-heading-lg: 1.03;
          --tracking-heading-lg: -1.08px;
          --text-display: 70px;
          --leading-display: 1.03;
          --tracking-display: -1.4px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-w350: 350;
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 30px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-lg: 9px;
          --radius-xl: 15px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-nav: 20px;
          --radius-body: 6px;
          --radius-cards: 30px;
          --radius-links: 9px;
          --radius-buttons: 100px;
          --radius-smallcards: 15px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
        
          /* Surfaces */
          --surface-page-canvas: #fafafa;
          --surface-card-surface: #fafafa;
          --surface-decorative-wash: #efd8f0;
          --surface-accent-wash: #f3fb9a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-espresso-ink: #482317;
          --color-fog-border: #e5e7eb;
          --color-cream-canvas: #fafafa;
          --color-lime-spark: #ecf956;
          --color-lilac-whisper: #efd8f0;
          --color-mint-tint: #c6e57d;
          --color-lemon-cream: #f3fb9a;
          --color-sky-hush: #b1dcfc;
        
          /* Typography */
          --font-favorit: 'Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tobias: 'Tobias', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-favorit: 'ABC Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit-bold: 'Favorit-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit-regular: 'Favorit-Regular', 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.13px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.13px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.16px;
          --text-heading-sm: 27px;
          --leading-heading-sm: 1.07;
          --tracking-heading-sm: -0.54px;
          --text-heading: 30px;
          --leading-heading: 1.2;
          --tracking-heading: -0.6px;
          --text-heading-lg: 54px;
          --leading-heading-lg: 1.03;
          --tracking-heading-lg: -1.08px;
          --text-display: 70px;
          --leading-display: 1.03;
          --tracking-display: -1.4px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-lg: 9px;
          --radius-xl: 15px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
          --radius-full: 100px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
        }