flowmapp___style_reference:
  info: "> White blueprint desk with one blue pen"

  theme: "light"

  info: "Flowmapp uses a bright, airy, almost lab-notebook language: near-pure white canvas, oversized bold black headlines, pill-shaped blue CTAs, and a constellation of small floating product mockups that act as proof rather than decoration. The system relies on a single vivid blue (#0080ff) as the only saturated signal, with everything else staying achromatic or near-gray so that color reads as action, not as noise. Shapes are aggressively rounded — cards arc at 20–32px, buttons and tags become full pills at 1600px, and the hero CTA even has a hand-drawn wavy tail that makes the primary action feel sketched rather than templated. Layout is max-width contained with generous breathing room; content is broken by small product screenshots, floating UI fragments, and a row of pastel circular icon badges that punctuate long-form copy."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Blue | `#0080ff` | `--color-signal-blue` | Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Voltage Violet | `#0050ff` | `--color-voltage-violet` | Decorative card border glow, hero gradient bloom, chromatic outline accents on floating mockups — sits one notch deeper than Signal Blue for layered brand moments |"
    info: "| Sky Wash | `#c5e0fb` | `--color-sky-wash` | Gray supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Pencil Gray | `#8c9baa` | `--color-pencil-gray` | Muted body text, hairline borders, nav dividers, step badges, tertiary metadata |"
    info: "| Graphite | `#636f7b` | `--color-graphite` | Secondary body copy, inactive nav items, supporting descriptions |"
    info: "| Ink | `#000000` | `--color-ink` | Headlines, primary body, button text, logo wordmark — the dominant voice of the system at AAA contrast on white |"
    info: "| Carbon | `#222222` | `--color-carbon` | Navigation text, dense UI labels where pure black feels heavy |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page background, card surface, button text on Signal Blue, inverted surfaces |"

  tokens___typography:

    inter___single_family_system__display_uses_700_weight_at_64_118px_with_tight_tracking__0_06em_and_near_square_line_height_0_94_1_09_so_headlines_stack_as_a_compact_typographic_block__body_and_ui_use_400_500_at_14_18px_with_1_4_1_67_line_height__weights_600_700_are_reserved_for_headings__ctas__and_section_labels__weight_500_carries_button_text_and_small_caps_style_badges_____font_inter:
      - "**Substitute:** DM Sans, Manrope, or system-ui sans-serif"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 10, 12, 13, 14, 16, 18, 24, 30, 36, 48, 64, 72, 84, 96, 118"
      - "**Line height:** 0.94, 1.00, 1.04, 1.09, 1.14, 1.25, 1.30, 1.40, 1.43, 1.67"
      - "**Letter spacing:** -0.0600em at 118px display, scaling to -0.0150em at 14px body, normal (0) at 12px and below"
      - "**OpenType features:** `\"cv11\", \"ss01\" on, \"tnum\" for tabular numerics in pricing/data`"
      - "**Role:** Single-family system. Display uses 700 weight at 64–118px with tight tracking (-0.06em) and near-square line-height (0.94–1.09) so headlines stack as a compact typographic block. Body and UI use 400–500 at 14–18px with 1.4–1.67 line-height. Weights 600–700 are reserved for headings, CTAs, and section labels; weight 500 carries button text and small caps-style badges."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.015px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.015px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | -0.02px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | -0.02px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.14 | -0.03px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.09 | -0.036px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -0.053px | `--text-display` |"
      info: "| display-xl | 118px | 0.94 | -0.06px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 104 | 104px | `--spacing-104` |"
      info: "| 144 | 144px | `--spacing-144` |"
      info: "| 184 | 184px | `--spacing-184` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 6px |"
      info: "| tags | 1600px |"
      info: "| cards | 20px |"
      info: "| images | 24px |"
      info: "| inputs | 12px |"
      info: "| buttons | 1600px |"
      info: "| iconBadges | 1600px |"
      info: "| featureCards | 32px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgba(0, 0, 0, 0.06) 0px 0px 18px 0px` | `--shadow-lg` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 96px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    hero_cta_button:
      role: "Primary conversion action"

      info: "Pill shape (1600px radius) with a distinctive wavy/lozenge right tail extension. Fill: Signal Blue (#0080ff). Text: white, Inter 600 at 18–24px, letter-spacing -0.02em. Padding: 16px 32px (with extra right padding to accommodate the wavy tail). Subtle Sky Wash glow shadow at rgba(197,224,251,0.6) offset 18px. No border."

    nav_login_button:
      role: "Secondary nav action"

      info: "Outlined pill, 1600px radius, 1px Pencil Gray border (#8c9baa), transparent fill, Carbon (#222222) text at 14px weight 500. Padding: 8px 20px."

    nav_try_for_free_button:
      role: "Primary nav action"

      info: "Filled pill, 1600px radius, Ink (#000000) background, white text, 14px weight 500. Padding: 8px 20px. Small right-arrow icon at 12px."

    step_badge:
      role: "Section header label"

      info: "Pill (1600px radius) with 1px Pencil Gray border, transparent fill. Left: Ink 'STEP 1' at 11px weight 600, uppercase. Separator dot. Right: Pencil Gray descriptor at 11px weight 400. Padding: 6px 12px."

    feature_card_two_column:
      role: "Product feature highlight"

      info: "White surface, 20–32px radius, 1px Pencil Gray border (#8c9baa at 1px). Padding: 32–48px. Left column: 16–18px Pencil Gray icon above heading at 16–18px weight 600 in Ink, then body at 14–16px Pencil Gray weight 400. Right column: product screenshot or mockup with 24px radius."

    section_heading_block:
      role: "Large section opener"

      info: "Display weight 700, sizes 48–72px, line-height 1.0–1.09, letter-spacing -0.036 to -0.053em, Ink color. No max-width clamp — text wraps naturally at 2–4 lines. Centered or left-aligned depending on section."

    icon_badge_pastel_circles:
      role: "Inline feature iconography"

      info: "Full-pill radius (1600px) circles at 28–32px diameter. Soft pastel fills (yellow, mint, pink, lavender, peach) with 1–1.5px dark icon stroke inside. Placed inline within body text to punctuate feature lists."

    product_phone_mockup:
      role: "Hero/feature visual"

      info: "Vertical phone frame with 32–48px outer radius, white inner surface, 1px Pencil Gray border. Contains stacked UI sections (Header, Menu, Cards) each as a colored chip: pastel yellow, mint, pink, peach. Drop shadow: rgba(0,0,0,0.06) 0px 0px 18px."

    feature_tile_card_ai_generator:
      role: "Highlighted feature card"

      info: "White card, 20px radius, 1px border. Contains a small uppercase tag in pastel color (e.g. 'AI GENERATOR' in pink), a dark pill button inside (Ink fill, white text, '✨ Generate Sitemap'), and a cursor illustration. Padding: 24px."

    sitemap_node_card:
      role: "Structure diagram element"

      info: "Small white card, 12px radius, 1px Pencil Gray border. Contains: title row, color-coded label chip (yellow/pink/green at 6px radius), thumbnail, and footer meta. Used in tree/graph layouts."

    top_rated_product_badge:
      role: "Social proof label"

      info: "Small pill, 1600px radius, white fill, 1px Pencil Gray border, 'Top Rated Product' at 12px weight 500 in Ink with a small green check icon. Padding: 4px 12px."

    avatar_stack:
      role: "Social proof"

      info: "Horizontal row of 5–6 circular avatars at 28px diameter, overlapping by -8px, each with 2px white ring border. Below: 'Over 400,000 users' caption in Pencil Gray at 13px."

    logo_trust_bar:
      role: "Enterprise social proof"

      info: "Full-width centered row of 6 grayscale corporate logos (Intel, IBM, Tesla, EA, UNICEF, Deloitte) at ~60% opacity, 24px height, Pencil Gray fill. Topped by 'You're in good company' caption in 13px Pencil Gray. Padding: 48px 0."

    floating_annotation_card:
      role: "Hero secondary callout"

      info: "Small white card, 12px radius, soft shadow rgba(0,0,0,0.06) 0px 0px 18px. Contains a 2-line annotation: bold label + Pencil Gray description. Connected to hero elements via thin curved Signal Blue stroke."

  do_s_and_don_ts:

    do:
      - "Use Signal Blue (#0080ff) as the only saturated color on the page — never introduce a second brand hue for actions, links, or highlights."
      - "Make every interactive control a pill (1600px radius) unless it is a form input, which uses 12px."
      - "Set display headlines at 48–118px Inter 700 with letter-spacing between -0.036em and -0.06em so the type compresses into a tight typographic block rather than spreading airy."
      - "Use 1px Pencil Gray (#8c9baa) borders to separate cards from the white canvas instead of relying on shadow — shadows are reserved for floating hero elements only."
      - "Anchor long-form copy with pastel circular icon badges placed inline (radius 1600px, 28–32px) so feature lists scan visually."
      - "Pad feature cards at 24–48px on all sides and use 20–32px radii — never use sharp corners on any card surface."
      - "Float product UI mockups in the hero with the soft rgba(0,0,0,0.06) 18px shadow and connect them with thin Signal Blue curved lines to act as visual proof."

    don_t:
      - "Don't add a second saturated brand color for buttons, links, or active states — the system is monochrome with one blue signal."
      - "Don't use square corners on cards, buttons, or tags; everything visible to the user is rounded to at least 6px and most controls are full pills."
      - "Don't use heavy drop shadows on content cards; the only allowed shadow is the 0.06 alpha 18px blur, and only for floating product mockups and modals."
      - "Don't let body copy exceed 16–18px or use weight above 500 — anything heavier belongs in a heading."
      - "Don't use display weight below 600 for headings; the system relies on bold voice to carry its minimal color palette."
      - "Don't fill sections with solid blue, gradient meshes, or colored bands — backgrounds stay white, color appears only as accent or glow."
      - "Don't use a neutral gray for primary action text or fills — the only text color for buttons is white on Signal Blue or Ink, never Pencil Gray."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Page canvas, section backgrounds |"
    info: "| 1 | Card | `#ffffff` | Floating feature cards, product mockups, step panels — differentiated from canvas by 1px Pencil Gray border rather than shadow |"
    info: "| 2 | Elevated | `#ffffff` | Hover states and modals — gains a soft 0.06 alpha shadow at 18px blur |"
    info: "| 3 | Signal | `#0080ff` | Primary action surface, active nav indicator |"

  elevation:

    - "**Floating product mockups and annotation cards:** `rgba(0, 0, 0, 0.06) 0px 0px 18px 0px`"
    - "**Hero CTA button glow:** `0px 0px 18px 0px rgba(197, 224, 251, 0.6)`"

  imagery:

    info: "Imagery is dominated by in-app product mockups rather than photography: phone-frame UI screenshots, small floating annotation cards, sitemap tree node cards, and AI-generator tile previews. These are treated as physical objects — given soft shadows, slight rotation, and connected with thin curved blue lines. A secondary motif is the pastel circular icon badge (yellow, mint, pink, lavender, peach at ~28px) placed inline within body copy to punctuate feature mentions. The avatar trust row uses real human photos at 28px with white ring borders. The overall density is light: roughly 60% text, 40% product mockup, with no lifestyle photography, no hero video, and no decorative illustrations beyond the UI fragments themselves."

  layout:

    info: "Layout is max-width contained at 1200px, centered, with generous 96px+ vertical section gaps. The hero is a centered headline stack with floating product mockups scattered asymmetrically around it — not a split text+image layout. Below the hero, sections alternate between a 'logo trust bar' (full-width, centered, low-density) and two-column 'text-left / mockup-right' feature blocks that always lead with an oversized left-aligned heading. Feature blocks use a rounded 20–32px card as a frame for the mockup. The page never goes full-bleed colored, never uses a sidebar, and relies on a sticky top nav with a 6px-radius logo container, centered links, and a black pill CTA on the right."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #000000 (headlines, primary copy), #222222 (nav), #636f7b (secondary), #8c9baa (muted/borders)"
    - "Background: #ffffff (canvas, cards)"
    - "Border: 1px solid #8c9baa"
    - "Accent: #0080ff (Signal Blue) — links, active states, brand wordmark arrow"
    - "primary action: no distinct CTA color"
    - "Decorative glow: #c5e0fb (Sky Wash), #0050ff (Voltage Violet, accent borders only)"

  example_component_prompts:

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

    - "**Feature Section Card**: White surface, 32px radius, 1px solid #8c9baa border. 48px padding all sides. Left column: 20px dark icon (Inter or outline stroke) above 18px Inter 600 #000000 heading, then 16px Inter 400 #636f7b body. Right column: product mockup with 24px radius and rgba(0,0,0,0.06) 0px 0px 18px shadow."

    - "**Display Heading Block**: Inter 700, 72px, line-height 1.0, letter-spacing -0.053em, color #000000. Centered, no max-width clamp — let it wrap at 2–3 lines naturally."

    - "**Step Badge**: 1600px pill radius, 1px solid #8c9baa border, transparent fill. Left segment: 'STEP 1' in Inter 600 11px #000000, uppercase. Right segment after • separator: 'AI SITEMAP' in Inter 400 11px #8c9baa. Padding 6px 12px."

    - "**Pastel Icon Badge**: 1600px full circle, 32px diameter. Fill one of {pastel yellow #fff3c4, mint #c8f0d8, pink #ffd6e0, lavender #e0d4ff, peach #ffe0c4}. 1.5px dark stroke icon centered inside. Use inline within body text to mark feature names."

  typography_voice:

    info: "The voice of this system is 'oversized and quiet.' Headlines dominate the page at 48–118px Inter 700 but carry no color signal — they are pure black. The contrast between the enormous type and the single Signal Blue action creates a hierarchy where the user knows exactly where to click without ever reading a label. Body copy is small (14–16px), gray, and conversational, with the pastil icon badges acting as visual bullet points. The CTAs and headings do the talking; everything else is supportive."

  button_geometry:

    info: "The signature button geometry is the 1600px-radius pill, but the hero CTA takes this further: its right edge is not a perfect semicircle but a hand-drawn wavy contour (like a wave or brushstroke), giving the primary action a sketched, anti-corporate personality. All other buttons (nav login, nav try-free, in-card actions) are standard pills. Use the wavy-tail geometry only on the single most important CTA per page — never on secondary actions or repeated buttons."

  similar_brands:

    - "**Linear** — Shares the single-accent-color discipline (one vivid blue against achromatic UI) and pill-shaped CTAs with tight-tracked display headlines"
    - "**Framer** — Same product-marketing playbook: white canvas, oversized bold display type, floating product mockups scattered in the hero, pastel accent chips"
    - "**Pitch** — Matches the 1px-bordered card surfaces with minimal shadows, full-pill button geometry, and black-on-white with one chromatic accent"
    - "**Notion** — Similar restrained two-color palette, Inter-style geometric sans for everything, and the habit of showing the product as floating UI fragments in the hero"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-blue: #0080ff;
          --color-voltage-violet: #0050ff;
          --color-sky-wash: #c5e0fb;
          --color-pencil-gray: #8c9baa;
          --color-graphite: #636f7b;
          --color-ink: #000000;
          --color-carbon: #222222;
          --color-paper: #ffffff;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.015px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.015px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.02px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.02px;
          --text-heading: 36px;
          --leading-heading: 1.14;
          --tracking-heading: -0.03px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.09;
          --tracking-heading-lg: -0.036px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -0.053px;
          --text-display-xl: 118px;
          --leading-display-xl: 0.94;
          --tracking-display-xl: -0.06px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-104: 104px;
          --spacing-144: 144px;
          --spacing-184: 184px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 96px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 48px;
          --radius-full-2: 1600px;
        
          /* Named Radii */
          --radius-nav: 6px;
          --radius-tags: 1600px;
          --radius-cards: 20px;
          --radius-images: 24px;
          --radius-inputs: 12px;
          --radius-buttons: 1600px;
          --radius-iconbadges: 1600px;
          --radius-featurecards: 32px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.06) 0px 0px 18px 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-card: #ffffff;
          --surface-elevated: #ffffff;
          --surface-signal: #0080ff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-blue: #0080ff;
          --color-voltage-violet: #0050ff;
          --color-sky-wash: #c5e0fb;
          --color-pencil-gray: #8c9baa;
          --color-graphite: #636f7b;
          --color-ink: #000000;
          --color-carbon: #222222;
          --color-paper: #ffffff;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.015px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.015px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.02px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.02px;
          --text-heading: 36px;
          --leading-heading: 1.14;
          --tracking-heading: -0.03px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.09;
          --tracking-heading-lg: -0.036px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -0.053px;
          --text-display-xl: 118px;
          --leading-display-xl: 0.94;
          --tracking-display-xl: -0.06px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-104: 104px;
          --spacing-144: 144px;
          --spacing-184: 184px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 48px;
          --radius-full-2: 1600px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.06) 0px 0px 18px 0px;
        }