Blueprint Technical

---
name: blueprint-technical
description: Apply the Blueprint Technical visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Blueprint Technical, mentions blueprint, cyanotype, technical drawing, or describes white line-work on deep blueprint blue, faint drafting grid background, dimension callouts with arrowheads — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Blueprint Technical Design System

The cyanotype drafting print as an interface: white and pale-blue line-work on deep Prussian blue, a faint drafting grid underneath everything, dimension lines with arrowheads and measurements, uppercase condensed lettering, and a title block in the corner. Every element is drawn, not filled — the page reads as one large technical plan.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Blueprint Technical.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (blueprint, cyanotype, technical drawing, drafting style, engineering schematic, plan drawing), or describes its traits: white line-work on deep blueprint blue; faint drafting grid background; dimension callouts with arrowheads; uppercase condensed drafting lettering; title-block frames and revision tables; outline-only, no solid fills.

## Design tokens

### Color palette

- Deep cyanotype blue ground: `#0d357f` (--color-bg)
- Slightly deeper blue panels and title blocks: `#0b2e6f` (--color-surface)
- Primary line-work and text — chalk white with a cold cast: `#f0f6ff` (--color-text)
- Secondary labels, grid annotations, and revision metadata: `#9db4e0` (--color-text-muted)
- Highlighter yellow for revisions, active states, and key callouts: `#ffd23f` (--color-accent)
- Drafting grid lines and faint construction geometry: `#2b5cb8` (--color-grid)
- Drawn borders, dimension lines, and outlines: `#dbe8ff` (--color-line)

### Typography

- Display / headings: Barlow Condensed (fallback: Arial Narrow, sans-serif) (ideal: DIN 1451 (engineering drawing standard lettering), premium — use Barlow Condensed as the free substitute)
- Body: Barlow (fallback: Arial, sans-serif)
- Mono / data: Space Mono (fallback: Courier New, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.15, letter-spacing 0.06em, uppercase
- Body: line-height 1.55, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Measured like a drawing sheet: consistent margins referenced to the frame border, moderate density inside blocks, and clear space around annotated elements so dimension lines never collide.
- Border radius: none 0px — Drafting is rectilinear; circles exist only as drawn circular details, never as corner rounding.
- Border treatment: 1px solid #dbe8ff — Everything is outlined in thin drawn lines; important frames double up (1px outer + 1px inner with a 3px gap) like a sheet border.

### Shadows

- none: `none` — A blueprint is perfectly flat — depth is drawn, never cast

### Layout

- Max content width: 1280px
- A double-ruled sheet frame surrounds the page content
- A title block sits bottom-right: project name, scale, date, revision in mono
- The faint grid underlies everything; elements align to it visibly
- Sections read as numbered details (DETAIL A, SECTION B-B) with callout circles

### Effects

- Drafting grid: repeating-linear-gradient lines in #2b5cb8 at 8px, heavier line every 64px
- Dimension lines with CSS-triangle arrowheads and centered mono labels
- Dashed construction lines and center-lines (long-short-long) for decorative geometry
- Crosshatch fills (45° repeating-linear-gradient) for emphasized areas
- Slight white-ink texture: subtle noise or 0.5px blur on lines for print authenticity

### Motion

- Easing: linear; durations 200ms / 500ms / 1200ms
- Lines draw themselves in via stroke-dashoffset on first reveal
- Dimension labels type on or fade in after their lines complete
- Hover states brighten line color or add a yellow highlight; nothing lifts or scales

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0d357f;
  --color-surface: #0b2e6f;
  --color-text: #f0f6ff;
  --color-text-muted: #9db4e0;
  --color-accent: #ffd23f;
  --color-grid: #2b5cb8;
  --color-line: #dbe8ff;
  --radius-none: 0px;
  --border-default: 1px solid #dbe8ff;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: Barlow, Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.55;
  --tracking-heading: 0.06em;
  --tracking-body: 0.01em;
  --ease: linear;
  --duration-fast: 200ms;
  --duration-base: 500ms;
  --duration-slow: 1200ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600&family=Barlow:wght@400;500&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** A strip inside the top sheet border: project name uppercase-condensed at left, drawn-box links with 1px outlines at right, active item filled with highlighter yellow and dark blue text.
- **Hero:** A big drawn assembly: oversized uppercase condensed title annotated with dimension lines and mono measurements, a callout circle labeling the CTA as 'DETAIL A', all sitting on the visible grid.
- **Card:** An outlined detail block: 1px line border, uppercase header strip separated by a rule, mono metadata row, optional crosshatched corner; no fill beyond the surface blue.
- **Button (primary):** A drawn rectangle filled with accent yellow #ffd23f, deep-blue uppercase mono label, and a small dimension tick at each corner; hover thickens the outline to 2px.
- **Button (secondary):** Outline-only rectangle in line white with white uppercase label; hover adds a dashed inner outline like a selection marquee.
- **Form fields:** An empty drawn cell: 1px line border, transparent fill, mono input text in chalk white, label above in small uppercase muted blue; focus swaps the border to accent yellow.

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The dimension callout: a thin white line with arrowheads at both ends, broken in the middle by a mono measurement label ('1240px', 'REV C'), annotating real interface elements as if they were machined parts. Spend boldness here; keep everything else quiet.

## Do

- Draw everything — borders, rules, arrows — and fill almost nothing
- Annotate real UI with dimensions and detail callouts; the conceit is the charm
- Keep the grid faint but visible so alignment reads as intentional drafting
- Use highlighter yellow only for the current revision: active states and primary actions

## Don't

- Don't add shadows, gradients, or rounded corners — a print has none
- Don't over-annotate; dimension lines on every element turn the page into noise
- Don't use pure white (#ffffff) lines everywhere; the slightly blued white keeps the cyanotype feel
- Don't set long body copy in mono or condensed faces — Barlow regular carries paragraphs

## Accessibility notes

- Core pairs pass comfortably (text 12:1, muted 5.5:1, yellow 7.9:1 on the blue), but grid lines at #2b5cb8 are intentionally low-contrast decoration — never attach meaning to them.
- Uppercase condensed headings hurt readability at length; keep them under about six words.
- Line-draw animations must respect prefers-reduced-motion by rendering lines complete.

## Reference sites

- Blueprint — the reprographic process: https://en.wikipedia.org/wiki/Blueprint
- Cyanotype chemistry and history: https://en.wikipedia.org/wiki/Cyanotype
- Engineering drawing conventions: https://en.wikipedia.org/wiki/Engineering_drawing

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip blueprint-technical.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/blueprint-technical.json

Settings → Capabilities → Skills → Upload skill → blueprint-technical.zip