{ "id": "v1-br-7bab", "long_id": "v1.brutalism.portal.s07.p11.t10.u11", "name": "Web brutalism, board", "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": "portal", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "The notice board of web brutalism, as run between 2014 and 2019 by towns, campuses and communities that wanted every small advertisement on one page and nothing else: a search line, a black bar of sections, and the whole directory as ruled boxes of plain links with a count beside each. This one is printed like a flyer, in black Arial and Arial Black on pure yellow with blue links, one blue band for the headline and red for what is new. Nothing is rounded, graded, blurred or animated and the front page has no pictures; structure is 2px black outlines, 8px black slabs and the order of the lists.", "url": "https://chrono.skin/s/v1-br-7bab", "preview_url": "https://chrono.skin/s/v1-br-7bab/specimen.html", "files": { "STYLE.md": "# Web brutalism, board\n\n## Summary\n\nThe notice board of web brutalism, as run between 2014 and 2019 by towns, campuses and communities that wanted every small advertisement on one page and nothing else: a search line, a black bar of sections, and the whole directory as ruled boxes of plain links with a count beside each. This one is printed like a flyer, in black Arial and Arial Black on pure yellow with blue links, one blue band for the headline and red for what is new. Nothing is rounded, graded, blurred or animated and the front page has no pictures; structure is 2px black outlines, 8px black slabs and the order of the lists.\n\n## Layout\n\n- The page fills the window: `.ds-page` keeps the browser's `--space-3` (8px) margin and `.ds-page__frame` is `--size-page` (100%) wide with no maximum and pads its sides by the same 8px, so a palette whose canvas differs from its page shows a sheet with a margin inside it. Nothing is centred.\n- Order from the top: `.ds-nav`, the view, `.ds-footer`. The header and footer are written once; the views change between them.\n- `.ds-nav` is two lines closed by a slab of `--border-width-strong`. `.ds-nav__head` is one line on the canvas: the `.ds-brand` at the left, the search form (`.ds-nav__search`, an input no wider than `--size-search` 380px and a secondary button) beside it, and `.ds-nav__tools` (the primary \"post\" button and the account `.ds-menu`) at the right. `.ds-nav__bar` under it is a line of `--fill-bar` with the sections as words, one `.ds-menu` that drops the remaining sections, and the help link pushed to the right with `.ds-nav__item--right`. There is no navigation at the side.\n- The home page is one stack inside `.ds-page__body`: `.ds-hero` as an inverted band across the page, `.ds-stats` as a strip of four ruled cells touching it, then `.ds-page__section` blocks `--space-5` (20px) apart, each under a `.ds-page__label` (a heading on a rule, with an optional small `.ds-page__more` link at its right end). The first block is `.ds-board`: every section of the site as a `.ds-panel` of links, flowing down five text columns (`column-count`), `--space-4` (12px) apart. Then the `.ds-grid` of four pinned notices and the `.ds-list` of the newest. The home page has no sidebar.\n- Inner pages (one section's list, one notice, the form, the help page) keep the header and footer. `.ds-page__body` opens with the `.ds-breadcrumb` in small type and `.ds-page-header` (30px title, one grey line, one button at the right, a slab below); the hero and the figures are not used. Below it `.ds-page__columns` is two columns `--space-5` apart: on a list page the `.ds-sidebar` of filters at `--size-filter` (230px) on the left and `.ds-page__main` beside it, carrying `.ds-tabs`, the `.ds-table` in `.ds-tabs__body` and `.ds-pagination`; on every other inner page (`.ds-page__columns--aside`) `.ds-page__main` first and `.ds-page__aside` at `--size-aside` (320px) on the right, carrying the short boxes that belong to the page (who pinned it, the messages, a dialog, the rules), enough of them that the columns end near each other.\n- Views. The specimen is one small site with five views, one showing at a time. `board` is the home page: headline, figures, the directory, four pinned notices, the newest four. `listings` is one section: filters, tabs over the table of notices, pagination, the empty state of a saved search. `notice` is one notice: its pictures, text and facts, with the person who pinned it, the two messages and the question before reporting it beside them. `post` is the form: how far along, the form with its error and its four buttons, a preview and the rules beside it. `help` is running text and the questions that open and close, with the marks, the link colours and the keeper beside them. A view is `
` holding one `.ds-page__body`; links between views are plain `href=\"#id\"`.\n- Spacing scale: `--space-1` 2px is the padding of tabs, page numbers and menu links (vertical) and the gap under a list title; `--space-2` 4px is the padding of buttons, inputs, table cells and bar links (vertical), of badges, and the gap between tabs; `--space-3` 8px is the page margin, the padding of panels, form cells and list rows and the gap between buttons; `--space-4` 12px is the gap between the directory's columns, the padding of grid cells, buttons and bar links (horizontal) and the gap between paragraphs; `--space-5` 20px is the gap between blocks and between columns and the padding of the hero; `--space-6` 32px is the space at the foot of a page.\n- Fixed sizes: `--size-label` 150px is the label cell of a form, `--size-field` 360px a text input, `--size-num` 90px a numeric table column, `--size-dialog` 420px a dialog, `--size-slide` 200px the height of a carousel slide, `--size-menu` 190px a dropped menu or a tooltip.\n- Below 1100px the directory is three columns; below 800px it is two, the search line goes under the name, every pair of columns stacks in source order, figures go two to a line, the grid is two columns, form labels sit above their fields, the headline drops to `--text-h1` and table cells marked `.ds-table__extra` are left out. Nothing scrolls sideways except a carousel inside its own box.\n- On a phone (800px and below) `.ds-nav__search` goes to its own full-width row under the brand and `.ds-nav__item--right` loses its push to the right; the `more sections` drop-down (`.ds-menu--right`) opens from the left edge of its button. At 560px and below `.ds-nav__bar` becomes a grid of six columns: the first three items span two columns each, the drop-down and the right-hand link span three each, and the drop-down's `.ds-menu__list` is never wider than the screen minus `--space-4` at each side. There is no menu button, and the current section 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- One small sans: `--font-body`, `--font-heading` and `--font-ui` are Helvetica, Verdana, Arial, \"Liberation Sans\", sans-serif; `--font-mono` is Monaco, \"Liberation Mono\", monospace.\n- `--text-base` 13px with `--line-body` 1.3; `--text-small` 11px; `--text-ui` 12px, so navigation and controls are a size under the text; `--text-large` 14px. Headings are bold: `--text-display` 27px, `--text-h1` 20px, `--text-h2` 16px, `--text-h3` 13px.\n- No link is underlined at rest (`--link-decoration` and `--link-decoration-quiet` are none): links are known by their blue. They underline on hover. Nothing is uppercased or tracked.\n\n- Black on white with the browser's own blue: `--color-page`, `--color-canvas` and `--color-surface` are #ffffff; `--color-text`, `--color-heading`, `--color-heading-alt` and every border are #000000; `--color-text-muted` is #444444.\n- `--color-link`, `--color-link-quiet`, `--color-link-visited` and `--color-focus` are #0000ee, the default link colour: on a text-only front page nearly everything is a blue underlined link and visited links are not told apart. `--color-link-hover` and `--color-link-active` are #cc0000.\n- `--color-bar` #000000 with white `--color-bar-text` is the black line of navigation, table heads and dialog titles. `--color-bar-alt` (footer) is white with black text. `--color-inverse` #0000ee with white text is the current navigation item.\n- The only tints are the faint blues that a blue link leaves around itself: `--color-surface-alt` #f8f8ff, `--color-surface-strong`, `--color-notice` and `--color-disabled` #f0f0ff, `--color-fill-4` and `--color-overlay` #d8d8ff, `--color-border-muted` #b8b8f8. `--color-fill-1` to `--color-fill-3` repeat white and the two faintest.\n- `--color-accent` #cc0000 with white text is the count badge, the one red on the page; `--color-accent-alt` is the same red, as a mark.\n- Buttons are white with a black edge: the primary has black text, the secondary blue text. Inputs are white with a black edge.\n- Status: `--color-danger` #cc0000 is measured; `--color-success` #006400 and `--color-warning` #8a4b00 are derived, dark enough to read on white.\n\n- One weight for everything: `--border-width` and `--border-width-strong` are both 2px solid, so cells, boxes, controls and the rules under the header are the same black line.\n- Boxes are framed twice: `--shadow-panel` draws a second 2px line in `--color-border` 3px outside a panel, and `--shadow-dialog` a 4px band of `--color-border-strong` around a dialog, both without blur. Controls are flat; a hovered button gets a 2px line along its foot and a pressed one a 2px inner frame.\n- The page is inverted: `--fill-page` is `--color-inverse`, so whatever of the window lies outside the sheet is a solid block of the inverse colour. Every other fill is its plain palette colour.\n- All radii are 0; `--focus-ring` is a 2px solid outline; `--transition` none.\n\n## Components\n\n- `.ds-page` on ``: page colour, 8px margin, base type. Everything goes in `.ds-page__frame`; a view's content in `.ds-page__body`. `.ds-page__section` is a block (`--last` drops its gap), `.ds-page__label` its caption with an optional `.ds-page__more` link, `.ds-page__columns` the two columns of an inner page (`--aside` puts the narrow one on the right), `.ds-page__main` and `.ds-page__aside` their halves.\n- `.ds-nav`: the header. `.ds-nav__head` holds the brand, `.ds-nav__search` and `.ds-nav__tools`; `.ds-nav__bar` is a list of `.ds-nav__item` each holding a `.ds-nav__link` or a `.ds-menu`. The current section is an inverted block: the stylesheet marks the link whose `href` names the showing view (one selector per view, the home link when none is named); on a page of its own give the link `is-current`.\n- `.ds-brand`: the mark and name, a link to the home page. `.ds-brand__mark` is a square tile dressed like the primary button (`--fill-button`, `--color-button-text`, the control edge, radius and shadow) with the mark drawn in square caps; `.ds-brand__name` is 30px heading type. The name `chronoskin` and the mark are placeholders for the installing project's own.\n- `.ds-menu`: a `
` whose `` keeps the browser's own triangle and drops `.ds-menu__list`, a ruled box of `.ds-menu__link` items on `--color-surface`. In the bar it takes the bar's text colour; `.ds-menu--plain` is one on the canvas, `.ds-menu--right` opens toward the left.\n- `.ds-breadcrumb`: a small line of `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` (`/`) between them, ending in a bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the home page's inverted band: `.ds-hero__main` with `.ds-hero__title` (56px) and `.ds-hero__lead`, and `.ds-hero__actions` with one large primary button at the right. No links and no secondary button on the band.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__main` with `.ds-page-header__title` and one `.ds-page-header__text` line; `.ds-page-header__action` holds one button. A slab closes it.\n- `.ds-stat`: one figure, a 30px `.ds-stat__value` over a small `.ds-stat__label`, in a ruled cell on the alternate surface. Three to five sit in a `.ds-stats` strip.\n- `.ds-board`: the directory: panels flowing down five columns. Inside a panel, `.ds-board__list` is one link per line (`.ds-board__item`) with a `.ds-board__count` at the right; the same list serves any short list of links with a mark.\n- `.ds-panel`: a 2px ruled box with a `.ds-panel__title` strip on the strong surface and a `.ds-panel__body`; `.ds-panel__text` is a paragraph in it.\n- `.ds-prose`: running text: h1, h2, h3 in heading type, paragraphs and square-bulleted lists no wider than 86ch, `code` in small monospace on the strong surface.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` for links inside a message. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: a flat block with a 2px edge, a `\n \n
\n Post a notice\n
\n my notices (3)\n \n
\n
\n \n \n \n\n \n
\n
\n
\n
\n

Everything the town has to sell, lend, find or give away.

\n

One page of plain notices, pinned up by the people who live here. No pictures on this page, no account needed to read, and a notice comes down by itself after thirty days.

\n
\n
\n Pin up a notice, free\n
\n
\n
    \n
  • 4408 notices up today
    • \n
  • 61 pinned since midnight
    • \n
  • 30 days before one comes down
    • \n
  • 0.00 to post, to read, to reply
    • \n
\n\n
\n

The board how the sections work

\n
\n
\n

For sale

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

Housing

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

Wanted

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

Work

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

Lost and found

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

Services

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

Free

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

Community

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

Events

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

Pinned at the top this week how a notice gets pinned

\n
\n
\n

for sale / boats new

\n

Rowing boat, 12 foot, with oars

\n

Clinker built, dry all winter, on a road trailer. See it at the Old Quay any evening.

\n

Read the notice

\n
\n
\n

housing / rooms to let

\n

Room over the bakery, from 1 May

\n

Warm in the mornings. Shared kitchen, own door to the yard, bills in the rent.

\n

Read the notice

\n
\n
\n

events / markets and fairs

\n

Spring jumble, the school hall, Saturday

\n

Tables are free. Bring what you no longer want and take what you do. Doors at ten.

\n

Read the notice

\n
\n
\n

lost and found / found

\n

Grey cat, white bib, very loud

\n

Has lived in the allotment shed since Monday. Eats well. Whose is she?

\n

Read the notice

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

Pinned in the last hour all of today

\n \n
\n
\n
\n\n \n
\n
\n
    \n
  1. the board
    2. \n
  2. /
    3. \n
  3. for sale
    4. \n
  4. /
    5. \n
  5. bicycles
    6. \n
\n
\n
\n

For sale: bicycles

\n

214 notices, the newest first. A price with nothing after it is what the seller asks.

\n
\n
Post in bicycles
\n
\n
\n \n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
No.NoticeWherePinnedPrice
48213Touring bicycle, steel frame, 56cm newOld Quaytoday 09:14180.00
48207Child's bicycle, 20 inch wheels, two ownersHill Roadtoday 08:0235.00
48195Folding bicycle, three gears, needs a tyre reservedStationyesterday60.00
48188Pair of panniers, canvas, waterproofedOld Quayyesterday25.00
48170Tandem, 1980s, runs well soldMill Lane2 days ago240.00
48164Racing bicycle, 54cm, with spare wheels price droppedNorth Field2 days ago310.00
48151Box of inner tubes and brake blocksStation3 days ago8.00
48139Cargo trailer for a bicycle, home made withdrawnHill Road4 days ago45.00
\n \n
\n
\n
\n

Your saved search: \"unicycle\"

\n
\n

Nothing pinned under that word.

\n

Nobody in town is selling a unicycle today. Pin up a wanted notice and the board will ask for you.

\n Post a wanted notice\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n
    \n
  1. the board
    2. \n
  2. /
    3. \n
  3. bicycles
    4. \n
  4. /
    5. \n
  5. no. 48213
    6. \n
\n
\n
\n

Touring bicycle, steel frame, 56cm: 180.00

\n

No. 48213, for sale / bicycles, Old Quay. Pinned today at 09:14, comes down on 13 April.

\n
\n
Reply to the seller
\n
\n
\n
\n
\n
\n
\n

[picture 1 of 3: the whole bicycle, drive side]

\n

[picture 2 of 3: the rear rack and mudguard]

\n

[picture 3 of 3: the scratch on the top tube]

\n
\n
\n 1 of 3. Drag sideways for the next.\n
    \n
    • \n
    • \n
    • \n
\n
\n
\n
\n
\n

What it is

\n

A steel touring bicycle I have ridden to work for six years and across two countries once. It has a new chain and tyres from last spring, racks front and back, and mudguards that do not rattle. The frame number is stamped under the bottom bracket; quote no. 48213 when you write.

\n

What goes with it

\n
    \n
  • Two canvas panniers, one with a mended strap.
    • \n
  • A pump, a lock with both keys, a spare tube.
    • \n
  • The original bell, which sticks in the rain.
    • \n
\n

Come and ride it round the quay before you decide. Cash or a transfer on the day; I will not post it.

\n
\n
\n

The facts

\n \n \n \n \n \n \n \n
Framesteel, lugged, 56cm1
Gearsthree by eight, friction levers24
Wheels700c, 36 spokes each2
Weightwith racks, without bags, in kg14.5
\n
\n
\n \n
\n
\n
\n\n \n
\n
\n
    \n
  1. the board
    2. \n
  2. /
    3. \n
  3. post
    4. \n
  4. /
    5. \n
  5. write the notice
    6. \n
\n
\n
\n

Pin up a notice

\n

Four steps: where it goes, what it says, a look at it, up on the board. Nothing is shown until the last.

\n
\n
Read the rules first
\n
\n
\n
\n
\n

Step 2 of 4: what it says 50%

\n
\n
\n
\n

Not pinned yet. One line below needs putting right.

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

What it is, in the words a neighbour would search for.

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

A price is a number and nothing else. Put \"or near offer\" in the text.

\n
\n
\n
\n \n
\n \n
\n
\n
\n Replies\n
\n \n

Off means people can only come and knock.

\n
\n
\n
\n Promise\n
\n \n
\n
\n
\n
\n \n \n \n \n
\n
\n
\n \n
\n
\n
\n\n \n
\n
\n
    \n
  1. the board
    2. \n
  2. /
    3. \n
  3. help
    4. \n
  4. /
    5. \n
  5. rules
    6. \n
\n
\n
\n

Help and rules

\n

How the board works, what may go on it, and what the marks beside a notice mean.

\n
\n
Post a notice
\n
\n
\n
\n
\n

The board is a wall with pins in it

\n

Anyone may read it. Anyone with an address in town may pin a notice to it. The board keeps no pictures on its front page, sells nothing itself and shows no advertising other than the notices, which are all advertising.

\n

What may go up

\n

Things you own, rooms you may let, work you can offer or need done, what you have lost and what you have found. Write the headline the way you would say it over a fence.

\n

What may not

\n
    \n
  • Animals for sale, and anything that needs a licence to sell.
    • \n
  • The same notice in two sections.
    • \n
  • A price with words in it. The price box takes 180 and not 180 ono.
    • \n
\n

A notice that breaks a rule comes down and its owner is told which one.

\n
\n
\n

Asked most weeks

\n
\n
\n Why did my notice come down?\n

Thirty days passed, or somebody reported it. You were sent a line saying which. A notice that timed out can be pinned up once more from \"my notices\".

\n
\n
\n Can I change the price after pinning?\n

Yes, downwards, as often as you like. The notice is marked \"price dropped\" for two days.

\n
\n
\n Who sees my address?\n

Nobody. Replies are passed on by the board until you answer one yourself.

\n
\n
\n How does a notice get pinned at the top?\n

Four are picked by hand each Monday. It cannot be bought.

\n
\n
\n
\n
\n \n
\n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.brutalism.portal.s07.p11.t10.u11\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"brutalism\",\n \"years\": [\n 2014,\n 2019\n ]\n },\n \"archetype\": \"portal\",\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-7bab\",\n \"short\": \"v1-br-7bab\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f8f8ff;\n --color-surface-strong: #f0f0ff;\n --color-bar: #000000;\n --color-bar-text: #ffffff;\n --color-bar-alt: #ffffff;\n --color-bar-alt-text: #000000;\n --color-inverse: #0000ee;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #444444;\n --color-heading: #000000;\n --color-heading-alt: #000000;\n --color-link: #0000ee;\n --color-link-quiet: #0000ee;\n --color-link-visited: #0000ee;\n --color-link-hover: #cc0000;\n --color-link-active: #cc0000;\n --color-border: #000000;\n --color-border-strong: #000000;\n --color-border-muted: #b8b8f8;\n --color-accent: #cc0000;\n --color-accent-text: #ffffff;\n --color-accent-alt: #cc0000;\n --color-fill-1: #ffffff;\n --color-fill-2: #f8f8ff;\n --color-fill-3: #f0f0ff;\n --color-fill-4: #d8d8ff;\n --color-button: #ffffff;\n --color-button-text: #000000;\n --color-button-hover-text: #0000ee;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #0000ee;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #000000;\n --color-disabled: #f0f0ff;\n --color-disabled-text: #444444;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffff;\n --color-success: #006400;\n --color-warning: #8a4b00;\n --color-notice: #f0f0ff;\n --color-notice-text: #000000;\n --color-focus: #0000ee;\n --color-shadow: #000000;\n --color-overlay: #d8d8ff;\n}\n\n/* @part type */\n:root {\n --font-body: Helvetica, Verdana, Arial, \"Liberation Sans\", sans-serif;\n --font-heading: Helvetica, Verdana, Arial, \"Liberation Sans\", sans-serif;\n --font-ui: Helvetica, Verdana, Arial, \"Liberation Sans\", sans-serif;\n --font-mono: Monaco, \"Liberation Mono\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 14px;\n --text-display: 27px;\n --text-h1: 20px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: 1.3;\n --line-heading: 1.2;\n --line-display: 1.2;\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 --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: 2px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 0 0 0 3px var(--color-canvas), 0 0 0 5px var(--color-border);\n --shadow-control: none;\n --shadow-control-hover: inset 0 -2px 0 var(--color-button-hover-text);\n --shadow-control-pressed: inset 0 0 0 2px var(--color-border-strong);\n --shadow-dialog: 0 0 0 4px var(--color-border-strong);\n --shadow-text: none;\n --fill-page: var(--color-inverse);\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: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }