getanchor___style_reference:
  info: "> Warm terracotta on sun-bleached cream."

  theme: "light"

  info: "Anchor's visual system reads as a warm editorial workspace: a sun-bleached cream canvas, one quiet terracotta accent, and type that feels set rather than styled. The dominant page surface is never pure white — it sits in the #f0e9e5 to #e3d7cd warm-cream range, which makes white product cards look lifted off the page like paper on paper. Color is rationed: roughly 99% of every screen is neutral, and the single warm orange (#ee884f) only fires on the primary action, earning attention by scarcity. Components stay flat and light — pill buttons, 4px-radius cards, hairline borders, and shadows so thin they read as paper grain rather than elevation. The tone is confident and unhurried, closer to a printed quarterly than a dashboard."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#1e1e1e` | `--color-ink` | Body text, headings, primary borders, icon strokes — the dominant neutral that carries almost all type and structural lines |"
    info: "| Cream Canvas | `#e3d7cd` | `--color-cream-canvas` | Page background and deepest warm surface — the base tone of the entire site |"
    info: "| Warm White | `#f0e9e5` | `--color-warm-white` | Primary card and section surface, nav background, soft fills |"
    info: "| Paper White | `#f5f2f0` | `--color-paper-white` | Button hover surfaces and elevated neutral blocks, slightly cooler than Warm White |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Top-level product card surfaces and modal panels that need to float above cream |"
    info: "| Sand Border | `#c9c9c7` | `--color-sand-border` | Subtle warm-gray dividers and disabled controls |"
    info: "| Stone Text | `#767676` | `--color-stone-text` | Secondary and helper text, muted labels, description copy |"
    info: "| Charcoal | `#000000` | `--color-charcoal` | Pure black for SVG icon fills in dark contexts only |"
    info: "| Terracotta | `#ee884f` | `--color-terracotta` | Primary action button fill, the one chromatic accent — warm orange against cream creates urgency without aggression |"

  tokens___typography:

    archivo___single_typeface_system__weight_400_carries_body__captions__and_descriptions__weight_600_is_reserved_for_headings__nav_items__and_button_labels__archivo_s_geometric_warmth_matches_the_cream_palette___its_straight_sided__a__and_open_apertures_read_as_set_type__not_screen_type_____font_archivo:
      - "**Substitute:** Inter, Manrope, or DM Sans"
      - "**Weights:** 400, 600"
      - "**Sizes:** 11px, 13px, 14px, 15px, 16px, 18px, 36px, 44px, 52px, 68px"
      - "**Line height:** 1.20–1.50 for body, 0.80–1.10 for display"
      - "**Letter spacing:** -0.03em on display and headings (36–68px), -0.01em on body and subheadings (13–18px), 0.06em on uppercase caption labels (11px)"
      - "**OpenType features:** `\"ss01\" on`"
      - "**Role:** Single typeface system. Weight 400 carries body, captions, and descriptions; weight 600 is reserved for headings, nav items, and button labels. Archivo's geometric warmth matches the cream palette — its straight-sided 'A' and open apertures read as set type, not screen type."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.4 | 0.66px | `--text-caption` |"
      info: "| body | 15px | 1.5 | -0.15px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | -0.18px | `--text-subheading` |"
      info: "| heading-sm | 36px | 1.2 | -1.08px | `--text-heading-sm` |"
      info: "| heading | 44px | 1.1 | -1.32px | `--text-heading` |"
      info: "| heading-lg | 52px | 1 | -1.56px | `--text-heading-lg` |"
      info: "| display | 68px | 0.9 | -2.04px | `--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: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 4px |"
      info: "| cards | 4px |"
      info: "| icons | 4800px (pill containers) |"
      info: "| inputs | 4px |"
      info: "| buttons | 4800px (full pill) |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.01) 0px 4px 1px 0px, rgba(0, 0, 0, 0.04) ...` | `--shadow-subtle` |"

    layout:

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

  components:

    primary_cta_button_terracotta_pill:
      role: "Hero and section-level conversion — Book a demo, Get started"

      info: "Fill #ee884f, text white, Archivo 600 at 14-15px, fully pill-shaped at 4800px radius, 8px 24px padding. No border, no shadow. Carries the only chromatic color in the system — by scarcity it reads as the single confident action."

    dark_cta_button_ink_pill:
      role: "Inverse primary action on cream or white surfaces"

      info: "Fill #1e1e1, text white, Archivo 600 at 14px, pill radius 4800px, 8px 24px padding. Used for the header \"Book a demo\" button. Sits one step below Terracotta in the action hierarchy."

    ghost_nav_button:
      role: "Header navigation items — Product, Use cases, Security, About, Blog"

      info: "No fill, no border. Text #1e1e1, Archivo 400 at 14px. No background change on hover; underline or chevron indicates expandable. Maximum restraint in the nav."

    section_eyebrow_label:
      role: "Tiny uppercase label above section headlines"

      info: "Archivo 600 at 11px, letter-spacing 0.06em, color #1e1e1 or #767676. Sets the editorial tone — the same scale a magazine uses for kicker copy."

    editorial_headline:
      role: "Primary section and hero headlines"

      info: "Archivo 600 at 44–68px, color #1e1e1, tight tracking at -0.03em, line-height 0.9–1.1. Sizes down to 36px for sub-section headings. The weight-600 choice against a cream background makes headlines feel printed."

    product_card_hero_mock:
      role: "The floating opportunities/data card on the hero right panel"

      info: "Pure white #ffffff surface, 4px radius, subtle three-layer shadow (rgba 0.01/0.04/0.06 at 1-4px offsets). Sits on a warm peach gradient panel. Internal padding 24px, table-style rows with #f5f2f0 alternating fills."

    tabbed_feature_section:
      role: "Knowledge Management, Response Automation, Document Intelligence, Collaboration"

      info: "Left sidebar lists tabs in 11px Archivo 600 uppercase with 0.06em tracking; active tab has a small terracotta dot prefix. Right panel holds a 4px-radius #ffffff card on a cream-tinted diagram background."

    ai_generation_input:
      role: "Prompt and status interface inside feature demos"

      info: "Light cream #f0e9e5 container with 4px radius. Input text in Archivo 400 #1e1e1e. Right-side action button is a Pill in dark #1e1e1 fill with white text. Status pill below: small dot + 'Searching sources' in #767676."

    status_badge_pill:
      role: "In-flow status indicators — Generating..., Something"

      info: "Fully pill-shaped (4800px radius), small Archivo 400 at 13px, with a leading dot in the same hue. Neutral variants use #767676 text on #f0e9e5; accent variants use terracotta."

    knowledge_hub_diagram_card:
      role: "Integration/source visual in feature sections"

