Reticle Design System

Reticle / Sigil Design System

A structural-visibility aesthetic inspired by engineering instruments: grid lines, margin rails, and cross marks at intersections make the layout grid visible as a design element.

Tokens (CSS custom properties)

:root {
  --ret-bg:                #ffffff;
  --ret-bg-soft:           #f0f0f2;
  --ret-surface:           #f5f5f5;
  --ret-surface-hover:     #ebebeb;
  --ret-text:              rgba(0,0,0,0.90);
  --ret-text-secondary:    #52525b;
  --ret-text-dim:          rgba(0,0,0,0.55);
  --ret-text-muted:        rgba(0,0,0,0.35);
  --ret-border:            rgba(0,0,0,0.22);
  --ret-border-hover:      rgba(0,0,0,0.36);
  --ret-border-strong:     rgba(0,0,0,0.42);
  --ret-grid:              rgba(0,0,0,0.14);
  --ret-rail:              rgba(0,0,0,0.18);
  --ret-cross:             rgba(0,0,0,0.30);
  --ret-purple:            #AAA5E6;
  --ret-purple-glow:       rgba(170,165,230,0.10);
  --ret-green:             #22c55e;
  --ret-amber:             #f59e0b;
  --ret-red:               #ef4444;
}
.dark {
  --ret-bg:                #09090b;
  --ret-bg-soft:           #111113;
  --ret-surface:           #111113;
  --ret-surface-hover:     #1a1a1e;
  --ret-text:              rgba(255,255,255,0.90);
  --ret-text-secondary:    #a1a1aa;
  --ret-text-dim:          rgba(255,255,255,0.50);
  --ret-text-muted:        rgba(255,255,255,0.30);
  --ret-border:            rgba(255,255,255,0.16);
  --ret-border-hover:      rgba(255,255,255,0.26);
  --ret-border-strong:     rgba(255,255,255,0.32);
  --ret-grid:              rgba(255,255,255,0.08);
  --ret-rail:              rgba(255,255,255,0.14);
  --ret-cross:             rgba(255,255,255,0.22);
  --ret-purple:            #D2BEFF;
  --ret-green:             #4ade80;
  --ret-amber:             #fbbf24;
  --ret-red:               #f87171;
}

Components consume only var(--ret-*), never raw values.

Sizes

export const RETICLE_SIZES = {
  gridCell: 48,
  crossArm: 10,
  crossStroke: 1.5,
  railGap: 24,
  contentMax: 1280,
  // Reticle is sharp corners. The token is symbolic; nothing rounds.
  cardRadius: 0,
  hairline: 1,
} as const;

Page grid (the macro layout)

Every page is a 5-column CSS grid:

margin | gutter | content | gutter | margin
1fr    | 24px   | min(0, 1280px) | 24px | 1fr

The margins and gutters render the grid lines that define the aesthetic. The center content column is where actual content lives. Gutters show grid cells (48x48); margins show repeating horizontal lines at 16px intervals.

<ReticlePageGrid> provides this for the whole document. <ReticleSection> auto-detects when it's nested and skips re-rendering the columns.

Components

Typography rules

• Headings: clean sans-serif, e.g. "Geist Sans", "Inter", system stack.
• Mono everywhere structural matters: labels, badges, code, metrics, IDs. "Geist Mono", "JetBrains Mono", system mono.
• Tracking on labels: tracking-[0.2em] uppercase.
• Body text: text-[var(--ret-text)]. Dim text: text-[var(--ret-text-dim)]. Muted: text-[var(--ret-text-muted)].

Authoring rules

1. No raw colors. Always reference var(--ret-*).
2. Borders, not shadows. Use border border-[var(--ret-border)]. Box-shadows only for the purple glow on primary buttons.
3. No rounded corners. Sharp edges everywhere -- cards, badges, status pills, code blocks. The --ret-card-radius token resolves to 0px. Never write rounded-md, rounded-full, etc.
4. No margins between sections. Use a border-b on the section above, or a ReticleHRule, or a hatch strip. The grid is what separates content; whitespace between bordered cards reads as accidental.
5. Hatch the empty. Spacer cells, dividers, and any "decorative emptiness" gets diagonal hatching from ReticleHatch. Never leave a plain blank.
6. Cross marks are structural. Place them at the intersections of the page grid and content (use ReticleFrame for automatic corner crosses), never decoratively.
7. Mono for technical, sans for prose. Mono signals "system fact", sans signals "narrative". Mix freely.
8. One purple, used sparingly. Primary CTAs only. Never multiple purple regions per page.
9. Hairlines, never thick borders. Border width is 1px (--ret-hairline). Doubled-up borders happen at grid intersections; that's the look.
10. High-taste internal spacing. Inside any frame: generous vertical padding (py-6 minimum on cards), tight horizontal alignment to the grid. The frame is the boundary; whitespace lives inside.

Page composition pattern

<ReticlePageGrid>
  <ReticleNavbar variant="full">{/* logo + links */}</ReticleNavbar>

  <ReticleSection borderTop={false} contentClassName="py-24">
    <ReticleLabel>HERO</ReticleLabel>
    <h1 className="mt-3 text-5xl font-semibold tracking-tight">...</h1>
    <p className="mt-4 max-w-prose text-[var(--ret-text-dim)]">...</p>
    <div className="mt-8 flex gap-3">
      <ReticleButton variant="primary">Deploy</ReticleButton>
      <ReticleButton variant="secondary">Read docs</ReticleButton>
    </div>
  </ReticleSection>

  <ReticleSection>
    <ReticleLabel>FEATURES</ReticleLabel>
    <ReticleGrid columns={3}>
      <ReticleGridCell>...</ReticleGridCell>
    </ReticleGrid>
  </ReticleSection>
</ReticlePageGrid>