Reticle Aesthetic

Reticle / Sigil Aesthetic

The Agent Machines landing page is an engineering instrument panel — hairline borders, hatched margin rails, corner cross marks, monospaced readouts, and agent-colored hover overlays on a near-black (dark) or white (light) ground. Animation budget is minimal: hand-rolled React timers, CSS keyframes, and R3F wireframes. No GSAP, no Framer Motion.

Design Tokens

All colors use var(--ret-*) from web/app/globals.css. Never use raw hex for backgrounds/borders/text — always resolve through tokens.

Agent hues (dynamic, applied via inline style):

• Hermes: #7c8cf8
• OpenClaw: #e5443b
• Claude: #d4a574
• Codex: #4ae0a0
• Cursor: #f5c542 / var(--ret-purple)

Typography

• Body/UI: Nacelle (--font-sans) — 14px base, font-feature-settings: "ss01", "cv11", "tnum"
• Headlines: .ret-display — font-weight: 600; letter-spacing: -0.02em; line-height: 1.05
• Editorial serif: .ret-serif — Instrument Serif italic, reserved moments only
• Labels: ReticleLabel — 11px, uppercase, tracking-[0.2em], --ret-text-muted
• Mono: --font-mono — Geist Mono / JetBrains Mono stack
• Fluid headings: text-[clamp(2rem,5.5vw,4.5rem)]

Layout Constants

• --ret-content-max: 1200px — centered content column
• --ret-rail-offset: 4rem — hatched margin width
• --ret-card-radius: 0px — sharp outer edges everywhere
• Inner cards use rounded-lg — the inset instrument look

Page Shell

<ReticlePageGrid>        {/* hatched margins + overflow-x: clip */}
  <ReticleNavbar />      {/* sticky, backdrop-blur */}
  <main>
    <ReticleSection>     {/* content max 1200px */}
      {/* section content */}
    </ReticleSection>
    <ReticleSpacer />    {/* hairline + corner crosses */}
    {/* next section... */}
  </main>
  <Footer />
</ReticlePageGrid>

Margin rails: repeating-linear-gradient(45deg, var(--ret-rail) 0 1px, transparent 1px 6px)

Grid Construction

Hero and feature sections use CSS Grid with a narrow left rail + N content columns:

<div className="grid grid-cols-4 auto-rows-auto md:grid-cols-[4.5rem_repeat(7,1fr)_4.5rem]">

• Column 1: narrow rail (agent selector or tool clusters)
• Columns 2–8: content cells
• Column 9: right edge rail
• Mobile: grid-cols-4, hide rail + rightmost cells with hidden md:block

Cell Component (core primitive)

Every grid cell — even empty decorative ones — wraps in Cell:

<Cell
  action="provisioning VM..."   // monospaced action label
  agent={agent}                 // current active agent
  hue={hue}                     // current agent color
  hoverVisual={<HoverGlow color={hue} />}
  cellAgent={CELL_AGENTS[0]}    // which agent "owns" this cell
  toolIcon="shell"              // optional tool/service icon
>
  {children}
</Cell>

Cell anatomy:

• Outer: border-b border-r border-[var(--ret-border)] — hairline on bottom + right
• Hover overlay: absolute inset-[6px] rounded-lg opacity-0 → opacity-100
  • Tinted background: ${ca.hue}0a
  • Visual effect fills the overlay
  • Pulsing dot: top-right, animate-pulse, agent hue + boxShadow
  • Agent label: bottom-left (logo + service/tool icon)
  • Action string: bottom-right, font-mono text-[8px], agent hue

Border deduplication:

• Last column: !border-r-0
• Last row: !border-b-0
• Adjacent to full-bleed hairline: remove matching border

Cards Inside Cells

<Cell ...>
  <div className="h-full p-1.5">
    <div className="h-full rounded-lg border border-[var(--ret-border)] bg-[var(--ret-bg)]">
      {/* content */}
    </div>
  </div>
</Cell>

• Padding: p-1.5 (6px)
• Card: rounded-lg border border-[var(--ret-border)] bg-[var(--ret-bg)]
• 3D viewports: use bg-[var(--ret-bg-soft)] + corner cross marks
• Decorative/empty cells: same card structure, add nyx-lines texture at opacity-0 dark:opacity-20

Full-Width Hairline System

Hairlines are the dominant structural element — they appear at every level of the hierarchy: between page sections, inside component grids, as cell borders, and as full-bleed rules that escape their container. The system has four distinct mechanisms that work together:

1. Page-level spacers (ReticleSpacer)

Between every major section. A full-width border-y strip with + cross marks pinned at the content-column edges:

<ReticleSpacer />           {/* 20px hairline strip + 4 corner crosses */}
<ReticleSpacer hatch />     {/* same, but filled with 45° hatch pattern */}

Implementation:

<div
  className="relative w-full border-y border-[var(--ret-border)]"
  style={{ height: "20px" }}
  aria-hidden="true"
>
  {/* Optional hatch fill */}
  {hatch && (
    <div className="absolute inset-0 opacity-60" style={{
      backgroundImage: "repeating-linear-gradient(45deg, var(--ret-rail) 0 1px, transparent 1px 6px)"
    }} />
  )}
  {/* Cross marks at content-column intersections */}
  <ReticleCross style={{ top: "-5px", left: "calc(50% - var(--ret-content-max) / 2 - 5px)" }} />
  <ReticleCross style={{ top: "-5px", right: "calc(50% - var(--ret-content-max) / 2 - 5px)" }} />
  <ReticleCross style={{ bottom: "-5px", left: "..." }} />
  <ReticleCross style={{ bottom: "-5px", right: "..." }} />
</div>

The crosses are SVG + marks (ReticleCross) — two perpendicular lines stroked in var(--ret-cross), sized at crossArm * 2 (default 10px), centered exactly on the hairline/column intersection.

2. Full-bleed hairlines inside components

When a hairline must span the entire viewport width (not just the content column), use absolute positioning with 200vw width centered at -50vw:

<div
  className="pointer-events-none absolute top-0 z-30 h-px"
  style={{ left: "-50vw", width: "200vw", background: "var(--ret-border)" }}
/>

