patch___style_reference:
  info: "> electric blueprint on drafting paper"

  theme: "light"

  info: "Patch uses a loud, electric-blue blueprint aesthetic: a vivid indigo canvas (#1f00ff) alternates with stark white cards, and every interface element either lives inside a crisp hairline border or against the full-bleed blue. Typography is aggressive and condensed — PP Right at weight 800 with sub-1.0 line heights makes headlines feel architectural rather than friendly, while Archivo keeps body text quiet and functional. A single warm orange (#ff622b) punctures the blue/white duopoly as the only fill color used for primary actions. Hand-drawn line illustrations (sketchy people, objects) sit centered inside white cards, reinforcing a 'marketing blueprint' mood. The overall feel is a confident, slightly retro-tech agency identity — medical marketing pitched as engineering, not healthcare."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Electric Indigo | `#1f00ff` | `--color-electric-indigo` | Full-bleed hero canvas, section backgrounds, heading text on light surfaces, all primary borders and dividers — the single chromatic color that defines the entire system |"
    info: "| Patch Orange | `#ff622b` | `--color-patch-orange` | Filled CTA buttons and active nav markers — the only warm color, reserved exclusively for conversion moments |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, hero reverse text, card surfaces, icon fills — the neutral that makes the indigo vibrate |"
    info: "| Fog Gray | `#f2f2f2` | `--color-fog-gray` | Secondary card surfaces, subtle elevation between cards and canvas |"
    info: "| Bone | `#f8f8f8` | `--color-bone` | Tertiary card backgrounds, muted surface layer |"
    info: "| Mist | `#ececec` | `--color-mist` | Input backgrounds, hairline borders on light sections, disabled states |"
    info: "| Gridline | `#d3d3d3` | `--color-gridline` | Major section dividers, muted heading accents, structural borders on the blue canvas |"
    info: "| Ink | `#212121` | `--color-ink` | Primary body text, dark card backgrounds, button borders — near-black with a slight warmth |"

  tokens___typography:

    pp_right___all_display_headings__hero_text__section_titles__and_the_bold__01__section_markers__the_tight_sub_1_0_line_height_at_800_weight_is_the_signature___headlines_stack_like_concrete_blocks__not_flowing_prose__substitute__bebas_neue_for_similar_industrial_condensed_feel__or_anton_for_heavier_display_weight____font_pp_right:
      - "**Weights:** 400, 800"
      - "**Sizes:** 12, 13, 14, 19, 21, 24, 29, 33, 38, 48, 62, 67, 90, 95, 133, 152, 200"
      - "**Line height:** 0.79–1.20 for display, 1.57–2.00 for small"
      - "**Letter spacing:** 0.02–0.05em across all sizes, consistent moderate tracking"
      - "**OpenType features:** `\"ss01\" on (if available in substitute) for alternate character forms`"
      - "**Role:** All display headings, hero text, section titles, and the bold '01' section markers. The tight sub-1.0 line height at 800-weight is the signature — headlines stack like concrete blocks, not flowing prose. Substitute: Bebas Neue for similar industrial condensed feel, or Anton for heavier display weight"

    archivo___body_copy__navigation__buttons__footer_text__captions__form_inputs__weight_300_for_subtle_secondary_text__400_for_body__600_for_small_uppercase_labels_and_nav__the_low_x_height_and_geometric_forms_keep_it_quiet_against_pp_right_s_display_dominance____font_archivo:
      - "**Substitute:** Inter or DM Sans as drop-in alternatives"
      - "**Weights:** 300, 400, 600"
      - "**Sizes:** 10, 11, 13, 14, 17, 19, 23, 24, 29, 38"
      - "**Line height:** 1.00–2.00"
      - "**Letter spacing:** 0.0100em, 0.0200em, 0.0310em, 0.0500em, 0.1000em"
      - "**Role:** Body copy, navigation, buttons, footer text, captions, form inputs. Weight 300 for subtle secondary text, 400 for body, 600 for small uppercase labels and nav. The low x-height and geometric forms keep it quiet against PP Right's display dominance"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 17px | 1.4 | — | `--text-body` |"
      info: "| subheading | 24px | 1.2 | — | `--text-subheading` |"
      info: "| heading-sm | 38px | 0.94 | — | `--text-heading-sm` |"
      info: "| heading | 62px | 0.9 | — | `--text-heading` |"
      info: "| heading-lg | 90px | 0.86 | — | `--text-heading-lg` |"
      info: "| display | 133px | 0.85 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 29 | 29px | `--spacing-29` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 33 | 33px | `--spacing-33` |"
      info: "| 35 | 35px | `--spacing-35` |"
      info: "| 38 | 38px | `--spacing-38` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 90 | 90px | `--spacing-90` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 5px |"
      info: "| inputs | 5px |"
      info: "| buttons | 5px |"
      info: "| navTabs | 5px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24-38px"
      - "**Element gap:** 11-24px"

  components:

    full_bleed_hero_section:
      role: "Opening viewport with maximum brand impact"

      info: "Background #1f00ff covering full viewport. Headline in PP Right 800 at 90–133px, line-height 0.85, color #ffffff, uppercase. Optional faint gridline overlay using #d3d3d3 at 20% opacity. White sketch illustration centered below headline in a #ffffff card with 5px radius and 1px #1f00ff border."

    filled_orange_cta_button:
      role: "Primary conversion action — only filled button in the system"

      info: "Background #ff622b, text #ffffff in Archivo 600 uppercase at 13–14px, letter-spacing 0.03em. Padding 10px 24px. Radius 5px. No shadow. Hover deepens to #e54f1f. This is the ONLY filled chromatic button — every other interactive element is outlined or text."

    ghost_white_cta_button:
      role: "Secondary action on the indigo hero"

      info: "Transparent background, 1px #ffffff border, text #ffffff in Archivo 600 uppercase at 13px. Padding 10px 24px. Radius 5px. Sits on the #1f00ff hero canvas."

    tabbed_navigation_toggle:
      role: "Mode switcher in the header (Patch OG / Patch AI)"

      container: "1px #ffffff border, 5px radius, transparent fill on #1f00ff canvas. Two equal-width tabs. Active tab: #ffffff background, #1f00ff text. Inactive tab: transparent, #ffffff text. PP Right or Archivo 600 at 13px uppercase."

    numbered_section_header:
      role: "Section markers and in-content anchors"

      info: "Two-digit number (01, 02, 03…) in PP Right 800 at ~29px, color #1f00ff on light sections, #ffffff on indigo sections. Often placed in a small bordered box (1px border, 5px radius) or as a standalone element with a 01–04 progression. Paired with a heading in the same or larger PP Right weight."

    white_illustration_card:
      role: "Showcase container for sketch-style artwork"

      info: "Background #ffffff, 1px #1f00ff border, 5px radius, padding ~24–38px. Contains a centered black-line sketch illustration (no fill, 1–2px stroke). Sits on either the #1f00ff hero canvas or a #f2f2f2 surface."

    pricing_tier_card:
      role: "Service plan comparison — Beginner, Intermediate, Advanced"

      info: "Background #ffffff, 1px #d3d3d3 border, 5px radius. Tier name in PP Right 800 at 24–29px uppercase, color #1f00ff. Commitment text in Archivo 400 at 14px, color #212121. Contains a filled orange INQUIRE button. Three cards arranged in a 3-column grid on a #f2f2f2 surface."

    promise_sidebar:
      role: "Sticky left-column note on scrolled content"

      info: "1px #1f00ff border, 5px radius, padding 17px. Title in Archivo 600 uppercase at 13px, color #1f00ff. Body in Archivo 400 at 14px. Two small icon buttons (camera, smile) in the top-right corner of the card."

    feature_list_row:
      role: "Numbered capability list with hover state"

      each_row: "1px #d3d3d3 left/top border, padding 14–17px vertical. Small '01'–'04' marker in a bordered square. Heading in PP Right 800 uppercase, 24–38px. Inactive rows show heading in #d3d3d3 (muted). Active/hovered row: heading in #1f00ff, border in #1f00ff. Transition is instant — no animation."

    square_corner_marker:
      role: "Decorative section corner indicator with number"

      info: "Small square (~40–50px) with 1px #1f00ff border on light sections, #ffffff border on indigo sections. Contains a two-digit number in PP Right 800. Positioned absolutely in the top-right of sections as a structural anchor."

    input_field:
      role: "Form input on light surfaces"

      info: "Background #ffffff, 1px #ececec border, 5px radius. Padding 11px vertical, 14px horizontal. Text in Archivo 400 at 14px, color #212121. Placeholder in #d3d3d3. Focus ring: 1px #1f00ff."

    social_proof_icon_cluster:
      role: "Footer/hero trust indicators"

      info: "Small 32–40px square icons with 1px #1f00ff border, 5px radius, white background. Black glyph or letter inside. Arranged horizontally with 5–10px gap."

  do_s_and_don_ts:

    do:
      - "Use #1f00ff as the dominant chromatic — backgrounds, borders, headings, links. It should appear in nearly every section."
      - "Use PP Right 800 with line-height 0.85–0.94 for all display headings. Never set PP Right body copy at body sizes — it's a display face only."
      - "Use #ff622b exclusively for filled CTA buttons. No other element should use a filled chromatic background."
      - "Use 1px borders in #1f00ff (on light) or #ffffff (on indigo) to define all card and button edges. Shadows are absent — borders carry the structural weight."
      - "Use 5px border-radius consistently across buttons, cards, inputs, and tabs. Do not introduce larger or smaller radii."
      - "Pair every section with a two-digit square corner marker (01, 02, 03…) as a structural anchor."
      - "Use Archivo 400 for body, 300 for secondary muted text, 600 for uppercase labels and buttons."

    don_t:
      - "Do not use filled blue (#1f00ff) buttons — the CTA is always orange. Blue is for canvas and borders only."
      - "Do not set PP Right body text below 21px — its tight tracking and heavy forms become illegible at small sizes."
      - "Do not add drop shadows. The system uses borders, not elevation, to define surfaces."
      - "Do not introduce colors outside the indigo/orange/white/grayscale palette. No greens, purples, or pastels."
      - "Do not use rounded corners beyond 5px. The slightly sharp radius is part of the blueprint/architectural feel."
      - "Do not use light or thin weights (100–200) for any text — the system lives at 300/400/600/800 only."
      - "Do not center body text. Headlines can center; body copy and feature descriptions are always left-aligned."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Default page background on light sections |"
    info: "| 1 | Bone Card | `#f8f8f8` | Subtle card elevation on light sections |"
    info: "| 2 | Fog Card | `#f2f2f2` | Secondary card surface, pricing tier containers |"
    info: "| 3 | Indigo Field | `#1f00ff` | Full-bleed hero, alternating dark sections, blueprint canvas |"
    info: "| 4 | Ink Plate | `#212121` | Dark-mode cards or inverted sections if introduced |"

  imagery:

    info: "Hand-drawn black-line sketch illustrations are the sole visual content — no photography, no 3D, no gradients. Illustrations are flat, single-weight line art (1–2px stroke), often depicting people in casual poses (walking, standing), objects (magnifying glass, net, baseball cap), or abstract symbols. They sit centered inside white cards with 1px indigo borders, always on either the full-bleed indigo hero or a light gray section. The sketch style is intentionally loose and human — it softens the aggressive blue typography and signals approachability. Icons throughout the site are small, square, bordered containers with simple black glyphs. No image-heavy sections, no lifestyle photography, no product screenshots."

  layout:

    full_bleed_alternating_sections: "the hero is a 100vw indigo field, then sections alternate between #ffffff and #f2f2f2 light bands, with occasional return to full-bleed #1f00ff. Content is max-width ~1200px centered. The hero is a single full-screen statement with centered headline and illustration. Feature sections use a 2-column layout — a sticky left sidebar (the Promise card) and a right content column with numbered list rows. Pricing uses a 3-column card grid. A 2-column split (text-left, illustration-right or vice versa) appears in mid-page sections. Vertical rhythm is spacious with ~80px between major sections. Navigation is a simple top bar with logo left, tabbed toggle center, and orange CTA right. The gridline pattern on the indigo background creates a subtle drafting-paper texture without using actual grid images."

  agent_prompt_guide:

    quick_color_reference:
    - "Primary text: #212121"
    - "Background: #ffffff"
    - "Border: #1f00ff (on light) / #ffffff (on indigo)"
    - "Accent: #ff622b (CTA fills only)"
    - "Brand canvas: #1f00ff"
    - "primary action: #ff622b (filled action)"

    example_component_prompts:
    - "**Full-bleed indigo hero**: Background #1f00ff, full viewport. Headline in PP Right 800 at 90px, line-height 0.85, color #ffffff, uppercase. Centered. Below: a 400×400px white card with 1px #1f00ff border and 5px radius containing a centered black-line sketch illustration."
    - "Create a Primary Action Button: #ff622b background, #212121 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."
    - "**Numbered feature row**: 1px #d3d3d3 top border, padding 17px. '01' marker in a 40px square with 1px #d3d3d3 border, text in PP Right 800 at 14px, color #1f00ff. Heading in PP Right 800 at 24px, color #d3d3d3 (inactive) or #1f00ff (active)."
    - "**Ghost button on indigo**: Transparent background, 1px #ffffff border, 5px radius, padding 10px 24px. Text in Archivo 600 at 13px uppercase, color #ffffff, letter-spacing 0.03em."
    - "**Input field**: Background #ffffff, 1px #ececec border, 5px radius, padding 11px 14px. Text in Archivo 400 at 14px, color #212121. Focus: border becomes 1px #1f00ff."

    color_system_philosophy:
    this_is_a_two_color_system: "#1f00ff carries all brand identity, #ff622b is a single conversion accent. White and a 4-step gray scale handle all structural surfaces. Do not introduce additional chromatic colors."

  similar_brands:

    - "**Linear** — Same aggressive condensed display type paired with a single vivid accent color and hairline-border component style"
    - "**Vercel** — Full-bleed dark/light section alternation, tight line-height display headings, and a minimal palette with one strong accent"
    - "**Frame.io** — Bold display typography with near-1.0 line heights, numbered section markers, and a blueprint-style structural grid"
    - "**Cargo (agency site)** — Sketch illustration aesthetic, bordered white cards on saturated color fields, and a single warm CTA accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-indigo: #1f00ff;
          --color-patch-orange: #ff622b;
          --color-pure-white: #ffffff;
          --color-fog-gray: #f2f2f2;
          --color-bone: #f8f8f8;
          --color-mist: #ececec;
          --color-gridline: #d3d3d3;
          --color-ink: #212121;
        
          /* Typography — Font Families */
          --font-pp-right: 'PP Right', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-archivo: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 17px;
          --leading-body: 1.4;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --text-heading-sm: 38px;
          --leading-heading-sm: 0.94;
          --text-heading: 62px;
          --leading-heading: 0.9;
          --text-heading-lg: 90px;
          --leading-heading-lg: 0.86;
          --text-display: 133px;
          --leading-display: 0.85;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-14: 14px;
          --spacing-17: 17px;
          --spacing-19: 19px;
          --spacing-21: 21px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-33: 33px;
          --spacing-35: 35px;
          --spacing-38: 38px;
          --spacing-48: 48px;
          --spacing-90: 90px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24-38px;
          --element-gap: 11-24px;
        
          /* Border Radius */
          --radius-md: 4.7619px;
          --radius-lg: 9.52381px;
        
          /* Named Radii */
          --radius-cards: 5px;
          --radius-inputs: 5px;
          --radius-buttons: 5px;
          --radius-navtabs: 5px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-bone-card: #f8f8f8;
          --surface-fog-card: #f2f2f2;
          --surface-indigo-field: #1f00ff;
          --surface-ink-plate: #212121;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-indigo: #1f00ff;
          --color-patch-orange: #ff622b;
          --color-pure-white: #ffffff;
          --color-fog-gray: #f2f2f2;
          --color-bone: #f8f8f8;
          --color-mist: #ececec;
          --color-gridline: #d3d3d3;
          --color-ink: #212121;
        
          /* Typography */
          --font-pp-right: 'PP Right', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-archivo: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 17px;
          --leading-body: 1.4;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --text-heading-sm: 38px;
          --leading-heading-sm: 0.94;
          --text-heading: 62px;
          --leading-heading: 0.9;
          --text-heading-lg: 90px;
          --leading-heading-lg: 0.86;
          --text-display: 133px;
          --leading-display: 0.85;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-14: 14px;
          --spacing-17: 17px;
          --spacing-19: 19px;
          --spacing-21: 21px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-33: 33px;
          --spacing-35: 35px;
          --spacing-38: 38px;
          --spacing-48: 48px;
          --spacing-90: 90px;
        
          /* Border Radius */
          --radius-md: 4.7619px;
          --radius-lg: 9.52381px;
        }