sprout_social___style_reference:
  info: "> Green sprout on black slate. One vivid accent on a stark monochrome canvas, the color rationed to actions only, with confident geometric type that functions like wayfinding signage."

  theme: "light"

  info: "Sprout Social operates on a stark, high-contrast visual system: near-black ink on white canvas, with a single vivid green that punctuates every call to action. The typeface is Proxima Nova at bold weights (700–800), delivering confident, geometric headlines that feel like signage rather than prose. Surfaces are flat and borderless in feel — rounded corners (16px on cards, 6px on controls) do the structural work that shadows do elsewhere. Color is rationed: 99% of the page is achromatic; the green accent is reserved for primary actions and the brand leaf, never decoration. Product showcases break the monochrome with soft purple-to-white and green-to-blue gradient washes that frame UI screenshots without competing with them."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#040404` | `--color-ink-black` | Primary text, nav borders, heading strokes, footer dividers — the dominant non-white color across the entire system |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page background, card surfaces, nav surface, input fills, button text on dark fills |"
    info: "| Ash Gray | `#d9d9d9` | `--color-ash-gray` | Nav dividers, link borders, subtle separators, muted UI chrome |"
    info: "| Smoke Gray | `#cbcece` | `--color-smoke-gray` | Image borders, input borders, secondary button surface, faint dividers |"
    info: "| Slate | `#162020` | `--color-slate` | Secondary text, nav border accent, card border emphasis |"
    info: "| Pewter | `#6e797a` | `--color-pewter` | Body muted text, helper copy, meta information |"
    info: "| Sprout Green | `#98e58e` | `--color-sprout-green` | Green action color for filled buttons, selected navigation states, and focused conversion moments |"

  tokens___typography:

    proxima_nova___single_family_system__display_and_headings_lock_to_700_800___near_black_weight_gives_headlines_a_poster_like_authority__body_and_nav_use_400__the_weight_gap_between_body_400_and_headline_800_is_the_hierarchy_engine__no_medium_or_semibold_exists_in_between__substitute__montserrat__gotham__or_nunito_sans_____font_proxima_nova:
      - "**Substitute:** Montserrat, Nunito Sans, Gotham"
      - "**Weights:** 400, 700, 800"
      - "**Sizes:** 13px, 16px, 18px, 21px, 24px, 32px, 43px, 57px, 76px"
      - "**Line height:** 1.05–1.64 (tight on display, breathing on body)"
      - "**Role:** Single-family system. Display and headings lock to 700–800 — near-black weight gives headlines a poster-like authority. Body and nav use 400. The weight gap between body (400) and headline (800) is the hierarchy engine; no medium or semibold exists in between. Substitute: Montserrat, Gotham, or Nunito Sans."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.48 | — | `--text-caption` |"
      info: "| body-sm | 16px | 1.64 | — | `--text-body-sm` |"
      info: "| body | 18px | 1.48 | — | `--text-body` |"
      info: "| subheading | 21px | 1.33 | — | `--text-subheading` |"
      info: "| subheading-lg | 24px | 1.25 | — | `--text-subheading-lg` |"
      info: "| heading-sm | 32px | 1.18 | — | `--text-heading-sm` |"
      info: "| heading | 43px | 1.12 | — | `--text-heading` |"
      info: "| heading-lg | 57px | 1.05 | — | `--text-heading-lg` |"
      info: "| display | 76px | 1.05 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 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: "| 80 | 80px | `--spacing-80` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 16px |"
      info: "| badges | 24px |"
      info: "| inputs | 6px |"
      info: "| buttons | 6px |"
      info: "| hero-tiles | 64px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(39, 51, 51, 0.24) 0px 4px 8px 0px` | `--shadow-sm` |"

    layout:

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

  components:

    primary_cta_button_sprout_green:
      role: "The sole chromatic action in the system — reserved for trial signup and core conversion moments"

      info: "Filled #98e58 background, #040404 text, 6px radius, 16px vertical × 24px horizontal padding, Proxima Nova 700 at 16px. Appears on dark hero panels and on white above the fold. The green is the only place UI color is allowed — never decorate with it."

    solid_dark_button:
      role: "Secondary high-emphasis action when green is not appropriate (login, demo, nav-level CTAs)"

      info: "Filled #040404 background, #ffffff text, 6px radius, ~12px vertical × 24px horizontal padding, Proxima Nova 700 at 14–16px. Mirrors the green CTA's geometry but inverts the contrast."

    outlined_ghost_button:
      role: "Tertiary actions, nav links, low-emphasis controls"

      info: "Transparent fill, 1px #040404 or #d9d9d9 border, #040404 text, 6px radius, matches solid button padding. Used in nav bar for 'Log in' and in inline content for 'See all integrations'."

    email_input:
      role: "Hero email capture and any form field"

      info: "White fill, 1px #cbcece border, 6px radius, ~16px vertical padding, Proxima Nova 400 at 16px, placeholder text in #6e797a. No focus ring color change documented; the field sits flush against the green CTA as a compound control."

    top_navigation_bar:
      role: "Global site navigation"

      info: "White surface with subtle rgba(39,51,51,0.24) 0px 4px 8px 0px shadow, 16px radius at the outer container. Logo (green leaf + black wordmark) on the left, nav links in #040404 at 16px/400, solid dark 'Try for free' button on the far right. Dropdown indicators use small chevrons."

    integration_tile:
      role: "Social platform logo grid (TikTok, Instagram, LinkedIn, etc.)"

      info: "White surface, 1px #d9d9d9 border, 16px radius, center-aligned platform icon at 48–64px. Arranged in a 7-column grid with 8–12px gaps. The tile is a frame, not a card — it does not lift, it holds."

    product_showcase_panel:
      role: "Hero product screenshot framing — calendar view, AI suggestions, analytics overlays"

      info: "Rounded screenshot container, 16px radius, displayed on a full-bleed gradient background (prism wash or orchid mist). The screenshot is the hero; the gradient is the stage."

    sentiment___insights_card:
      role: "Floating data card overlaid on product screenshots"

      info: "White surface, 16px radius, small internal padding (~8–12px), Proxima Nova 400 for metric labels at 13px and 700 for values. Includes mini-chart glyphs and star ratings in #98e58e."

    ai_assist_suggestion_card:
      role: "Contextual AI prompt floating beside product UI"

      info: "White surface, 16px radius, contains a prompt label at 16px/700 and action rows. Sits adjacent to the calendar grid in the product section."

    pricing_tier_card:
      role: "Plan comparison — Standard, Professional, Advanced"

      info: "White card with 1px colored border per tier (blue tint visible in the data), ~24px padding, 16px radius, tier name at 24px/700, price at 43px/800. CTA at the bottom of each card in the matching tier color."

    tag___pill_badge:
      role: "Category tags, status labels, filtering chips"

      info: "Filled with contextual color (green for positive, neutral for status), 24px radius (pill shape), ~4–8px vertical padding, 13px Proxima Nova 700."

    text_link_with_underline:
      role: "Inline body links, nav links, 'See all' CTAs"

