{ "id": "v1-nb-7486", "long_id": "v1.neubrutalism.shop.s07.p04.t08.u06", "name": "Neubrutalism shop, small press shelves (2021 to 2026)", "era": { "slug": "neubrutalism", "code": "nb", "name": "Neubrutalism", "years": [ 2021, 2026 ], "description": "Loud and flat, 2021 to 2026: thick black outlines, hard offset shadows with no blur, saturated colour blocks and bold type." }, "archetype": "shop", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "A shop front in the neubrutalist look: a two-row header with a search field and a filled department strip, then one boxed column of shelves on a loud flat page, every box with a 3px outline and a hard, unblurred shadow in a second colour. It was common from about 2021 to 2026 for marketplaces of digital and printed goods, creator shops and the storefronts of small presses. Products sit in square cards with a flat colour picture and a price sticker stuck on at an angle, and the page sells through a window box that pairs the pitch with a carousel of the week's picks.", "url": "https://chrono.skin/s/v1-nb-7486", "preview_url": "https://chrono.skin/s/v1-nb-7486/specimen.html", "files": { "STYLE.md": "# Neubrutalism shop, small press shelves (2021 to 2026)\n\n## Summary\n\nA shop front in the neubrutalist look: a two-row header with a search field and a filled department strip, then one boxed column of shelves on a loud flat page, every box with a 3px outline and a hard, unblurred shadow in a second colour. It was common from about 2021 to 2026 for marketplaces of digital and printed goods, creator shops and the storefronts of small presses. Products sit in square cards with a flat colour picture and a price sticker stuck on at an angle, and the page sells through a window box that pairs the pitch with a carousel of the week's picks.\n\n## Layout\n\n- The page is fluid: `--size-page` is 100%. The header and the footer are full-bleed; everything between them sits in one centred column of `--size-content` (1280px) with `--space-gutter` (32px) at the sides. Designed at a 1440px viewport.\n- Navigation is two rows, closed by a `--border-width-strong` rule. The first, on `--fill-bar`, holds the `.ds-brand`, a `--size-search` (440px, growing to 616px) search field with its button, the account avatar and a small basket button. The second is a full-width strip on `--fill-bar-alt` with the view links at the left (the current one is a `--fill-bar` chip with an outline and a small shadow), a `.ds-menu` of departments, and a one-line note at the right.\n- Order of the home page: the shop window (`.ds-hero`, two halves in one box: pitch on the left, `.ds-carousel` on the right), the `.ds-stat` strip of four figures, a shelf (`.ds-row` with a `.ds-label` and a link, then the `.ds-grid` of four product cards), and a `.ds-split` with the `.ds-list` of new arrivals beside a `.ds-panel`.\n- Inner pages keep the header and footer and drop the shop window. They start with a `.ds-page-header`: the breadcrumb, then the `--text-h1` title and one line of lead on the left with the page's action bottom-aligned on the right, all standing directly on the page colour and closed by a `--border-width-strong` rule. Below it comes one `.ds-split`: `.ds-split--aisle` puts a `--size-side` (300px) column of filters on the left of a shelf (sidebar and switches left; tabs, table, pagination right); `.ds-split--even` is two halves (picture and buy box; basket and delivery form); the plain `.ds-split` is a main column with a 390px side column on the right (article and questions). Tabs are the first row of the main column, above the table.\n- Blocks in the column are `--space-7` (48px) apart; blocks in a `.ds-stack` are `--space-5` (24px) apart. Boxes never touch each other: the page colour and its ruled lines show between them.\n- Spacing scale: `--space-1` 4px (inline code, underline offset, gap between a title and its text), `--space-2` 8px (badge padding, gaps between pagination squares and tab chips, label to control), `--space-3` 12px (row and control padding, small button sides), `--space-4` 16px (panel, table cell and card padding, gap between buttons), `--space-5` 24px (gap between stacked blocks and cards, button side padding), `--space-6` 32px (gap between split columns, sheet padding, large button sides), `--space-7` 48px (gap between the blocks of a page, shop window padding), `--space-8` 64px (space above the footer, label column of a rating row).\n- Movement tokens: `--space-nudge` 2px (hover offset, focus offset) and `--space-press` 4px (pressed offset, the red shadow of an invalid field). A control sinks straight down, never sideways, so it is right whichever way the surface set throws its shadows.\n- Fixed sizes: `--size-control` 46px (buttons, inputs), `--size-control-large` 56px (shop window and buy buttons), `--size-control-small` 36px (strip links, tab chips, pagination squares, carousel arrows), `--size-logo` 40px, `--size-avatar` 40px, `--size-check` 22px (checkbox, tooltip trigger, switch knob), `--size-switch` 48px, `--size-bar` 16px (progress track), `--size-art` 172px (picture of a product card), `--size-stage` 300px (carousel picture; the item picture is one and a half times that), `--size-cover` 168px (a drawn cover), `--size-thumb` 72px, `--size-menu` 240px, `--size-tip` 220px, `--size-dialog` 460px.\n- Below 1000px the shop window, every split and the footer columns stack, the grid and the stat strip go to two columns and the search field takes a row of its own under the brand; the departments `.ds-menu` of the strip opens from the strip's right edge. Below 600px the gutters shrink to `--space-4`, the grid and form rows are one column, titles step down (`calc()` over `--text-h1` and `--text-h2`), the account name and the strip note are hidden, hero and page header buttons fill the width, list rows wrap their meta line, and table columns marked `.ds-table__extra` are hidden so that a table never scrolls sideways. On a phone (600px and below) the links `.ds-nav__links` are not shown; the \"Menu\" button `.ds-nav__fold` beside the brand opens a full-width list of every view as `.ds-menu__link--view` rows, the current one filled with the accent and barred on the left, then the search field takes the rest of the row; the strip above the bar (`.ds-nav__strip`) is not shown.\n- Views: the specimen is one example shop for zines and prints with five views, switched by plain `#name` links. `home` is the front window (shop window with carousel, stat strip, the shelf of four cards, new arrivals beside the maker of the week). `shelf` is a department: page header with the breadcrumb, the department sidebar and filter switches in the aisle column, then tabs, the price table, pagination and the key of stock labels. `item` is one title: its picture and thumbnails beside the buy panel and an accordion, then the readers' ratings beside their notes. `basket` is the basket: notices, the basket table with its progress bar, buttons and the confirmation dialog on the left, the delivery form and an empty \"saved for later\" box on the right. `help` is an article for makers on a sheet with further links, beside the questions accordion and a sidebar. The strip marks the current view through `:has()` rules in `components.css`, one per view; `is-current` on a link does the same by hand.\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- Two families. `--font-heading` is a rounded display sans (Fredoka, then Baloo 2 and Arial Rounded) for the brand, titles, figures and dates, weight 600. `--font-body` and `--font-ui` are a soft grotesque (Rubik, then Karla and Trebuchet MS). `--font-mono` (Space Mono) is for inline code, times in the week and the signs on notices and accordions.\n- `--text-base` 16px at `--line-body` 1.55. `--text-small` 13px for meta, labels, table heads, the week's events and the footer. `--text-ui` 15px for tabs, buttons and inputs. `--text-large` 19px for leads and large buttons.\n- `--text-display` 64px at `--line-display` 1.06: the hero title and the day number on the ticket. `--text-h1` 42px: page titles, prose h1, stat values. `--text-h2` 28px: the brand, `.ds-label`, the ticket title, the date of a day cell, prose h2. `--text-h3` 19px: panel, sidebar, dialog and empty-state titles. Headings are sentence case.\n- Weights: 400 body, 500 (`--weight-ui`) tabs, links and inputs, 700 (`--weight-bold`) buttons, badges, labels and list titles, 600 headings. Badges and avatar initials are `calc(var(--text-small) * 0.87)`, about 11px; the vocabulary has no token for it.\n- Text on a fill follows one rule: `--color-text` on `--color-fill-1` to `--color-fill-4`, `--color-surface-alt`, `--color-surface-strong`, `--color-accent-alt`, `--color-success`, `--color-warning`, `--color-danger` and `--color-danger-surface`; `--color-accent-text` on `--fill-accent`; `--color-bar-text` on `--fill-bar`; `--color-bar-alt-text` on `--fill-bar-alt`; `--color-inverse-text` on `--fill-inverse`; `--color-notice-text` on `--color-notice`; the button text tokens on the two buttons. Titles on `--color-surface-strong` strips use `--color-heading-alt`. The brand name stands on the page and takes `--color-heading`.\n- The set is dark. `--color-page` and `--color-canvas` #14163f (night indigo): the page, which `--fill-page` crosses with faint diagonal lines, and the sheet, which is flat. `--color-surface` #1f2260: cards, panels, tables, list rows, inputs. `--color-surface-alt` #2d3184: the page header, the current table row, busy days of the month, the empty state, an open accordion head, inline code. `--color-surface-strong` #3d43b8: panel and dialog title strips, a hovered link.\n- Text and outlines are one cream, #fff6dc (`--color-text`, `--color-heading`, `--color-border`, `--color-input-border`). Every hard shadow is sky blue (`--color-shadow` #5ecbff), as is the dashed focus ring.\n- `--color-bar` #14163f with cream text: the folder tabs, the table head, a plain panel title. `--color-bar-alt` #ffe14d (lemon) with indigo text: the ticker line. `--color-inverse` #fff6dc with indigo text: the stat strip, the footer card and the tooltip.\n- `--color-button` #ffe14d (lemon) with indigo text is the primary button and the brand tile; `--color-button-secondary` is cream with indigo text.\n- `--color-accent` #ff7a59 (coral) with indigo text: the current folder tab, tab segment, page and day, the default badge, the progress bar, a switch that is on. `--color-accent-alt` #16755e (deep green) with cream text: the \"week of\" badge, the date square of a list row, the first avatar.\n- `--color-fill-1` to `--color-fill-4` (cobalt #2b59e0, brick #c2402c, green #16755e, violet #7a3fd6) carry cream text, so they are deep, never pastel: the heads of the day cells, the ticket's stub, avatars.\n- Links in running text are lemon (`--color-link` #ffe14d) and underlined; titles, breadcrumbs and tabs are cream and not underlined (`--color-link-quiet`). Hover removes the underline and puts a `--color-surface-strong` highlight behind the text, active a `--fill-accent` one with `--color-link-active` (indigo) text. `--color-heading-alt` is lemon, for titles on the strong strip.\n- Status, all with cream text: `--color-success` #19803f, `--color-warning` #a35f00 (a dark amber; a bright one cannot carry cream text) and `--color-danger` #e8492f, which is also the error text under a field, that field's border and shadow, and the destructive button. `--color-danger-surface` #a32a1c backs an error notice; `--color-notice` #2d3184 an information notice.\n- `--color-text-muted` #b4b6e0 for times, counts and hints; `--color-border-muted` #5a5da8 for the faint rules between table rows, between the events of a day and above a form's buttons; `--color-disabled` #2d3184 with `--color-disabled-text` #9a9cc8; `--color-overlay` is a darker indigo at 86%.\n- Surface: `--border-width` 2px on every box; `--border-width-strong` 4px on the sheet. Everything is rounded: `--radius-control` 12px (buttons, inputs, list rows, accordion bars, notices), `--radius-panel` 16px (panels, tables, day cells, the ticket, the page header), `--radius-page` 28px (the sheet, the footer card, the dialog's backdrop), `--radius-pill` for badges, avatars, the switch and the progress track. Shadows are hard, unblurred and fall more down than right: `--shadow-panel` 4px 7px, `--shadow-control` 3px 5px, `--shadow-control-hover` 1px 2px (also list rows, notices and closed accordion bars), `--shadow-control-pressed` zero, `--shadow-dialog` 6px 10px (the sheet, the ticket, the dialog). No text shadow, no gradient on any component.\n- `--transition` moves `transform` and `box-shadow` over 0.18s with a slight overshoot.\n\n## Components\n\n- `.ds-page`: on ``. Sets the ruled page fill, the base font and colour. The header, `.ds-main` and the footer are its children; `.ds-column` inside `.ds-main` is the 1280px column.\n- `.ds-brand`: the site's mark and name, first in the header and a link to the home view. `.ds-brand__mark` is a `--size-logo` tile dressed like the primary button (`--fill-button`, `--color-button-text`, the outline, `--radius-control`, a small hard shadow); the mark is drawn with square caps and a 3 stroke. `.ds-brand__name` is the name in the heading face at `--text-h2`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the header. `.ds-nav__bar` holds the brand, `.ds-nav__search` (a `.ds-nav__field` and a `.ds-nav__go` button in one outlined box) and `.ds-nav__actions` (a `.ds-nav__account` with an avatar, a small basket button with a plain badge). `.ds-nav__strip` is the filled strip: `.ds-nav__strip-inner` holds `.ds-nav__links` of `.ds-nav__link` (`is-current`, `is-hover`, `is-focus`) and a `.ds-nav__note`.\n- `.ds-menu`: a drop-down under a strip item, a `
` whose `` is a `.ds-nav__link` with `.ds-menu__trigger`. `.ds-menu__list` is an outlined, shadowed white box of `.ds-menu__item` rows divided by rules, each a `.ds-menu__link` that may end in a plain badge. Use it for a list of departments or account pages that would not fit the strip.\n- `.ds-hero`: the shop window, one outlined box with the dialog shadow, in two halves. `.ds-hero__text` holds an optional tilted badge, `.ds-hero__title` at display size with one phrase in `.ds-hero__mark` (a mint outlined block turned 2 degrees), `.ds-hero__lead` and `.ds-hero__actions` with one primary and one secondary large button. The other half is a `.ds-carousel`. One per site, on the home view.\n- `.ds-carousel`: a row of slides of which one shows. `.ds-carousel__track` scrolls sideways with scroll snap; each `.ds-carousel__slide` (`--2`, `--3` change the fill) has a `.ds-carousel__art` picture and a `.ds-carousel__caption` with a `.ds-carousel__title` and a small button. `.ds-carousel__controls` is the strip below with two `.ds-carousel__arrow` buttons and `.ds-carousel__dots` of `.ds-carousel__dot` (`is-current` is wider and filled with the accent).\n- `.ds-cover`: a drawn zine or print for pictures: a white outlined card turned 4 degrees (`.ds-cover--right` turns the other way, `.ds-cover--large` is one and a half times the size) with a `.ds-cover__title`, a `.ds-cover__art` drawing and a `.ds-cover__foot` in the monospace face. `.ds-tag` is the price sticker, a pill turned 6 degrees; `.ds-tag--corner` sticks it to the top right of a picture. Only covers, stickers, the marked phrase and a `.ds-badge--tilt` are turned; never turn a whole card or a block of text.\n- `.ds-stat`: the row of summary figures, one outlined strip on `--color-surface-alt` cut into four `.ds-stat__cell` by rules; each puts the `.ds-stat__value` (`--text-h2`, slab) and its `.ds-stat__label` on one line. Use under the shop window.\n- `.ds-grid`: the shelf, four product cards. Each `.ds-grid__cell` (`--1` to `--4` set the picture's fill) has a `.ds-grid__art` with a line drawing and a corner sticker, a `.ds-grid__body` with `.ds-grid__title` and `.ds-grid__text`, and a `.ds-grid__foot` over a rule with a stock badge and a small button. `.ds-price` is a price in the slab face (`.ds-price--large` for the buy panel).\n- `.ds-stage`: the large picture of one item, a filled outlined box holding a cover and a corner sticker. `.ds-thumbs` is the row of `.ds-thumbs__item` squares under it (`is-current` has a shadow).\n- `.ds-page-header`: the head of an inner page: the `.ds-breadcrumb`, then `.ds-page-header__row` with `.ds-page-header__main` (`.ds-page-header__title`, `.ds-page-header__lead`) and `.ds-page-header__actions`, closed by the thick rule. One per inner view.\n- `.ds-split`, `.ds-stack`, `.ds-row`, `.ds-label`, `.ds-note`: layout helpers. `.ds-split` (main and side), `.ds-split--aisle` (filters left), `.ds-split--even` (halves); `.ds-stack` stacks blocks; `.ds-row` puts a heading and a link, or tabs and a count, on one line; `.ds-label` is a section heading (`.ds-label--small` at `--text-h3`); `.ds-note` is a muted line.\n- `.ds-prose`: long text: h1, h2, h3, p, ul, ol, strong, inline code (pale blue, outlined) and links are styled. `.ds-sheet` is the white outlined box an article sits on.\n- `.ds-link`: a link in content: near-black, weight 600, underlined. `.ds-link--quiet` removes the underline for titles, breadcrumbs and sidebar lists. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-links` lays several out in a row.\n- `.ds-button`: tomato, near-black text, 3px outline, hard shadow, 46px tall. `.ds-button--secondary` is white. `.ds-button--danger` is the destructive action, flat red with the same text and outline; use it once per view. `.ds-button--large` for the shop window and the buy panel, `.ds-button--small` for cards, the header and empty states, `.ds-button--wide` fills its box. `is-hover` sinks it 2px, `is-active` 4px with no shadow left, `is-disabled` is flat and greyed, `is-focus` adds the focus ring. `.ds-buttons` is a row of them.\n- `.ds-badge`: a small pill label, cobalt with white text by default. `.ds-badge--alt` mint (\"new\", signed), `.ds-badge--plain` white (counts). Status labels: `.ds-badge--success` (in stock), `.ds-badge--warning` (few left), `.ds-badge--danger` (sold out), all with `--color-text` and the outline. `.ds-badge--tilt` turns one 3 degrees. `.ds-badges` is a row of them.\n- `.ds-avatar`: a maker or reader as initials on a filled circle (`--2`, `--3`, `--4` change the fill; `--small` for the header, `--large` with a shadow for a profile). `.ds-person` puts one beside a `.ds-person__name` and a `.ds-person__role`.\n- `.ds-progress`: how far something is: a `.ds-progress__label` line (what, and the figures) over a `.ds-progress__track` pill holding a `.ds-progress__bar` whose width is set by `--10`, `--25`, `--70` or `--85` (50% without one). `.ds-progress--row` is a rating row: label, track and count on one line. Use for a print run, a basket's way to free postage, ratings.\n- `.ds-switch`: an on and off control: a `