pastel___style_reference:
  info: "> Quiet paper notebook with one vivid ink stamp"

  theme: "light"

  info: "Pastel is a quiet, paper-warm canvas interrupted by one vivid blue stamp. The interface is nearly monochrome — deep near-black text on a stone-white background, with cool gray-blue borders doing the structural work that shadows do elsewhere. A single cobalt accent surfaces only at decision points: the primary CTA, active link, and a few brand marks. The unusual 8.8px corner radius is the signature — softer than a 6px tech feel, tighter than a 12px consumer feel, it signals 'serious tool, friendly enough'. Figtree carries negative tracking at every size, pulling headlines into compact, confident shapes rather than letting them sprawl. Density is generous; whitespace is treated as a structural element, not a luxury. Components are flat with hairline borders, never elevated with shadows."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper Stone | `#f5f5f4` | `--color-paper-stone` | Light supporting surface for subtle backgrounds and section separation. |"
    info: "| Chalk | `#e6e3e2` | `--color-chalk` | Secondary card surface, subtle section bands one step above canvas |"
    info: "| Ink Black | `#111111` | `--color-ink-black` | Primary headings, body text, icon strokes — the dominant text and graphic color across all contexts |"
    info: "| Graphite | `#222222` | `--color-graphite` | Secondary headings, card titles, slightly softer than Ink Black for hierarchical depth |"
    info: "| Fog Gray | `#78716b` | `--color-fog-gray` | Muted helper text, icon hints, tertiary metadata — warm gray that sits naturally on Paper Stone |"
    info: "| Smoke | `#646464` | `--color-smoke` | Secondary icon color, disabled-adjacent UI elements |"
    info: "| Ice Line | `#d1dee8` | `--color-ice-line` | Hairline borders, card outlines, structural dividers — cool blue-tinted gray that distinguishes borders from text |"
    info: "| Ash | `#d7d3d1` | `--color-ash` | Subtle link underlines, very light decorative borders |"
    info: "| Charcoal Block | `#45403c` | `--color-charcoal-block` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Button text on dark or accent surfaces, inverse text on dark blocks |"
    info: "| Cobalt Stamp | `#165dfb` | `--color-cobalt-stamp` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"

  tokens___typography:

    figtree___sole_display_and_text_family__58px_45px_35px_carry_weight_500_600_for_headlines_with__0_016em_tracking_that_pulls_characters_tight__18_21px_at_weight_400_500_is_the_body_and_subheading_range__14_16px_at_weight_400_500_is_caption_and_small_ui__negative_letter_spacing_scales_with_size___tighter_at_display__near_zero_at_body__the_geometric_humanist_shapes_of_figtree_rounded_but_not_soft_match_the_8_8px_corner_radius_system_____font_figtree:
      - "**Substitute:** DM Sans, Plus Jakarta Sans"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 14, 16, 18, 21, 35, 45, 58"
      - "**Line height:** 1.07, 1.25, 1.29, 1.33, 1.37, 1.43, 1.50, 1.70"
      - "**Letter spacing:** -0.0160em at 58px display, -0.0140em at 45px heading, -0.0160em at 35px, normal at 18px and below"
      - "**Role:** Sole display and text family. 58px/45px/35px carry weight 500–600 for headlines with -0.016em tracking that pulls characters tight; 18–21px at weight 400–500 is the body and subheading range; 14–16px at weight 400–500 is caption and small UI. Negative letter-spacing scales with size — tighter at display, near-zero at body. The geometric humanist shapes of Figtree (rounded but not soft) match the 8.8px corner radius system."

    inter___secondary_micro_copy_context_only_appears_in_6_instances_at_14px___treat_as_fallback_utility__not_a_display_voice__figtree_handles_all_visible_brand_communication_____font_inter:
      - "**Substitute:** system-ui sans-serif"
      - "**Weights:** 400"
      - "**Sizes:** 14"
      - "**Line height:** 1.57"
      - "**Letter spacing:** normal"
      - "**Role:** Secondary micro-copy context only (appears in 6 instances at 14px) — treat as fallback/utility, not a display voice. Figtree handles all visible brand communication."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 18px | 1.5 | — | `--text-body-lg` |"
      info: "| subheading | 21px | 1.5 | — | `--text-subheading` |"
      info: "| heading-sm | 35px | 1.25 | -0.56px | `--text-heading-sm` |"
      info: "| heading | 45px | 1.25 | -0.63px | `--text-heading` |"
      info: "| display | 58px | 1.1 | -0.93px | `--text-display` |"

  tokens___spacing___shapes:

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 43 | 43px | `--spacing-43` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 57 | 57px | `--spacing-57` |"
      info: "| 58 | 58px | `--spacing-58` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8.8px |"
      info: "| badges | 8.8px |"
      info: "| images | 8.8px |"
      info: "| buttons | 8.8px |"
      info: "| brand-mark | 120px |"
      info: "| decorative | 15px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 50-80px"
      - "**Card padding:** 20-24px"
      - "**Element gap:** 12-20px"

  components:

    cobalt_primary_button:
      role: "The only filled chromatic button. Used for the single most important action on any screen (Start a free trial, Get started)."

      fill: "Cobalt Stamp #165dfb. Text: Pure White #ffffff, Figtree 14–16px weight 500. Border-radius: 8.8px. Padding: 10px 22px (or 12px 24px on larger variants). No shadow, no gradient. Text label sentence-case. Sits flat on the Paper Stone canvas — the accent color is the elevation."

    charcoal_secondary_button:
      role: "Dark neutral button for account-level actions (Sign up in nav)."

      fill: "Charcoal Block #45403c. Text: Pure White #ffffff, Figtree 14px weight 500. Border-radius: 8.8px. Padding: 8px 16px. Used sparingly — the 'already a member' entry point, not a primary conversion."

    ghost_outline_button:
      role: "Secondary action paired with the primary (Watch demo next to Start a free trial)."

      fill: "transparent. Border: 1px Ice Line #d1dee8. Text: Ink Black #111111, Figtree 14px weight 500. Border-radius: 8.8px. Padding: 10px 22px. The border is the entire affordance — no fill on hover state in the resting design."

    login_text_button:
      role: "Low-emphasis nav entry, present in header right cluster."

      no_fill__no_border__text: "Ink Black #111111, Figtree 14px weight 500. Padding: 8px 16px. Sits visually quiet next to the Sign up button."

    use_case_card:
      role: "Screenshot showcase card in the 'Works on any file' grid — demonstrates the product on different surface types."

      fill: "Pure White #ffffff. Border: 1px Ice Line #d1dee8. Border-radius: 8.8px. No shadow. Contains a rounded inner image (8.8px radius). Caption below: Figtree 14–16px weight 400, Ink Black. No hover lift — the design stays flat."

    testimonial_block:
      role: "Quote + attribution + avatar, placed under hero headline and in social proof sections."

      no_background__no_border__quote: "Figtree 18–21px weight 400, Ink Black. Attribution: 14px Fog Gray for role/title, Ink Black for name. Avatar: 32px circle. Generous vertical spacing (20–30px between quote and attribution)."

    logo_trust_strip:
      role: "Row of monochrome partner/client logos."

      info: "Logos rendered in Ink Black #111111 or Fog Gray #78716b at consistent optical height (~24px). Even spacing across container, no borders or dividers between marks. The strip itself sits on the Paper Stone canvas with no card treatment."

    problem_pill_label:
      role: "Small uppercase or sentence-case tag introducing a section (e.g., 'Problem' eyebrow)."

      fill: "#e6e3e2 or Paper Stone, border optional 1px Ice Line. Text: Fog Gray #78716b, Figtree 12–14px weight 500. Border-radius: 9999px (pill) or 8.8px. Padding: 4px 12px. Functions as a visual handshake before a headline."

    feature_checklist_item:
      role: "Inline trust signals like \"14-day free trial\" and \"No credit card required\" near CTAs."

      info: "Tiny icon (16px) in Fog Gray followed by Figtree 14px weight 400 text in Fog Gray. No fill, no border. Spacing between items: 20–24px."

    top_navigation_bar:
      role: "Sticky or static top bar with brand mark left, center links, right actions."

      fill: "Paper Stone #f5f5f4. No border bottom in the data — separation comes from canvas color shift. Brand logomark: Cobalt Stamp dot at 120px radius (fully circular). Nav links: Figtree 14px weight 500, Ink Black. Right cluster: Login (text) + Sign up (Charcoal Block button, 8.8px radius)."

    section_headline:
      role: "Large section-opening text ('Works on any file…', 'Trusted by fast moving agencies…')."

      info: "Centered or left-aligned. Figtree 35–45px weight 500, Ink Black. Tracking: -0.014em. Line-height: 1.25. Followed by an optional Figtree 18px weight 400 subhead in Graphite or Fog Gray with 20–24px gap above."

    image_placeholder_block:
      role: "Empty/loading state for large showcase images and illustrations."

      fill: "#e6e3e2. Border-radius: 8.8px. Contains a small centered icon (image or play glyph) in Fog Gray. Aspect ratio 16:9 or 4:3. No text label inside — the placeholder speaks through emptiness."

  do_s_and_don_ts:

    do:
      - "Use Cobalt Stamp #165dfb only for filled primary buttons, active links, and the brand logomark dot — never for headings, icons, or decorative washes"
      - "Set border-radius to 8.8px for every card, button, and contained image; reserve 15px for larger decorative surfaces and 120px only for the brand mark"
      - "Set body text to Figtree 16–18px weight 400 in Ink Black #111111; reserve Fog Gray #78716b exclusively for helper metadata and small icon hints"
      - "Apply negative letter-spacing: -0.016em at 58px, -0.014em at 45px, scaling down to normal at 18px and below"
      - "Separate sections using background color shifts between Paper Stone and Chalk rather than borders, dividers, or shadows"
      - "Keep CTAs flat — no drop shadow, no gradient, no hover lift; the Cobalt Stamp fill is the entire elevation signal"
      - "Default page canvas to Paper Stone #f5f5f4; use Pure White #ffffff only inside cards sitting on the canvas, never as the page background"

    don_t:
      - "Don't introduce additional accent colors — the system is 1% colorful by design; a second chromatic hue breaks the 'one stamp' identity"
      - "Don't use pure #000000 — Ink Black is #111111, Graphite is #222222, Charcoal Block is #45403c; always retain the warm undertone"
      - "Don't add box-shadows to cards or buttons — the design uses flat surfaces with hairline borders as its elevation language"
      - "Don't round corners to 12px, 16px, or 9999px for cards or buttons — 8.8px is a deliberate, non-standard value that defines the system"
      - "Don't use letter-spacing 0 or positive values on headlines — negative tracking at 35px and above is a signature of this system"
      - "Don't use Cobalt Stamp for large text blocks, section backgrounds, or illustration fills — it loses urgency when used at scale"
      - "Don't use Inter for display or body copy — Figtree is the only visible brand voice; Inter is a utility fallback"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper Stone | `#f5f5f4` | Base page canvas — warm off-white, the default surface for all sections and the hero |"
    info: "| 1 | Chalk | `#e6e3e2` | Secondary section bands and image placeholder fills — one step darker than canvas for subtle alternation |"
    info: "| 2 | Pure White | `#ffffff` | Card surfaces sitting on the canvas — use cases, product screenshots, contained content blocks |"
    info: "| 3 | Charcoal Block | `#45403c` | Dark interactive surface for secondary buttons — the only dark elevation in the system |"

  elevation:

    info: "The system intentionally avoids box-shadows at every level. Elevation is communicated through three mechanisms only: (1) background color shift between Paper Stone, Chalk, and Pure White; (2) the Cobalt Stamp fill on primary buttons, which acts as a chromatic elevation cue; (3) hairline 1px Ice Line borders on cards and inputs. A shadow would introduce a depth language that conflicts with the flat, paper-like surface treatment."

  imagery:

    info: "Product screenshots and real-world surface mockups dominate the visual language — social media moodboards, Webflow sites, wireframes, Shopify storefronts, PDFs, and video thumbnails shown as if Pastel comments are overlaid on them. Images are always contained inside cards with 8.8px corner radius, never full-bleed. No lifestyle photography, no abstract gradient art, no 3D renders. The only non-photographic visual element is the brand mark itself: a small Cobalt Stamp dot paired with a Cobalt-and-Ink Black wordmark. Avatars in testimonials are small (32px) and circular — the smallest possible presence."

  layout:

    info: "Max-width ~1200px centered container with generous side padding. Hero is left-aligned text + testimonial stack, never centered over a full-bleed image. Sections alternate between Paper Stone and a slightly darker Chalk band for visual rhythm, separated by color shift rather than dividers. Content blocks use a 3–4 column card grid for use-case showcases and a 2-column layout for headline+testimonial pairings. Vertical rhythm is spacious: 50–80px between sections, 20–30px between elements within a block. Navigation is a simple top bar (brand left, center links, right actions), no sidebar, no mega-menu. The overall composition reads as a long, calm scroll with deliberate, unhurried pacing."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #111111 (Ink Black)"
    - "background: #f5f5f4 (Paper Stone)"
    - "border: #d1dee8 (Ice Line)"
    - "muted text: #78716b (Fog Gray)"
    - "accent: #165dfb (Cobalt Stamp)"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "Create a use-case card grid (4 columns). Each card: Pure White #ffffff fill, 1px #d1dee8 border, 8.8px radius, no shadow. Inner image: 8.8px radius, fills card width minus 20px padding. Caption below image: Figtree 14px weight 400, #111111."

    - "Create a testimonial block. Quote: Figtree 21px weight 400, #111111, line-height 1.5. Attribution row: 32px circular avatar + name in 14px weight 500 #111111 + role in 14px weight 400 #78716b. 20px vertical gap between quote and attribution."

    - "Create a section eyebrow pill: 'Problem' label in Figtree 12px weight 500, #78716b text, on Chalk #e6e3e2 fill, 9999px radius, 4px 12px padding. Center it above a Figtree 35px weight 500 #111111 headline with -0.014em tracking."

    - "Create a logo trust strip: 5 monochrome partner logos in Ink Black #111111 at 24px optical height, evenly spaced across a 1200px container, no dividers, sitting directly on the Paper Stone canvas."

  signature_8_8px_radius:

    info: "The border-radius system pivots on 8.8px — a deliberately non-round number that falls between the standard 8px and 10px. This micro-deviation is the system's fingerprint: 8px would read as 'default SaaS', 10px as 'consumer-friendly', 12px as 'soft modern'. 8.8px reads as 'considered, almost-but-not-quite standard' — a tool that cares about details. Every card, button, image container, and input uses it. 15px is reserved for slightly larger decorative surfaces. 120px appears only on the brand mark. Never default to 8px or 12px — the 0.8 offset matters."

  similar_brands:

    - "**Linear** — Same single-accent chromatic discipline on a dark/light contrast system, with tight headline tracking and generous whitespace — though Linear runs dark mode while Pastel runs warm light"
    - "**Pitch** — Same warm-light canvas with one vivid accent, flat cards, and hairline-border elevation — both use a 'one stamp' accent philosophy"
    - "**Frame.io** — Same product-screenshot-as-hero pattern showing the tool overlaid on real creative work, with contained rounded images in a card grid"
    - "**Crisp** — Same spacious light-mode SaaS layout with quiet monochrome body and a single blue accent reserved for CTAs and active states"
    - "**Figma marketing site** — Same tight Figtree-adjacent geometric sans, generous section breathing room, and flat component treatment without shadows"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper-stone: #f5f5f4;
          --color-chalk: #e6e3e2;
          --color-ink-black: #111111;
          --color-graphite: #222222;
          --color-fog-gray: #78716b;
          --color-smoke: #646464;
          --color-ice-line: #d1dee8;
          --color-ash: #d7d3d1;
          --color-charcoal-block: #45403c;
          --color-pure-white: #ffffff;
          --color-cobalt-stamp: #165dfb;
        
          /* Typography — Font Families */
          --font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading: 21px;
          --leading-subheading: 1.5;
          --text-heading-sm: 35px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.56px;
          --text-heading: 45px;
          --leading-heading: 1.25;
          --tracking-heading: -0.63px;
          --text-display: 58px;
          --leading-display: 1.1;
          --tracking-display: -0.93px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-43: 43px;
          --spacing-50: 50px;
          --spacing-56: 56px;
          --spacing-57: 57px;
          --spacing-58: 58px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 50-80px;
          --card-padding: 20-24px;
          --element-gap: 12-20px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8.8px;
          --radius-xl: 15px;
          --radius-full: 120px;
        
          /* Named Radii */
          --radius-cards: 8.8px;
          --radius-badges: 8.8px;
          --radius-images: 8.8px;
          --radius-buttons: 8.8px;
          --radius-brand-mark: 120px;
          --radius-decorative: 15px;
        
          /* Surfaces */
          --surface-paper-stone: #f5f5f4;
          --surface-chalk: #e6e3e2;
          --surface-pure-white: #ffffff;
          --surface-charcoal-block: #45403c;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper-stone: #f5f5f4;
          --color-chalk: #e6e3e2;
          --color-ink-black: #111111;
          --color-graphite: #222222;
          --color-fog-gray: #78716b;
          --color-smoke: #646464;
          --color-ice-line: #d1dee8;
          --color-ash: #d7d3d1;
          --color-charcoal-block: #45403c;
          --color-pure-white: #ffffff;
          --color-cobalt-stamp: #165dfb;
        
          /* Typography */
          --font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading: 21px;
          --leading-subheading: 1.5;
          --text-heading-sm: 35px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.56px;
          --text-heading: 45px;
          --leading-heading: 1.25;
          --tracking-heading: -0.63px;
          --text-display: 58px;
          --leading-display: 1.1;
          --tracking-display: -0.93px;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-43: 43px;
          --spacing-50: 50px;
          --spacing-56: 56px;
          --spacing-57: 57px;
          --spacing-58: 58px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-140: 140px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8.8px;
          --radius-xl: 15px;
          --radius-full: 120px;
        }