Blueprint Grid CV
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.
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
Designed by humans. Applied by agents.
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