040404_text_with_a_1px_underline_border__proxima_nova_400_at_16_18px__underline_is_always_present___the_system_uses_underline_as_the_only_link_affordance__never_color_alone:

    hero_reversed_panel:
      role: "Top-of-fold black canvas hosting the primary headline and email capture"

      info: "Full-bleed #040404 background, #ffffff headline at 57px/800, email input + green CTA compound centered. This is the only dark section; everything below reverts to white."

    social_media_icon_set:
      role: "Brand-recognized platform marks (Instagram, TikTok, LinkedIn, X, WhatsApp, Salesforce, etc.)"

      info: "Each icon is rendered in its native brand colors at 40–48px, centered within an integration tile. The system does not recolor platform logos — it presents them in full chromatic identity."

  do_s_and_don_ts:

    do:
      - "Reserve #98e58 exclusively for primary action buttons and the brand leaf — never use it for decoration, illustration, or secondary controls"
      - "Set all headlines to Proxima Nova 700 or 800 — the 400→800 weight jump is the hierarchy engine, and no body text should ever compete with it"
      - "Use 16px radius on cards and 6px radius on buttons/inputs — this two-radius system is the structural language; do not introduce a third"
      - "Underline every text link with a 1px stroke; never rely on color alone to signal interactivity"
      - "Keep body copy on white at #040404 — the 20.5:1 contrast against #ffffff is the system's accessibility floor, not a ceiling"
      - "Frame product screenshots on a full-bleed gradient (prism wash or orchid mist) at 16px radius — the gradient is the stage, the screenshot is the actor"
      - "Use 4px as the base spacing unit and snap all padding/margin to the 4px grid (8, 12, 16, 24, 32, 40, 64)"

    don_t:
      - "Do not add a third border-radius — the 6px/16px pair is deliberate; 8px or 12px breaks the system's geometric language"
      - "Do not introduce semibold (600) weights — Proxima Nova only ships at 400/700/800 in this system, and adding 600 collapses the hierarchy"
      - "Do not use #98e58 for body text, icons, or backgrounds other than buttons — diluting the green destroys the rationed-accent pattern"
      - "Do not apply drop shadows to cards, tiles, or content blocks — shadow belongs to the nav only; everything else is border-defined"
      - "Do not use color alone for interactive affordance — every link, button, and tile must include border, weight change, or underline"
      - "Do not mix the prism wash and orchid mist gradients within the same section — pick one wash per product showcase and commit"
      - "Do not set headlines below 32px or above 76px — the scale is hand-tuned; random sizes break the display rhythm"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Page Canvas | `#ffffff` | Default page background, hero reverse panels |"
    info: "| 2 | Card Surface | `#ffffff` | Integration tiles, feature cards — same white as canvas, defined by border and radius rather than tonal lift |"
    info: "| 3 | Input Surface | `#ffffff` | Form fields, email capture — sits on canvas with a 1px border for definition |"

  elevation:

    - "**Navigation bar:** `rgba(39, 51, 51, 0.24) 0px 4px 8px 0px`"

  imagery:

    info: "Photography is full-bleed lifestyle — warm, naturally lit, candid mid-action shots of people using phones and laptops in real environments. Product UI screenshots dominate mid-page, framed on soft gradient washes (prism green-to-blue, orchid purple-to-white) that act as stages rather than decoration. Illustrations are absent. Iconography is platform-native brand color (TikTok cyan-pink, Instagram gradient, LinkedIn blue, X black) — logos are never recolored to match the monochrome system. Visual density is image-heavy in hero and product sections, text-dominant in integrations and pricing."

  layout:

    info: "Max-width 1200px centered on white canvas, opening with a full-bleed dark hero that breaks the container. The hero reverses contrast: #040404 background, #ffffff headline at 57px, centered email-capture compound. Below the fold, sections alternate between text-dominant bands (integrations 7-column tile grid, pricing tier row) and image-dominant bands (product UI screenshots on gradient washes). Vertical rhythm: 64px section gaps, 32px block gaps, 16px element gaps. Navigation is a sticky top bar with a soft 4px shadow lift. The page reads: dark hero → white product showcase on gradient → white integrations grid → white pricing row."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #040404"
    - "background: #ffffff"
    - "border: #d9d9d9 (subtle) / #040404 (emphatic)"
    - "accent: #98e58e (brand leaf, success highlights)"
    - "primary action: #98e58e (filled action)"
    - "muted text: #6e797a"

    example_component_prompts:
    - "Create a Primary Action Button: #98e58e background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."
    - "*Integration tile grid*: White card, 1px #d9d9d9 border, 16px radius, center-aligned 48px platform icon. Arrange in a 7-column grid with 12px gaps on white canvas."
    - "*Product showcase section*: White canvas, 43px/800 #040404 headline left-aligned, then a full-bleed prism-wash gradient panel (green→teal→periwinkle→blue) containing a 16px-radius rounded product screenshot floating centered."
    - "*Pricing tier card*: White surface, 1px #d9d9d9 border, 16px radius, 24px padding. Tier name at 24px/700 #040404, price at 43px/800 #040404, feature list at 16px/400, solid dark CTA at the bottom."
    - "*Floating insights card on product screenshot*: White surface, 16px radius, 8–12px internal padding, metric label at 13px/400 #6e797a, value at 16px/700 #040404, optional 4px green star or sparkline glyph."

  visual_language:

    info: "Photography is full-bleed lifestyle — real people in real environments using phones and laptops, warm natural lighting, candid rather than staged. The subject is always mid-action (typing, smiling, holding a device), never posed. Product screenshots dominate over photography in mid-page sections: the UI is the hero, framed by soft gradient washes. Illustrations are absent; the brand uses its own product UI as the visual content. Iconography is platform-native — TikTok, Instagram, LinkedIn, X, WhatsApp, Salesforce, Pinterest, etc. appear in their full brand colors, never recolored to match the monochrome system. Integration tiles act as a social-proof mosaic of partner logos. The overall density is image-rich in the hero and product sections, text-dominant in the integrations and pricing zones."

  layout:

    info: "The page model is max-width 1200px centered on white canvas, with a full-bleed dark hero that breaks the container on the first screen. The hero reverses the system: black background, white headline, centered email capture compound. Below the fold, the layout shifts to left-aligned headlines with full-width product showcases on gradient backgrounds. Sections alternate between text-dominant bands (integrations grid, pricing tiers) and image-dominant bands (product UI screenshots). The integrations section uses a 7-column grid of white tiles on white canvas — the tiles are defined entirely by 1px borders and 16px radius, not by tonal lift. Navigation is a sticky top bar with a soft shadow lift and rounded outer container. Vertical rhythm is generous: 64px section gaps, 32px between content blocks, 16px between elements within a block. The page reads top-to-bottom as: dark hero → white product showcase → white integrations → white pricing."

  similar_brands:

    - "**Buffer** — Same social-media-management category and same minimal monochrome canvas with a single green brand accent; both use a hero email-capture pattern on a reversed dark panel"
    - "**Hootsuite** — Same product category and similar high-contrast black-on-white headline system with a single chromatic CTA accent; both lean on product UI screenshots as hero visuals"
    - "**Linear** — Same ultra-confident geometric display type at near-black weight on white, same border-defined cards with no shadow, same rationed single-accent color philosophy"
    - "**Webflow** — Same max-width centered container with a reversed dark hero opening, same product-screenshot-on-gradient-wash showcase pattern, same weight-700+ headline confidence"
    - "**Notion** — Same single-color-accent-on-monochrome-canvas philosophy and same flat-surface-no-shadow card treatment; both make one color do all the emotional work"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #040404;
          --color-paper-white: #ffffff;
          --color-ash-gray: #d9d9d9;
          --color-smoke-gray: #cbcece;
          --color-slate: #162020;
          --color-pewter: #6e797a;
          --color-sprout-green: #98e58e;
        
          /* Typography — Font Families */
          --font-proxima-nova: 'Proxima Nova', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.48;
          --text-body-sm: 16px;
          --leading-body-sm: 1.64;
          --text-body: 18px;
          --leading-body: 1.48;
          --text-subheading: 21px;
          --leading-subheading: 1.33;
          --text-subheading-lg: 24px;
          --leading-subheading-lg: 1.25;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.18;
          --text-heading: 43px;
          --leading-heading: 1.12;
          --text-heading-lg: 57px;
          --leading-heading-lg: 1.05;
          --text-display: 76px;
          --leading-display: 1.05;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-160: 160px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 64px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-badges: 24px;
          --radius-inputs: 6px;
          --radius-buttons: 6px;
          --radius-hero-tiles: 64px;
        
          /* Shadows */
          --shadow-sm: rgba(39, 51, 51, 0.24) 0px 4px 8px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-card-surface: #ffffff;
          --surface-input-surface: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #040404;
          --color-paper-white: #ffffff;
          --color-ash-gray: #d9d9d9;
          --color-smoke-gray: #cbcece;
          --color-slate: #162020;
          --color-pewter: #6e797a;
          --color-sprout-green: #98e58e;
        
          /* Typography */
          --font-proxima-nova: 'Proxima Nova', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.48;
          --text-body-sm: 16px;
          --leading-body-sm: 1.64;
          --text-body: 18px;
          --leading-body: 1.48;
          --text-subheading: 21px;
          --leading-subheading: 1.33;
          --text-subheading-lg: 24px;
          --leading-subheading-lg: 1.25;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.18;
          --text-heading: 43px;
          --leading-heading: 1.12;
          --text-heading-lg: 57px;
          --leading-heading-lg: 1.05;
          --text-display: 76px;
          --leading-display: 1.05;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-160: 160px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 64px;
        
          /* Shadows */
          --shadow-sm: rgba(39, 51, 51, 0.24) 0px 4px 8px 0px;
        }