# Blueprint Grid

## Overview
A drafting-blueprint aesthetic for the web: a 1px hairline dot/line grid is laid across the entire page and every content block snaps to it. The grid texture is the protagonist — never hidden, deliberately exposed. Monospace-inflected labels, coordinates, and dimension captions reinforce the technical feel; section boundaries are drawn with 1px rules and corner crosshair (+) markers rather than shadows. Color is black/white polarity plus a single signal red held under 5% area. Ink-black dark mode is supported, but one page commits to one mode.

## Colors & Roles
Monochrome foundation: `background` off-white (`#fafafa`), `foreground` near-black (`#0a0a0a`), `card` pure white surface. Separation is by 1px hairline `border` (`#e6e6e6`), never by shadow. `muted-foreground` is a mid grey (`#6b6b6b`) for secondary text and coordinate captions. A single `accent`/`destructive` signal red (oklch ~0.626/0.193/23, `#e5484d`) is a punctuation mark — CTAs, active nodes, hovered borders, and crosshair highlights only, never a large fill. `ring` uses the same red so focus reads as a live node. Charts run black → greys with red as chart-1.

## Typography Rules
Headings and body are IBM Plex Sans (Inter fallback) with slightly tight tracking so the sans reads as engineered. Labels, code, and captions unify on JetBrains Mono (IBM Plex Mono fallback), uppercase, wide-ish tracking (0.04em), and carry monospace prefixes like `// INTRO`, `[01]`, or coordinate strings `x: 240 / y: 88`. Display type is `clamp(2.4rem, 5vw, 4.2rem)` weight 600, letter-spacing −0.02em, line-height 1.08. Scale ratio ≈ 1.5.

## Layout Principles
Max content width 1200px with side padding 0 so grid lines reach the edge. A base 24px cell dot/line grid repeats in the background (`background-image` / `repeating-linear-gradient`) and all content snaps to 24px multiples. Content sits on a 12-column / 24px-gutter grid; breakpoints collapse to 6 columns (768–1024px) and 1 column (<768px). Section vertical rhythm is 96px, block gap 24px. Every section and card places 12px crosshair (+) markers at its four corners, aligned to grid intersections.

## Depth & Elevation
Flat by rule. No gradients, glass, or noise. Shadows are banned entirely — division is done with 1px hairline rules and corner crosshairs. Elevation is communicated by grid alignment and borders, not by lift.

## Shapes
Zero border-radius everywhere — buttons, cards, inputs, images, diagrams. Corners are sharp; blueprints do not round. Borders stay 1px even on emphasized blocks (never 2px+).

## Component Stylings
- **Button**: radius 0, 1px solid border, monospace uppercase label, padding 12px 24px, transparent fill. Hover shifts border to signal red (160ms ease-out), no transform. Focus = 2px offset outline (`ring` red). Primary variant fills signal red with a white label — used sparingly.
- **Card**: surface (`card`) background, 1px border, radius 0. Corners snap to grid intersections with 12px crosshair markers; a `[01]` monospace index sits top-left. Hover moves the border to signal red. No shadow.
- **Input**: 1px full border or underline, radius 0, monospace label; focus border goes to signal red.
- **Nav**: hairline bottom rule, monospace uppercase links aligned like coordinate labels. Does not invert color.
- **Grid overlay**: a `repeating-linear-gradient` in the border color draws the 24px cell grid across the full page, always visible behind content.

## Motion
Subtle. Transitions 160ms ease-out. Hover recolors borders and crosshairs from grid-line to signal red with no transform. On scroll-in, grid lines draw first (`opacity 0→1`, 200ms) then content fades 120ms later. `prefers-reduced-motion: reduce` shows everything instantly.

## Do's and Don'ts
**Do:** expose the background grid; snap all content to 24px multiples and align card corners to intersections; write labels/coordinates in monospace uppercase with `//` and `[01]` prefixes; place crosshair markers at section/card corners; keep the signal red under 5% area.
**Don't:** hide the grid (it becomes plain Swiss minimal); use border-radius > 0 or shadows; thicken borders past 1px; use gradients or any chroma beyond the signal red (no purple/indigo); float content off the grid; use emoji, blobs, or rounded illustration, or set labels in a regular sans.

## Responsive Behavior
The 12-column grid steps to 6 columns (768–1024px) and a single column (<768px) while the 24px background grid persists at every size. Display type scales via `clamp()`. Crosshair markers and hairlines remain 1px regardless of viewport.

## Agent Prompt Guide
> Build this in the 'Blueprint Grid' style: expose a 1px hairline 24px dot/line grid across the whole page via repeating-linear-gradient in the border color, and snap every content block to 24px multiples; black-on-off-white (or ink-black dark mode) with exactly one signal red under 5% area for CTAs and active nodes, zero border-radius, no shadows, 1px hairlines and 12px corner crosshair (+) markers for all division, and JetBrains Mono uppercase labels prefixed like '// INTRO', '[01]', or 'x: 240 / y: 88'; hover shifts borders and crosshairs to the signal red with no transform.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-blueprint-grid` (an authored spec, not extracted from a live URL), so every token is `manual` confidence. Grid principle and monochrome-plus-signal token structure are Vercel-influenced but use no Geist font or brand color — fonts are the open IBM Plex Sans / JetBrains Mono (OFL) and the signal red is a pack-assigned value, not a brand color. `secondary`, `muted`, and `chart-3` are neutral greys derived from the black/white scale (declared in `tokens.colors.notes`); all other roles map to measured pack hex.