Used in the hero heading card (top + bottom), and anywhere a cell needs a rule that visually connects to the page-grid margin rails. The page shell uses overflow-x: clip (not hidden — clip doesn't create a new stacking context) so these extend to viewport edges cleanly.

When to use: A cell or component needs a line that reads as part of the page structure, not just its own border. The heading card uses two of these to create a band that reads as a full-width stripe.

Deduplication: Cells adjacent to a full-bleed hairline must remove their own matching border: !border-t-0 or !border-b-0.

3. Inline horizontal rules (ReticleHRule)

Section-internal dividers with four variants:

<ReticleHRule variant="plain" />   {/* single hairline, edge to edge within content */}
<ReticleHRule variant="cross" />   {/* hairline with + mark in center (default) */}
<ReticleHRule variant="hatch" />   {/* border-y strip filled with 45° hatch, h-6 */}
<ReticleHRule variant="label">AGENTS</ReticleHRule>  {/* hairlines flanking centered text */}

The "label" variant creates the pattern:

─────────── AGENTS ───────────

Using h-px flex-1 bg-[var(--ret-border)] on both sides of the text.

4. Cell-level borders (grid lines)

Every Cell in the hero/feature grids contributes to the grid-line mesh:

className="border-b border-r border-[var(--ret-border)]"

This creates a continuous grid of hairlines where:

• Each cell draws its bottom and right border
• The grid container has no padding — cells are edge-to-edge
• Edges are deduplicated: last column gets !border-r-0, last row gets !border-b-0
• border-y or border-t on hatch accent strips within components (e.g. FleetDemo's 1px hatch bar)

5. Component-internal hairlines

Inside cards and panels, hairlines separate zones:

{/* Dashed internal divider */}
<div className="border-b border-dashed border-[var(--ret-border)]" />

{/* Solid footer divider */}
<div className="border-t border-[var(--ret-border)]" />

{/* Hatch accent strip (1px tall) */}
<div className="relative h-1 w-full overflow-hidden border-y border-[var(--ret-border)]">
  <div className="absolute inset-0 opacity-40" style={{
    backgroundImage: "repeating-linear-gradient(45deg, var(--ret-rail) 0 1px, transparent 1px 6px)"
  }} />
</div>

Dashed vs solid: Dashed borders (border-dashed) are used only for internal card subdivisions (resource stats, identity rows) and the rules flanking headline text. All structural/grid borders are solid.

6. Framed panels (ReticleFrame)

Bordered container with + cross marks pulled outside the border at all four corners:

<ReticleFrame className="p-6">
  {children}
</ReticleFrame>

Implementation: border border-[var(--ret-border)] bg-[var(--ret-bg)] with four ReticleCross positioned at -10px (crossOffset) from each corner so the + center sits exactly on the corner point.

Hierarchy summary

Viewport edge
│
├─ ReticlePageGrid margin rails (absolute, full-height, hatched)
│   │
│   ├─ ReticleSpacer (border-y, full content-width, + crosses at column edges)
│   │
│   ├─ Full-bleed hairlines (200vw absolute, escapes content column)
│   │
│   ├─ ReticleHRule (content-width, with cross/hatch/label variants)
│   │
│   ├─ Cell borders (border-b + border-r, forms grid mesh)
│   │
│   └─ Component internals (border-t, border-b, border-dashed for subdivisions)
│
└─ overflow-x: clip on page shell (clips rails + bleed hairlines at viewport)

Rules for new hairlines

1. Between sections → <ReticleSpacer /> (always, never skip)
2. Inside a section, full-bleed → absolute h-px + 200vw + z-30
3. Inside a section, content-width → <ReticleHRule variant="..." />
4. Grid cells → border-b border-r on each cell, deduplicate edges
5. Inside a card → border-t or border-b (solid for structure, dashed for subdivision)
6. Accent strips → h-1 border-y with hatch fill at reduced opacity
7. Never use <hr> directly — always use a Reticle primitive

Hover Visual Primitives

All tinted in the active agent's hue — they shift color as the agent cycles.

Spec Readout Cells

Small instrument-readout cells:

<div className="flex h-full flex-col items-center justify-center px-2 py-4">
  <span className="text-[7px] uppercase tracking-[0.2em] text-[var(--ret-text-muted)]">BOOT</span>
  <span className="mt-1 text-[13px] font-medium tabular-nums text-[var(--ret-text-dim)]">~30s</span>
</div>

Capability Chips

Agent-hue-tinted pills:

<span
  className="inline-flex items-center gap-1 border px-2 py-0.5 text-[10px] uppercase tracking-[0.15em] text-[var(--ret-text-muted)] transition-colors"
  style={{ borderColor: `${hue}33`, background: `${hue}08` }}
>
  <span className="h-1 w-1 rounded-full" style={{ background: hue }} />
  {cap}
</span>

Corner Crosshair Marks

Used on banners, 3D viewports, spacers:

<span className="pointer-events-none absolute left-1.5 top-1.5 h-1.5 w-1.5 border-l border-t border-[var(--ret-cross)] opacity-40" />

For larger viewport marks (2px borders, h-2 w-2), used on the 3D card.

3D Scenes (React Three Fiber)

• HeroOrbitScene: wireframe dodecahedron + torus rings center, 5 agent logos orbiting on a sphere
• WireframeShapes: per-cell mini wireframes (Dashboard, Loadout, Hosts, Environment)
• Canvas: DPR ≤ 1.5, antialias OFF (crisp 1px lines), powerPreference: "low-power"
• All geometry is lineSegments + wireframeGeometry + lineBasicMaterial
• No particles, no custom shaders, no solid meshes

Animation Budget

No GSAP. No Framer Motion. No scroll hijacking.

Global FX

• Grain: .ret-grain — fixed SVG fractal noise, mix-blend-mode: multiply (light) / screen (dark), opacity 0.035/0.06
• Wing backgrounds: theme-aware PNG textures via WingBackground component
• Nyx-lines texture: bg-nyx-lines.png at opacity-0 dark:opacity-20 inside decorative card cells

Do NOT

• Use border-dashed for structural borders (all borders are solid hairlines; dashed only flanks headlines)
• Add padding to grid containers (cells fill edge-to-edge)
• Use overflow-hidden on hero wrapper (breaks full-bleed lines; use overflow-x: clip)
• Mix style={{}} with Tailwind for static values (style only for dynamic agent hue)
• Create cells without hover behavior (every cell gets a hoverVisual and an action)
• Use border-radius on outer grid structure (only inner cards get rounded-lg)
• Import animation libraries (budget is timers + CSS + useFrame)
• Use gradients/shadows on backgrounds (ground is flat token color + subtle grain)