f0e9e5_background__4px_radius__centered_diagram__shows_source_icons_in_4px_white_pill_tiles_connected_to_a_central_anchor_hub_tile__then_output_destinations__very_flat__no_shadow_on_this_card:

    feature_sub_item_card:
      role: "Four-up grid items below a feature card — 'Connect all your knowledge', etc."

      info: "Warm white #f0e9e5 surface, 4px radius, 24px padding, Archivo 400 at 15px title and #767676 description. No border, no shadow. Quiet by design."

    partner_logo_bar:
      role: "Social-proof strip — Papaya Global, Coralogix, Deel, etc."

      info: "Horizontal row on cream canvas, 80-120px section gap above and below. Logos in #1e1e1, no color treatment, evenly spaced. Above-bar eyebrow: \"Trusted by leading sales, solutions, and security teams\" in 11px uppercase."

    search_text_input:
      role: "Inline search or generation field"

      info: "White #ffffff background, 1px #c9c9c7 border, 4px radius, 12-16px padding. Placeholder in #767676. Optional leading icon in #1e1e1e."

  do_s_and_don_ts:

    do:
      - "Use only #ee884f for primary action fills — never introduce a second chromatic accent"
      - "Set headlines in Archivo 600 with -0.03em tracking; do not use 400 for display sizes"
      - "Use the warm cream surface stack (#e3d7cd → #f0e9e5 → #f5f2f0 → #ffffff) for elevation — never pure white as the page base"
      - "Apply 4800px radius to all buttons, badges, and icon containers — pill shape is signature"
      - "Use 4px radius for all cards, inputs, and nav containers"
      - "Keep shadows under 4px blur with opacity ≤ 0.06 — shadows should read as paper grain, not depth"
      - "Set eyebrows and nav labels in 11px Archivo 600 with 0.06em letter-spacing in uppercase"

    don_t:
      - "Do not add a second accent color — the entire chromatic story is one warm orange"
      - "Do not use pure black #000000 for body text; use #1e1e1"
      - "Do not round cards to 8px, 12px, or 16px — the 4px card + 4800px button contrast is the system"
      - "Do not apply heavy drop shadows or colored glows; the system is nearly flat"
      - "Do not center body copy in paragraphs — keep paragraphs left-aligned"
      - "Do not use weight 700 or 800 — Archivo only ships 400 and 600 in this system"
      - "Do not mix cream and pure-white backgrounds within a single section; pick one surface tone and commit"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cream Canvas | `#e3d7cd` | Deepest page background, sets warm tone |"
    info: "| 1 | Warm White | `#f0e9e5` | Default section and card surface |"
    info: "| 2 | Paper White | `#f5f2f0` | Lighter neutral block, button hover |"
    info: "| 3 | Pure White | `#ffffff` | Elevated product cards that need to float above the warm layers |"

  elevation:

    - "**Product Card (Hero):** `0px 1px 1px 0px rgba(0,0,0,0.06), 0px 2px 1px 0px rgba(0,0,0,0.04), 0px 4px 1px 0px rgba(0,0,0,0.01)`"
    - "**Navigation Bar:** `0px 1px 1px 0px rgba(0,0,0,0.06), 0px 2px 1px 0px rgba(0,0,0,0.04), 0px 4px 1px 0px rgba(0,0,0,0.01)`"

  imagery:

    imagery_is_minimal_and_product_led: "the hero right panel uses a warm peach-to-cream gradient as a stage for a single white product card. Subsequent sections replace photography with UI mockups — knowledge diagrams, AI generation interfaces, opportunity tables. No lifestyle photography, no stock imagery, no illustration. The product IS the hero. Partner logos in the social-proof strip appear as flat monochrome #1e1e1 marks, no color treatment, evenly spaced. Icon style throughout is a mix of minimal outlined line icons in the nav and filled brand logos in integration diagrams."

  layout:

    info: "Max-width ~1200px centered content with full-bleed cream background. Hero is a two-column split: text-left (eyebrow, headline, description, CTA) and visual-right (product card on a warm gradient panel). Below the hero, a centered partner-logo bar introduces a three-act body. The main body alternates between a two-column intro (eyebrow tabs on the left, headline + description on the right) and a single full-width media card underneath — Knowledge Management, Response Automation, etc. Section gaps are generous (80-120px), and vertical rhythm is built on a 24px base. Navigation is a flat top bar with no sticky behavior visible — simple logo left, centered nav, single dark CTA right. Content density is low and editorial, never dashboard-busy."

  agent_prompt_guide:

    info: "Quick Color Reference"
    text: "#1e1e1e"
    background_page: "#e3d7cd or #f0e9e5"
    surface_card: "#ffffff or #f5f2f0"
    border: "#c9c9c7 or #f0e9e5"
    accent: "#ee884f"
    primary_action: "#ee884f (filled action)"

    info: "3-5 Example Component Prompts"

    - "Create a hero section. Page background #f0e9e5. Eyebrow label in Archivo 600, 11px, letter-spacing 0.66px, color #1e1e1e, uppercase. Headline in Archivo 600, 68px, color #1e1e1e, letter-spacing -2.04px, line-height 0.9. Body description in Archivo 400, 16px, color #1e1e1e. primary action: #ee884f (filled action)"

    - "Create a tabbed feature section. Cream #f0e9e5 page background. Left sidebar: tab list in 11px Archivo 600 uppercase, letter-spacing 0.66px, color #767676, with active tab prefixed by a 6px terracotta #ee884f dot. Right column: headline in Archivo 600, 36px, color #1e1e1e, letter-spacing -1.08px; subhead in Archivo 400, 18px, color #767676. Below: a white #ffffff card with 4px radius containing a centered integration diagram (source tiles in 4px white pills, central hub tile, destination tiles)."

    - "Create an AI generation interface card. Card background #f0e9e5, 4px radius, 24px padding. Top: a #ffffff input row with 1px #c9c9c7 border, 4px radius, 16px padding, placeholder in #767676. Right-aligned dark pill action: #1e1e1e fill, white text, 4800px radius, Archivo 600 14px, 8px 16px padding. Below: a status row with a small terracotta dot + 'Searching sources' in Archivo 400, 13px, #767676."

    - "Create a partner logo bar. Cream #e3d9cd page background. Centered eyebrow in 11px Archivo 600 uppercase, letter-spacing 0.66px, #1e1e1e. Below: a single horizontal row of 6-8 logos in monochrome #1e1e1e, evenly spaced, 80-120px section gap top and bottom. No card, no border, no shadow."

    - "Create a four-up feature grid. Section background #f0e9e5. Each card: background #f0e9e5 (sits one tone lighter than the page if the page is #e3d7cd), 4px radius, 24px padding, no border, no shadow. Title in Archivo 600, 15px, #1e1e1e. Description in Archivo 400, 15px, #767676. 24px gap between cards."

  gradient___atmosphere:

    info: "The hero right panel uses a soft warm gradient from a deeper peach through to cream — this is the only place in the system where a non-solid color appears, and it exists purely to stage the product card. Reuse the gradient for any single full-bleed media container (product mockup, feature demo) but never as a section background or button fill. Approximate value: linear-gradient(180deg, #e8a87a 0%, #f0c9a3 40%, #f0e9e5 100%)."

  similar_brands:

    - "**Linear** — Same single-accent restraint, dark ink on warm neutral, Archivo-family geometric type, and pill-shaped primary actions"
    - "**Notion** — Shared editorial whitespace, warm off-white canvas rather than pure white, and UI-as-hero product cards floating on the page"
    - "**Framer** — Similar generous section gaps, monochrome base with one warm chromatic punctuation, and pill CTA on cream"
    - "**Vercel** — Confident oversized headlines with tight tracking, quiet neutrals, and a single action color used sparingly"
    - "**Raycast** — Geometric sans (Archivo/Inter family) with weight-600 headlines, flat surfaces, and minimal shadow language"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #1e1e1e;
          --color-cream-canvas: #e3d7cd;
          --color-warm-white: #f0e9e5;
          --color-paper-white: #f5f2f0;
          --color-pure-white: #ffffff;
          --color-sand-border: #c9c9c7;
          --color-stone-text: #767676;
          --color-charcoal: #000000;
          --color-terracotta: #ee884f;
        
          /* Typography — Font Families */
          --font-archivo: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --tracking-caption: 0.66px;
          --text-body: 15px;
          --leading-body: 1.5;
          --tracking-body: -0.15px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -1.08px;
          --text-heading: 44px;
          --leading-heading: 1.1;
          --tracking-heading: -1.32px;
          --text-heading-lg: 52px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.56px;
          --text-display: 68px;
          --leading-display: 0.9;
          --tracking-display: -2.04px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --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-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-120: 120px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 24px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 4800px;
        
          /* Named Radii */
          --radius-nav: 4px;
          --radius-cards: 4px;
          --radius-icons: 4800px (pill containers);
          --radius-inputs: 4px;
          --radius-buttons: 4800px (full pill);
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.01) 0px 4px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 1px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1px 0px;
        
          /* Surfaces */
          --surface-cream-canvas: #e3d7cd;
          --surface-warm-white: #f0e9e5;
          --surface-paper-white: #f5f2f0;
          --surface-pure-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #1e1e1e;
          --color-cream-canvas: #e3d7cd;
          --color-warm-white: #f0e9e5;
          --color-paper-white: #f5f2f0;
          --color-pure-white: #ffffff;
          --color-sand-border: #c9c9c7;
          --color-stone-text: #767676;
          --color-charcoal: #000000;
          --color-terracotta: #ee884f;
        
          /* Typography */
          --font-archivo: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --tracking-caption: 0.66px;
          --text-body: 15px;
          --leading-body: 1.5;
          --tracking-body: -0.15px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -1.08px;
          --text-heading: 44px;
          --leading-heading: 1.1;
          --tracking-heading: -1.32px;
          --text-heading-lg: 52px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.56px;
          --text-display: 68px;
          --leading-display: 0.9;
          --tracking-display: -2.04px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-120: 120px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 4800px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.01) 0px 4px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 1px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1px 0px;
        }