andercore___style_reference:
  info: "> Steel blueprint at midnight"

  theme: "dark"

  info: "Andercore runs on a chiaroscuro industrial language: near-black canvases (#0b0405) with crisp white type, sharp 4px corners, and a single rationed red (#e32735) that does all the talking. The page alternates between a light navigation band and full-bleed dark sections where borders (1px, #382e30) define structure instead of shadows or elevation. Archivo carries geometric precision at every size with tight -0.02em tracking, while Space Mono at 12px stamps industrial instrument-style labels onto badges and step counters. Red never decorates — it activates, marking the single primary action, the active step underline, and key UI connectors. The whole system feels like a control room: dense, deliberate, and lit by a single indicator lamp."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Red | `#e32735` | `--color-signal-red` | Red action color for filled buttons, selected navigation states, and focused conversion moments |"
    info: "| Carbon | `#0b0405` | `--color-carbon` | Primary section background, full-bleed dark canvases, secondary button fill |"
    info: "| Graphite | `#150e0f` | `--color-graphite` | Alternate near-black surface for cards and elevated panels on dark sections |"
    info: "| Steel | `#382e30` | `--color-steel` | Hairline borders on dark surfaces, card edges, table dividers, UI mockup outlines |"
    info: "| Slate | `#858182` | `--color-slate` | Secondary text, badge borders, badge labels, muted helper copy |"
    info: "| Chalk | `#ffffff` | `--color-chalk` | Primary text on dark, nav and hero overlay type, inverted button text, light section backgrounds |"
    info: "| Foil | `#000000` | `--color-foil` | SVG icon fills, decorative vector detail |"

  tokens___typography:

    archivo___all_interface_type___headlines_40_56px__weight_500__subheads_24px__weight_500__body_and_ui_14_16px__weight_400__nav_links_12_14px__the_geometric_grotesque_with_tight__0_02em_tracking_gives_industrial_precision__weight_500_not_700_for_display_type_keeps_the_system_restrained_rather_than_shouty_____font_archivo:
      - "**Substitute:** Inter, DM Sans, Geist"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12, 14, 16, 24, 40, 56"
      - "**Line height:** 1.10–1.50"
      - "**Letter spacing:** -0.02em across all sizes"
      - "**Role:** All interface type — headlines (40/56px, weight 500), subheads (24px, weight 500), body and UI (14/16px, weight 400), nav links (12/14px). The geometric grotesque with tight -0.02em tracking gives industrial precision; weight 500 (not 700) for display type keeps the system restrained rather than shouty."

    space_mono___badge_labels__step_counters__01___02___03__industrial_tag_stamps___the_monospace_face_signals_instrumentation_and_serial_number_precision__contrasting_archivo_s_proportional_geometry____font_space_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, Roboto Mono"
      - "**Weights:** 400"
      - "**Sizes:** 12"
      - "**Line height:** 1.50"
      - "**Letter spacing:** normal"
      - "**Role:** Badge labels, step counters ('01', '02', '03'), industrial tag stamps — the monospace face signals instrumentation and serial-number precision, contrasting Archivo's proportional geometry"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.28px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.32px | `--text-body` |"
      info: "| subheading | 24px | 1.2 | -0.48px | `--text-subheading` |"
      info: "| heading | 40px | 1.2 | -0.8px | `--text-heading` |"
      info: "| display | 56px | 1.1 | -1.12px | `--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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 4px |"
      info: "| badges | 4px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"

    layout:

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

  components:

    primary_cta_button_red_filled:
      role: "The single high-priority action on any surface"

      info: "Filled Signal Red (#e32735), white text at 14px Archivo weight 500, padding 12px 24px, 4px radius. No shadow, no gradient. The borderless rectangle sits flush with the dark canvas."

    ghost_dark_button:
      role: "Secondary action when a primary red CTA is present"

      info: "Dark fill (#0b0405 or #150e0f), 1px border in #382e30, white text at 14px Archivo weight 500, padding 12px 24px, 4px radius. Visually quiet partner to the red CTA."

    navigation_header:
      role: "Top-level site navigation and authentication"

      info: "White background (#ffffff), Archivo 14px nav links in dark text, logo left ('ANDERCORE' wordmark), utility links and CTAs right. Fixed thin bar, no shadow, separates from dark sections below via background shift not a border."

    industrial_badge___tag:
      role: "Category labels, section eyebrows, status stamps"

      info: "1px border in #858182, Space Mono 12px text in #858182, padding 8px 12px, 4px radius. Transparent fill so it reads as an outlined instrument label, not a filled chip."

    step_progress_indicator:
      role: "Multi-step process navigation (Request → Quote → Track'n'Trace)"

      info: "Horizontal row of step labels in Archivo 14px. Active step: red (#e32735) text with a 2px red underline bar. Inactive steps: #858182 text, no underline. Step numbers ('01', '02', '03') in Space Mono 12px right-aligned."

    feature_card_with_ui_mockup:
      role: "Three-column challenge/solution display"

      info: "Dark card on #0b0405 canvas, no border or 1px #382e30 border, 32px padding. Contains a small UI mockup (mini browser/panel) in a slightly lighter dark (#150e0f or #1a1213) with a red #e32735 icon/dot accent. Heading in Archivo 24px white, body in 14px #858182."

    dark_content_section:
      role: "Primary content blocks after the hero"

      info: "Full-bleed #0b0405 background, 80px vertical padding, max-width 1200px centered. White Archivo heading at 40px, muted body in #858182 at 16px. Section eyebrows via Space Mono badge above the heading."

    chat_interface_card:
      role: "Product walkthrough visualization"

      info: "Panel showing conversation bubbles on a lighter dark fill (#1a1213 implied). User bubbles: #382e30 fill with white text. Assistant bubbles: outlined or lighter fill. Andercore 'A' mark avatar in Signal Red. Sits beside a full-bleed photo of the user on the right."

    hero_with_photographic_overlay:
      role: "Above-the-fold brand statement"

      info: "Full-bleed image (truck/industrial subject) with dark gradient overlay, display headline at 56px Archivo weight 500 in white, 1.10 line-height, -1.12px tracking. Body subtext at 16px in muted white. Primary red CTA + ghost dark button inline below."

    connector_line___accent_divider:
      role: "Visual flow between cards or sections"

      info: "1px line in #382e30 with small square nodes (#ffffff) at junction points. Occasionally terminates in a red #e32735 square node or the Andercore 'A' mark. Links the three-column challenge cards vertically into a single system."

    eyebrow___section_label:
      role: "Tiny uppercase or tracked label above section headings"

      info: "Space Mono 12px or Archivo 12px weight 500, all-caps where used, #858182 color, sometimes paired with a 1px red #e32735 underline accent."

  do_s_and_don_ts:

    do:
      - "Use Signal Red #e32735 exclusively for the single primary action per surface — never as a decorative or background fill"
      - "Set all corners to 4px radius — no exceptions, no pill shapes, no zero-radius hard edges"
      - "Separate dark sections with 80px vertical padding and rely on background-value shift rather than dividers or shadows"
      - "Use Archivo 500 (not 700) for headings 40px and above to keep weight restrained and consistent"
      - "Apply -0.02em letter-spacing to all Archivo type at all sizes for tight industrial density"
      - "Stamp step numbers, serial codes, and technical labels in Space Mono 12px — never Archivo for these"
      - "Define card and panel edges with 1px #382e30 borders on dark, never with box-shadow or background tint shifts"

    don_t:
      - "Don't introduce drop shadows, glows, or blur-based elevation — structure is line-based only"
      - "Don't use #e32735 for body text, icons, or secondary UI — it's an action color, rationed"
      - "Don't round corners beyond 4px — no 8px, 12px, 16px, or pill radii anywhere"
      - "Don't set headings in bold (700+); weight 500 Archivo at 40–56px is the maximum voice"
      - "Don't alternate between light and dark sections within a single content flow — the page is dark-dominant after the hero"
      - "Don't use Archivo for numeric step counters, product codes, or instrumentation labels — those are Space Mono territory"
      - "Don't add gradient fills to buttons or cards — the one gradient in the system (white→red) is reserved for the hero-to-content transition"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas — Light | `#ffffff` | Navigation bar, light interstitial bands |"
    info: "| 1 | Canvas — Dark | `#0b0405` | Primary content section background, full-bleed dark bands |"
    info: "| 2 | Card Surface | `#150e0f` | Elevated panels and feature cards on dark sections |"

  elevation:

    info: "No drop shadows. Structure is defined entirely by 1px hairline borders (#382e30 on dark, #e5e5e5 implied on light) and the 4-step surface value stack. Components sit flat against their canvas, separated by lines rather than lifted by blur — the industrial-control-room approach."

  imagery:

    photography_is_the_dominant_visual: "industrial subjects (logistics trucks, construction sites, workers in hard hats) shot in golden-hour or moody low-light conditions. Images are full-bleed with dark gradient overlays so they merge into the #0b0405 section backgrounds. UI mockups (mini browser panels, chat interfaces) appear as flat dark-on-dark diagrams with red accent dots, never as realistic product screenshots. The Andercore 'A' mark functions as both logo and a small red UI token (avatar, connector node). No illustration style — everything is either photographic, diagrammatic, or pure typography on dark canvas."

  layout:

    info: "The page runs at max-width 1200px centered, but most sections are full-bleed dark bands. The hero is a full-bleed photographic image with dark overlay, headline left-aligned in the lower-third. Content sections follow a single-column rhythm: section eyebrow badge → heading → body text, with primary CTAs right-aligned. Three-column feature grids appear inside dark sections at equal 32px gutters. The step progress flow uses a 2/3-left text, 1/3-right visual (chat + photo) split. Vertical spacing is generous: 80px between sections, 32px card padding, 24px element gaps. Navigation is a thin white fixed bar at the top — the only consistently light surface on an otherwise dark page."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ffffff (on dark) / #0b0405 (on light)"
    - "background: #0b0405 (dark sections) / #ffffff (nav)"
    - "border: #382e30 (on dark) / #858182 (badges)"
    - "accent: #e32735 (Signal Red)"
    - "muted text: #858182 (Slate)"
    - "primary action: #e32735 (filled action)"

    3_5_example_component_prompts:

    - "*Create a dark hero section*: #0b0405 full-bleed background, 80px vertical padding. Display headline at 56px Archivo weight 500, #ffffff, letter-spacing -1.12px, line-height 1.10. Subtext at 16px Archivo weight 400, #858182. Primary CTA: #e32735 fill, white text 14px Archivo weight 500, 12px 24px padding, 4px radius. Ghost button beside it: #150e0f fill, 1px #382e30 border, white text, same padding and radius."

    - "*Create a three-column feature row*: #0b0405 background, 32px between columns. Each card: 1px #382e30 border, 32px padding, 4px radius. Eyebrow badge above: Space Mono 12px, #858182 text, 1px #858182 border, 8px 12px padding. Card heading at 24px Archivo weight 500, #ffffff. Body at 14px Archivo weight 400, #858182."

    - "*Create a step progress indicator*: horizontal row on #0b0405. Three steps labeled 'Request', 'Quote', 'Track'n'Trace' in Archivo 14px. Active step: #e32735 text with a 2px #e32735 underline bar. Inactive: #858182 text, no underline. Step numbers '01', '02', '03' in Space Mono 12px #858182, right-aligned."

    - "*Create a dark content section*: #0b0405 background, max-width 1200px centered, 80px vertical padding. Section heading at 40px Archivo weight 500, #ffffff, -0.80px letter-spacing. Body paragraph at 16px Archivo weight 400, #858182. Red accent CTA button top-right: #e32735 fill, white 'Get access now' text, 12px 24px padding, 4px radius."

    - "*Create an industrial badge/tag*: transparent fill, 1px #858182 border, Space Mono 12px text in #858182, padding 8px 12px, 4px radius. Used as section eyebrows above headings."

  gradient_system:

    the_system_uses_exactly_one_gradient: "a horizontal white-to-red transition (linear-gradient 90deg, #ffffff 18%, #e32735)) applied only to the hero image overlay edge or to decorative connector lines that fade from canvas to signal. No other gradients exist — buttons, cards, and backgrounds are all flat fills."

  similar_brands:

    - "**Kommo** — Same dark-near-black canvas with a single rationed chromatic accent for primary actions, Archivo-style geometric sans throughout"
    - "**Tensor** — Industrial/B2B tone with 1px line-based card borders, 4px corners, and a single red-orange signal color against deep black"
    - "**Framer** — Dark full-bleed sections with sharp 4px radii, no shadows, and a tight geometric grotesk as the only typeface"
    - "**Vercel** — Max-width 1200px centered layout, sharp minimal corners, dark-dominant sections, and a monochrome palette with one accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-red: #e32735;
          --color-carbon: #0b0405;
          --color-graphite: #150e0f;
          --color-steel: #382e30;
          --color-slate: #858182;
          --color-chalk: #ffffff;
          --color-foil: #000000;
        
          /* Typography — Font Families */
          --font-archivo: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-space-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.32px;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.48px;
          --text-heading: 40px;
          --leading-heading: 1.2;
          --tracking-heading: -0.8px;
          --text-display: 56px;
          --leading-display: 1.1;
          --tracking-display: -1.12px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 32px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-md: 4px;
        
          /* Named Radii */
          --radius-cards: 4px;
          --radius-badges: 4px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
        
          /* Surfaces */
          --surface-canvas-light: #ffffff;
          --surface-canvas-dark: #0b0405;
          --surface-card-surface: #150e0f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-red: #e32735;
          --color-carbon: #0b0405;
          --color-graphite: #150e0f;
          --color-steel: #382e30;
          --color-slate: #858182;
          --color-chalk: #ffffff;
          --color-foil: #000000;
        
          /* Typography */
          --font-archivo: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-space-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.32px;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.48px;
          --text-heading: 40px;
          --leading-heading: 1.2;
          --tracking-heading: -0.8px;
          --text-display: 56px;
          --leading-display: 1.1;
          --tracking-display: -1.12px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-md: 4px;
        }