Web Prototype — Industrial Brutalist (Swiss Print)
For briefs that ask for "editorial", "newspaper", "agency portfolio", "Swiss design", "manifesto site", or anywhere the goal is to project rigor and physicality rather than friendliness. This skill commits to ONE substrate (light Swiss print) — never mix with the dark CRT mode in the same artifact.
Source
Distilled from Leonxlnx/taste-skill — skills/brutalist-skill/SKILL.md §2.1 (Swiss Industrial Print). For decks that lean into the dark CRT mode, see design-templates/html-ppt-taste-brutalist/.
Hard rules
- Substrate: unbleached newsprint
#F4F4F0 or #EAE8E3. Foreground #050505 carbon ink.
- Accent: ONE color — aviation/hazard red
#E61919. Used on dividing rules, strikes, alerts. Never as a fill on large surfaces.
- Display type: heavy neo-grotesque (Archivo Black / Inter ExtraBold/Black / Neue Haas Grotesk Black). Fluid scale
clamp(4rem, 10vw, 15rem). Tracking -0.04em. Leading 0.88. Uppercase only.
- Micro type: monospace (JetBrains Mono / IBM Plex Mono). Fixed
10–13px. Tracking 0.1em. Uppercase. Used for navigation, metadata, captions, coordinates.
- Geometry:
border-radius: 0 everywhere. 90° corners only.
- Grid: visible CSS grid with
gap: 1px over an ink-colored background to render mathematically perfect 1px dividers.
- Negative space: asymmetric — hero has a viewport-bleeding numeral or letterform; data clusters are tightly packed.
- ASCII syntax: decorate sections with
[ LABEL ], >>>, ///, registration ® / trademark ™ as structural ornament.
Banned
border-radius above 0.- Drop shadows, gradients, glassmorphism, glows.
- Centred body text. Justify or hard-left only.
- Color other than ink, paper, and the hazard red.
- Sans-serif body fonts other than Inter/Archivo/Plex/Mono. No "premium" grotesques here — this aesthetic predates them.
- Curved or "soft" iconography.
- AI cliché copy. Use clipped, declarative print-magazine voice.
Required components
- Top register strip: monospace meta band — issue, date, coordinates — running edge to edge with hairline rules above and below.
- Hero: giant numeral or single word at viewport-bleeding scale on the left; right column packs three or four monospace metadata blocks.
- Manifest section: numbered theses (
01. / 02.) with hairline <hr> between each, hard-left aligned.
- Data table or index rendered with
display: grid; gap: 1px on an ink background.
- Specimen block: typography demo — show the family/weight/case at three scales.
- Closing colophon: monospace block stating press, paper stock, edition, set type.
Motion
This aesthetic is mechanical, not animated. Use motion only as a precision mechanism:
IntersectionObserver reveal: instant opacity 0 → 1, no translate/blur.- Optional ticker/marquee for the top register strip at constant speed.
:active on links: invert ink/paper instantly. No transitions over 120ms.- Never animate page-level layout properties.
Pre-flight
1---2name: web-prototype-taste-brutalist3description: Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Swiss Industrial Print mode).4---5
6# Web Prototype — Industrial Brutalist (Swiss Print)
7
8For briefs that ask for "editorial", "newspaper", "agency portfolio", "Swiss design", "manifesto site", or anywhere the goal is to project rigor and physicality rather than friendliness. This skill commits to ONE substrate (light Swiss print) — never mix with the dark CRT mode in the same artifact.
9
10## Source
11
12Distilled from [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) — `skills/brutalist-skill/SKILL.md` §2.1 (Swiss Industrial Print). For decks that lean into the dark CRT mode, see `design-templates/html-ppt-taste-brutalist/`.
13
14## Hard rules
15
16- **Substrate:** unbleached newsprint `#F4F4F0` or `#EAE8E3`. Foreground `#050505` carbon ink.
17- **Accent:** ONE color — aviation/hazard red `#E61919`. Used on dividing rules, strikes, alerts. Never as a fill on large surfaces.
18- **Display type:** heavy neo-grotesque (Archivo Black / Inter ExtraBold/Black / Neue Haas Grotesk Black). Fluid scale `clamp(4rem, 10vw, 15rem)`. Tracking `-0.04em`. Leading `0.88`. Uppercase only.
19- **Micro type:** monospace (JetBrains Mono / IBM Plex Mono). Fixed `10–13px`. Tracking `0.1em`. Uppercase. Used for navigation, metadata, captions, coordinates.
20- **Geometry:** `border-radius: 0` everywhere. 90° corners only.
21- **Grid:** visible CSS grid with `gap: 1px` over an ink-colored background to render mathematically perfect 1px dividers.
22- **Negative space:** asymmetric — hero has a viewport-bleeding numeral or letterform; data clusters are tightly packed.
23- **ASCII syntax:** decorate sections with `[ LABEL ]`, `>>>`, `///`, registration `®` / trademark `™` as structural ornament.
24
25## Banned
26
27- `border-radius` above 0.
28- Drop shadows, gradients, glassmorphism, glows.
29- Centred body text. Justify or hard-left only.
30- Color other than ink, paper, and the hazard red.
31- Sans-serif body fonts other than Inter/Archivo/Plex/Mono. No "premium" grotesques here — this aesthetic predates them.
32- Curved or "soft" iconography.
33- AI cliché copy. Use clipped, declarative print-magazine voice.
34
35## Required components
36
37- **Top register strip:** monospace meta band — issue, date, coordinates — running edge to edge with hairline rules above and below.
38- **Hero:** giant numeral or single word at viewport-bleeding scale on the left; right column packs three or four monospace metadata blocks.
39- **Manifest section:** numbered theses (`01.` / `02.`) with hairline `<hr>` between each, hard-left aligned.
40- **Data table or index** rendered with `display: grid; gap: 1px` on an ink background.
41- **Specimen block:** typography demo — show the family/weight/case at three scales.
42- **Closing colophon:** monospace block stating press, paper stock, edition, set type.
43
44## Motion
45
46This aesthetic is mechanical, not animated. Use motion only as a precision mechanism:
47- `IntersectionObserver` reveal: instant `opacity 0 → 1`, no translate/blur.
48- Optional ticker/marquee for the top register strip at constant speed.
49- `:active` on links: invert ink/paper instantly. No transitions over `120ms`.
50- Never animate page-level layout properties.
51
52## Pre-flight
53
54- [ ] Substrate is newsprint, foreground is carbon ink, only accent is hazard red
55- [ ] All `border-radius` is `0`
56- [ ] Display uses heavy grotesque at viewport-bleeding scale (≥ `8vw`)
57- [ ] Micro UI uppercase monospace at fixed `10–13px`, `letter-spacing: 0.1em`
58- [ ] At least one `display: grid; gap: 1px` ink-background module
59- [ ] ASCII syntax decoration appears at least three times (`[ ... ]`, `>>>`, `///`)
60- [ ] Numeric data uses tabular-nums + monospace — no proportional figures
61- [ ] No emojis, no curves, no gradients, no shadow effects
gabrielmoreira