# Blueprint Grid 24px 헤어라인 도트/라인 그리드를 의도적으로 노출하고 콘텐츠를 격자에 스냅시키는 청사진형 웹 스타일 — 흑백 양극에 단 하나의 시그널 레드. - taxonomy: blueprint · blueprint, grid-exposed, monospace-label, monochrome, technical, crosshair-marker · complexity=medium - page types: landing, docs, marketing, dashboard - best for: 개발자 도구·인프라 SaaS 랜딩, 기술 문서 사이트, 시스템·엔지니어링 포트폴리오 - avoid for: 따뜻하고 감성적인 라이프스타일 브랜드, 일러스트·컬러 중심 소비자 앱, 그리드를 숨겨야 하는 미니멀 매거진 - provenance: authored (design-diversity 팩 'web-blueprint-grid' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Blueprint Grid — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 0px; --font-sans: 'IBM Plex Sans', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; --font-display: 'IBM Plex Sans', 'Inter', system-ui, sans-serif; --spacing: 24px; --shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0.145 0 0) 0%, transparent); --ks-display-weight: 600; --ks-display-tracking: -0.02em; --background: oklch(0.985 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.145 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.955 0 0); --secondary-foreground: oklch(0.269 0 0); --muted: oklch(0.967 0 0); --muted-foreground: oklch(0.528 0 0); --accent: oklch(0.626 0.193 23); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.626 0.193 23); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.925 0 0); --input: oklch(0.925 0 0); --ring: oklch(0.626 0.193 23); --chart-1: oklch(0.626 0.193 23); --chart-2: oklch(0.145 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.715 0 0); --chart-5: oklch(0.870 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.187 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.187 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.145 0 0); --secondary: oklch(0.239 0 0); --secondary-foreground: oklch(0.937 0 0); --muted: oklch(0.218 0 0); --muted-foreground: oklch(0.633 0 0); --accent: oklch(0.626 0.193 23); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.626 0.193 23); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.626 0.193 23); --chart-1: oklch(0.626 0.193 23); --chart-2: oklch(0.985 0 0); --chart-3: oklch(0.633 0 0); --chart-4: oklch(0.439 0 0); --chart-5: oklch(0.269 0 0); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

// INTRO — x: 24 / y: 48

Snap every block
to the grid.

The hairline grid is exposed, not hidden. Division is 1px rules and corner crosshairs — never shadow.

Deploy → Read docs
+ + + +

[01]

Edge to edge

Corners snap to grid intersections. The red index marks the active node.

+ + + +

[02]

One signal

A single red, under five percent of the surface, used only as punctuation.

+ + + +

[03]

1px only

Every division is a hairline. Radius stays zero; shadows are banned.

w: 1200 / cols: 12 / cell: 24 — end of section

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/blueprint-grid.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `