aaru___style_reference:
  info: "> Particle-field observatory at midnight"

  theme: "dark"

  info: "Aaru operates as a dark-mode scientific observatory: pure black canvas interrupted by one vivid electric-blue section and a single acid-yellow-green accent that reads like an instrument-panel indicator light. Typography is deliberately inverted from convention — weight 330 ultra-light runs through every role, body text carries positive letter-spacing (0.025–0.080em) for a data-label cadence, and only display headings tighten to negative tracking. Surfaces are flat and shadowless; hierarchy is built through thin 1px borders, generous whitespace, and numbered annotations rather than elevation. The visual language is terminal, measured, and anti-decorative — every element earns its place like a readout on a control panel."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Black | `#000000` | `--color-void-black` | Page canvas, primary background — the dominant surface across all dark sections |"
    info: "| Carbon | `#0a0a0a` | `--color-carbon` | Elevated surface for nav borders, button outlines, and secondary structural elements against the black canvas |"
    info: "| Graphite | `#18181b` | `--color-graphite` | Subtle raised surface for cards or containers sitting on the black canvas — the lightest neutral step before chromatic sections |"
    info: "| Frost | `#ffffff` | `--color-frost` | Primary text, hairline borders on dark sections, and inverted backgrounds — the most-used color after black |"
    info: "| Ash | `#bababa` | `--color-ash` | Muted helper text, icon strokes, and secondary surface fills |"
    info: "| Smoke | `#9d9d9d` | `--color-smoke` | Medium-contrast borders, control outlines, and structural separators. Do not promote it to the primary CTA color |"
    info: "| Slate | `#858484` | `--color-slate` | Body text borders and the quietest readable gray — used where content recedes into the background |"
    info: "| Reactor Lime | `#ebfb10` | `--color-reactor-lime` | Primary action fill (CTA buttons), announcement bar background, and the sole warm accent — acid yellow-green against black creates instant focal hierarchy |"
    info: "| Plasma Blue | `#1019ec` | `--color-plasma-blue` | Section background and chromatic border accent — vivid electric violet-blue that shifts the entire page into instrument-mode for feature blocks |"

  tokens___typography:

    abcoracle___primary_ui_and_body_typeface___used_for_navigation__body_copy__labels__buttons__and_medium_scale_headings__weight_330_ultra_light_is_the_default__400_is_reserved_for_body_paragraphs_and_readable_text_blocks__positive_letter_spacing_on_sizes__16px_creates_a_data_label_cadence_____font_abcoracle:
      - "**Substitute:** Inter, Söhne, or General Sans"
      - "**Weights:** 330, 400"
      - "**Sizes:** 12, 13, 14, 15, 16, 34, 50"
      - "**Line height:** 1.25–1.50"
      - "**Letter spacing:** -0.025em at 50px and 34px, 0.025–0.040em at 12–16px"
      - "**OpenType features:** `\"ss01\" on, \"tnum\" on, \"ss02\" on`"
      - "**Role:** Primary UI and body typeface — used for navigation, body copy, labels, buttons, and medium-scale headings. Weight 330 ultra-light is the default; 400 is reserved for body paragraphs and readable text blocks. Positive letter-spacing on sizes ≤16px creates a data-label cadence."

    gtpantheon___display_and_subheading_typeface___weight_330_only__paired_with_tight_negative_tracking__used_for_section_openers_and_mid_scale_titles__the_contrast_between_its_lighter_cut_and_abcoracle_s_330_creates_two_distinct_text_registers_without_using_bold_____font_gtpantheon:
      - "**Substitute:** GT Pantheon (closest free alternative: Söhne Schmal, or Suisse Int'l Light)"
      - "**Weights:** 330"
      - "**Sizes:** 20, 30, 40"
      - "**Line height:** 1.20–1.25"
      - "**Letter spacing:** -0.050em at 40px, -0.025em at 20–30px"
      - "**Role:** Display and subheading typeface — weight 330 only, paired with tight negative tracking. Used for section openers and mid-scale titles. The contrast between its lighter cut and abcOracle's 330 creates two distinct text registers without using bold."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | 0.96px | `--text-caption` |"
      info: "| body | 15px | 1.5 | 0.6px | `--text-body` |"
      info: "| subheading | 20px | 1.25 | -0.5px | `--text-subheading` |"
      info: "| heading-sm | 30px | 1.25 | -0.75px | `--text-heading-sm` |"
      info: "| heading | 34px | 1.25 | -0.85px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.2 | -2px | `--text-heading-lg` |"
      info: "| display | 50px | 1.2 | -1.25px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      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: "| 28 | 28px | `--spacing-28` |"
      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` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 6px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80px"
      - "**Card padding:** 30px"
      - "**Element gap:** 8px"

  components:

    announcement_bar:
      role: "Top-of-page alert bar"

      info: "Full-bleed #ebfb10 background, 12–14px abcOracle weight 330, uppercase, letter-spacing 0.040–0.080em, color #000000. Height ~40px. Contains a short label and a 'READ MORE →' link. Padding 10px top/bottom."

    ghost_navigation_button:
      role: "Secondary nav action (LOG IN)"

      info: "Transparent background, 1px white border, white text, abcOracle 330 at 12–14px, uppercase, letter-spacing 0.040em. Padding 12px 32px. No radius."

    filled_navigation_button:
      role: "Primary nav action (CONTACT)"

      info: "White background (#ffffff), black text, abcOracle 330 at 12–14px, uppercase, letter-spacing 0.040em. Padding 12px 32px. No radius. Inverted from the ghost variant to create a clear two-step nav hierarchy."

    hero_headline:
      role: "Primary page headline"

      info: "abcOracle weight 330 at 50px, line-height 1.20, letter-spacing -0.025em, white on #000000. Sentence-case, not uppercase — the whisper-weight does the typographic work. Left-aligned, max-width ~600px."

    section_statement:
      role: "Mid-page section opener"

      info: "White text on #1019ec background, abcOracle 330 at ~34–40px, tight tracking. Max-width ~480px, left-aligned. Sets the tone for each feature block."

    numbered_annotation_row:
      role: "Labeled section header with index"

      two_part_label: "a small numeric prefix (01–04) in abcOracle 330 at 13px, #ffffff, paired with an uppercase label at 12–13px, letter-spacing 0.040em. A thin 1px white horizontal rule sits above the row. Used as section markers inside the blue block."

    accordion_body_text:
      role: "Expandable content under a numbered row"

      info: "White text on #1019ec, abcOracle 400 at 15px, line-height 1.50, normal tracking. Indented to align with the label, not the number. Max-width ~560px for comfortable reading width."

    filled_cta_button:
      role: "Primary action button"

ebfb10_background__000000_text__abcoracle_330_at_14px__uppercase__letter_spacing_0_040em__padding_14px_30px__no_radius__the_acid_green_on_black_pairing_is_the_highest_contrast_action_in_the_system:

    hairline_divider:
      role: "Section separator"

      1px_solid_line__color_shifts_by_section: "#ffffff on dark, #000000 on blue. Full-width within the content column, used above numbered rows and below group labels."

    particle_scatter_visualization:
      role: "Decorative data graphic in hero"

      info: "Hundreds of small white/gray dashes and dots scattered across a vertical field on the right side of the hero. Functions as abstract brand mark — suggests population granularity. No fixed grid; reads as a scatter plot of human data points."

    muted_link:
      role: "Inline or footer text link"

      info: "abcOracle 330 at 13–14px, color #9d9d9d, no underline by default. Hover state lightens to #ffffff. Letter-spacing inherits the body cadence at 0.025–0.040em."

    logo_lockup:
      role: "Brand mark in navigation"

      info: "Small geometric icon (4-dot cluster) + lowercase wordmark 'aaru' in abcOracle 330 white, 16px. Sits left-aligned in the nav bar."

  do_s_and_don_ts:

    do:
      - "Use weight 330 as the default text weight for all UI elements; reserve weight 400 only for body paragraphs longer than two lines"
      - "Apply positive letter-spacing (0.025–0.080em) to all text at 16px and below; apply negative tracking (-0.025 to -0.050em) at 20px and above"
      - "Use #ebfb10 only for the single most important action per view — announcement bars and primary CTAs only"
      - "Use #1019ec as a full-bleed section background to signal a tonal shift; never use it as a small accent fill"
      - "Use 1px borders in inverted colors (white on dark, black on blue) instead of shadows to separate layers"
      - "Maintain an 8px base-unit rhythm: all padding and gaps should resolve to 8, 10, 12, 16, 20, 24, 30, 32, or 40px"
      - "Keep corner radii at 0px for buttons, inputs, and tags; the only permitted radius is 6px for card surfaces"

    don_t:
      - "Do not use bold (600+) or semibold (500+) weights — the system reads through weight contrast between 330 and 400 only"
      - "Do not apply drop shadows, box-shadows, or glow effects to any element"
      - "Do not introduce additional chromatic colors — the palette is exactly black, white, three grays, lime, and electric blue"
      - "Do not use the blue or lime as text color on light backgrounds; both are background or button-fill colors only"
      - "Do not center-align body text — the system reads left-aligned throughout, with asymmetric compositions"
      - "Do not use border-radius above 6px on any component — the system is angular and terminal"
      - "Do not use uppercase letter-spacing on text below 12px; the smallest sizes already carry enough cadence"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void Canvas | `#000000` | Base page background — the dominant surface |"
    info: "| 1 | Carbon | `#0a0a0a` | Subtle elevation for borders and outlines on the dark canvas |"
    info: "| 2 | Graphite | `#18181b` | Container surface for cards or callouts sitting on black |"
    info: "| 3 | Plasma Blue | `#1019ec` | Chromatic section break — full-bleed feature background |"

  elevation:

    info: "The design intentionally avoids shadows and drop-shadow elevation. Hierarchy is created through three mechanisms only: surface color shifts (black → graphite → blue), 1px hairline borders in contrasting colors, and generous whitespace. This flat approach reinforces the instrument-panel metaphor — real data readouts don't cast shadows."

  imagery:

    info: "Imagery is abstract and data-driven, not photographic. The hero features a particle-scatter visualization — hundreds of small dashes and dots forming a vertical cloud that suggests population data points or agent trajectories. The visual treatment is monochromatic (white/gray marks on black) with no photographic subjects, no people, no lifestyle shots. The overall image role is atmospheric and brand-defining rather than explanatory — it signals the product's domain (simulation, agents, data) without illustrating a specific use case. Decorative graphics are flat, sharp-edged, and terminal in feel — no gradients, no blurs, no organic shapes."

  layout:

    info: "The page alternates between two full-bleed tonal zones: a dominant black canvas and a single vivid blue section. The hero is dark with a left-aligned headline and a right-side particle visualization; the body shifts to #1019ec for the feature manifesto, then returns to black. Content within each zone is constrained to a max-width of ~1280px and left-aligned. The blue section uses a numbered accordion pattern: four labeled rows (01–04) stacked vertically, with thin dividers between them and expandable body text under the first row. Vertical rhythm is generous — 80px section gaps, 30px card padding, 8px element gaps — creating a spacious, slow-reading cadence. Navigation is a minimal top bar: logo left, three text links + two buttons right, sitting over a yellow-green announcement strip."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #ffffff (primary), #9d9d9d (muted), #000000 (on light/blue surfaces)"
    - "background: #000000 (canvas), #1019ec (feature section), #ebfb10 (announcement/CTA)"
    - "border: #ffffff (on dark), #000000 (on blue), #9d9d9d (muted)"
    - "accent: #ebfb10 (lime — CTA fill)"
    - "primary action: #ebfb10 (filled action)"

    info: "Example Component Prompts:"

    - "Build a hero section on #000000 canvas. Headline at 50px abcOracle weight 330, #ffffff, letter-spacing -1.25px, line-height 1.20, left-aligned, max-width 600px. Subtext at 15px abcOracle weight 400, #9d9d9d, letter-spacing 0.375px. A filled CTA button: #ebfb10 background, #000000 text, 14px abcOracle 330 uppercase, letter-spacing 0.56px, padding 14px 30px, 0px radius. To the right, a particle-scatter graphic: ~200 small white and #bababa dashes/dots distributed across a vertical 400×600px field."

    - "Build a numbered accordion row on #1019ec background. A 1px white hairline divider sits above. The row shows '01' in abcOracle 330 at 13px #ffffff, followed by an uppercase label at 12px abcOracle 330, letter-spacing 0.48px, #ffffff. Body text below at 15px abcOracle 400, #ffffff, line-height 1.50, max-width 560px. Vertical spacing between rows: 40px."

    - "Build a navigation bar on #000000. Left: a 4-dot cluster icon + 'aaru' wordmark in abcOracle 330 at 16px #ffffff. Right: three text links (HOME, PRODUCTS, ABOUT) in abcOracle 330 at 13px #ffffff, letter-spacing 0.52px, with 32px column gap. Then a ghost button: 1px #ffffff border, transparent fill, 12px abcOracle 330 uppercase white, padding 12px 32px, 0px radius. Then a filled button: #ffffff background, #000000 text, same type spec, same padding and radius."

    - "Build an announcement bar at the very top. Full-bleed #ebfb10 background, 40px tall. Centered text in abcOracle 330 at 12px #000000, uppercase, letter-spacing 0.96px, with a 'READ MORE →' link inline."

    - "Build a muted footer link list on #000000. Items in abcOracle 330 at 13px, color #9d9d9d, letter-spacing 0.325px, stacked vertically with 10px row gap. A 1px #0a0a0a hairline sits above the list. No icons, no underlines."

  similar_brands:

    - "**Linear** — Same dark-mode scientific aesthetic with ultra-light typography, generous whitespace, and flat borderless surfaces"
    - "**Vercel** — Same minimal terminal-style navigation, weight 300 display type, and reliance on color contrast over shadows for hierarchy"
    - "**Anthropic** — Same observatory-like dark canvas with a single chromatic accent color used for primary actions and announcement bars"
    - "**Runway** — Same data-visualization-forward hero treatment and dark-canvas + single-vivid-accent color logic"
    - "**Weights & Biases** — Same instrument-panel feel with numbered annotations, tracked uppercase labels, and flat hairlines instead of cards"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-black: #000000;
          --color-carbon: #0a0a0a;
          --color-graphite: #18181b;
          --color-frost: #ffffff;
          --color-ash: #bababa;
          --color-smoke: #9d9d9d;
          --color-slate: #858484;
          --color-reactor-lime: #ebfb10;
          --color-plasma-blue: #1019ec;
        
          /* Typography — Font Families */
          --font-abcoracle: 'abcOracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtpantheon: 'gtPantheon', 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.96px;
          --text-body: 15px;
          --leading-body: 1.5;
          --tracking-body: 0.6px;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.5px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.75px;
          --text-heading: 34px;
          --leading-heading: 1.25;
          --tracking-heading: -0.85px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -2px;
          --text-display: 50px;
          --leading-display: 1.2;
          --tracking-display: -1.25px;
        
          /* Typography — Weights */
          --font-weight-w330: 330;
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 30px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 6px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 6px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-void-canvas: #000000;
          --surface-carbon: #0a0a0a;
          --surface-graphite: #18181b;
          --surface-plasma-blue: #1019ec;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-black: #000000;
          --color-carbon: #0a0a0a;
          --color-graphite: #18181b;
          --color-frost: #ffffff;
          --color-ash: #bababa;
          --color-smoke: #9d9d9d;
          --color-slate: #858484;
          --color-reactor-lime: #ebfb10;
          --color-plasma-blue: #1019ec;
        
          /* Typography */
          --font-abcoracle: 'abcOracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtpantheon: 'gtPantheon', 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.96px;
          --text-body: 15px;
          --leading-body: 1.5;
          --tracking-body: 0.6px;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.5px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.75px;
          --text-heading: 34px;
          --leading-heading: 1.25;
          --tracking-heading: -0.85px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -2px;
          --text-display: 50px;
          --leading-display: 1.2;
          --tracking-display: -1.25px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 6px;
        }