axiom___style_reference:
  info: "> Terminal window at midnight — flat black canvas, monospaced text, and one orange cursor blinking"

  theme: "dark"

  info: "Axiom is a terminal-grade dark interface where every glyph is monospaced, every surface is near-black, and one warm orange does all the chromatic work. The design language borrows from code editors and CLI tools — no gradients, almost no shadows, no rounded softness — instead layering information through subtle shifts in dark neutrals (from #000000 canvas to #191919 cards to #202020 borders) so the UI reads like a well-formatted log file. BerkeleyMono carries the entire voice, from hero headlines to nav labels, giving the product an engineering-native feel that signals audience before it signals brand. Orange appears as a precise tool: the primary CTA fill, the log-bar visualization, and a 2px left border that marks editorial case-study cards — never decorative, always functional."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void | `#000000` | `--color-void` | Page background, nav fill, terminal surface |"
    info: "| Carbon | `#111111` | `--color-carbon` | Primary surface, card base, hero canvas |"
    info: "| Graphite | `#191919` | `--color-graphite` | Elevated card background, case-study card fill |"
    info: "| Iron | `#202020` | `--color-iron` | Hairline borders, dividers, subtle separation |"
    info: "| Slate | `#3a3a3a` | `--color-slate` | Muted borders, icon strokes, secondary lines |"
    info: "| Pewter | `#505050` | `--color-pewter` | Subtle dividers, decorative rules |"
    info: "| Steel | `#606060` | `--color-steel` | Tertiary text, icon detail, inactive labels |"
    info: "| Ash | `#7e7e7e` | `--color-ash` | Muted helper text, small annotations |"
    info: "| Fog | `#b4b4b4` | `--color-fog` | Secondary text, label text, muted body |"
    info: "| Chalk | `#d9d9d9` | `--color-chalk` | Light borders, stroke detail on icons |"
    info: "| Paper | `#eeeeee` | `--color-paper` | Primary text, nav links, heading fill, button text |"
    info: "| Ember | `#da5c2c` | `--color-ember` | Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"

  tokens___typography:

    berkeleymono___universal_typeface___headlines__body__nav__buttons__code__table_cells__logo__weight_400_carries_prose_and_ui_labels__weight_700_is_reserved_for_emphasis_and_primary_ctas__the_monospaced_geometry_unifies_the_brand_and_signals_engineering_audience__every_line_of_text__including_navigation_and_button_labels__sits_in_this_monospaced_grid___there_is_no_proportional_fallback_for_content_____font_berkeleymono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, Fira Code"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12px, 13px, 14px, 16px, 18px, 20px, 24px, 32px"
      - "**Line height:** 1.0–1.71"
      - "**Letter spacing:** normal"
      - "**Role:** Universal typeface — headlines, body, nav, buttons, code, table cells, logo. Weight 400 carries prose and UI labels; weight 700 is reserved for emphasis and primary CTAs. The monospaced geometry unifies the brand and signals engineering audience. Every line of text, including navigation and button labels, sits in this monospaced grid — there is no proportional fallback for content."

    inter___secondary_text_layer___small_icon_labels__fine_print__tertiary_annotations_where_proportional_letterforms_reduce_visual_density_below_the_mono_baseline____font_inter:
      - "**Substitute:** system-ui, -apple-system, Segoe UI"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 14px, 16px"
      - "**Line height:** 1.33–1.50"
      - "**Role:** Secondary text layer — small icon labels, fine print, tertiary annotations where proportional letterforms reduce visual density below the mono baseline"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body | 14px | 1.71 | — | `--text-body` |"
      info: "| heading-sm | 18px | 1.56 | — | `--text-heading-sm` |"
      info: "| heading | 20px | 1.4 | — | `--text-heading` |"
      info: "| heading-lg | 24px | 1.33 | — | `--text-heading-lg` |"
      info: "| display | 32px | 1.25 | — | `--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` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 2px |"
      info: "| icons | 9999px |"
      info: "| inputs | 2px |"
      info: "| buttons | 2px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |"

    layout:

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

  components:

    primary_cta_button:
      role: "Hero call-to-action, conversion anchor"

      info: "Filled button with #da5c2c background, #eeeeee text, BerkeleyMono 16px weight 700, 2px border radius, padding 10px 16px. Arrow glyph (→) follows the label. No shadow, no hover lift — color change only."

    ghost_button:
      role: "Secondary action beside primary CTA"

      info: "Transparent background, 1px #3a3a3a border, #eeeeee text, BerkeleyMono 16px weight 400, 2px radius, 10px 16px padding. Arrow glyph follows label. Sits in nav as \"Sign up\" and inline as \"Sign up for free\"."

    top_navigation_bar:
      role: "Primary site navigation, sticky on scroll"

000000_background__full_width__16px_horizontal_padding__logo_triangle_mark___wordmark_left__nav_links_center_in_berkeleymono_14px_weight_400_eeeeee_with_dropdown_chevrons__login_signup_demo_cluster_right__height__56px__hairline_202020_bottom_border_optional:

    announcement_banner:
      role: "Top-of-page product update strip"

      info: "Full-width #111111 strip, BerkeleyMono 12px weight 400 #eeeeee text, centered or left-aligned. Closing × icon right. Subtle, not colorful — the message is the emphasis."

    case_study_card:
      role: "Customer testimonial unit in horizontal scroller"

191919_background__2px_radius__32px_padding__2px_solid_da5c2c_left_border_running_full_height___the_only_color_in_the_card__functioning_as_a_category_tag__customer_logo_top__headline_berkeleymono_18px_weight_400_eeeeee__body_text_14px__quote_14px_italic_weight_in_a_nested_111111_sub_card__avatar___name___role_footer__underlined__case_study___link_at_bottom:

    logo_grid_cell:
      role: "Customer logo display in social-proof band"

111111_background__2px_radius__centered_grayscale_logo___80px_tall__24px_padding__two_rows_of_six_cells__logos_rendered_in_eeeeee_or_b4b4b4_monochrome:

    product_screenshot_panel:
      role: "Hero visual — the observability product UI"

      info: "Full-width product mock with #111111 chrome, 2px radius, #202020 inner dividers. Tab bar (Datasets, Stream, Query, Dashboards, Monitor, Flows) in BerkeleyMono 12px with active tab underline. Blue log-bar histogram row (#2a7fff range) is the only interior color; results table below in #111111 with BerkeleyMono 12px monospaced columns and #3a3a3a row dividers."

    arrow_decoration_field:
      role: "Background texture on hero right side"

      info: "Repeating `>` glyphs in BerkeleyMono 12px weight 400 #3a3a3a, arranged in a diagonal right-pointing pattern. Fills negative space behind hero copy without adding visual weight — a terminal-style marquee that signals \"streaming data\"."

    tag___pill:
      role: "Category label above card content (e.g., SAVINGS, SIMPLICITY)"

      info: "Transparent background, BerkeleyMono 12px weight 400 #606060 uppercase, 0px padding. Pure typographic label, no border, no fill — the term sits above card headlines as editorial metadata."

    pill_icon_badge:
      role: "Small circular badge or icon wrapper"

      info: "9999px radius, ~24px diameter, #111111 or #202020 fill, white icon glyph centered. Used for utility icons and feature markers."

    chevron_arrow_link:
      role: "Inline link with directional indicator"

      info: "BerkeleyMono 14px weight 400 #eeeeee underlined text, followed by `→` glyph in same color. Appears at card footers (\"Hapn case study →\") and CTA-adjacent hints (\"Book a demo →\")."

    log_bar_histogram:
      role: "Data visualization in product UI and marketing"

      info: "Tight rows of rectangular bars in #2a7fff or #da5c2c (the Ember accent), 4-8px tall, 2-4px gaps. Represents event volume over time. No axes labels in marketing context — the bar pattern itself is the visual."

  do_s_and_don_ts:

    do:
      - "Use BerkeleyMono for all UI text including nav, buttons, and labels — mixing proportional fonts breaks the terminal aesthetic"
      - "Layer surfaces with #000000 → #111111 → #191919 → #202020 steps; never use box-shadow to create elevation"
      - "Use #da5c2c (Ember) exclusively for primary action fills, log-bar visualization, and the 2px left border on case-study cards"
      - "Set all border-radius to 2px for containers, cards, and buttons; reserve 9999px for tiny icon badges and tag pills under 32px"
      - "Place the orange 2px left border on editorial/customer cards as a category mark — it is the only color punctuation in content blocks"
      - "Use arrow glyphs (→) inline after action labels in BerkeleyMono to signal forward motion and reinforce the CLI cadence"
      - "Anchor page background at pure #000000 and let paper-white (#eeeeee) text carry all hierarchy through weight (400 vs 700) and size"

    don_t:
      - "Don't introduce gradients, drop shadows beyond the single 1px/2px hairline, or colored backgrounds — the system is deliberately flat"
      - "Don't use proportional sans-serif fonts (Inter, system-ui) for headlines, nav, or button labels — BerkeleyMono is non-negotiable for brand identity"
      - "Don't apply #da5c2c to text, icons, or borders other than the CTA fill, log bars, and case-study left border — it loses meaning when scattered"
      - "Don't round corners above 2px on cards, panels, or buttons — sharp geometry distinguishes this from typical SaaS soft-corner conventions"
      - "Don't add light-theme sections or alternate surface colors — the entire product is dark-mode-only and any light surface breaks the system"
      - "Don't use colored badge backgrounds for status (success/error/warning) — communicate state through BerkeleyMono symbols and border treatment only"
      - "Don't place imagery or photography that isn't product UI or grayscale logo marks — the visual language is screenshots, log patterns, and arrow textures, not lifestyle photography"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void | `#000000` | Page base, nav, terminal canvas |"
    info: "| 1 | Carbon | `#111111` | Primary content surface, hero background, announcement strip, logo cells |"
    info: "| 2 | Graphite | `#191919` | Elevated cards, case-study panels, inset blocks |"
    info: "| 3 | Iron | `#202020` | Borders, dividers, subtle inner separation |"

  elevation:

    - "**Buttons, small interactive surfaces:** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`"

  imagery:

    info: "Visuals are dominated by product UI screenshots — the actual observability dashboard with its blue log-bar histogram and monospaced result tables. Decorative imagery is limited to repeating `>` arrow glyphs in low-contrast #3a3a3a forming a streaming-data pattern behind the hero. Customer logos are rendered in grayscale (#eeeeee or #b4b4b4) on flat #111111 cells — no photography, no lifestyle imagery, no abstract 3D renders. The product screenshot IS the hero."

  layout:

    info: "Full-bleed dark canvas with content constrained to a ~1200px max-width centered column. The hero is a left-aligned text block (terminal prompt `~/` above a two-line monospaced headline) paired with a right-side arrow texture and a full-width product screenshot below. Section rhythm is steady: hero → product screenshot → social proof logo grid (2×6) → horizontal-scrolling case study cards (3–4 visible, overflow with ←→ chevrons) → footer. Spacing between sections is 40–64px. The case-study scroller breaks the static grid with horizontal movement, hinting at scroll-driven interaction. Navigation is a simple top bar with no sticky mega-menu — every nav link is a single line of BerkeleyMono with an optional dropdown chevron."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #eeeeee"
    - "background: #000000"
    - "surface (card): #111111"
    - "elevated surface: #191919"
    - "border / divider: #202020"
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."
    - "primary action: no distinct CTA color"

    3_example_component_prompts:
    - "Build a customer case-study card: #191919 background, 2px radius, 32px padding, 2px solid #da5c2c left border running full height. Customer logo top in #eeeeee. Headline BerkeleyMono 18px weight 400 #eeeeee. Quote block nested in #111111 with 16px padding, BerkeleyMono 14px weight 400 #b4b4b4. Footer row: 24px circular avatar + name BerkeleyMono 14px weight 700 #eeeeee + role 14px weight 400 #606060. Bottom link BerkeleyMono 14px underlined #eeeeee with → arrow."
    - "Build a product screenshot panel: #111111 outer frame, 2px radius. Tab bar in BerkeleyMono 12px weight 400 #b4b4b4 with active tab underlined in #eeeeee. Histogram row of 4px-tall bars in #2a7fff at 2px intervals across full width. Results table in BerkeleyMono 12px weight 400 #eeeeee with #3a3a3a row dividers and #606060 timestamp column. No shadows, no rounded inner elements."

  similar_brands:

    - "**Vercel** — Same dark-mode developer aesthetic with monospaced accent typography and a near-black canvas, though Vercel uses Geist Mono rather than BerkeleyMono"
    - "**Linear** — Dark-first interface with sharp 2px corners, flat surfaces, and a single warm accent color for primary actions against pure black backgrounds"
    - "**Fly.io** — Engineering-native product UI using monospaced type throughout, near-black surfaces layered with hairline borders, and a single chromatic accent for CTAs"
    - "**PlanetScale** — Dark-mode database product page with monospaced code-style typography, flat card surfaces, and a single warm orange accent on the primary CTA"
    - "**Railway** — Developer-platform dark UI with terminal-inspired layouts, monospaced body text, and near-black surface layering instead of shadows"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void: #000000;
          --color-carbon: #111111;
          --color-graphite: #191919;
          --color-iron: #202020;
          --color-slate: #3a3a3a;
          --color-pewter: #505050;
          --color-steel: #606060;
          --color-ash: #7e7e7e;
          --color-fog: #b4b4b4;
          --color-chalk: #d9d9d9;
          --color-paper: #eeeeee;
          --color-ember: #da5c2c;
        
          /* Typography — Font Families */
          --font-berkeleymono: 'BerkeleyMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.71;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.56;
          --text-heading: 20px;
          --leading-heading: 1.4;
          --text-heading-lg: 24px;
          --leading-heading-lg: 1.33;
          --text-display: 32px;
          --leading-display: 1.25;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --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-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40px;
          --card-padding: 32px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 2px;
          --radius-icons: 9999px;
          --radius-inputs: 2px;
          --radius-buttons: 2px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-void: #000000;
          --surface-carbon: #111111;
          --surface-graphite: #191919;
          --surface-iron: #202020;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void: #000000;
          --color-carbon: #111111;
          --color-graphite: #191919;
          --color-iron: #202020;
          --color-slate: #3a3a3a;
          --color-pewter: #505050;
          --color-steel: #606060;
          --color-ash: #7e7e7e;
          --color-fog: #b4b4b4;
          --color-chalk: #d9d9d9;
          --color-paper: #eeeeee;
          --color-ember: #da5c2c;
        
          /* Typography */
          --font-berkeleymono: 'BerkeleyMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.71;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.56;
          --text-heading: 20px;
          --leading-heading: 1.4;
          --text-heading-lg: 24px;
          --leading-heading-lg: 1.33;
          --text-display: 32px;
          --leading-display: 1.25;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        }