Opening the vault…
Opening the vault…
Style sheet · 4 references
Raw HTML energy: system fonts, hard borders, default-blue links, no smoothing. Personality over polish — the anti-template stance as an aesthetic.
The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.
# Brutalist / Indie — style sheet > Raw HTML energy: system fonts, hard borders, default-blue links, no smoothing. Personality over polish — the anti-template stance as an aesthetic. Derived from 4 curated reference(s) in the `brutalist` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images. ## Type - Arial — 2/4 - Courier — 1/4 - monospace — 1/4 - system-ui — 1/4 - Times New Roman — 1/4 ## Color - `#111111` dark neutral — 2/4 - `#ffffff` light neutral — 2/4 - `#222222` dark neutral — 1/4 - `#0000ee` chromatic — 1/4 - `#6b6b6b` mid neutral — 1/4 - `#ff4400` chromatic — 1/4 - `#fffef2` light neutral — 1/4 Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1): - `#111111` / `#ffffff` — 18.9:1 - `#111111` / `#fffef2` — 18.6:1 - `#222222` / `#ffffff` — 15.9:1 - `#0000ee` / `#ffffff` — 9.4:1 ## Moves ### copywriting - Default-blue underlined links everywhere: legibility of intent over brand cohesion. — 4-yale-school-of-art - 'HTML is a material' — reframing markup as craft medium. Manifesto tone with zero jargon. — 5-html-energy ### component pattern - Bare <ul> of member sites, no cards, no thumbnails — the list as an aesthetic object. — 5-html-energy - Blocks and channels: one primitive, one container, infinitely composable. UI disappears behind the content it holds. — 6-are-na ### texture/material - A wiki any faculty member can edit — chaos as institutional honesty. The 'undesigned' surface signals intellectual confidence. — 4-yale-school-of-art ### typography - [model draft] All display text is set in a single bold grotesque, upper-case only, with no letter-spacing variation. Hierarchy is created solely by size changes (three discrete sizes) and by colour blocks: yellow on black for the event title, white on orange for the subtitle. No italics, no rules, no secondary weights. — 71-political-poster-show-1977 ### color - [model draft] Three flat colours: black field, orange rectangle, yellow type. The orange rectangle is sized to exactly contain the three portrait heads; its bottom edge aligns with the baseline of the date line. The yellow type is the only element that crosses the black/orange boundary. — 71-political-poster-show-1977 ### grid/layout - Uniform square-ish blocks in a strict grid make wildly heterogeneous content look calm — the grid does the curation. — 6-are-na ## References - 4-yale-school-of-art — Yale School of Art (exemplar) - 71-political-poster-show-1977 — Political Poster Show 1977 - 5-html-energy — HTML Energy - 6-are-na — Are.na
Default-blue underlined links everywhere: legibility of intent over brand cohesion.
'HTML is a material' — reframing markup as craft medium. Manifesto tone with zero jargon.
Bare <ul> of member sites, no cards, no thumbnails — the list as an aesthetic object.
Blocks and channels: one primitive, one container, infinitely composable. UI disappears behind the content it holds.
A wiki any faculty member can edit — chaos as institutional honesty. The 'undesigned' surface signals intellectual confidence.
All display text is set in a single bold grotesque, upper-case only, with no letter-spacing variation. Hierarchy is created solely by size changes (three discrete sizes) and by colour blocks: yellow on black for the event title, white on orange for the subtitle. No italics, no rules, no secondary weights.
Political Poster Show 1977 · model draft
Three flat colours: black field, orange rectangle, yellow type. The orange rectangle is sized to exactly contain the three portrait heads; its bottom edge aligns with the baseline of the date line. The yellow type is the only element that crosses the black/orange boundary.
Political Poster Show 1977 · model draft
Uniform square-ish blocks in a strict grid make wildly heterogeneous content look calm — the grid does the curation.