{ "id": "v1-br-4574", "long_id": "v1.brutalism.blog.s04.p05.t07.u04", "name": "Web brutalism, poster", "era": { "slug": "brutalism", "code": "br", "name": "Web brutalism", "years": [ 2014, 2019 ], "description": "The reaction to polish, 2014 to 2019: raw default-looking pages, system and monospace type, hard black rules, harsh or absent colour, and layouts that show their structure instead of hiding it." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "The poster page of web brutalism, as published between 2014 and 2019 by pamphleteers, studios and writers of guidelines who wanted a page to be one statement and then the evidence: a single headline in bold system sans set as large as the window will take, and everything else hanging under it in four narrow columns of plain serif text. The paper is a warm off-white, the ink black, links are underlined and stay underlined, one black band carries the navigation and one red block marks where you are. Nothing is rounded, shadowed, graded or animated and there are no pictures; the only ornament is size and a thin double rule.", "url": "https://chrono.skin/s/v1-br-4574", "preview_url": "https://chrono.skin/s/v1-br-4574/specimen.html", "files": { "STYLE.md": "# Web brutalism, poster\n\n## Summary\n\nThe poster page of web brutalism, as published between 2014 and 2019 by pamphleteers, studios and writers of guidelines who wanted a page to be one statement and then the evidence: a single headline in bold system sans set as large as the window will take, and everything else hanging under it in four narrow columns of plain serif text. The paper is a warm off-white, the ink black, links are underlined and stay underlined, one black band carries the navigation and one red block marks where you are. Nothing is rounded, shadowed, graded or animated and there are no pictures; the only ornament is size and a thin double rule.\n\n## Layout\n\n- The page fills the window: `.ds-page` has no margin and `.ds-page__frame` is `--size-page` (100%) wide with no maximum. Every part is padded `--space-4` (24px) from the window edge and nothing is centred.\n- Order from the top: `.ds-nav`, then the hero or the page header, then one or more `.ds-page__cols`, then `.ds-footer` across the window. The header and the footer are written once; the views change between them.\n- `.ds-nav` is two lines. `.ds-nav__top` is an open line on the canvas with the `.ds-brand` at the left and a small `.ds-nav__tagline` at the right. Under it `.ds-nav__list` is a band of `--fill-bar` in which the navigation words, at `--text-large`, are spread from the left edge of the window to the right with equal space between them. There is no sidebar navigation and no second row.\n- `.ds-hero` holds the headline alone on its lines, then `.ds-hero__foot`, a row in the four-column grid: the lead across two columns, the actions in the third, a small note in the fourth. A heavy rule closes the hero.\n- `.ds-page__cols` is the body: four equal columns, `--space-4` (24px) apart, rows `--space-5` (48px) apart, with no rules between columns and no fills behind them. A block takes one column (`.ds-page__col`), two (`--2`) or all four (`--4`). Each block opens with a `.ds-page__label`: a heavy rule with a small bold line hanging from it. Blocks stacked in one column are `.ds-page__section`, 48px apart.\n- On the home page the first row is: the `.ds-sidebar` in column one, the numbered `.ds-list` across columns two and three, short blocks (notices, a panel) in column four. The `.ds-grid` follows across all four columns, one block to a column.\n- Inner pages (one essay, the letters, the method, the archive) keep the name line and the band. The hero is replaced by the `.ds-breadcrumb` and `.ds-page-header`, whose title is `--text-display` (not multiplied), with one line of description and one button at the right over a heavy rule. Under it, on a page of figures, `.ds-stats` sets four large figures, one to a column, and a `.ds-page__cols` carries `.ds-tabs`, the `.ds-table` and `.ds-pagination` across all four columns. Every other inner page is one `.ds-page__cols--foot`: the main thing (running text, the form) in the left two columns and short captioned blocks, a panel or `.ds-sidebar` lists in the right two, filled so that the columns end near each other.\n- Views. The specimen is one small site with five views, one showing at a time. `issue` is the home page: the headline, then the sidebar, the numbered list of essays, a boxed note with this week's letters, and the four standing subjects. `essay` is one essay across two columns with the letters on it and further reading beside it. `letters` is the form under the two messages it can answer with, beside the letters printed this month and the confirmation for withdrawing one. `method` is running text, the house rules in a box, the marks and the writers. `archive` is a year: four figures, tabs over the table, pagination, and the empty state of a subject with no essays. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale: `--space-1` 4px is the padding of badges and the gap under a control; `--space-2` 8px is the padding of buttons, inputs, table cells and the band (vertical) and the gap between buttons; `--space-3` 16px is the padding of panels, notices, grid blocks and dialogs, the gap between paragraphs and the padding of list rows; `--space-4` 24px is the page margin and the gap between columns; `--space-5` 48px is the gap between blocks and the padding above and below the hero; `--space-6` 96px is the space at the foot of the last columns of a page.\n- Fixed sizes: `--size-rank` 72px is the numeral column of the list, `--size-label` 150px the label column of a form, `--size-field` 360px a text input, `--size-num` 120px a numeric table column, `--size-dialog` 440px a dialog, `--size-block` 176px the least height of a grid block.\n- Below 900px the four columns become two and the headline is half its size. From there down a column marked `.ds-page__col--lead` (the list of the home page) comes before the sidebar that precedes it in the source. Below 600px there is one column: the band's words run from the left and wrap, headlines and page titles are 48px, the page header puts its button under the text, form labels sit above their fields and table cells marked `.ds-table__extra` are left out.\n- On a phone (600px and below) there is no menu button: `.ds-nav__list` becomes a grid of six columns, the first three `.ds-nav__item` spanning two columns each and the last two spanning three, so five links stand in two rows of three and two, the text of each centred. The tagline is left-aligned and the current page stays an inverted block.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--font-body` and `--font-ui` are Arial at `--text-base` 14px, `--line-body` 1.3; `--font-heading` is \"Arial Black\" at weight 900 for the name, the headline, page titles, block captions, panel titles and prices. `--font-mono` (\"Andale Mono\", \"Lucida Console\") is notice numbers, picture captions, avatars and code. All are system fonts; one reference used a hosted humanist sans at 14px, for which Arial stands in.\n- `--text-display` 56px at `--line-display` 0.95 with `--display-tracking` -1px is the hero headline, the largest text; `--text-h1` 30px is page titles, the name and the figures; `--text-h2` 20px block captions, grid titles and prices; `--text-h3` 15px panel and sidebar titles; `--text-large` 17px list titles and the lead; `--text-small` 12px counts, meta lines, badges and the footer. Buttons and navigation are bold (`--weight-ui` 700) and keep their case.\n- `--color-page`, `--color-canvas` and `--color-surface` are #ffff00; `--color-surface-alt` #ffff99 is alternate rows, the figures and the empty state; `--color-surface-strong` #ffcc00 is panel titles, form label cells, avatars and code. Text and headings on any of these, and on the `--color-fill-*` blocks, are `--color-text` and `--color-heading` (#000000); `--color-text-muted` #555500 is counts and meta lines.\n- `--color-link` #0000ff with `--color-link-visited` #800080, `--color-link-hover` #cc0000 and `--color-link-active` #800000. Links are not underlined at rest (`--link-decoration` none) and are underlined under the pointer. `--color-link-quiet` #000000 is filter links, tabs and page numbers. `--color-heading-alt` #0000ff is sidebar titles.\n- `--fill-bar` (#000000, text `--color-bar-text` #ffff00) is the section bar, table heads, dialog titles and the current page number. `--fill-bar-alt` (#ffffff, black text) is the footer. `--fill-inverse` (#0000ff, text `--color-inverse-text` #ffffff) is the hero band, the current section in the bar, the current tab and tooltips. `--fill-accent` (#ff0000, text `--color-accent-text` #000000) is the \"new\" badge and the filled part of a progress bar. `--color-accent-alt` is not used by the specimen.\n- `--color-fill-1` to `--color-fill-4` (yellow, white, amber, pale blue) are the grid cells and carousel slides.\n- Controls: the primary button is `--fill-button` (#000000) with `--color-button-text` (#ffff00) and an edge in `--color-input-border`; the secondary is `--fill-button-secondary` (transparent here) with `--color-button-secondary-text`; inputs are `--fill-input` (#ffffff) with `--color-input-text`. The hero carries only a primary button, because only that brings its own fill onto the inverted band.\n- Status: `--color-success` #006600, `--color-warning` #804000, `--color-danger` #cc0000 colour a boxed word and its box; `--color-danger` on `--color-danger-surface` is the error notice and the destructive button. They were not measured in a reference; they are dark enough to read on yellow and on white.\n- Each text token is used only on its own fill: `--color-bar-text` on `--fill-bar`, `--color-bar-alt-text` on `--fill-bar-alt`, `--color-inverse-text` on `--fill-inverse`, `--color-accent-text` on `--fill-accent`, `--color-button-text` on `--fill-button`, `--color-notice-text` on `--color-notice`, `--color-input-text` on `--color-input`, `--color-danger` on `--color-danger-surface` or the page. Keep to this so that other palettes work with the same structure.\n- Surface: `--border-width` 2px solid black is every box, cell and control edge; `--border-width-strong` 8px is the slab under the header and page header, over the footer and down the left of a notice. `--shadow-panel` is a 6px black lid on top of every panel, with no blur; controls have no shadow at rest, a 2px inner ring on hover and a 4px one when pressed; `--shadow-dialog` is a hard block 8px down and to the left. All radii are 0, every fill is flat, `--focus-ring` is a 4px solid outline, `--transition` is none.\n- One-off sizes built with `calc()` over tokens: the brand tile (1.3 times `--text-h1`), the avatar (2.5 times `--text-base`) and the switch (2 by 1 times `--text-base`).\n\n## Components\n\n- `.ds-page` on ``: page colour and base type, no margin. Each page is a `.ds-page__frame`. `.ds-page__cols` is the four-column body (`--foot` adds 96px below the last one); `.ds-page__col` is a block of one column, `--2` of two, `--4` of four; `.ds-page__section` stacks blocks in one column (`--last` drops the gap); `.ds-page__label` is the 2px rule and small bold caption that opens a block.\n- `.ds-brand`: the site's mark and name, a link to the home page, at the left of the name line. `.ds-brand__mark` is a plain ruled square as tall as the name (`--text-h1`), dressed like the button: `--fill-button`, a `--border-width-strong` edge in `--color-border-strong`, the mark drawn in `--color-button-text` with square line caps; no radius and no shadow beyond what the tokens give. `.ds-brand__name` is 36px bold sans in `--color-heading`, on the canvas. The name `chronoskin` and the mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the header. `.ds-nav__top` holds the brand and a `.ds-nav__tagline`; `.ds-nav__list` is the band, one `.ds-nav__item` per word, each a `.ds-nav__link`, spread across the window. The current page is an inverted block: the stylesheet marks the link whose `href` names the view that is showing (one selector per view, and the home link when the address names none); on a page of its own, give the link `is-current`.\n- `.ds-breadcrumb`: a 14px sans line of `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` (`/`) between them, ending in a bold `.ds-breadcrumb__current`, directly above the page header.\n- `.ds-hero`: the home page's statement. `.ds-hero__title` is the headline at three times the display size: keep it to a few short words. `.ds-hero__foot` holds `.ds-hero__lead` (21px, two columns), `.ds-hero__actions` (one button over one text link) and `.ds-hero__note` (small grey text). No fill, no picture, no centring.\n- `.ds-page-header`: the head of an inner page, instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (64px) and one `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. A heavy rule closes it.\n- `.ds-stat`: one figure: a 96px bold `.ds-stat__value` under a heavy rule with a small grey `.ds-stat__label` below. `.ds-stats` sets exactly four, one to a column; keep the values to a few digits.\n- `.ds-prose`: running text, at most 66 characters wide: h1, h2, h3 in bold sans, serif paragraphs, square-bulleted and numbered lists, `code` in 14px monospace with no background, `blockquote` behind a heavy rule. `.ds-prose__meta` is the grey sans line under a title.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is for meta and tool links; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: a `\n \n \n
\n

Subjects

\n \n
\n
\n

Back issues

\n \n
\n \n\n
\n

In this issue

\n
    \n
  1. \n 01\n
    \n A page is a letter, not a room new\n

    You do not furnish a letter. You write it, and the reader decides where to sit.

    \n

    Ines Varga, 1,900 words, 14 replies

    \n
    \n
    2. \n
  2. \n 02\n
    \n Forty kilobytes is plenty\n

    We weighed two hundred front pages. The heaviest was a recipe for toast.

    \n

    Jonas Pell, 2,400 words, 31 replies

    \n
    \n
    3. \n
  3. \n 03\n
    \n The underline is the interface\n

    A link that looks like a link needs no instructions and no hover state.

    \n

    Tove Lindqvist, 1,200 words, 9 replies

    \n
    \n
    4. \n
  4. \n 04\n
    \n Who pays for a page with nothing on it\n

    Mostly nobody, which is both the trouble and the point.

    \n

    Halvard Moe, 3,100 words, 52 replies

    \n
    \n
    5. \n
\n
\n\n
\n
\n
\n

Write for us

\n
One idea, under three thousand words, in a plain text file. We answer every one. How it works\n
\n

Issue 32, in proof 3 of 4

\n
\n
\n
\n
\n
\n
\n

Letters this week

\n
\n

“I still use a spacer image and I am not sorry.” Marit Aas, on issue 26.

\n

“Forty kilobytes is a luxury. Try four.” Dov Peretz, on this issue.

\n

Read them all or send one

\n
\n
\n
\n\n
\n

Four standing subjects

\n
\n
\n

Speed

\n

What a page weighs and what the weight buys.

\n

41 essays

\n
\n
\n

Type

\n

The fonts already on the machine, and nothing else.

\n

36 essays

\n
\n
\n

Links

\n

Blue, underlined, and going where they say.

\n

29 essays

\n
\n
\n

Forms

\n

A label, a box, a button that says what it does.

\n

18 essays

\n
\n
\n
\n \n\n
\n\n \n
\n\n
    \n
  1. Issues
    2. \n
  2. /
    3. \n
  3. Issue 26
    4. \n
  4. /
    5. \n
  5. Tables were fine
    6. \n
\n\n
\n
\n

Tables were fine

\n

Jonas Pell, issue 26, October 2016. 2,400 words and 31 letters.

\n
\n
Send a letter
\n
\n\n
\n
\n

The essay

\n
\n

Nobody misses the spacer image

\n

First printed 2016-10-04, corrected once.

\n

But the grid of numbers that a table gives you for nothing is still the clearest thing a browser can draw, and the first essay in this issue counts how often we rebuild it badly.

\n

What a table already does

\n
    \n
  • Lines its columns up without being asked.
    • \n
  • Reads aloud in the right order.
    • \n
  • Prints.
    • \n
\n

Try it

\n

Open any page of figures and run view-source on it. If the numbers are not in a table, ask what was gained.

\n
\n
\n
\n

Letters on this essay

\n
\n

“I still use a spacer image and I am not sorry.”
Marit Aas

\n

“A table prints. That alone should have settled it.”
Halvard Moe

\n

“You have never had to read one aloud on a phone.”
Tove Lindqvist

\n

All 31 letters

\n
\n
\n \n
\n\n
\n\n \n
\n\n
    \n
  1. Issues
    2. \n
  2. /
    3. \n
  3. Letters
    4. \n
\n\n
\n
\n

Letters

\n

Printed as they arrive, spelling included. One letter an issue from each reader.

\n
\n
Read the method
\n
\n\n
\n
\n
\n

Send a letter

\n
\n

Received. Your letter on issue 31 will be read before the next issue.

\n

Not sent. The letter below has no address we can answer.

\n
\n
\n
\n
\n
\n \n
\n
\n
\n \n
\n \n

That is not an e-mail address.

\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n

Plain text. We print letters as they arrive, spelling included.

\n
\n
\n
\n \n \n
\n
\n \n \n \n \n
\n
\n
\n
\n
\n
\n

Printed this month

\n
    \n
  1. \n 01\n
    \n On “Tables were fine”\n

    I still use a spacer image and I am not sorry.

    \n

    Marit Aas, 9 words

    \n
    \n
    2. \n
  2. \n 02\n
    \n On “Forty kilobytes is plenty”\n

    Forty is a luxury. Try four, and see what you keep.

    \n

    Dov Peretz, 11 words

    \n
    \n
    3. \n
\n
\n
\n

Your letter on issue 31

\n
\n
\n

Withdraw your letter?

\n
\n

The letter you sent on issue 31 will not be printed. This cannot be undone.

\n
\n \n Keep it\n
\n
\n
\n
\n
\n
\n
\n\n
\n\n \n
\n\n
    \n
  1. Issues
    2. \n
  2. /
    3. \n
  3. Method
    4. \n
\n\n
\n
\n

Method

\n

How a page with nothing on it gets written, read and printed once a month.

\n
\n
Write to us
\n
\n\n
\n
\n

How an issue is made

\n
\n

Six people who have never met send each other text files. On the last Friday of the month the files that everyone has read become an issue, and the rest wait.

\n

The order of work

\n
    \n
  1. An idea, in one sentence, to all six.
    2. \n
  2. A draft under three thousand words.
    3. \n
  3. Two readers, neither of them the writer.
    4. \n
  4. Proof, then print, then leave it alone.
    5. \n
\n

What print means here

\n

An essay is printed when its address will never change. After that only a correction is allowed, dated, at the foot.

\n
\n
\n
\n
\n
\n

House rules

\n
Text only. No picture unless the essay is about that picture. Every link goes where it says. Nothing moves.\n
\n
\n May an essay carry code?\n

Yes, as text, in the fixed face. Never as a picture of code.

\n
\n
\n Who decides what is printed?\n

All six. One refusal sends a draft back to its writer with the reason.

\n
\n
\n Can a printed essay change?\n

Only by a dated correction at its foot.

\n
\n
\n
\n
\n
\n
\n

Marks

\n

Letters waiting 12, a subject type, an essay out this week new, and the state of a draft: printed in proof spiked

\n
\n
\n \n
\n\n
\n\n \n
\n\n
    \n
  1. Issues
    2. \n
  2. /
    3. \n
  3. Archive
    4. \n
  4. /
    5. \n
  5. 2016
    6. \n
\n\n
\n
\n

Archive, 2016

\n

Twelve issues, every essay still at its first address.

\n
\n
\n
\n\n \n\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
IssueTitleOutLettersEssaysWords
28Blue and purple2016-12-06open59,800
27The view source issue2016-11-01open612,400
26Tables were fine2016-10-04closing48,100
25Against the hamburger2016-09-06closed510,300
24Read it on a train2016-08-02closed59,200
\n \n
\n
\n
\n\n
\n
\n

Subject: carousels

\n
\n

No essays on “carousels”.

\n

Nobody has wanted to write one.

\n Back to the issue\n
\n
\n \n \n
\n\n
\n\n \n\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.brutalism.blog.s04.p05.t07.u04\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"brutalism\",\n \"years\": [\n 2014,\n 2019\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-br-4574\",\n \"short\": \"v1-br-4574\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #000000;\n --color-canvas: #000000;\n --color-surface: #000000;\n --color-surface-alt: #101010;\n --color-surface-strong: #181818;\n --color-bar: #1177aa;\n --color-bar-text: #ffffff;\n --color-bar-alt: #101010;\n --color-bar-alt-text: #bdbdbd;\n --color-inverse: #56c8ff;\n --color-inverse-text: #000000;\n --color-text: #bdbdbd;\n --color-text-muted: #808080;\n --color-heading: #ffffff;\n --color-heading-alt: #56c8ff;\n --color-link: #56c8ff;\n --color-link-quiet: #56c8ff;\n --color-link-visited: #9e9eff;\n --color-link-hover: #ffffff;\n --color-link-active: #ffffff;\n --color-border: #555555;\n --color-border-strong: #1177aa;\n --color-border-muted: #303030;\n --color-accent: #1177aa;\n --color-accent-text: #ffffff;\n --color-accent-alt: #9e9eff;\n --color-fill-1: #000000;\n --color-fill-2: #101010;\n --color-fill-3: #181818;\n --color-fill-4: #101010;\n --color-button: #1177aa;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #101010;\n --color-button-secondary-text: #56c8ff;\n --color-input: #101010;\n --color-input-text: #ffffff;\n --color-input-border: #555555;\n --color-disabled: #181818;\n --color-disabled-text: #555555;\n --color-danger: #ff6060;\n --color-danger-surface: #000000;\n --color-success: #60d060;\n --color-warning: #e0b040;\n --color-notice: #101010;\n --color-notice-text: #bdbdbd;\n --color-focus: #56c8ff;\n --color-shadow: #555555;\n --color-overlay: #181818;\n}\n\n/* @part type */\n:root {\n --font-body: Arial, \"Liberation Sans\", Helvetica, sans-serif;\n --font-heading: \"Arial Black\", \"Arial Bold\", Arial, \"Liberation Sans\", sans-serif;\n --font-ui: Arial, \"Liberation Sans\", Helvetica, sans-serif;\n --font-mono: \"Andale Mono\", \"Lucida Console\", \"Liberation Mono\", monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 17px;\n --text-display: 56px;\n --text-h1: 30px;\n --text-h2: 20px;\n --text-h3: 15px;\n --line-body: 1.3;\n --line-heading: 1.05;\n --line-display: 0.95;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 900;\n --weight-display: 900;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -1px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: double;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: inset 0 0 0 2px var(--color-button), inset 0 0 0 3px var(--color-button-hover-text);\n --shadow-control-pressed: inset 0 0 0 3px var(--color-button-hover-text);\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 85%, white);\n --fill-button-secondary: transparent;\n --fill-input: transparent;\n --focus-ring: 3px double var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }