gleap___style_reference:
  info: "> Editorial serif over pastel SaaS — like a design magazine spread rendered in product UI."

  theme: "light"

  info: "Gleap runs a light-canvas editorial system: warm cream off-whites, near-black text, and two pastel accents (soft lavender-pink and powder blue) that act as quiet highlights rather than loud brand colors. The signature move is the pairing of a high-contrast editorial serif (PP Editorial New) for hero and section headlines against a geometric grotesk (Switzer) for everything functional, which makes the marketing voice feel like a magazine spread while the product UI stays utilitarian. Surfaces are flat with very soft shadows, cards are generously rounded (24–42px), and buttons sit in a small radius (10px) with either solid black or pastel fills — the contrast between hard geometric controls and large soft product surfaces gives the whole system its rhythm."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary text, filled dark CTAs, high-contrast borders. Sets the typographic anchor against the cream canvas |"
    info: "| Graphite | `#333333` | `--color-graphite` | Secondary text and the dominant hairline border color (336 uses). Carries the structural edge system |"
    info: "| Slate | `#7b7b7b` | `--color-slate` | Muted helper text and inactive link text. Used wherever secondary information must recede |"
    info: "| Mist | `#bcbcbc` | `--color-mist` | Subtle badge borders and soft body borders. Sits between structural Graphite and canvas in the border hierarchy |"
    info: "| Silver | `#d6d6d6` | `--color-silver` | Light dividers, input borders, and inactive link borders. The quietest structural neutral |"
    info: "| Bone | `#f5f2f0` | `--color-bone` | Warm cream surface — badge backgrounds and off-white secondary surfaces. Distinct from pure white, gives the system a paper-like warmth |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas and card surfaces. The default ground everything sits on |"
    info: "| Lilac Bloom | `#f1ccff` | `--color-lilac-bloom` | Pink action color for filled buttons, selected navigation states, and focused conversion moments. |"
    info: "| Sky Veil | `#91e0ff` | `--color-sky-veil` | Secondary accent — used sparingly for icon accents, illustration details, and alternate highlight surfaces. The cool counterpart to Lilac Bloom |"

  tokens___typography:

    switzer___all_functional_ui__body_copy__subheadings__nav__buttons__badges__weight_400_for_body__500_for_subheadings__600_for_emphasized_ui_labels__letter_spacing_tightens_at_larger_sizes__0_025em_at_32px___0_01em_at_20px__substitute___inter__or__general_sans_____font_switzer:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 13px, 14px, 16px, 20px, 32px"
      - "**Line height:** 1.19-1.44"
      - "**Letter spacing:** -0.010em at 20px, -0.020em at 32px, -0.025em at 32px+"
      - "**Role:** All functional UI, body copy, subheadings, nav, buttons, badges. Weight 400 for body, 500 for subheadings, 600 for emphasized UI labels. Letter-spacing tightens at larger sizes (-0.025em at 32px, -0.01em at 20px). Substitute: 'Inter' or 'General Sans'."

    pp_editorial_new___hero_and_section_headlines__a_high_contrast_editorial_serif_used_at_display_sizes_only___the_deliberate_contrast_with_the_geometric_switzer_body_is_the_system_s_signature_typographic_move__making_the_brand_read_like_a_magazine_rather_than_a_product_page__substitute___playfair_display__or__dm_serif_display_____font_pp_editorial_new:
      - "**Substitute:** Playfair Display"
      - "**Weights:** 400"
      - "**Sizes:** 48px, 62px"
      - "**Line height:** 1.20-1.30"
      - "**Letter spacing:** normal"
      - "**Role:** Hero and section headlines. A high-contrast editorial serif used at display sizes only — the deliberate contrast with the geometric Switzer body is the system's signature typographic move, making the brand read like a magazine rather than a product page. Substitute: 'Playfair Display' or 'DM Serif Display'."

    arial___arial___detected_in_extracted_data_but_not_described_by_ai____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px"
      - "**Line height:** 1.25, 1.43"
      - "**Role:** Arial — detected in extracted data but not described by AI"

    system_ui___system_ui___detected_in_extracted_data_but_not_described_by_ai____font_system_ui:
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1"
      - "**Role:** system-ui — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.19 | — | `--text-caption` |"
      info: "| body | 16px | 1.44 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.2 | -0.8px | `--text-heading-sm` |"
      info: "| display | 48px | 1.25 | — | `--text-display` |"
      info: "| display-lg | 62px | 1.2 | — | `--text-display-lg` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 116 | 116px | `--spacing-116` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| pills | 32px |"
      info: "| badges | 10px |"
      info: "| inputs | 10px |"
      info: "| buttons | 10px |"
      info: "| cards-elevated | 42px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.04) 0px 8px 16px 0px` | `--shadow-md` |"
      info: "| subtle | `rgba(16, 24, 40, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |"

    layout:

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

  components:

    editorial_display_heading:
      role: "Hero and section-level headline"

      info: "PP Editorial New at 48–62px, weight 400, line-height 1.20–1.25, color Obsidian. Centered or left-aligned depending on section. The serif at this scale is the brand's primary signal — never replace it with a sans."

    filled_dark_cta:
      role: "Primary conversion button (secondary action)"

      info: "Obsidian #000000 background, Paper #ffffff text, Switzer 16px weight 500, 10px radius, 14px vertical / 20px horizontal padding. Carries a barely-visible 1px shadow. Used for the second-priority CTA."

    filled_lilac_cta:
      role: "Primary action button (start trial / book demo)"

      info: "Lilac Bloom #f1ccff background, Obsidian text, Switzer 16px weight 500, 10px radius, 14px vertical / 20px horizontal padding. The dominant CTA — its pastel fill against the cream canvas draws the eye without visual aggression."

    ghost_nav_button_sign_up:
      role: "Top-right navigation conversion"

      info: "Obsidian background, Paper text, Switzer 14px weight 500, 10px radius, 10px vertical / 20px horizontal padding. Sits in the nav bar as the closed conversion path."

    tag_pill:
      role: "Category or section label above headlines"

      info: "Switzer 13–14px weight 500, Lilac Bloom or Bone background, 10px radius, 5px vertical / 12px horizontal padding, Obsidian text. Always centered above a heading, acts as a section marker."

    product_preview_card:
      role: "Hero product screenshot container"

      info: "Large rounded card (24–42px radius) containing the product UI screenshot. Subtle gradient overlay from Lilac Bloom to muted purple at the edges. The card sits below the hero with generous breathing room."

    hairline_border_surface:
      role: "Structural card or input field"

      info: "Graphite #333333 or Silver #d6d6d6 1px border, Paper background, 10–24px radius. The border is the primary separation method — shadows are secondary."

    logo_strip_card:
      role: "Social proof — trusted-by row"

      info: "Logos arranged in a single horizontal row below a 'Trusted by' caption, Paper background, no card container. Logos rendered in Slate #7b7b7b for muted presentation."

    section_label_all_caps_caption:
      role: "Section divider text"

      info: "Switzer 14px weight 500, Obsidian, centered. Used to introduce content sections below the hero."

    chat_bubble_user:
      role: "Product UI chat thread — user message"

      info: "Sky Veil #91e0ff background, Obsidian text, Switzer 14px, 16px radius, sits right-aligned in the thread."

    chat_bubble_support:
      role: "Product UI chat thread — agent message"

      info: "Bone #f5f2f0 or Paper background with Graphite border, Obsidian text, Switzer 14px, 16px radius, sits left-aligned."

    highlight_gradient_card:
      role: "Accent feature card in marketing sections"

      info: "Lilac Bloom to muted purple gradient fill, Paper text, 24–42px radius, generous padding (32–48px). Used to break up monochrome sections with color punctuation."

  do_s_and_don_ts:

    do:
      - "Use PP Editorial New at 48–62px for any headline that needs to carry the brand voice — never substitute a sans-serif at display sizes"
      - "Set the Lilac Bloom #f1ccff filled button as the primary CTA and the Obsidian filled button as the secondary — this pairing is the system's conversion grammar"
      - "Apply 24–42px border-radius to all marketing cards and 10px to all functional controls (buttons, badges, inputs)"
      - "Use Bone #f5f2f0 for any surface that needs warmth — badges, alternating sections, secondary card backgrounds — not cool gray"
      - "Tighten Switzer letter-spacing at larger sizes: -0.010em at 20px, -0.020em at 32px, -0.025em at 48px+"
      - "Keep shadows at 4% black opacity or below — the system uses radius and whitespace for separation, not elevation"
      - "Place a Tag Pill (Lilac Bloom or Bone fill) directly above any major section heading as a category marker"

    don_t:
      - "Do not use PP Editorial New for body copy, nav items, buttons, or badges — reserve it strictly for 48px+ display headlines"
      - "Do not add colored shadows, glows, or heavy elevation — the system is deliberately flat"
      - "Do not introduce additional accent hues beyond Lilac Bloom and Sky Veil — the palette is intentionally two-color"
      - "Do not use Arial or system-ui for primary UI text — Switzer (or its substitute Inter) owns all functional type"
      - "Do not use square or 4px radii on cards — the system's softness depends on the 24–42px range"
      - "Do not apply Lilac Bloom to large background fills beyond cards and CTAs — it should remain a controlled accent"
      - "Do not center-align body paragraphs or functional lists — left-align for readability, center only for hero headlines and short captions"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Page canvas and default card ground |"
    info: "| 1 | Bone | `#f5f2f0` | Warm cream secondary surface for badges and alternating sections |"
    info: "| 2 | Lilac Bloom | `#f1ccff` | Accent surface for highlight cards, tag backgrounds, and CTA fills |"
    info: "| 3 | Sky Veil | `#91e0ff` | Cool accent surface for illustration cards and secondary highlights |"

  elevation:

    - "**Card:** `0px 8px 16px 0px rgba(0, 0, 0, 0.04)`"
    - "**Button:** `0px 1px 2px 0px rgba(16, 24, 40, 0.05)`"

  imagery:

    info: "Product screenshots are the dominant visual — large, rounded, tilted slightly within Lilac Bloom gradient frames. The product UI itself (chat threads, inbox lists, detail panels) does the storytelling. No lifestyle photography, no stock imagery. Icons are outlined and monochromatic (Slate or Obsidian). The only decorative visuals are soft pastel gradient washes behind product cards, blending Lilac Bloom into muted purple. The chat avatars in the product UI use rounded colored circles (blue, yellow) as a subtle color source."

  layout:

    info: "Centered max-width container at 1200px, with a full-width hero that places a serif headline and two-button CTA stack over a cream canvas. The hero is immediately followed by a large product preview card (full container width) with a Lilac Bloom gradient border. Below: a centered 'Trusted by' logo strip, then alternating content sections that use 2-column or 3-column grids with generous 80–120px vertical gaps. Navigation is a simple top bar — logo left, 3-item center menu, Login + filled Sign up right. No sidebar, no mega-menu. The page breathes heavily between sections."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #000000 (Obsidian)"
    - "background: #ffffff (Paper)"
    - "warm surface: #f5f2f0 (Bone)"
    - "border: #333333 (Graphite) primary, #d6d6d6 (Silver) light"
    - "accent: #f1ccff (Lilac Bloom)"
    - "secondary accent: #91e0ff (Sky Veil)"
    - "primary action: #f1ccff (filled action)"

    info: "Example Component Prompts:"

    - "Hero section: #ffffff canvas. Tag pill at 14px Switzer weight 500, #f1ccff background, 10px radius, 5px/12px padding, #000000 text. Headline at 62px PP Editorial New weight 400, #000000, line-height 1.20, centered. Subtext at 16px Switzer weight 400, #333333, centered, max-width 640px. Two CTAs side by side: (a) #f1ccff filled, 10px radius, 14px/20px padding, 16px Switzer 500 #000000 text; (b) #000000 filled, same shape, #ffffff text."

    - "Product preview card: 42px radius, subtle 0 8px 16px rgba(0,0,0,0.04) shadow, Lilac Bloom-to-muted-purple gradient frame (~16px wide gradient border). Contains a flat product UI screenshot with 16px radius internal panels."

    - "Feature section grid: 3-column grid with 24px gaps, 80px section gap above. Each card: 24px radius, #ffffff background, 1px #d6d6d6 border, 24px padding. Card icon at 24px, outlined, #333333. Card title at 20px Switzer 500, #000000. Card body at 16px Switzer 400, #7b7b7b."

    - "Trust strip: centered caption 'Trusted by 4500+ high-growth global companies' at 16px Switzer 500 #000000. Below: single row of 4–5 logos in #7b7b7b, evenly spaced, 48px tall max."

    - "Highlight gradient card: 24px radius, linear-gradient(135deg, #f1ccff, #c89cd9) fill, 32px padding. White #ffffff text at 20px Switzer 500. Decorative blob or icon in #ffffff at 20% opacity."

  similar_brands:

    - "**Linear** — Same minimal light-canvas approach with one restrained accent color and large rounded product surfaces, though Linear goes darker/more dramatic"
    - "**Framer** — Editorial typographic confidence with a single pastel accent and generous whitespace between product-forward sections"
    - "**Cal.com** — Light, spacious SaaS marketing with rounded product preview cards and a soft pastel accent color"
    - "**Pitch** — High-contrast editorial-meets-product aesthetic with centered hero, large product card, and a single accent hue"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-graphite: #333333;
          --color-slate: #7b7b7b;
          --color-mist: #bcbcbc;
          --color-silver: #d6d6d6;
          --color-bone: #f5f2f0;
          --color-paper: #ffffff;
          --color-lilac-bloom: #f1ccff;
          --color-sky-veil: #91e0ff;
        
          /* Typography — Font Families */
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-editorial-new: 'PP Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.19;
          --text-body: 16px;
          --leading-body: 1.44;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.8px;
          --text-display: 48px;
          --leading-display: 1.25;
          --text-display-lg: 62px;
          --leading-display-lg: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-116: 116px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 24-32px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-xl: 13px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 42px;
          --radius-full: 48px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-pills: 32px;
          --radius-badges: 10px;
          --radius-inputs: 10px;
          --radius-buttons: 10px;
          --radius-cards-elevated: 42px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.04) 0px 8px 16px 0px;
          --shadow-subtle: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-bone: #f5f2f0;
          --surface-lilac-bloom: #f1ccff;
          --surface-sky-veil: #91e0ff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-graphite: #333333;
          --color-slate: #7b7b7b;
          --color-mist: #bcbcbc;
          --color-silver: #d6d6d6;
          --color-bone: #f5f2f0;
          --color-paper: #ffffff;
          --color-lilac-bloom: #f1ccff;
          --color-sky-veil: #91e0ff;
        
          /* Typography */
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-editorial-new: 'PP Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.19;
          --text-body: 16px;
          --leading-body: 1.44;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.8px;
          --text-display: 48px;
          --leading-display: 1.25;
          --text-display-lg: 62px;
          --leading-display-lg: 1.2;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-116: 116px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-xl: 13px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 42px;
          --radius-full: 48px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.04) 0px 8px 16px 0px;
          --shadow-subtle: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
        }