autosend___style_reference:
  info: "> Warm stone atelier with a single violet spark — where serif headlines and electric-indigo CTAs share the same quiet off-white room."

  theme: "light"

  info: "AutoSend reads like a warm-technical workspace: a stone-warm off-white canvas, restrained chrome, and one vivid electric-violet accent that makes actions feel switched on. The hero headline is a Cooper serif at near-display size, pairing upright with italic for a single emphasis word — this humanist serif is the anti-Sans-Helvetica SaaS move and defines the page's voice. UI chrome stays monochrome and calm; color is punctuation, not wallpaper, appearing on the CTA, card borders, and icon strokes. Components are flat and weightless: 8–16px radii, hairline stone borders, and a single soft drop shadow reserved for elevated product surfaces."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Warm Bone | `#fafaf9` | `--color-warm-bone` | Page canvas, button secondary fills, section backgrounds — the warm off-white that prevents the page from feeling clinical |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, elevated panels, primary button text, input fills — layered above Warm Bone for subtle separation |"
    info: "| Stone Mist | `#e7e5e4` | `--color-stone-mist` | Hairline borders, dividers, button outlines, list separators — the structural linework that holds the layout together |"
    info: "| Bark Grey | `#79716b` | `--color-bark-grey` | Muted body text, secondary labels, icon strokes, placeholder copy — warm rather than cool grey |"
    info: "| Charcoal | `#292524` | `--color-charcoal` | Primary text, headings, active nav, dominant border color — the near-black that carries every important word |"
    info: "| Obsidian | `#0c0a09` | `--color-obsidian` | Deepest text and edge cases requiring maximum contrast |"
    info: "| Pebble | `#a6a09b` | `--color-pebble` | Tertiary text, disabled states, subtle icon tints |"
    info: "| Electric Indigo | `#615fff` | `--color-electric-indigo` | Primary CTA fill, active links, brand marks — the singular chromatic accent that makes the sign-up button feel switched on |"
    info: "| Deep Violet | `#4f39f6` | `--color-deep-violet` | Hover and pressed states for Electric Indigo, decorative borders, illustration strokes |"
    info: "| Terracotta | `#d97757` | `--color-terracotta` | Secondary accent — warm orange used sparingly on card borders, decorative icons, and highlight strokes to soften the indigo/grey palette |"
    info: "| Lichen Green | `#5ea500` | `--color-lichen-green` | Green outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color |"
    info: "| Tide Teal | `#22b8cd` | `--color-tide-teal` | Teal decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |"
    info: "| Alarm Red | `#ff0000` | `--color-alarm-red` | Red accent for outlined action borders, linked labels, and lightweight interactive emphasis. Use as a supporting accent, not as a status color |"
    info: "| Sapphire Link | `#007ebb` | `--color-sapphire-link` | Standard text links within body copy — the one blue that behaves like a link |"

  tokens___typography:

    geist___primary_ui_and_body_font___nav_items__buttons__card_copy__subheadings__weight_400_for_body__600_for_emphasis_and_button_labels__the_40px_weight_600_carries_the_largest_non_display_heading_tier____font_geist:
      - "**Substitute:** Inter, Manrope, or system-ui sans-serif"
      - "**Weights:** 400, 600"
      - "**Sizes:** 12px, 14px, 16px, 18px, 20px, 40px"
      - "**Line height:** 1.20–1.56"
      - "**Role:** Primary UI and body font — nav items, buttons, card copy, subheadings; weight 400 for body, 600 for emphasis and button labels; the 40px weight 600 carries the largest non-display heading tier"

    cooper_ltbt___display_headlines_and_hero_copy_only___the_warm_book_weight_serif_with_italic_for_emphasis_words_is_the_signature_voice_of_the_brand__substitutes_for_body_would_dilute_the_effect____font_cooper_ltbt:
      - "**Substitute:** Playfair Display, Cormorant Garamond, or Lora"
      - "**Weights:** 400"
      - "**Sizes:** 18px, 80px"
      - "**Line height:** 1.10–1.33"
      - "**Letter spacing:** normal"
      - "**Role:** Display headlines and hero copy only — the warm book-weight serif with italic for emphasis words is the signature voice of the brand; substitutes for body would dilute the effect"

    geist_mono___code__api_labels__uppercase_section_tags_e_g___emails_sent_by_big_and_small_companies_alike__button_micro_labels___tracked_out_at_0_04_0_10em_to_read_as_tag_label_type_rather_than_body____font_geist_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, or Space Mono"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12px, 13px, 14px, 16px"
      - "**Line height:** 1.00–1.54"
      - "**Letter spacing:** 0.04em–0.10em (wider for uppercase tags)"
      - "**Role:** Code, API labels, uppercase section tags (e.g. 'EMAILS SENT BY BIG AND SMALL COMPANIES ALIKE!'), button micro-labels — tracked out at 0.04–0.10em to read as tag/label type rather than body"

    datatype___numeric_stat_values_in_the_metrics_bar_755_470___96_82____1_87s___3_10____a_dedicated_monospaced_figure_family_so_digits_align____font_datatype:
      - "**Substitute:** JetBrains Mono or Geist Mono at 24px"
      - "**Weights:** 400"
      - "**Sizes:** 24px"
      - "**Line height:** 1.33"
      - "**Role:** Numeric stat values in the metrics bar (755,470 / 96.82% / 1.87s / 3.10%) — a dedicated monospaced-figure family so digits align"

    ui_sans_serif___ui_sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_ui_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.5"
      - "**Role:** ui-sans-serif — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | 0.48px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.56 | — | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.38 | — | `--text-heading-sm` |"
      info: "| heading | 40px | 1.2 | — | `--text-heading` |"
      info: "| display | 80px | 1.1 | — | `--text-display` |"

  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: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 8px |"
      info: "| cards | 16px |"
      info: "| links | 8px |"
      info: "| pills | 9999px |"
      info: "| inputs | 12px |"
      info: "| buttons | 8px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1)...` | `--shadow-xl` |"

    layout:

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

  components:

    primary_filled_button:
      role: "The single most important action on any screen — sign up, submit, confirm"

      info: "Background #615fff (Electric Indigo), text #ffffff in Geist 14px weight 600 uppercase with 0.04em tracking. Horizontal padding 16px, vertical 10–12px. Border radius 8px. No visible border; relies on fill for definition. On hover deepen to #4f39f6 (Deep Violet)."

    ghost_outline_button:
      role: "Secondary actions that share the page with a primary CTA (e.g. BOOK A DEMO beside SIGN UP)"

      info: "Transparent background, 1px border in #e7e5e4 (Stone Mist) or #292524 (Charcoal), text #292524 in Geist 14px weight 600 uppercase with 0.04em tracking. Padding 12px vertical, 16–24px horizontal. Radius 8px. Hover: border darkens to #292524."

    top_navigation_bar:
      role: "Sticky site navigation"

      info: "Full-width bar on #fafaf9 (Warm Bone) with no visible bottom border — content sits on the canvas. Left: club-suit logomark + 'AUTOSEND' in Geist 14px weight 600 uppercase. Center: nav links in Geist 14px weight 400 Charcoal with dropdown carets on SOLUTIONS and DOCS. Right: LOG IN ghost button (no border, text only) followed by SIGN UP filled violet button. Vertical padding ~16px, horizontal padding 24px. Max width 1200px centered."

    hero_section:
      role: "First screen above the fold"

      info: "Centered single-column on #fafaf9. Headline at 80px Cooper LtBT weight 400 in #292524, line-height 1.10, with the word 'teams' set in italic Cooper for emphasis. Below: subtext in Geist 18px weight 400 #79716b (Bark Grey) across two short lines. CTA pair: Ghost 'BOOK A DEMO' + Filled 'SIGN UP' stacked horizontally with 16px gap. Vertical breathing room ~80px top and bottom."

    product_showcase_card:
      role: "Visual proof — a screenshot or illustrated surface showing the product in use"

      info: "Full-width card on #ffffff with 1px #e7e5e4 border, radius 16px, soft shadow `0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)`. Contains a photographic or product-render image that bleeds to the card edges with no inner padding on the image area. 24px internal padding around overlaid text or controls."

    feature_card_3_column_grid:
      role: "Tile describing a product capability (Email API, MCP, skill.md)"

      info: "White (#ffffff) card with 1px #e7e5e4 border, radius 8px, 24px padding. Title in Geist 18px weight 600 #292524. Body in Geist 14px weight 400 #79716b, 1.43 line-height. Footer row: 'DOCS →' link in Geist Mono 12px weight 500 uppercase tracked 0.04em, color #292524, with a trailing arrow glyph. Cards sit in a 3-column grid with 24px gaps."

    arrow_link:
      role: "Inline link that should read as 'go somewhere' — used in card footers and section endings"

      info: "Text in Geist Mono 12px weight 500–600 uppercase, tracked 0.04em, color #292524. Trailing arrow (→) in the same color. No underline by default; opacity drops to 0.6 on hover. When used as the only action in a card footer, sits flush right with 12px top margin separated by a 1px #e7e5e4 divider."

    stats_bar:
      role: "Row of credibility metrics"

      info: "White background, 1px top/bottom #e7e5e4 border, no vertical padding on the outer rule. Four equal-width columns separated by vertical 1px #e7e5e4 dividers. Each column: large number in dataType 24px weight 400 #292524 centered, label below in Geist 12px weight 400 #79716b. Column padding 24px vertical, 16px horizontal."

    section_label_tag:
      role: "Uppercase eyebrow text introducing a section (e.g. 'EMAILS SENT BY BIG AND SMALL COMPANIES ALIKE!')"

      info: "Geist Mono 12px weight 500–600, tracked 0.10em (the widest tracking in the system), color #79716b or #292524, centered. Sits alone or above a logo strip with 16–24px vertical margin."

    logo_strip:
      role: "Social proof — customer/partner logos"

      info: "Single row of greyscale or muted-color logos, evenly distributed, each logo max-height ~24px. Logos use their own brand colors but appear at reduced opacity (~0.6) to read as a unified band. 40px vertical padding above and below."

    text_input:
      role: "Form fields for email capture and similar"

      info: "Background #ffffff, 1px #e7e5e4 border, radius 12px, padding 12px 16px. Text in Geist 16px weight 400 #292524. Placeholder in #a6a09b (Pebble). Focus state: border shifts to #615fff (Electric Indigo), 2px ring `0 0 0 3px rgba(97,95,255,0.15)`."

    code_block:
      role: "Inline or block code samples"

      info: "Geist Mono 14px weight 400 in #292524, background #fafaf9 or transparent, 1px #e7e5e4 border, radius 8px, 16px padding. Optional copy-to-clipboard icon top-right in Bark Grey."

  do_s_and_don_ts:

    do:
      - "Set the hero headline in Cooper LtBT 80px weight 400 and italicize exactly one emphasis word per line"
      - "Use #615fff fill + #ffffff text as the only primary CTA — never use #292524 or any neutral for the primary action"
      - "Use #fafaf9 as the page canvas and #ffffff as the card surface; never invert the warm-off-white / pure-white relationship"
      - "Apply 8px radius to buttons and links, 16px radius to cards, 12px radius to inputs"
      - "Set uppercase tags and labels in Geist Mono with 0.04–0.10em tracking"
      - "Separate sections with 1px #e7e5e4 hairlines or 80px vertical gaps, not with colored bands"
      - "Keep all non-CTA text in the warm-grey family (#292524, #79716b, #a6a09b) — never use a chromatic color for body copy"

    don_t:
      - "Don't use #4f39f6 (Deep Violet) as a button fill — it is the hover/pressed state of the primary CTA, not a separate accent"
      - "Don't set body text in the serif — Cooper is reserved for the display headline tier"
      - "Don't add drop shadows to buttons, nav bars, or feature cards — the product showcase card is the only shadowed surface"
      - "Don't introduce new chromatic colors for status states — reuse the existing palette (#5ea500 green, #22b8cd teal, #ff0000 red) at 1px stroke or icon weight"
      - "Don't use #d97757 (Terracotta) for interactive elements — it is a decorative accent for borders and icon strokes only"
      - "Don't center body copy below the hero — the headline is the only centered text; everything else left-aligns within its column"
      - "Don't use letter-spacing wider than 0.10em or narrower than normal — the two values (0.04em tags, 0.10em eyebrows) are the only tracking steps"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Warm Bone Canvas | `#fafaf9` | Base page background — warm off-white that gives the entire site its calm, paper-like atmosphere |"
    info: "| 1 | Paper White Card | `#ffffff` | Elevated card and panel surfaces, input fills, button text on dark fills |"
    info: "| 2 | Stone Mist Border | `#e7e5e4` | Hairline dividers between sections and around cards — separation by line, not fill |"

  elevation:

    - "**Product Showcase Card:** `0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)`"

  imagery:

    imagery_is_sparse_and_high_trust: "a single landscape photograph (mountain ridges, muted blue-green) anchors the product showcase card, full-bleed within the card. No lifestyle photography, no people, no stock illustrations. Decorative icons appear as 1px stroked outlines in Geist-compatible proportions, colored in the same palette as text and borders (Bark Grey, Charcoal, or the single violet/terracotta accent). Logos in the social-proof strip are small and sit at reduced opacity — they decorate, they do not dominate."

  layout:

    info: "Max-width 1200px centered content on a full-bleed #fafaf9 canvas. Hero is a single centered column with generous vertical padding (~80px). Product showcase is full-width within the max-width with 16px radius and soft shadow. Below it, a 3-column card grid for features with 24px gaps. A horizontal stats bar spans the full content width, divided into 4 equal columns by vertical hairlines. Navigation is a single sticky top bar with no visible bottom border, giving a floating-on-canvas feeling. The page never breaks the centered symmetry on desktop — every section aligns to the same vertical center axis. Section rhythm is consistent: 80px gap between major sections, 40px between closely related blocks."

  agent_prompt_guide:

    quick_color_reference:
    - "canvas: #fafaf9"
    - "card surface: #ffffff"
    - "border / hairline: #e7e5e4"
    - "primary text: #292524"
    - "muted text: #79716b"
    - "primary action: #615fff (filled action)"

    example_component_prompts:

    - "Create a Primary Action Button: #615fff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "*Feature card* — White (#ffffff) card, 1px #e7e5e4 border, 8px radius, 24px padding. Title in Geist 18px weight 600 #292524. Body in Geist 14px weight 400 #79716b, line-height 1.43. Footer separator: 1px #e7e5e4 hairline, 12px top margin. Footer text: 'DOCS →' in Geist Mono 12px weight 500 uppercase 0.04em, #292524."

    - "*Product showcase card* — Full-width within 1200px max, white surface, 1px #e7e5e4 border, 16px radius, shadow `0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)`. Image bleeds to card edges. 24px internal padding around any overlaid UI."

    - "*Stats bar* — Full-width white band, 1px #e7e5e4 top and bottom borders, no outer padding. Four equal columns separated by 1px #e7e5e4 vertical dividers. Each column: dataType 24px weight 400 #292524 number on top, Geist 12px weight 400 #79716b label below, 24px vertical padding."

    - "*Section eyebrow tag* — Centered Geist Mono 12px weight 600 uppercase, tracking 0.10em, color #79716b. 16px below it: a row of logos at max-height 24px, opacity 0.6, evenly spaced across the 1200px content width."

  similar_brands:

    - "**Resend** — Same warm-stone canvas, same single electric accent for the primary CTA, same hairline-bordered cards and minimal shadowing"
    - "**Loops** — Developer-focused email tool with comparable off-white background, violet/indigo action color, and uppercase mono labels with wide tracking"
    - "**Cal.com** — Warm off-white surfaces, 1px stone-toned borders, and a single saturated accent reserved for the primary button"
    - "**Plausible Analytics** — Restrained warm-neutral palette, no decorative imagery, large centered serif-feeling headlines paired with compact sans body"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-warm-bone: #fafaf9;
          --color-paper-white: #ffffff;
          --color-stone-mist: #e7e5e4;
          --color-bark-grey: #79716b;
          --color-charcoal: #292524;
          --color-obsidian: #0c0a09;
          --color-pebble: #a6a09b;
          --color-electric-indigo: #615fff;
          --color-deep-violet: #4f39f6;
          --color-terracotta: #d97757;
          --color-lichen-green: #5ea500;
          --color-tide-teal: #22b8cd;
          --color-alarm-red: #ff0000;
          --color-sapphire-link: #007ebb;
        
          /* Typography — Font Families */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cooper-ltbt: 'Cooper LtBT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-datatype: 'dataType', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.48px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.38;
          --text-heading: 40px;
          --leading-heading: 1.2;
          --text-display: 80px;
          --leading-display: 1.1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
        
          /* Named Radii */
          --radius-tags: 8px;
          --radius-cards: 16px;
          --radius-links: 8px;
          --radius-pills: 9999px;
          --radius-inputs: 12px;
          --radius-buttons: 8px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
        
          /* Surfaces */
          --surface-warm-bone-canvas: #fafaf9;
          --surface-paper-white-card: #ffffff;
          --surface-stone-mist-border: #e7e5e4;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-warm-bone: #fafaf9;
          --color-paper-white: #ffffff;
          --color-stone-mist: #e7e5e4;
          --color-bark-grey: #79716b;
          --color-charcoal: #292524;
          --color-obsidian: #0c0a09;
          --color-pebble: #a6a09b;
          --color-electric-indigo: #615fff;
          --color-deep-violet: #4f39f6;
          --color-terracotta: #d97757;
          --color-lichen-green: #5ea500;
          --color-tide-teal: #22b8cd;
          --color-alarm-red: #ff0000;
          --color-sapphire-link: #007ebb;
        
          /* Typography */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cooper-ltbt: 'Cooper LtBT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-datatype: 'dataType', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.48px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.38;
          --text-heading: 40px;
          --leading-heading: 1.2;
          --text-display: 80px;
          --leading-display: 1.1;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
        }