repeat___style_reference:
  info: "> Highlighter swipe on warm notebook paper — Repeat's lime washes act like marker strokes across cream stock, with near-black ink and pill-rounded cards floating flat above."

  theme: "light"

  info: "Repeat uses an editorial highlighter-on-paper language: a vivid lime wash dominates the canvas like a marker swipe, a warm cream ground reads as notebook stock, and a single near-black ink carries every word of authority. Typography is assertive and uppercase — Poppins at heavy weight sets section titles in tight 1.2 line-height stacks, while Montserrat runs the body in a calm 17px — the contrast between shouting headlines and conversational body is the visual rhythm. Components are flat, generously rounded at 25px, and rely on thin black borders rather than shadows; even the CTA is a near-flat white card with a hairline border sitting on the lime. The single lime accent should be used sparingly as full-bleed section punctuation, never as a button fill or text color — color here is atmosphere, not chrome."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#171717` | `--color-ink` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |"
    info: "| Paper | `#ffffff` | `--color-paper` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |"
    info: "| Notebook Cream | `#ede7e2` | `--color-notebook-cream` | Page canvas for body sections, feature row backgrounds — warm off-white that softens white cards and reads as paper stock |"
    info: "| Olive Ink | `#37352f` | `--color-olive-ink` | Secondary near-black surface — warmer than Ink, used as a fill on the logo grid tiles and nav background accent |"
    info: "| Highlight Lime | `#f5ff7d` | `--color-highlight-lime` | Hero section background, full-bleed color punctuation — the single saturated surface color; never use for text, borders, or buttons |"
    info: "| Lavender Wash | `#e2d8ff` | `--color-lavender-wash` | Accent section background — soft violet surface for variety beats between white and lime sections |"
    info: "| Periwinkle Wash | `#c3d5fc` | `--color-periwinkle-wash` | Accent section background — cool blue surface paired with Lavender Wash for tonal variety in content sections |"

  tokens___typography:

    poppins___display_and_section_headings___used_uppercase_at_600_weight__tight_1_20_line_height_creates_an_editorial_stack__substitute__montserrat_or_inter_at_the_same_weights____font_poppins:
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 17px, 20px, 24px, 29px, 37px"
      - "**Line height:** 1.00–1.30"
      - "**Letter spacing:** normal"
      - "**Role:** Display and section headings — used uppercase at 600 weight, tight 1.20 line-height creates an editorial stack; substitute: Montserrat or Inter at the same weights"

    montserrat___body__navigation__links__card_text__captions__footer___the_workhorse__17px_at_400_weight_is_the_default_reading_size_with_comfortable_1_50_leading__substitute__inter_or_dm_sans____font_montserrat:
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 13px, 15px, 17px, 34px"
      - "**Line height:** 0.75–2.00"
      - "**Letter spacing:** normal"
      - "**Role:** Body, navigation, links, card text, captions, footer — the workhorse; 17px at 400 weight is the default reading size with comfortable 1.50 leading; substitute: Inter or DM Sans"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 15px | 1.6 | — | `--text-body-sm` |"
      info: "| body | 17px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.3 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 29px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 34px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 37px | 1.2 | — | `--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: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| cards | 25px |"
      info: "| icons | 3px |"
      info: "| images | 20px |"
      info: "| buttons | 100px |"
      info: "| heroCard | 25px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.01) 0px 4px 8px -2px` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 40px"
      - "**Card padding:** 15px"
      - "**Element gap:** 4px"

  components:

    top_navigation_bar:
      role: "Global site navigation"

      info: "Horizontal bar with Repeat wordmark left, product/blog links center, and a black 100px-radius pill CTA on the right. White or transparent background, sits above all hero sections. Nav links at 15px Montserrat 500, CTA at 15px Montserrat 600 white on Ink (#171717)."

    primary_filled_cta_button:
      role: "Primary action — demo request, signup"

      info: "Black pill button at 100px border-radius, Ink (#171717) background, Paper (#ffffff) text, 15px Montserrat 600, ~12px 20px padding. Sits on white or cream surfaces only — never directly on the lime. The"

    hero_lime_section:
      role: "Above-the-fold hero block"

      info: "Full-bleed Highlight Lime (#f5ff7d) background. Headline at 37px Poppins 600 uppercase in Ink, tight 1.20 leading. Subhead at 17px Montserrat 400 in Ink. The white CTA card sits centered below, creating a card-on-color composition."

    hero_white_cta_card:
      role: "Primary action surface on the lime hero"

      info: "Paper (#ffffff) rounded card, 25px radius, thin Ink (#171717) border at ~1px, generous internal padding (~40px vertical). Contains an arrow glyph and"

    secondary_text_link:
      role: "Tertiary action — low-commitment next step"

      info: "Underlined Montserrat 15px 400 in Ink, no background or border. Always paired below the primary CTA card. Example pattern:"

    section_heading_uppercase_poppins:
      role: "Page section title"

      info: "29–37px Poppins 600 uppercase in Ink, line-height 1.20, left-aligned. Optional Ink underline divider below. The signature editorial title style — uppercase + tight leading is what makes the design feel like a printed spread."

    brand_product_card:
      role: "Customer showcase in social-proof section"

      info: "25px-radius card containing a full-bleed product photograph on a solid colored background (teal, pink, cream). 20px image radius via overflow:hidden. No border, no shadow. Three-up grid. Image does the talking; the card is just a frame."

    testimonial_stat_card:
      role: "Customer proof with metric headline"

      info: "25px-radius white card with thin Ink border, 15px internal padding. Structure: product image on top (rounded), then stat in 17–20px Poppins 600 (e.g."

    logo_grid_tile:
      role: "Customer logo in social-proof strip"

      info: "Olive Ink (#37352f) rounded square, 25–50px radius, 1:1 aspect ratio, containing the customer brand wordmark in Paper (#ffffff) at ~17px Montserrat 600 centered. Four-up row. No border, no shadow — the fill is the frame."

    feature_row:
      role: "Product capability explanation with screenshot"

      info: "Two-column layout on Notebook Cream (#ede7e2) background: text block left (headline + body + bullet list in 17px Montserrat), product screenshot right in a 20px-radius frame. Generous 40px vertical padding. Headline can be Poppins 600 uppercase or sentence-case at 24px."

    footer:
      role: "Site footer"

      info: "Paper or Notebook Cream background, multi-column link grid in 15px Montserrat 400 Ink, logo and copyright at bottom. Minimal — no heavy social icon blocks, no newsletter modal."

  do_s_and_don_ts:

    do:
      - "Use Highlight Lime (#f5ff7d) only as a full-bleed section background — never as text, border, or button fill"
      - "Set all section titles in uppercase Poppins 600 at 29–37px with 1.20 line-height for the editorial headline stack"
      - "Round all content cards at 25px — the 25px radius is the system fingerprint"
      - "Pair the filled black pill CTA (Ink background, 100px radius) with the white CTA card on lime as the primary action pattern"
      - "Use 1px Ink borders instead of shadows to separate cards from the canvas"
      - "Switch section background colors (lime → cream → white → lavender) to create visual rhythm between content blocks"
      - "Set body copy in Montserrat 400 at 17px with 1.50 leading — never below 15px"
      - "Underline text links in Ink with no other decoration"

    don_t:
      - "Do not use Highlight Lime for text, borders, icons, or button fills — it is a surface color only"
      - "Do not introduce colored buttons (blue, green, red) — actions are Ink-filled or Paper-outlined only"
      - "Do not use shadows heavier than rgba(0,0,0,0.01) — the system is intentionally flat"
      - "Do not mix in a third typeface — the system is strictly Poppins + Montserrat"
      - "Do not use sharp corners on cards or images — 20–25px is the minimum radius for surfaces"
      - "Do not place the primary CTA button directly on the lime background — wrap it in a white card first"
      - "Do not use line-height looser than 1.30 on headings — the tight editorial stack is the signature"
      - "Do not use gradients — Repeat is a flat-color system; the only tonal shifts are solid surface swaps"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Notebook Cream | `#ede7e2` | Page canvas for feature rows and body content |"
    info: "| 1 | Paper | `#ffffff` | Card surfaces, hero CTA card, inverted sections |"
    info: "| 2 | Highlight Lime | `#f5ff7d` | Hero full-bleed, section punctuation |"
    info: "| 3 | Lavender Wash | `#e2d8ff` | Soft accent section background |"
    info: "| 4 | Periwinkle Wash | `#c3d5fc` | Soft accent section background |"

  elevation:

    info: "Repeat uses near-invisible shadows (rgba(0,0,0,0.01)) to create the faintest sense of card lift without visual noise. The system deliberately avoids heavy elevation: depth comes from full-bleed color section changes (white → lime → cream → lavender) rather than drop shadows. Cards separate from the canvas via 1px Ink borders or color contrast, never via shadow stacks. Do not introduce elevation levels beyond this whisper shadow."

  imagery:

    info: "Imagery is product-first photography shot against solid colored studio backgrounds — teal, pink, cream — with no lifestyle context or human models. The product IS the hero, framed inside 25px-radius cards. Product crops are tight, well-lit, high-key. No illustrations, no 3D renders, no abstract graphics. Iconography is minimal and outlined; brand logos in the customer strip are white wordmarks on dark tiles. The overall image-to-text ratio is image-light — photography serves as proof of customer success, not as decorative atmosphere. Color variety in imagery comes from the colored backdrops, not from filters or color grading."

  layout:

    info: "Page structure is full-bleed bands stacked vertically, each band owning one background color. The hero is a full-bleed lime band with a centered white CTA card. Below it, a white band holds a 3-column brand showcase grid. A second white band holds a 3-column testimonial grid, followed by a 4-up dark logo strip. Feature rows alternate on Notebook Cream with 2-column text-left/image-right splits. Section vertical rhythm is 40px internal padding with full-bleed color changes doing the work of section dividers. The grid system is a 3-column card grid for showcases and testimonials, and a 4-column grid for the logo strip. Navigation is a simple top bar — no sticky header, no sidebar, no mega-menu. Content density is compact but breathable; cards never touch, always separated by the canvas color."

  agent_prompt_guide:

    quick_color_reference: "\n- text: #171717 (Ink)\n- background: #ffffff (Paper) for cards, #ede7e2 (Notebook Cream) for canvas\n- border: #171717 (Ink) at 1px\n- accent surface: #f5ff7d (Highlight Lime) for full-bleed sections only\n- primary action: no distinct CTA color"

  similar_brands:

    - "**Notion** — Same warm-neutral canvas (cream/white) with a single bold accent surface, flat components, thin borders instead of shadows, and uppercase headings carrying authority"
    - "**Linear** — Editorial typography attitude — uppercase bold Poppins/Inter titles at tight line-height paired with calm body copy; monochromatic system with one accent color doing the work"
    - "**Substack** — Notebook-paper warmth (cream canvas), near-black ink typography, and a single saturated color (their red, Repeat's lime) used as full-bleed section punctuation"
    - "**Gumroad** — Bold pill CTAs (black filled), generous 25px+ card radii, flat elevation philosophy, and confident uppercase headlines over warm product photography"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #171717;
          --color-paper: #ffffff;
          --color-notebook-cream: #ede7e2;
          --color-olive-ink: #37352f;
          --color-highlight-lime: #f5ff7d;
          --color-lavender-wash: #e2d8ff;
          --color-periwinkle-wash: #c3d5fc;
        
          /* Typography — Font Families */
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-montserrat: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --text-body-sm: 15px;
          --leading-body-sm: 1.6;
          --text-body: 17px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 29px;
          --leading-heading: 1.2;
          --text-heading-lg: 34px;
          --leading-heading-lg: 1.2;
          --text-display: 37px;
          --leading-display: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40px;
          --card-padding: 15px;
          --element-gap: 4px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-2xl: 20px;
          --radius-3xl: 25px;
          --radius-full: 50px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 25px;
          --radius-icons: 3px;
          --radius-images: 20px;
          --radius-buttons: 100px;
          --radius-herocard: 25px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.01) 0px 4px 8px -2px;
        
          /* Surfaces */
          --surface-notebook-cream: #ede7e2;
          --surface-paper: #ffffff;
          --surface-highlight-lime: #f5ff7d;
          --surface-lavender-wash: #e2d8ff;
          --surface-periwinkle-wash: #c3d5fc;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #171717;
          --color-paper: #ffffff;
          --color-notebook-cream: #ede7e2;
          --color-olive-ink: #37352f;
          --color-highlight-lime: #f5ff7d;
          --color-lavender-wash: #e2d8ff;
          --color-periwinkle-wash: #c3d5fc;
        
          /* Typography */
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-montserrat: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --text-body-sm: 15px;
          --leading-body-sm: 1.6;
          --text-body: 17px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 29px;
          --leading-heading: 1.2;
          --text-heading-lg: 34px;
          --leading-heading-lg: 1.2;
          --text-display: 37px;
          --leading-display: 1.2;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-2xl: 20px;
          --radius-3xl: 25px;
          --radius-full: 50px;
          --radius-full-2: 100px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.01) 0px 4px 8px -2px;
        }