{ "id": "v1-br-4454", "long_id": "v1.brutalism.blog.s04.p04.t05.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 }, "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-4454", "preview_url": "https://chrono.skin/s/v1-br-4454/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\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`, `--font-ui` and `--font-mono` are one monospace stack (Menlo, Consolas, \"DejaVu Sans Mono\", \"Liberation Mono\"): all text, controls and code. `--font-heading` is Arial, Verdana, Helvetica, bold, used for the hero sentence, page titles, part names, table heads, panel and sidebar titles. All are system fonts; the references named only the generic families.\n- `--text-base` 14px with `--line-body` 1.35 is running text. `--text-small` 12px is the head line, breadcrumb, meta lines, hints, code blocks, badges and the footer. `--text-ui` 13px is navigation, buttons, inputs, tabs and pagination. `--text-large` 16px is the hero's lead.\n- Headings: `--text-display` 30px is the hero sentence (22px on a phone), `--text-h1` 22px a page title, `--text-h2` 17px the brand name, figures, grid titles and second-level headings in text, `--text-h3` 14px part names, panel, sidebar and dialog titles. Nothing is uppercased or tracked.\n- A black page: `--color-page`, `--color-canvas` and `--color-surface` are #000000; `--color-surface-alt` #101010 is alternate table rows and code blocks, `--color-surface-strong` #181818 panel titles, group rows and inline code. `--color-text` #bdbdbd is running text, `--color-text-muted` #808080 dates, numbers of parts and meta lines, `--color-heading` #ffffff headings and figures, `--color-heading-alt` #56c8ff sidebar titles.\n- `--color-link` and `--color-link-quiet` are #56c8ff, `--color-link-visited` #9e9eff, `--color-link-hover` and `--color-link-active` #ffffff. Links in running text are underlined (`--link-decoration`); navigation, contents, breadcrumb, tabs and pagination use `--link-decoration-quiet` (none) and take the underline on hover.\n- `--color-bar` #1177aa with `--color-bar-text` #ffffff is the navigation bar, table heads and dialog titles. `--color-bar-alt` #101010 with `--color-bar-alt-text` #bdbdbd is the head line and the footer; the brand name is set in `--color-bar-alt-text` because it stands on that bar. `--color-inverse` #56c8ff with `--color-inverse-text` #000000 is the current navigation link, tab and page number.\n- `--color-border` #555555 at `--border-width` 1px is every ordinary rule: between parts, under table rows, around panels, code blocks, grid cells and tabs. `--color-border-strong` #1177aa at `--border-width-strong` 5px is the rule under the header and the page header, the top of a grid cell and the left edge of a notice. `--color-border-muted` #303030 is the leader of a figure, the rules inside the list and the box of the empty state.\n- `--color-fill-1` to `--color-fill-4` repeat the three surfaces; chapters are told apart by their heavy top rule and number, not by colour. Text on any surface or fill is `--color-text`.\n- `--color-accent` #1177aa with white text is the count badge; `--color-accent-alt` #9e9eff is the edge of a \"new\" mark. Status colours are light enough to read on black: `--color-success` #60d060, `--color-warning` #e0b040, `--color-danger` #ff6060; these three and `--color-text-muted` were chosen for the black page, not measured.\n- Buttons are `--color-button` #1177aa with white text and a 1px edge in `--color-input-border`; the secondary button is drawn on the page itself (`--fill-button-secondary` transparent) in `--color-button-secondary-text`. Inputs are `--color-input` #101010 with white text.\n- Surface: all radii are 0 and every fill is flat. Boxes and controls stand on a hard underside in `--color-shadow` #555555 with no blur: `--shadow-panel` 3px, `--shadow-control` 2px (4px hovered, turned inside when pressed), `--shadow-dialog` 5px. `--fill-button-hover` darkens the button (80% of it over black). `--focus-ring` is a 2px solid outline; `--transition` none; `--backdrop-blur` 0px.\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-danger` on `--color-danger-surface` or the canvas, and `--color-text`, headings and links on the canvas, surfaces and fills only. Nothing but the bars stands on `--fill-page`. Keep to this so that other palettes work with the same structure.\n- One-off sizes written with `calc()`: the brand mark is 1.3 times `--text-h2`; joined tabs overlap by one `--border-width`.\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
\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
\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.p04.t05.u04\",\n \"library\": \"2026.10.07-2111\",\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 },\n \"source\": \"https://chrono.skin/s/v1-br-4454\",\n \"short\": \"v1-br-4454\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #fffceb;\n --color-canvas: #fffceb;\n --color-surface: #fffceb;\n --color-surface-alt: #ffffff;\n --color-surface-strong: #eeeeee;\n --color-bar: #111111;\n --color-bar-text: #dddddd;\n --color-bar-alt: #222222;\n --color-bar-alt-text: #dddddd;\n --color-inverse: #ff3333;\n --color-inverse-text: #000000;\n --color-text: #111111;\n --color-text-muted: #444444;\n --color-heading: #000000;\n --color-heading-alt: #111111;\n --color-link: #00449e;\n --color-link-quiet: #111111;\n --color-link-visited: #444444;\n --color-link-hover: #000000;\n --color-link-active: #ff3333;\n --color-border: #111111;\n --color-border-strong: #000000;\n --color-border-muted: #cccccc;\n --color-accent: #ff3333;\n --color-accent-text: #000000;\n --color-accent-alt: #ff3333;\n --color-fill-1: #cdecff;\n --color-fill-2: #ffffff;\n --color-fill-3: #eeeeee;\n --color-fill-4: #dddddd;\n --color-button: #111111;\n --color-button-text: #ffffff;\n --color-button-hover-text: #cdecff;\n --color-button-secondary: #eeeeee;\n --color-button-secondary-text: #111111;\n --color-input: #ffffff;\n --color-input-text: #111111;\n --color-input-border: #111111;\n --color-disabled: #eeeeee;\n --color-disabled-text: #444444;\n --color-danger: #b00000;\n --color-danger-surface: #ffffff;\n --color-success: #1a6b1a;\n --color-warning: #7a4e00;\n --color-notice: #cdecff;\n --color-notice-text: #111111;\n --color-focus: #00449e;\n --color-shadow: #000000;\n --color-overlay: #eeeeee;\n}\n\n/* @part type */\n:root {\n --font-body: Menlo, Consolas, \"DejaVu Sans Mono\", \"Liberation Mono\", monospace;\n --font-heading: Arial, Verdana, Helvetica, sans-serif;\n --font-ui: Menlo, Consolas, \"DejaVu Sans Mono\", \"Liberation Mono\", monospace;\n --font-mono: Menlo, Consolas, \"DejaVu Sans Mono\", \"Liberation Mono\", monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 30px;\n --text-h1: 22px;\n --text-h2: 17px;\n --text-h3: 14px;\n --line-body: 1.35;\n --line-heading: 1.15;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: none;\n --link-decoration: underline;\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" } }