| name | html-archive-brutalist-style |
| description | Swiss Archival Brutalist genre (cream + serif + mono, compact info density). Use when: 档案, 复盘, dossier, archive note, condition map, positioning, 紧凑信息密度, Swiss brutalist, takeaway grid. Trigger: 档案 / 复盘 / dossier / archive note / condition map / positioning / Swiss brutalist / takeaway grid. Inherits typography-system. Single-surface note; NOT a warm long-form doc. |
name: html-archive-brutalist-style
description: "Use for a DENSE Swiss/archival BRUTALIST single-page note: cream ground, huge serif display headline (often a transform X → Y or X & Y), mono meta-labels everywhere, a status ● ACTIVE badge, an ultra-dense multi-column small-text grid, red accent. Trigger: 档案/复盘/dossier/archive note/condition map/positioning/紧凑信息密度 + Swiss/brutalist look. NOT for airy decks (use mckinsey) or posters (knowledge-poster). Routed by html-style-router."
combo-tags: [html-rendering]
HTML Genre — Archival Brutalist (档案派 / Swiss dense note)
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/archive-brutalist.html
(via scripts/build-genre-templates.py, all 3 gates green).
Pixel-sampled from two "ARCHIVE NOTE" references (SKILLS → POSITIONING / VAULT &
FILES). Maximal information density under Swiss grid discipline. DNA:
the source reference set (pixel-sampled from real designs).
Layout frame + tokens (inject FIRST)
:root{ --ab-page-max:1080px; --ab-page-gutter-total:clamp(32px,6vw,80px);
--ab-paper:#F3EFE7; --ab-ink:#141814; --ab-meta:#5C605A; --ab-rule:#D8D3C6;
--ab-red:#A8391E; --ab-green:#1E5D41; }
.ab-frame{ box-sizing:border-box;
width:min(var(--ab-page-max),calc(100% - var(--ab-page-gutter-total)));
margin-inline:auto; }
Structure: .ab-top (rule-bounded mono id row + ● ACTIVE green badge) →
.ab-kick (red mono source line) → .ab-headline (SERIF uppercase display,
.arr = red transform glyph → / & / ×) → .ab-lede → .ab-metarow (mono
key·VALUE chips) → .ab-grid (3-col hairline-divided dense cells, red NN / label + bold title + fine print) → .ab-take (bordered TAKEAWAY with a vertical
mono label).
Gotchas
- The red
--ab-red must be dark enough for SMALL mono labels. The sampled
poster red (#C8472E) is ~4.2:1 on cream — the render gate ERRORs at --fs-xs.
Use #A8391E (~5.6:1). Same for the meta grey (#5C605A, not the lighter
#6C716A which only hits 4.4:1).
- The headline is SERIF, uppercase, and usually a TRANSFORM.
X → Y /
X & Y / X × — the arrow/ampersand is the genre's signature; color it red.
Use --font-stack-mixed-serif (Latin-first, CJK-correct).
- Density is the point, but the body grid still obeys the foundation. Cells
stack 1-col
<720px; the dense 3-col is desktop only. Don't fight the reflow.
writing-mode:vertical-rl for the TAKEAWAY label — a Swiss touch; keep it
a short mono word, never body copy (vertical CJK body breaks reading order).- Footer ink darker than #9B9B9D on cream (AA), same as gotcha 1.
Verify
python3 scripts/build-genre-templates.py
python3 skills/typography-system/scripts/validate_typography.py --render examples/genre/archive-brutalist.html
python3 scripts/html-inline-assets.py check examples/genre/archive-brutalist.html
Your Name | your@email.com
