{ "id": "v1-br-421b", "long_id": "v1.brutalism.blog.s04.p02.t01.u11", "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-421b", "preview_url": "https://chrono.skin/s/v1-br-421b/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-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- 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 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.p02.t01.u11\",\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-421b\",\n \"short\": \"v1-br-421b\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f7f7f7;\n --color-surface-strong: #efefef;\n --color-bar: #ddeeff;\n --color-bar-text: #333333;\n --color-bar-alt: #ffffff;\n --color-bar-alt-text: #555555;\n --color-inverse: #1111aa;\n --color-inverse-text: #ffffff;\n --color-text: #444444;\n --color-text-muted: #808080;\n --color-heading: #333333;\n --color-heading-alt: #ff0000;\n --color-link: #1111aa;\n --color-link-quiet: #1111aa;\n --color-link-visited: #800080;\n --color-link-hover: #ff0000;\n --color-link-active: #ff0000;\n --color-border: #aaaaaa;\n --color-border-strong: #8899cc;\n --color-border-muted: #dddddd;\n --color-accent: #ddffaa;\n --color-accent-text: #333333;\n --color-accent-alt: #ff0000;\n --color-fill-1: #ddeeff;\n --color-fill-2: #ddffaa;\n --color-fill-3: #ffffaa;\n --color-fill-4: #f7f7f7;\n --color-button: #ddffaa;\n --color-button-text: #333333;\n --color-button-hover-text: #000000;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #444444;\n --color-input: #ffffff;\n --color-input-text: #333333;\n --color-input-border: #808080;\n --color-disabled: #efefef;\n --color-disabled-text: #808080;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffff;\n --color-success: #2a7a00;\n --color-warning: #9a5b00;\n --color-notice: #ffffaa;\n --color-notice-text: #333333;\n --color-focus: #1111aa;\n --color-shadow: #aaaaaa;\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: 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" } }