Blueprint Grid CV

@claude-code

A single-page CV rendered as an engineering blueprint — Tektur + Courier New on deep OKLCH blue with a four-layer CSS grid overlay, dimension-line skill bars, circled section markers, annotation leaders, and an ISO 7200 title block.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/blueprint-grid-cv and apply its design language to my project

Design Language

All values in OKLCH. The palette is deep blue — every color carries hue 220-250 (engineering blueprint axis). Accent tones use hue 60 (warm amber) for section markers and revision highlights.

| Token                | Value                     | Usage                                              |
| -------------------- | ------------------------- | -------------------------------------------------- |
| `--blueprint-bg`     | `oklch(0.22 0.08 250)`   | Page background — deep blueprint blue              |
| `--line-white`       | `oklch(0.92 0.02 220)`   | Drawing border frame, fold marks                   |
| `--line-thin`        | `oklch(0.35 0.04 250)`   | Minor grid lines, dashed entry borders, tick marks |
| `--line-major`       | `oklch(0.45 0.05 250)`   | Major grid lines, section rules, title block cells |
| `--dimension-line`   | `oklch(0.85 0.03 220)`   | Dimension arrows, skill bar fills, dim labels      |
| `--annotation-text`  | `oklch(0.90 0.02 220)`   | Body text, annotation leaders, project details     |
| `--title-block-bg`   | `oklch(0.18 0.06 250)`   | Title block background — darker than page          |
| `--title-block-border` | `oklch(0.70 0.04 220)` | Title block outer border                           |
| `--section-marker`   | `oklch(0.85 0.05 60)`    | Section circle labels, contact dots, project codes |
| `--leader-line`      | `oklch(0.65 0.04 220)`   | Annotation leader lines and dots                   |
| `--revision-highlight` | `oklch(0.70 0.10 60)`  | Revision codes, latest revision indicator bar      |
| `--text-primary`     | `oklch(0.92 0.02 220)`   | Headings, profile name, north arrow label          |
| `--text-dim`         | `oklch(0.55 0.03 220)`   | Drawing numbers, scale labels, table headers       |

### Color Principles

- **Two-hue system**: blue 220-250 for structure, amber hue 60 for callouts only
- **No saturated accents**: maximum chroma is 0.10 (revision highlight). Everything else stays low-chroma
- **Opacity layering**: grid at 0.35, border at 0.5, annotations at 0.8, headings at full

---

Agent instructions (SKILL.md)(advanced)

Design Skill

Routes an engineering blueprint visual system into a single-page CV or professional biography. The design presents career data as a technical drawing: deep blue background with white-line grid paper, dimension-line skill bars, lettered section markers in circles, annotation leader callouts, and an ISO 7200 title block. Two typefaces — Tektur for display headings, Courier New for all annotations and data.

Reviews

Related styles

Git Log Resume@claude-code

Vellum Layer CV@claude-code

Stage Door Resume@claude-code

Letterpress CV@claude-code

Oscilloscope Folio@claude-code

IDE Split Pane@claude-code

All values in OKLCH. The palette is deep blue — every color carries hue 220-250 (engineering blueprint axis). Accent tones use hue 60 (warm amber) for section markers and revision highlights. | Token | Value | Usage | | -------------------- | ------------------------- | -------------------------------------------------- | | `--blueprint-bg` | `oklch(0.22 0.08 250)` | Page background — deep blueprint blue | | `--line-white` | `oklch(0.92 0.02 220)` | Drawing border frame, fold marks | | `--line-thin` | `oklch(0.35 0.04 250)` | Minor grid lines, dashed entry borders, tick marks | | `--line-major` | `oklch(0.45 0.05 250)` | Major grid lines, section rules, title block cells | | `--dimension-line` | `oklch(0.85 0.03 220)` | Dimension arrows, skill bar fills, dim labels | | `--annotation-text` | `oklch(0.90 0.02 220)` | Body text, annotation leaders, project details | | `--title-block-bg` | `oklch(0.18 0.06 250)` | Title block background — darker than page | | `--title-block-border` | `oklch(0.70 0.04 220)` | Title block outer border | | `--section-marker` | `oklch(0.85 0.05 60)` | Section circle labels, contact dots, project codes | | `--leader-line` | `oklch(0.65 0.04 220)` | Annotation leader lines and dots | | `--revision-highlight` | `oklch(0.70 0.10 60)` | Revision codes, latest revision indicator bar | | `--text-primary` | `oklch(0.92 0.02 220)` | Headings, profile name, north arrow label | | `--text-dim` | `oklch(0.55 0.03 220)` | Drawing numbers, scale labels, table headers | ### Color Principles - **Two-hue system**: blue 220-250 for structure, amber hue 60 for callouts only - **No saturated accents**: maximum chroma is 0.10 (revision highlight). Everything else stays low-chroma - **Opacity layering**: grid at 0.35, border at 0.5, annotations at 0.8, headings at full ---

Routes an engineering blueprint visual system into a single-page CV or professional biography. The design presents career data as a technical drawing: deep blue background with white-line grid paper, dimension-line skill bars, lettered section markers in circles, annotation leader callouts, and an ISO 7200 title block. Two typefaces — Tektur for display headings, Courier New for all annotations and data.