html-blueprint-style

name	html-blueprint-style
description	Engineering Blueprint genre (graph-paper + mono + gauges). Use when: 技术图解, 拆解, 原理, blueprint, schematic, spec sheet, 参数对比, 工程海报, MOD panels. Trigger: 技术图解 / 拆解 / 原理 / blueprint / schematic / spec sheet / 参数对比 / 工程海报. Inherits typography-system. Single-surface technical poster.

---

name: html-blueprint-style description: "Use for an ENGINEERING-BLUEPRINT technical infographic: graph-paper (millimetre-grid) ground, MOD panel cards each with a code label (MOD A-01), schematic diagrams (gauge / bars / node graph), ultra-crisp MONO technical annotations, one magenta highlight + a mint structural accent. Trigger: 技术图解/拆解/原理/blueprint/schematic/spec sheet/参数对比/工程海报. NOT for prose reports. Routed by html-style-router." combo-tags: [html-rendering]

HTML Genre — Engineering Blueprint (蓝图派)

Typography base (inherited): composes ON TOP of typography-system; inline tokens/typography.css FIRST, then layer color/accent/brand-font ONLY. Reference template: examples/genre/blueprint.html (all 3 gates green).

Pixel-sampled from the "Gemma4 有 8 个模型" technical poster. A diagram-dense spec-sheet aesthetic — precise, schematic, mono-annotated. DNA: the source reference set (pixel-sampled from real designs).

Layout frame + tokens (inject FIRST)

:root{ --bp-page-max:1080px; --bp-page-gutter-total:clamp(32px,6vw,80px);
  --bp-paper:#EAEBE9; --bp-grid:#D2D6D1; --bp-ink:#211A1B; --bp-panel:#F6F6F4;
  --bp-magenta:#C42E63; --bp-mint:#8FB7A2; --bp-meta:#5E625C; }
body{ background:var(--bp-paper);                       /* the millimetre grid */
  background-image:linear-gradient(var(--bp-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--bp-grid) 1px,transparent 1px);
  background-size:24px 24px; }
.bp-frame{ box-sizing:border-box;
  width:min(var(--bp-page-max),calc(100% - var(--bp-page-gutter-total)));
  margin-inline:auto; }

Structure: .bp-title (heavy bordered banner) → .bp-grid (responsive 1-2 col, .bp-mod.wide spans both) of .bp-mod panels, each .tag (inverted mono MOD X-NN · 名称) + h3 (with .hi magenta highlight) + a schematic: .bp-gauge (conic-gradient donut), .bp-bars (CSS bars, .alt = magenta), or .bp-nodes (bordered node cells) + .bp-note (mono annotation).

Responsive module grid contract

Blueprint panels often carry dense nested schematics. Never use fixed nested 4-column grids inside a half-width .bp-mod; they will overflow and visually collide with the neighboring module at medium desktop widths. Use this pattern:

.bp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));
  gap:var(--space-2);align-items:start;}
.bp-mod{min-width:0;}
.flow,.bp-nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));}
.entity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));}
.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr));}
.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr));}
.checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,224px),1fr));}
.node,.entity,.agent,.phase,.check{min-width:0;overflow-wrap:anywhere;}

Use .bp-mod.wide when a module contains any of the following:

• 8+ entity cards
• 4+ roadmap phases
• a table with 3+ columns
• a flow with 6+ nodes
• bilingual content in narrow schematic cells
• any half-width module immediately followed by a .bp-mod.wide

This is a layout invariant, not a taste preference. A blueprint card may be dense, but no panel may spill across its border or overlap a neighboring module.

No unpaired half-row gaps

CSS grid is not masonry. If a half-width .bp-mod is followed by a full-width .bp-mod.wide, the wide module starts on the next row and leaves a large blank cell beside the half-width module. This is a visual failure even when there is no horizontal overflow.

Before delivery, run a layout audit that groups .bp-mod elements by row top: any row with exactly one module whose width is less than 80% of the .bp-frame width is a blueprint-unpaired-half-row failure, unless explicitly documented as intentional negative space. Default fix: mark that module .wide, or pair it with another module of comparable height before the next .wide.

The same rule applies inside dense schematic grids such as .entity-grid, .agent-grid, .roadmap, and .checklist. A final row that visibly occupies less than roughly 72% of its grid width is a blueprint-nested-grid-row-hole failure on desktop/tablet. Default fix: add the missing domain objects, split the grid into semantic groups, or change the module width/column contract so the last row is balanced.

Gotchas

1. The grid is a background-image, NOT content. 24px grid via two 1px linear gradients on body. MOD panels are opaque --bp-panel cards ON TOP so text never sits directly on grid lines (contrast + legibility).
2. Schematics are pure CSS/SVG, no raster. Gauge = conic-gradient + radial mask hole; bars = flex <i> with height:%; nodes = bordered grid cells. Keeps the template self-contained (no images to inline) and crisp at any zoom.
3. Magenta is an ACCENT, not body text. --bp-magenta on the grey panel is ~4.3:1 — fine for the large .hi highlight (white-on-magenta) and node TITLE labels at --fs-sm+, but verify with --render if you shrink it; darken toward #B02858 if a small magenta label trips render-contrast-below-aa.
4. Mono everywhere for annotations (.tag, .bp-note, node labels) — the genre's voice is "lab notebook". Headlines stay sans/heavy.
5. Spacing snaps to the 8pt ramp — panel gaps 16px, not 10/14.
6. Nested schematic grids must auto-fit. Fixed repeat(4, 1fr) is allowed only in a full-width .bp-mod.wide and only if every child has min-width:0 plus overflow-wrap:anywhere. Prefer the responsive module grid contract above.
7. Unpaired half-row gaps are blockers. A lone half-width module followed by a wide module creates a visible blank cell. Fix it before delivery.
8. Nested schematic holes are blockers. Dense object/agent/roadmap/checklist grids must not leave a half-empty final row on desktop/tablet. This is treated as an alignment defect, not decorative negative space.
9. Visual overflow is a blocker. Validate at 1440px, 1280px, 1024px, 768px, and 390px. document.documentElement.scrollWidth must equal document.documentElement.clientWidth; module child bounding boxes must stay inside their .bp-mod parent.

Verify

python3 scripts/build-genre-templates.py
python3 skills/typography-system/scripts/validate_typography.py --render examples/genre/blueprint.html
python3 skills/html-blueprint-style/scripts/validate_blueprint_layout.py examples/genre/blueprint.html --screenshots-dir /tmp/visual-audit/blueprint
python3 scripts/html-inline-assets.py check examples/genre/blueprint.html

---

Your Name | [e-mail]