{ "id": "v1-br-8a11", "long_id": "v1.brutalism.landing.s08.p10.t01.u01", "name": "Web brutalism, programme", "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": "landing", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "The single column of web brutalism, as published between 2014 and 2019 by people who argued that a page needs seven declarations and no more: one narrow column of large serif text in the middle of the window, with nothing beside it, used here for a small conference and its timetable. This one is a blue screen: white Georgia on pure blue, links in terminal green, small monospaced capitals for everything that is a label, and rules drawn as rows of dots. Nothing is rounded, graded, blurred or animated and there are no pictures; structure is the order of the document, the size of the type and the dotted lines.", "url": "https://chrono.skin/s/v1-br-8a11", "preview_url": "https://chrono.skin/s/v1-br-8a11/specimen.html", "files": { "STYLE.md": "# Web brutalism, programme\n\n## Summary\n\nThe single column of web brutalism, as published between 2014 and 2019 by people who argued that a page needs seven declarations and no more: one narrow column of large serif text in the middle of the window, with nothing beside it, used here for a small conference and its timetable. This one is a blue screen: white Georgia on pure blue, links in terminal green, small monospaced capitals for everything that is a label, and rules drawn as rows of dots. Nothing is rounded, graded, blurred or animated and there are no pictures; structure is the order of the document, the size of the type and the dotted lines.\n\n## Layout\n\n- One centred column. `.ds-page` pads the window by `--space-4` (18px); `.ds-page__frame` is at most `--size-page` (756px) wide including its own 18px of padding at each side, which leaves 720px for text; it is centred and holds everything: header, views and footer. There is never a second column, a grid of the page or a sidebar beside the text.\n- `.ds-nav` is the head of the document, closed by a rule of `--border-width-strong`: `.ds-nav__head` with the `.ds-brand` at the left and a small `.ds-nav__tagline` at the right, then `.ds-nav__bar`, one line of `--fill-bar` holding the parts of the site as a numbered contents line (the stylesheet writes the numbers) and one `.ds-menu`.\n- Every view is one `.ds-page__body`, a stack. The home page opens with `.ds-hero` (a small line, a 72px sentence, a paragraph, one button and one link, a heavy rule below), then `.ds-stats` and the `.ds-progress` bar, then `.ds-page__section` parts `--space-6` (60px) apart. Each part opens with a `.ds-page__label`, a 26px heading on a rule that the stylesheet numbers within its view. On the home page: the day at a glance as a `.ds-list`, four speakers as a two by two `.ds-grid`, the tickets as a `.ds-panel`.\n- Inner pages (the programme, one session, the form, practical matters) keep the head and the footer and stay one column. `.ds-page__body` opens with the `.ds-breadcrumb` in small capitals, then `.ds-page-header` (34px title, one line, one button at the right, a heavy rule below); the hero and the figures are not used. Then the parts in order: `.ds-tabs` with the `.ds-table` in `.ds-tabs__body`, the `.ds-legend` and the centred `.ds-pagination` under it; or running text; or the messages, the form and the dialog one under the other. The only thing ever set beside text is `.ds-sidebar`, a small box floated into the right of the first part of a session page, `--size-aside` (230px) wide; the text runs round it.\n- Views. The specimen is one small site with five views, one showing at a time. `event` is the home page: what and when, figures and how full it is, Friday at a glance, four speakers, tickets. `programme` is the timetable of one day under the days as tabs, the marks, the days by number and the empty Sunday. `session` is one session: who gives it, its facts floated beside the abstract, and the switch that keeps it in your programme. `register` is the two messages the form can answer with, the form with its error and four buttons, and the question before withdrawing. `practical` is running text, the questions that open and close, and further links. A view is `
` holding one `.ds-page__body`; links between views are plain `href=\"#id\"`.\n- Spacing scale: `--space-1` 3px is the padding of navigation links and the gap under a form label; `--space-2` 6px is the padding of buttons, inputs and table cells (vertical) and of badges; `--space-3` 12px is the padding of list rows, notices and table cells (horizontal) and the gap between buttons; `--space-4` 18px is the page margin, the padding of panels, grid cells and dialogs and the gap between paragraphs and form rows; `--space-5` 30px is the space round the hero and page header and the indent of lists; `--space-6` 60px is the gap between parts and the space at the foot of the page.\n- Fixed sizes: `--size-time` 150px is the hour column of the timetable (the list uses six tenths of it), `--size-field` 440px a text input, `--size-num` 70px a numeric table column, `--size-dialog` 460px a dialog, `--size-menu` 230px a dropped menu or tooltip.\n- Below 640px the column takes the whole window with 12px at each side, the headline and figures drop a size, figures go two to a line, the grid is one column, the sidebar stops floating and sits between two rules above the text, the hour column shrinks to its text and table cells marked `.ds-table__extra` are left out. Nothing scrolls sideways.\n- On a phone (560px and below) there is no menu button: `.ds-nav__bar` becomes a grid of three equal columns, the four links one cell each and the last item, the `earlier years` drop-down, two cells, so the five entries stand in two rows; link text wraps anywhere. The drop-down opens as it does on a wide screen 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-heading` are \"Times New Roman\", Times, serif: the browser's default. `--font-ui` is Arial, Helvetica, sans-serif at `--text-ui` 13px, the look of an unstyled form control; it is used for buttons, inputs, the count badge and the line of navigation links. `--font-mono` is \"Courier New\", Courier, monospace, for code and entry dates. All are system fonts; nothing was substituted.\n- `--text-base` 16px with `--line-body` 1.2 is all running text. `--text-small` 13px is meta lines, hints, the tagline, code and the footer. `--text-large` 18px is the hero's lead line and list titles.\n- Headings are the browser's: `--text-h1` 32px, `--text-h2` 24px, `--text-h3` 19px, all bold, `--line-heading` 1.1, never uppercased, never tracked. `--text-display` 48px bold at `--line-display` 1 is the hero headline and the largest text on a page; the name in the brand is 32px.\n- `--color-text` and `--color-heading` are #000000 on `--color-page` #ffffff. `--color-text-muted` #767676 is dates, counts and meta lines. `--color-heading-alt` #000080 (navy) is sidebar titles.\n- `--color-link` #0000ee, `--color-link-visited` #800080, `--color-link-hover` #000080, `--color-link-active` #ff0000: the browser's link colours. Every link is underlined at rest: `--link-decoration`, `--link-decoration-quiet` and `--link-decoration-hover` are all `underline`. `--color-link-quiet` equals the link colour.\n- `--color-bar` is #ffffff with #000000 text: the link bar, table heads and dialog titles are plain bold text on the page, told apart only by rules. `--color-bar-alt` (footer) is the same. Text on a bar is always `--color-bar-text`, on the footer `--color-bar-alt-text`.\n- `--color-inverse` #000000 with `--color-inverse-text` #ffffff is the one inverted block: the current item of the navigation.\n- `--color-border` and `--color-border-strong` are #000000. `--border-width` 1px is table cells, panels, grid cells, list rows and the sidebar rule; `--border-width-strong` 2px is the rule under the navigation, hero and page header, the top of the footer, and the outline of notices and dialogs. `--color-border-muted` #808080 is unused by the specimen and kept for faint dividers.\n- Surfaces: `--color-surface` #ffffff for table cells and panels, `--color-surface-alt` #f7f7f7 for alternate table rows, `--color-surface-strong` #efefef for panel titles and group rows. `--color-fill-1` to `--color-fill-4` repeat these three; grid cells are told apart by their rules, not their fills. Text on any surface or fill is `--color-text`.\n- `--color-accent` #000080 with `--color-accent-text` #ffffff is the count badge. `--color-accent-alt` #ff0000 is only the asterisk in front of a \"new\" marker, never text.\n- Status colours are the sixteen-colour set the links come from: `--color-success` #008000, `--color-warning` #808000, `--color-danger` #ff0000. They colour bold bracketed words and error text; `--color-danger` with `--color-danger-surface` is also the error notice and the destructive button. Green and olive were not measured in a reference; they are the nearest members of the same set.\n- Controls are the browser's, squared: buttons are `--color-button` #efefef with black 13px Arial and a `--border-width` edge in `--color-input-border` #767676 drawn in `--border-style`; inputs are white with the same edge. `--shadow-control` is a 1px bevel, two inset lines mixed from the button colour (lighter at the top and left, darker at the bottom and right) with no blur; `--shadow-control-pressed` turns it over and `--fill-button-hover` darkens the button a little. Another surface set may replace the bevel with nothing, an offset or a heavy underside; the layout only asks for the tokens. A pressed button takes `--color-border-strong`; a disabled one `--color-border-muted`.\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 page. Keep to this so that other palettes work with the same structure.\n- Hover, active and focus were not measurable on static captures; they use the browser's defaults. Focus is a 1px dotted outline. All radii are 0; panels and dialogs have no shadow; every fill is its plain palette colour.\n\n- A white page with two loud bands. `--color-page`, `--color-canvas` and `--color-surface` are #ffffff; `--color-surface-alt`, `--color-surface-strong`, `--color-notice` and `--color-overlay` are the one grey, #efefef.\n- `--color-bar` #6487dc (cornflower blue) with white `--color-bar-text` is the line of navigation, table heads and dialog titles. `--color-bar-alt` #ff6d06 (orange) with black text is the footer: the second band. `--color-inverse` #000000 with white text is the current navigation item.\n- Text is #000000; `--color-text-muted` is #555555. Headings are not black: `--color-heading` and `--color-heading-alt` are #0066cc, the colour of the links, and a heading is told from a link by its size and the rule under it.\n- `--color-link`, `--color-link-quiet` and `--color-link-visited` are #0066cc; `--color-link-hover` is #000000 and `--color-link-active` #ff6d06.\n- Rules are blue: `--color-border` #6487dc for cells, boxes and row dividers, `--color-border-strong` #0066cc for the rule under the header, hero and page header and around notices and dialogs. `--color-border-muted` is #dddddd.\n- `--color-accent` #ff6d06 with black text is the count badge; `--color-accent-alt` is the same orange, as a mark only.\n- Fills alternate #ffffff and #efefef; there are no tinted blocks. Buttons are #efefef with black text and white with blue text; inputs are white with a #767676 edge.\n- Status: `--color-danger` #c00000, `--color-success` #1e6e00, `--color-warning` #a04400. None was measured; they are dark enough to read on white and on #efefef.\n\n## Components\n\n- `.ds-page` on ``: page colour, margin, base type. Everything goes in `.ds-page__frame`; a view's content in `.ds-page__body`. `.ds-page__section` is a part (`--last` drops its gap), `.ds-page__label` its numbered heading, `.ds-page__note` a small grey line under a part.\n- `.ds-nav`: the head. `.ds-nav__head` holds the brand and `.ds-nav__tagline`; `.ds-nav__bar` is a list of `.ds-nav__item` each holding one `.ds-nav__link`, numbered by the stylesheet, and may end with a `.ds-menu` in a plain `
  • `. The current part 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 26px bold 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`.\n- `.ds-breadcrumb`: a small line of `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` (`/`) between them, ending in `.ds-breadcrumb__current`.\n- `.ds-hero`: the introduction of the home page: `.ds-hero__kicker` (date and place), `.ds-hero__title` (72px), `.ds-hero__lead`, and `.ds-hero__actions` with one button and one text link. No box, no fill.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__main` with `.ds-page-header__title` (34px) and one `.ds-page-header__text` line; `.ds-page-header__action` holds one button. A heavy rule closes it.\n- `.ds-stat`: one figure, a 34px `.ds-stat__value` over a small `.ds-stat__label`. Three to five sit in a `.ds-stats` row, cut by upright rules.\n- `.ds-prose`: running text: h1 (34px, regular), h2, h3, paragraphs, square-bulleted lists, `code` in small monospace with no background.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` for secondary links. `.ds-links` is a square-bulleted list of links.\n- `.ds-button`: a flat block with a dotted edge, a `\n \n \n \n \n \n
    • \n
    \n

    Withdrawing

    \n
    \n
    \n

    Withdraw this registration?

    \n
    \n

    Your place goes to the next person on the list at once. Until 1 September you can register again if a seat is free.

    \n
    \n \n Keep my place\n
    \n
    \n
    \n
    \n
    \n \n \n\n \n
    \n
    \n
      \n
    1. chronoskin 2018
      2. \n
    2. /
      3. \n
    3. practical
      4. \n
    4. /
      5. \n
    5. getting there
      6. \n
    \n
    \n
    \n

    Practical

    \n

    Where it is, what to bring, how we behave.

    \n
    \n
    Register
    \n
    \n
    \n

    The old print works, by the canal

    \n

    The hall is the press room of a newspaper that stopped printing in 1994. It is ten minutes on foot from the station: leave by the north door, follow the canal with the water on your left, and stop at the brick chimney.

    \n

    What to bring

    \n

    A laptop only if you are in a workshop. Paper is provided. The network is slow on purpose and its name is plain.

    \n

    House rules

    \n
      \n
    • Speakers show pages, not slides of pages.
      • \n
    • Questions are questions.
      • \n
    • Nobody is photographed without being asked first.
      • \n
    \n

    If something goes wrong, find anyone with a green sticker.

    \n
    \n
    \n

    Asked every year

    \n
    \n
    \n Is there somewhere to stay?\n

    Two guest houses hold rooms for us until 1 August. Say the name of the conference when you write to them.

    \n
    \n
    \n Can I give my ticket to someone else?\n

    Yes. Tell us the new name by the Wednesday before, so the sticker is right.

    \n
    \n
    \n Will the talks be recorded?\n

    Sound only, and only where the speaker agrees. The files go up as plain links a month later.

    \n
    \n
    \n
    \n
    \n

    Further

    \n \n
    \n
    \n
    \n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.brutalism.landing.s08.p10.t01.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"brutalism\",\n \"years\": [\n 2014,\n 2019\n ]\n },\n \"archetype\": \"landing\",\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-8a11\",\n \"short\": \"v1-br-8a11\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #efefef;\n --color-surface-strong: #efefef;\n --color-bar: #6487dc;\n --color-bar-text: #ffffff;\n --color-bar-alt: #ff6d06;\n --color-bar-alt-text: #000000;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #555555;\n --color-heading: #0066cc;\n --color-heading-alt: #0066cc;\n --color-link: #0066cc;\n --color-link-quiet: #0066cc;\n --color-link-visited: #0066cc;\n --color-link-hover: #000000;\n --color-link-active: #ff6d06;\n --color-border: #6487dc;\n --color-border-strong: #0066cc;\n --color-border-muted: #dddddd;\n --color-accent: #ff6d06;\n --color-accent-text: #000000;\n --color-accent-alt: #ff6d06;\n --color-fill-1: #ffffff;\n --color-fill-2: #efefef;\n --color-fill-3: #ffffff;\n --color-fill-4: #efefef;\n --color-button: #efefef;\n --color-button-text: #000000;\n --color-button-hover-text: #0066cc;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #0066cc;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #efefef;\n --color-disabled-text: #767676;\n --color-danger: #c00000;\n --color-danger-surface: #ffffff;\n --color-success: #1e6e00;\n --color-warning: #a04400;\n --color-notice: #efefef;\n --color-notice-text: #000000;\n --color-focus: #0066cc;\n --color-shadow: #000000;\n --color-overlay: #efefef;\n}\n\n/* @part type */\n:root {\n --font-body: \"Times New Roman\", Times, serif;\n --font-heading: \"Times New Roman\", Times, serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 13px;\n --text-large: 18px;\n --text-display: 48px;\n --text-h1: 32px;\n --text-h2: 24px;\n --text-h3: 19px;\n --line-body: 1.2;\n --line-heading: 1.1;\n --line-display: 1;\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: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\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: none;\n --shadow-control: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 25%, white), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 60%, black);\n --shadow-control-hover: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 25%, white), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 60%, black), inset 0 0 0 2px color-mix(in srgb, var(--color-button) 25%, white);\n --shadow-control-pressed: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 60%, black), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 25%, white);\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) 92%, black);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }