{ "id": "v1-br-613b", "long_id": "v1.brutalism.shop.s06.p01.t03.u11", "name": "Web brutalism, shop", "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": "shop", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "The shop stripped to nothing, as run between 2014 and 2019 by one-person businesses and by larger ones that never changed their page: a single narrow sheet in the middle of the window with a centred letterhead, one orange line of links, and the goods as a ruled table of numbers, names and prices. The sheet is a pale beige on white, the text small dark Verdana with plain Times headings, links navy and purple, and every rule is the browser's own grooved line, the kind a bordered table or a horizontal rule draws when nobody styles it. There are no pictures, no cards that float, no rounded corners and nothing that moves; a thing is found by its number and bought with a default-looking button.", "url": "https://chrono.skin/s/v1-br-613b", "preview_url": "https://chrono.skin/s/v1-br-613b/specimen.html", "files": { "STYLE.md": "# Web brutalism, shop\n\n## Summary\n\nThe shop stripped to nothing, as run between 2014 and 2019 by one-person businesses and by larger ones that never changed their page: a single narrow sheet in the middle of the window with a centred letterhead, one orange line of links, and the goods as a ruled table of numbers, names and prices. The sheet is a pale beige on white, the text small dark Verdana with plain Times headings, links navy and purple, and every rule is the browser's own grooved line, the kind a bordered table or a horizontal rule draws when nobody styles it. There are no pictures, no cards that float, no rounded corners and nothing that moves; a thing is found by its number and bought with a default-looking button.\n\n## Layout\n\n- One centred sheet. `.ds-page` keeps a margin of `--space-3` (8px); `.ds-page__frame` is at most `--size-page` (940px) wide, centred, filled with `--color-canvas`, and holds everything: header, views and footer. `--fill-page` shows at both sides of it on a wide window.\n- `.ds-nav` is a letterhead: `.ds-nav__head` centres the `.ds-brand` and a small grey `.ds-nav__tagline`; under it `.ds-nav__bar` is one line of `--fill-bar` with the links centred on it. There is no second row and no navigation at the side.\n- Every view is one `.ds-page__body` (padding `--space-4`, 12px). The home page opens with `.ds-hero`, centred, closed by a heavy rule, then `.ds-stats` across the sheet, then `.ds-page__columns`: `.ds-page__main` and, `--space-5` (20px) to its right, `.ds-sidebar` at `--size-sidebar` (240px). The sidebar has no fill and no rule of its own; it starts with the basket as a `.ds-panel`.\n- The main column is a stack of `.ds-page__section` blocks `--space-5` apart. A block opens with a `.ds-page__label`: a bold Times line on a 1px rule, with an optional small link at its right end (`.ds-page__more`). On the home page: the departments as a `.ds-grid`, a short table of what to sow now, the shop's notes as a `.ds-list`.\n- Inner pages (a department, one item, the basket, the checkout) keep the letterhead, the line of links, the two columns and the footer. `.ds-page__body` opens with the `.ds-breadcrumb` in 10px, then `.ds-page-header` (26px Times title, one line of description, one button or a status at the right, a heavy rule below) across the sheet; the hero and the figures are not used. Below it the main column carries `.ds-tabs` with the `.ds-table` in `.ds-tabs__body` and `.ds-pagination` centred under it, or running text, or the form; the sidebar carries what belongs to that page (the box you buy from, the sum to pay, the facts), 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; the header and footer are written once around them. `shop` is the home page: hero, figures, departments, a table of what to sow now, notes, with the basket and departments beside them. `department` is one department: tabs over the full table, pagination, the empty state of the sale, the marks explained. `item` is one item: running text, a small table, related items, and the box to buy it from. `basket` is the table of lines with their quantities, the four actions, the confirmation for emptying it and the sum. `checkout` is the two messages the form can answer with, the form with its error, and the order beside it. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale: `--space-1` 2px is the vertical padding of the bar, buttons, inputs and tabs and the gap under a label; `--space-2` 4px is the padding of table cells (vertical), badges and panel titles; `--space-3` 8px is the page margin, the padding of panels, grid cells and table cells (horizontal), the gap between grid cells and between buttons; `--space-4` 12px is the padding of the sheet, the gap between paragraphs and between form rows; `--space-5` 20px is the gap between blocks and between the columns; `--space-6` 32px is the indent of lists and the space at the foot of the sheet.\n- Fixed sizes: `--size-field` 300px is a text input, `--size-qty` 56px a quantity, `--size-num` 80px a numeric or action column of a table, `--size-dialog` 400px a dialog.\n- Below 800px the sheet takes the whole window with no margin. The columns stack, the main column before the sidebar; figures go two to a line, the grid is two columns, the page header puts its action under the text and table cells marked `.ds-table__extra` are left out.\n- On a phone (800px and below) there is no menu button and no other change to the bar: `.ds-nav__bar` stays a centred, wrapping line of its links, with link padding `--space-1` by `--space-3`. 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- A dark page: `--color-page`, `--color-canvas` and `--color-surface` are #0c0c0c, `--color-surface-alt` #181818 (alternate table rows, tags), `--color-surface-strong` #202020 (label strips, panel titles, inline code).\n- `--color-bar` #ac130d with white `--color-bar-text` is the red block of navigation links, table heads and dialog titles. `--color-bar-alt` #202020 with #a0a0a0 text is the footer. `--color-inverse` #dedede with #0c0c0c text is the light block of the current navigation row, the current tab and the current page number.\n- Text is grey-white in three steps: `--color-text` and `--color-heading` #dedede, `--color-heading-alt` #c4c4c4 (sidebar and panel titles), `--color-text-muted` and `--color-link-quiet` #a0a0a0 (numbers, dates, meta, captions, tabs, sidebar links).\n- `--color-link` #8ab1ff, visited #5070b1, hover and active #ffffff.\n- Rules are greys: `--color-border` #585858 between cells, `--color-border-strong` #a0a0a0 for the rail, the frame, the hero and page header and around dialogs, `--color-border-muted` #303030 for the edge of a disabled button.\n- Block fills are the dark tints of tags and messages: `--color-fill-1` #3b320d, `--color-fill-2` #3b1719, `--color-fill-3` #15293d, `--color-fill-4` #202020 colour the cells of the index in turn; `--color-notice` is #15293d and `--color-danger-surface` #3b1719. `--color-text` and `--color-text-muted` are readable on all of them.\n- `--color-accent` #ac130d with white text is the count badge. Buttons are #303030 and #181818 with light text; inputs are #181818 with a #707070 edge.\n- Text-coloured status needs lighter colours than the references' dark red and yellow-brown fills: `--color-danger` #f0706a, `--color-success` #8fc07a, `--color-warning` and `--color-accent-alt` #d4b106 are derived (the same hues, lightened to read on #0c0c0c), not measured.\n- One sans: `--font-body`, `--font-heading` and `--font-ui` are \"Helvetica Neue\", Helvetica, Arial, sans-serif; `--font-mono` is Menlo, Consolas, monospace, used for everything that is a number of the catalogue: cell numbers, dates, sidebar counts, the id column of a table, inline code.\n- `--text-base` and `--text-ui` 16px with `--line-body` 1.45; `--text-small` 13px for numbers, meta, captions, label strips, table heads, form labels, badges and the footer; `--text-large` 18px for the hero's lead. Headings are bold: `--text-display` 29px (hero headline), `--text-h1` 26px (site name, page title, figures), `--text-h2` 18px (cell titles, form and empty titles), `--text-h3` 16px.\n- Navigation, tabs and buttons are bold (`--weight-ui` 700).\n- Links in running text are underlined; index and list titles, navigation, tabs, sidebar, breadcrumb, pagination and footer links are bare (`--link-decoration-quiet` none) and underline on hover. Current navigation items, tabs and page numbers are ``, not links. Nothing is uppercased or tracked.\n- Two weights far apart: `--border-width` 1px solid for cells, boxes, row dividers and controls; `--border-width-strong` 4px for the rule beside the rail, under a frame, the hero and the page header, the left edge of a notice and a quotation, and the outline of dialogs.\n- Heavy edges are also drawn with hard inset shadows, never blurred: `--shadow-control` puts a 2px line of `--color-border-strong` along the foot of every button and input (4px on hover, moved to the top when pressed), and `--shadow-panel` a 4px bar down the left of a panel. `--shadow-dialog` is `none`.\n- All radii are 0. `--fill-panel` is `--color-surface-alt`, `--fill-input` is `transparent` so a field is its edge and its heavy foot on whatever it stands on, `--fill-button-hover` lightens the button; every other fill is its plain palette colour. `--focus-ring` is a 2px dotted outline; `--transition` none.\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, `--color-text` and the muted and heading colours on the canvas, the surfaces and the four fills. Keep to this so that other palettes work with the same structure.\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 fill, 8px margin and base type. `.ds-page__frame` is the sheet; `.ds-page__body` the padding of a view; `.ds-page__columns` the two columns with `.ds-page__main` first. `.ds-page__section` is a block (`--last` drops its bottom gap), `.ds-page__label` its caption with an optional `.ds-page__more` link, `.ds-page__note` a small grey line under a block. `.ds-price` is a bold price that does not wrap.\n- `.ds-nav`: the header, closed by a rule. `.ds-nav__head` holds the brand and `.ds-nav__tagline`; `.ds-nav__bar` is a centred list of `.ds-nav__item`, each holding one `.ds-nav__link`. The current page is an inverted block: the stylesheet marks the link whose `href` names the view that is showing (one selector per view, the home link when the address names none, and the department for an item); on a page of its own give the link `is-current`.\n- `.ds-brand`: the site's mark and name, a link to the home page, centred at the top of the sheet. `.ds-brand__mark` is a square tile as tall as the name, dressed like the primary button: `--fill-button`, `--color-button-text`, the control's edge, radius and shadow. `.ds-brand__name` is 26px regular Times in `--color-heading`. The name `chronoskin` and the mark are placeholders for the installing project's own name and logo.\n- `.ds-breadcrumb`: a 10px line of `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` between them, ending in a bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the introduction of the home page, centred: `.ds-hero__title` (40px regular Times), one `.ds-hero__lead` paragraph at 15px no wider than 64 characters, and `.ds-hero__actions` with one button and one text link. A heavy rule closes it. No box, no fill.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__main` with `.ds-page-header__title` (26px) and one `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button or a status. A heavy rule closes it.\n- `.ds-stat`: one figure, centred: a 26px Times `.ds-stat__value` over a 10px grey `.ds-stat__label`. `.ds-stats` is the row: four across the sheet, divided by faint vertical rules (two to a line on a phone).\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, disc-bulleted and numbered lists indented 32px, `code` in the monospace at text size with no background.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the grey underlined link for meta and tools; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: a `\n \n \n
\n

Departments

\n \n
\n
\n

The small print

\n
\n
\n Post and returns\n

Second class, in a paper envelope, on Mondays. Seed that does not come up is replaced or refunded.

\n
\n
\n How seed is tested\n

A hundred seeds of every kind on wet paper each January. The count that came up is on its page.

\n
\n
\n Paying by cheque\n

The order is held ten days and posted on the Monday after the cheque arrives. Choose it at pay and post.

\n
\n
\n
\n
\n

Prices are in pounds and include tax. Seed that does not come up is replaced or refunded, whichever you ask for.

\n
\n \n \n \n
\n\n \n
\n
\n
    \n
  1. the list
    2. \n
  2. »
    3. \n
  3. departments
    4. \n
  4. »
    5. \n
  5. roots
    6. \n
\n
\n
\n

Roots

\n

Forty-six kinds, numbered 101 to 146. Sow where they are to grow.

\n
\n
Print this list
\n
\n\n
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
No.SeedPacketStockPriceBasket
Carrot
101Early stump-rooted2 gin stock1.80
102Maincrop, long2 gin stock1.80
103Round, for pots1 g9 left2.10
104Yellow, late keeping2 gsold out1.80
Beetroot
117Long, for slicing4 gin stock1.80
118Round red new4 gin stock1.80
119Golden3 g4 left2.10
\n \n
\n
\n\n
\n

Roots in the sale

\n
\n

No roots are reduced at the moment. Last year's seed goes in the sale in June.

\n Back to the list\n
\n
\n
\n\n \n
\n
\n
\n\n \n
\n
\n
    \n
  1. the list
    2. \n
  2. »
    3. \n
  3. roots
    4. \n
  4. »
    5. \n
  5. no. 101
    6. \n
\n
\n
\n

No. 101. Carrot, early stump-rooted

\n

A short, blunt carrot for the first sowing of the year. 2 g, about 1,400 seeds.

\n
\n
in stock
\n
\n\n
\n
\n
\n
\n

What you get

\n

One plain paper packet marked 101, holding two grams of seed harvested in 2016 and tested in January at 88 in every hundred. That is enough for a row of about nine metres.

\n

How to sow it

\n

Carrots are sown where they are to grow. They do not move well and they do not like fresh manure.

\n
    \n
  • Under a cloche from late February, in the open from the end of March.
    • \n
  • In drills a finger deep and a hand apart.
    • \n
  • Thin to a thumb's width once the first true leaf shows.
    • \n
\n

When it is ready

\n

Ten to twelve weeks after sowing. Pull the largest first and leave the rest to fill out.

\n
\n
\n\n
\n

The year for no. 101

\n \n \n \n \n \n \n \n \n \n \n
JobFromUntilWeeks
Sow under coverlate FebruaryMarch5
Sow in the openlate MarchJuly16
PullJuneOctober20
Store in sandOctoberJanuary14
\n
\n\n
\n

People who sow this also sow

\n \n
\n
\n\n \n
\n
\n
\n\n \n
\n
\n
    \n
  1. the list
    2. \n
  2. »
    3. \n
  3. basket
    4. \n
\n
\n
\n

Your basket

\n

Three packets of two kinds. Kept in this browser until Sunday night.

\n
\n
Pay and post
\n
\n\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
No.SeedPacketHow manyPriceBasket
101Carrot, early stump-rooted2 g3.60
312Pea, first early, round seeded60 g2.60
Post, second class, any number of packets2.50
Total, tax included38.70
\n

To take a line out on a small screen, set its number to 0 and update.

\n
\n\n
\n
\n Pay and post\n \n \n \n
\n
\n\n
\n
\n
\n

Empty the basket?

\n
\n

All three packets will be taken out. Nothing has been paid for, so nothing else changes.

\n
\n \n Keep it\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n
\n\n \n
\n
\n
    \n
  1. the list
    2. \n
  2. »
    3. \n
  3. basket
    4. \n
  4. »
    5. \n
  5. pay and post
    6. \n
\n
\n
\n

Pay and post

\n

One page. No account is made and nothing is kept after the parcel arrives.

\n
\n
Back to the basket
\n
\n\n
\n
\n
\n
\n
\n

Step 2 of 4: where it goes 50%

\n
\n
\n

Monday's post. Pay by Sunday midnight and this order leaves on Monday 20 March.

\n

Not sent. One line below needs another look. No money has been taken.

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

Where it goes

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

As you would write it on an envelope.

\n
\n
\n \n \n

That is only half a postcode.

\n
\n
\n \n \n
\n
\n \n
\n
\n \n Change the order\n
\n
\n
\n
\n\n \n
\n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.brutalism.shop.s06.p01.t03.u11\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"brutalism\",\n \"years\": [\n 2014,\n 2019\n ]\n },\n \"archetype\": \"shop\",\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-613b\",\n \"short\": \"v1-br-613b\"\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: #ffffff;\n --color-bar-text: #000000;\n --color-bar-alt: #ffffff;\n --color-bar-alt-text: #000000;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #767676;\n --color-heading: #000000;\n --color-heading-alt: #000080;\n --color-link: #0000ee;\n --color-link-quiet: #0000ee;\n --color-link-visited: #800080;\n --color-link-hover: #000080;\n --color-link-active: #ff0000;\n --color-border: #000000;\n --color-border-strong: #000000;\n --color-border-muted: #808080;\n --color-accent: #000080;\n --color-accent-text: #ffffff;\n --color-accent-alt: #ff0000;\n --color-fill-1: #ffffff;\n --color-fill-2: #f7f7f7;\n --color-fill-3: #efefef;\n --color-fill-4: #ffffff;\n --color-button: #efefef;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #efefef;\n --color-disabled-text: #808080;\n --color-danger: #ff0000;\n --color-danger-surface: #ffffff;\n --color-success: #008000;\n --color-warning: #808000;\n --color-notice: #ffffff;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: #efefef;\n}\n\n/* @part type */\n:root {\n --font-body: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 16px;\n --text-large: 18px;\n --text-display: 29px;\n --text-h1: 26px;\n --text-h2: 18px;\n --text-h3: 16px;\n --line-body: 1.45;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\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: 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" } }