campsite___style_reference:
  info: "> Warm paper workspace — quiet, cream, and product-forward"

  theme: "light"

  campsite_runs_on_warm_minimalism: "a cream-white canvas (#fffdf9) that feels like paper, paired with near-black text and almost no color. The interface is quiet, compact, and confident — Inter at every size, tight tracking on display sizes, pill-shaped controls, and soft elevation that barely lifts off the page. Color is rationed to functional punctuation: green for resolved states, a warm yellow wash for highlights, and a single dark-orange tone that lives in decorative paint-splash branding rather than in the UI itself. The product mockup is the hero — large, full-bleed, and dominant — while surrounding copy stays small and restrained, letting the product speak."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Warm Canvas | `#fffdf9` | `--color-warm-canvas` | Page background — a warm off-white that gives the entire site its paper-like quality |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Card surfaces, elevated panels, and product-screenshot backgrounds |"
    info: "| Ash Mist | `#f5f5f5` | `--color-ash-mist` | Secondary surface for subtle differentiation — post bodies, sidebar items, input fields |"
    info: "| Soft Fog | `#f0f0f0` | `--color-soft-fog` | Tertiary surface for nested elements, dividers, and inactive states |"
    info: "| Ink | `#171717` | `--color-ink` | Primary text, icons, and headings — near-black warmth rather than pure black |"
    info: "| Graphite | `#525252` | `--color-graphite` | Secondary text and metadata |"
    info: "| Steel | `#737373` | `--color-steel` | Tertiary text, timestamps, and helper labels |"
    info: "| Silver | `#a3a3a3` | `--color-silver` | Muted text, placeholders, and inactive icon fills |"
    info: "| Charcoal Card | `#1e1e1e` | `--color-charcoal-card` | Dark-mode product card surface shown in feature sections |"
    info: "| Resolve Green | `#22c55e` | `--color-resolve-green` | Green action color for filled buttons, selected navigation states, and focused conversion moments. Use as a supporting accent, not as a status color |"
    info: "| Highlight Wash | `#fef3c7` | `--color-highlight-wash` | Soft warm-yellow background for highlighted callouts and quote blocks |"
    info: "| Sienna Brand | `#451a03` | `--color-sienna-brand` | Decorative branding — paint-splash illustrations and brand-icon accents that frame content edges |"
    info: "| Alert Red | `#ef4444` | `--color-alert-red` | Red action color for filled buttons, selected navigation states, and focused conversion moments. Use as a supporting accent, not as a status color |"

  tokens___typography:

    inter___sole_typeface_for_all_ui__headings__body__and_buttons__the_58px_hero_headline_with_weight_600_and__0_031em_tracking_is_the_typographic_anchor___tight__confident__never_thin__body_text_settles_at_14_16px_with_weight_400__no_display_serif_or_alternate_families___the_system_achieves_hierarchy_purely_through_size_and_weight_within_inter_____font_inter:
      - "**Substitute:** system-ui, -apple-system, sans-serif"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 29, 58"
      - "**Line height:** 1.00–1.80"
      - "**Letter spacing:** -1.8px at 58px, -0.52px at 29px, -0.27px at 15px, +0.3px at 12px (uppercase badges)"
      - "**OpenType features:** `\"cv11\", \"ss01\"`"
      - "**Role:** Sole typeface for all UI, headings, body, and buttons. The 58px hero headline with weight 600 and -0.031em tracking is the typographic anchor — tight, confident, never thin. Body text settles at 14–16px with weight 400. No display serif or alternate families — the system achieves hierarchy purely through size and weight within Inter."

    ui_monospace___ui_monospace___detected_in_extracted_data_but_not_described_by_ai____font_ui_monospace:
      - "**Weights:** 400, 600"
      - "**Sizes:** 12px"
      - "**Line height:** 1"
      - "**Role:** ui-monospace — detected in extracted data but not described by AI"

    emoji___emoji___detected_in_extracted_data_but_not_described_by_ai____font_emoji:
      - "**Weights:** 500, 600"
      - "**Sizes:** 12px, 14px"
      - "**Line height:** 1"
      - "**Role:** emoji — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.4 | — | `--text-caption` |"
      info: "| body | 15px | 1.56 | -0.27px | `--text-body` |"
      info: "| body-lg | 18px | 1.63 | — | `--text-body-lg` |"
      info: "| subheading | 22px | 1.4 | — | `--text-subheading` |"
      info: "| heading | 29px | 1.33 | -0.52px | `--text-heading` |"
      info: "| display | 58px | 1.2 | -1.8px | `--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: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 12px |"
      info: "| images | 8px |"
      info: "| inputs | 8px |"
      info: "| avatars | 9999px |"
      info: "| buttons | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05)...` | `--shadow-sm` |"
      info: "| subtle | `rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08)...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(255, 255, 255, 0.32) 0px 0.5px 0px 0px inset` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(0, 0, 0, 0.1) 0px 0.5px 0px 0px inset, rgba(0, 0, 0,...` | `--shadow-subtle-4` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 16px"
      - "**Element gap:** 8px"

  components:

    pill_primary_button:
      role: "Filled action button for primary CTAs"

      info: "Full pill radius (9999px), Ink (#171717) background, white text at 14px weight 500, padding 10px 20px, subtle inset highlight shadow. Used sparingly — most pages rely on text or ghost buttons."

    promo_pill_button:
      role: "Orange branded announcement button"

      info: "Full pill radius (9999px), Sienna Brand (#451a03) background with white text, 10px 16px padding, 13px weight 500. Used only for branded announcements and launch promotions."

    ghost_text_button:
      role: "Low-emphasis inline action"

      info: "No background, Ink (#171717) text at 14px weight 500, 4px vertical / 8px horizontal padding. The default for most navigation and secondary actions."

    product_app_card:
      role: "Large product screenshot container"

      info: "Pure White (#ffffff) background, 12px radius, soft layered shadow (see elevation), overflow hidden to clip the screenshot edges. The hero component — spans nearly full page width."

    post_card:
      role: "Content card in the product feed"

      info: "Pure White (#ffffff) background, 8px radius, 1px border in #f0f0f0, padding 16px, 8px gap between elements. Contains avatar, author name, timestamp, post body, and category tag."

    status_badge:
      role: "Category or state indicator"

      info: "4px radius, 4px 8px padding, 12px Inter weight 500. Green (#22c55e) background with white text for 'Resolved'. Neutral #f5f5f5 background with #737373 text for category tags like 'Product' or 'Engineering'."

    notification_pill:
      role: "Top-of-page announcement banner"

      info: "Full pill radius, Ink (#171717) background, white text at 13px weight 500, with a small dark 'NEW' tag and right-arrow icon. Centered above the hero headline."

    sidebar_navigation:
      role: "Left rail in product mockup"

      info: "Pure White (#ffffff) background, 1px right border in #f0f0f0, 240px width. Items are 10px 12px padded, 14px Inter weight 400, Ink for active, #737373 for inactive. Active item has a subtle #f5f5f5 background fill."

    quote_callout:
      role: "Customer testimonial block"

      info: "Highlight Wash (#fef3c7) background, 8px radius, 16px padding. Quote text in Ink at 16px weight 400, attribution below in #525252 at 13px with avatar."

    feature_card:
      role: "Product capability showcase"

      info: "Pure White (#ffffff) background, 12px radius, 1px border in #f0f0f0, padding 20px. Pairs a small product UI mockup (left) with a heading and description (right) in a 2-column layout."

    input_field:
      role: "Text input for post composer"

      info: "Ash Mist (#f5f5f5) background, 8px radius, 12px padding, 1px border in #f0f0f0. Placeholder text in #a3a3a3 at 14px weight 400. A 'Post' submit button sits flush right."

    avatar:
      role: "User identification"

      info: "Full circle (9999px radius), 24px or 32px diameter, with a 1px border in #ffffff to separate from backgrounds. Initials or photo fill."

    logo_mark:
      role: "Brand identity"

      info: "Rounded square (8px radius) with Sienna Brand (#451a03) background and white geometric mark. 32px in the header, 24px in the favicon."

  do_s_and_don_ts:

    do:
      - "Use Inter weight 400 for body, 500 for UI labels, 600 for headings — never go below 400 or above 600"
      - "Apply -1.8px letter-spacing at 58px display size and scale proportionally down to -0.27px at 15px body"
      - "Use 9999px radius for all buttons, tags, and avatars — pill shapes are the system's identity"
      - "Keep the canvas at #fffdf9 (warm white) — never use pure #ffffff for page backgrounds, only for cards and elevated surfaces"
      - "Use the layered 5% opacity shadow stack for product cards and the stronger multi-stop shadow only for the hero product mockup"
      - "Limit color to functional roles: green for resolved, #fef3c7 for highlights, #ef4444 for destructive — everything else stays monochrome"
      - "Space sections at 64px with 8px element gaps and 16px card padding — the 4px base unit keeps everything snap-aligned"

    don_t:
      - "Don't introduce a second typeface — Inter alone carries the entire hierarchy"
      - "Don't use heavy drop shadows, colored shadows, or shadows with more than 10% opacity"
      - "Don't use sharp corners (0px radius) on any interactive element — minimum 8px, prefer pill"
      - "Don't apply Sienna Brand (#451a03) to text body or list items — it's decorative branding only"
      - "Don't add gradients, glassmorphism, or neumorphism — surfaces are flat with hairline borders"
      - "Don't use pure black (#000000) for text — use #171717 for warmth"
      - "Don't exceed 58px for display headings or go below 11px for any text — the scale is intentionally tight"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Warm Canvas | `#fffdf9` | Base page background |"
    info: "| 1 | Pure White | `#ffffff` | Cards, product screenshots, and primary elevated surfaces |"
    info: "| 2 | Ash Mist | `#f5f5f5` | Nested content blocks, post bodies, subtle panel fills |"
    info: "| 3 | Soft Fog | `#f0f0f0` | Dividers, inactive state backgrounds, tag fills |"

  elevation:

    - "**Product cards and elevated panels:** `rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px`"
    - "**Buttons and interactive controls:** `rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 2px 2px -1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, inset 0 1px 0 rgba(255,255,255,0.32)`"
    - "**Floating product mockup (hero):** `rgba(0, 0, 0, 0.1) 0px 0.5px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px 4px 12px 0px, rgba(0, 0, 0, 0.02) 0px 8px 20px 0px`"

  imagery:

    info: "The site is product-screenshot dominant. The hero features a large, full-bleed macOS-style app window with traffic-light controls, a left sidebar, and a messaging feed. These product mockups are the primary visual — they span nearly the full content width and carry the most visual weight. Decorative orange paint-splash illustrations frame the left and right edges of the page, adding organic warmth to the otherwise precise grid. No photography, no stock imagery, no abstract graphics — the product UI IS the imagery. Icons within the product are small, filled, and monochrome (Ink or #737373)."

  layout:

    info: "Centered max-width (~1200px) container with the hero headline centered over the product mockup. The product mockup is the dominant element — full-width, slightly overlapping the content boundary. Below the fold, content alternates between centered headline + description stacks and 2-column feature blocks (product mockup left, text right). The sidebar paint-splash decorations bleed off the left and right edges of the viewport, creating a frame around the centered content. Vertical rhythm is 64px between sections, with generous breathing room. Navigation is minimal: a small logo top-left, three text links top-right, no sticky header or mega-menu."

  color_rationing:

    info: "The system is 98% achromatic. Color appears only as functional punctuation: green for resolved states, a warm yellow wash for testimonial highlights, red for destructive actions, and a dark sienna for decorative brand paint-splashes. The product UI mockup is the only place where category colors live (green resolved badges, colored category icons). This rationing makes the rare color moments feel deliberate and high-signal."

  product_as_hero:

    info: "Unlike typical SaaS sites that lead with abstract gradients or lifestyle photography, Campsite leads with a literal screenshot of its own product. The mockup is large enough to be readable, styled as a macOS app window with traffic-light controls, and presented with enough shadow to feel like a physical object on the page. This signals confidence: 'here is exactly what you get'."

  agent_prompt_guide:

    primary_action: "#22c55e (filled action)"
    create_a_primary_action_button: "#22c55e background, #171717 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

  similar_brands:

    - "**Linear** — Same monochrome-first approach with Inter typography, pill buttons, and the product UI as the hero — both treat their app screenshot as the primary visual"
    - "**Notion** — Warm canvas background, minimal color palette, and compact information density — both use the page itself as a demonstration of the product's aesthetic"
    - "**Height** — Compact task-tool layout with soft shadows, monochrome surfaces, and green for completion states — shares the 'quiet productivity tool' visual language"
    - "**Pitch** — Product-forward hero with large UI mockup, Inter typeface, pill controls, and warm off-white canvas — both make the app screenshot the visual anchor"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-warm-canvas: #fffdf9;
          --color-pure-white: #ffffff;
          --color-ash-mist: #f5f5f5;
          --color-soft-fog: #f0f0f0;
          --color-ink: #171717;
          --color-graphite: #525252;
          --color-steel: #737373;
          --color-silver: #a3a3a3;
          --color-charcoal-card: #1e1e1e;
          --color-resolve-green: #22c55e;
          --color-highlight-wash: #fef3c7;
          --color-sienna-brand: #451a03;
          --color-alert-red: #ef4444;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-emoji: 'emoji', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --text-body: 15px;
          --leading-body: 1.56;
          --tracking-body: -0.27px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.63;
          --text-subheading: 22px;
          --leading-subheading: 1.4;
          --text-heading: 29px;
          --leading-heading: 1.33;
          --tracking-heading: -0.52px;
          --text-display: 58px;
          --leading-display: 1.2;
          --tracking-display: -1.8px;
        
          /* 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-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 12px;
          --radius-images: 8px;
          --radius-inputs: 8px;
          --radius-avatars: 9999px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px, rgba(0, 0, 0, 0.05) 0px 1px 1px -1px, rgba(0, 0, 0, 0.05) 0px 1px 0px -1px;
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 2px 2px -1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgb(255, 255, 255) 0px 1px 0px 0px inset, rgb(255, 255, 255) 0px 1px 2px 1px inset, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-subtle-3: rgba(255, 255, 255, 0.32) 0px 0.5px 0px 0px inset;
          --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 0.5px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px 4px 12px 0px, rgba(0, 0, 0, 0.02) 0px 8px 20px 0px;
        
          /* Surfaces */
          --surface-warm-canvas: #fffdf9;
          --surface-pure-white: #ffffff;
          --surface-ash-mist: #f5f5f5;
          --surface-soft-fog: #f0f0f0;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-warm-canvas: #fffdf9;
          --color-pure-white: #ffffff;
          --color-ash-mist: #f5f5f5;
          --color-soft-fog: #f0f0f0;
          --color-ink: #171717;
          --color-graphite: #525252;
          --color-steel: #737373;
          --color-silver: #a3a3a3;
          --color-charcoal-card: #1e1e1e;
          --color-resolve-green: #22c55e;
          --color-highlight-wash: #fef3c7;
          --color-sienna-brand: #451a03;
          --color-alert-red: #ef4444;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-emoji: 'emoji', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --text-body: 15px;
          --leading-body: 1.56;
          --tracking-body: -0.27px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.63;
          --text-subheading: 22px;
          --leading-subheading: 1.4;
          --text-heading: 29px;
          --leading-heading: 1.33;
          --tracking-heading: -0.52px;
          --text-display: 58px;
          --leading-display: 1.2;
          --tracking-display: -1.8px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px, rgba(0, 0, 0, 0.05) 0px 1px 1px -1px, rgba(0, 0, 0, 0.05) 0px 1px 0px -1px;
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 2px 2px -1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgb(255, 255, 255) 0px 1px 0px 0px inset, rgb(255, 255, 255) 0px 1px 2px 1px inset, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-subtle-3: rgba(255, 255, 255, 0.32) 0px 0.5px 0px 0px inset;
          --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 0.5px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px 4px 12px 0px, rgba(0, 0, 0, 0.02) 0px 8px 20px 0px;
        }