{ "id": "v1-nb-32b2", "long_id": "v1.neubrutalism.landing.s03.p02.t11.u02", "name": "Neubrutalism landing page, catalogue layout (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": "landing", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "A dense catalogue page in the loud strand of neubrutalism: thick black outlines, hard offset shadows, flat saturated fills and heavy grotesque type, arranged as a fixed rail of categories beside a grid of demo cards. It was common from about 2021 to 2026 on the home pages of component kits, template shelves and small developer tools, where the page sells the product by showing its parts. The page fills the viewport, text is left-aligned throughout, and every card has a coloured title strip over a stage that holds the thing itself.", "url": "https://chrono.skin/s/v1-nb-32b2", "preview_url": "https://chrono.skin/s/v1-nb-32b2/specimen.html", "files": { "STYLE.md": "# Neubrutalism landing page, catalogue layout (2021 to 2026)\n\n## Summary\n\nA dense catalogue page in the loud strand of neubrutalism: thick black outlines, hard offset shadows, flat saturated fills and heavy grotesque type, arranged as a fixed rail of categories beside a grid of demo cards. It was common from about 2021 to 2026 on the home pages of component kits, template shelves and small developer tools, where the page sells the product by showing its parts. The page fills the viewport, text is left-aligned throughout, and every card has a coloured title strip over a stage that holds the thing itself.\n\n## Layout\n\n- The page is fluid: `--size-page` is 100%. Under one full-width navigation bar the page is a `.ds-shell` of two columns: a `--size-rail` (264px) rail on the left, white, with a rule on its right and running the full height of the page, and the main column (`.ds-main`) filling the rest with `--space-gutter` (32px) at its sides. Designed at a 1440px viewport, where the main column is 1112px of content.\n- Navigation is a single `--size-nav` (64px) bar closed by a `--border-width-strong` rule: a square brand mark and the brand at the left, the links next to it (the current one an outlined accent block), and at the right a `--size-search` (240px) search field and two small buttons. There is no announcement line.\n- Order of the home page inside the main column: a left-aligned intro (`.ds-hero`: tag, display title of at most 20ch, lead capped at `--size-measure` 640px, one large button beside a monospace command chip), a row of four stat tiles, then sections. A section (`.ds-section`) is a 36px title with a muted note at its right, an optional row of filter chips (`.ds-tabs`), and its content. Main-column blocks are `--space-6` (32px) apart; inside a section things are `--space-5` (24px) apart.\n- The catalogue is `.ds-grid`: three equal columns with a `--space-5` gap. A card may span two columns (`.ds-grid__cell--wide`) or all three (`.ds-grid__cell--full`). The stage of a card is at least `--size-demo` (176px) tall and centres what it shows.\n- The rail holds `.ds-sidebar` blocks `--space-6` apart, each a 14px heading over a tight list of links, 4px apart, with counts at the right.\n- Inner pages keep the navigation bar, the rail and the footer and drop the intro and the stat tiles. The rail shows the links of the current category. The main column starts with the `.ds-breadcrumb`, then a `.ds-page-header` (48px title and one line of description on the left, actions on the right, bottom-aligned, closed by a rule), then the `.ds-tabs` chips for the views of the page, then one full-width demo card whose stage holds the working component (a form sits in a `.ds-grid__form` box of `--size-form` 400px), then sections with the reference material, the table first. Cards on an inner page sit in the same three-column `.ds-grid` as the catalogue, so a preview and a related card can share a row; apart from that it is one column, with no side column besides the rail.\n- The footer is one inverted bar across the whole page: brand, a line of links, legal text.\n- Spacing scale: `--space-1` 4px (gap between rail links and navigation links, link padding, underline offset), `--space-2` 8px (badge padding, title strip padding, table and list row padding, gaps between pagination squares), `--space-3` 12px (gap between filter chips, stat tile padding, link side padding), `--space-4` 16px (side padding of strips, rows and tiles, gap between buttons and between hero elements, rail side padding), `--space-5` 24px (grid gap, stage padding, gap inside a section, navigation gap, footer padding), `--space-6` 32px (gap between main-column blocks and between rail blocks, rail top padding, sheet padding), `--space-7` 48px (main column top padding), `--space-8` 64px (main column bottom padding). `--space-gutter` 32px is the side padding of the navigation, the main column and the footer.\n- Movement tokens: `--space-nudge` 2px (hover offset, focus outline offset) and `--space-press` 4px (pressed offset). Hover and press move a control straight down, never sideways, and the red shadow of an invalid field falls straight down, so the movement is right whichever way the surface set throws its shadows (lower right, lower left or straight down).\n- Fixed sizes: `--size-control` 40px (buttons, inputs), `--size-control-large` 48px (the intro button and command chip), `--size-control-small` 32px (navigation buttons, filter chips, pagination squares), `--size-check` 20px, `--size-logo` 32px, `--size-dialog` 440px.\n- Below 900px the rail moves above the main column and its links wrap in rows, the grid and the stat tiles drop to two columns, the search field is hidden and the navigation links wrap onto a second row. Below 600px the rail's links are one strip that scrolls sideways and fades at the right, the main column's side padding is `--space-4`, the grid is one column, only the first block of the rail and the primary navigation button remain, counts in the rail are hidden, the intro title steps down to `--text-h2`, notices and list rows stack, the prose on a sheet runs in one column, and table columns marked `.ds-table__extra` are hidden. 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; the rail keeps its first block only, and `.ds-nav__actions` becomes a full-width row of equal buttons without the secondary one.\n- Views: the specimen is one example site with four views, switched by plain `#name` links; each view is its own `.ds-shell` with a rail that fits it. `home` is the catalogue front page: intro, stat tiles, filter chips and the grid of block cards (a sketch of the block on a coloured stage, a line on what it is for and its size), closed by the latest changes in a wide card beside a handbook teaser. `block` is one block's page: breadcrumb, page header with the block's actions, the tab chips, the preview card with the form beside the card that shows its confirmation dialog, and the parts table with the key of status labels under it. `handbook` is an article: page header, the prose on a sheet, the related pages as text links, and the buttons to the pages before and after. `releases` is the change log: page header, notices, the release list in a card beside the empty \"coming next\" card, and pagination. The navigation 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 voices: a monospace for everything that is read or pressed (`--font-body`, `--font-ui`, `--font-mono`: Fragment Mono, then DM Mono, JetBrains Mono and the system monospace) and a high-contrast serif for headings (`--font-heading`: Playfair Display, then Bodoni Moda, Didot and Georgia).\n- Headings are uppercase serif capitals: `--heading-transform: uppercase`, weight 700 (`--weight-heading`, `--weight-display`), `--line-heading` 1.1 and `--line-display` 1, no tracking.\n- Buttons, navigation and tabs are uppercase monospace: `--ui-transform: uppercase`, weight 500 (`--weight-ui`), 700 (`--weight-bold`) on buttons, labels and badges.\n- Text is small and airy: `--text-base` 14px at `--line-body` 1.625, `--text-small` 12px (badges come out at about 10px), `--text-ui` 14px, `--text-large` 18px for leads and large buttons.\n- `--text-display` 60px for the hero title; `--text-h1` 48px, `--text-h2` 36px, `--text-h3` 20px.\n- Links in running text are underlined; navigation, titles and breadcrumbs are not.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill with its grid, the base font and colour. Its children are the navigation, one `.ds-shell` per page and the footer.\n- `.ds-brand`: the site's mark and name, the first thing in the header and a link to the home page. `.ds-brand__mark` is a `--size-logo` (32px) tile dressed like the primary button: `--fill-button` with the mark drawn in `--color-button-text`, a `--border-width` `--color-border` outline, `--radius-control` corners and the `--shadow-control` hard shadow, so every palette and surface set reskins it. The mark is inline SVG with square line caps and a 2.8 stroke. `.ds-brand__name` is the name in the heading font at `--text-large`, weight `--weight-heading`, with the heading tracking and transform, in `--color-bar-text`. One per page. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the navigation bar: the `.ds-brand` at the left, `.ds-nav__links` of `.ds-nav__link` (the current one has `is-current`; a `.ds-badge` may sit inside a link) and `.ds-nav__actions` with a search field (`.ds-form__control` plus `.ds-nav__search`) and small buttons.\n- `.ds-shell`: the two-column frame: `.ds-rail` (a `
` holding the `.ds-sidebar` blocks) and `.ds-main` (the page). `.ds-section` groups a title and its content in the main column; `.ds-section__head` puts `.ds-section__title` and a muted `.ds-section__note` on one line. `.ds-stack` stacks blocks `--space-4` apart (two notices, for example). The specimen uses `.ds-main` on a `
` inside one `
` that holds the views.\n- `.ds-sidebar`: one block of the rail: `.ds-sidebar__title` over a `.ds-sidebar__list` of `.ds-sidebar__link`, each of which may end with a `.ds-sidebar__count`. The current link (`is-current`) is an outlined accent block with bold text; `is-hover` is an outlined `--color-surface-alt` block; `is-focus` adds an outline.\n- `.ds-hero`: the left-aligned intro at the top of the home page's main column, one per page: an optional `.ds-badge`, `.ds-hero__title` with one phrase in `.ds-hero__mark` (outlined `--color-accent-alt` highlight), `.ds-hero__lead`, and `.ds-hero__actions` with one large button and an optional `.ds-hero__code` chip (a white outlined box with one line of monospace text). The marked phrase is an inline block with `--space-1` above and below, so its outline never touches the neighbouring lines whatever the display line height of the type set; keep it short enough to fit one line.\n- `.ds-stat`: the row of summary figures: four separate `.ds-stat__tile`, white, outlined and shadowed, each a 36px `.ds-stat__value` over a 14px `.ds-stat__label`. `.ds-stat` is the row; the single figure is `.ds-stat__tile`.\n- `.ds-grid`: the catalogue. Each `.ds-grid__cell` is an outlined, shadowed card: a `.ds-grid__bar` title strip on `--color-surface-strong` (holding `.ds-grid__title` and a plain count badge) over a rule, then the `.ds-grid__demo` stage. The stage is page-coloured by default; `.ds-grid__cell--1` to `--4` fill it with a `--color-fill-*`, `.ds-grid__demo--surface` makes it white, `.ds-grid__demo--overlay` is the dialog backdrop. `.ds-grid__demo--stretch` lets the content take the full width, `.ds-grid__demo--flush` removes the padding for a list. `.ds-grid__text` is a centred sentence on a stage, for a card that describes a block instead of showing it. Put only things with their own surface on a filled stage (buttons, badges, panels, boxes); bare text and links go on a white or page-coloured stage. A catalogue card shows a `.ds-grid__sketch` on its stage (a white outlined tile of at most `--size-sketch` 168px holding an inline SVG wireframe in `currentColor`) and ends with a `.ds-grid__body` caption over a rule: a `.ds-grid__text` line on what the block is for and a monospace `.ds-grid__meta` line with its size. `.ds-grid__form` is the white outlined box a form is shown in. A single `.ds-grid__cell` may stand outside a grid as the preview card of an inner page.\n- `.ds-sheet`: a white outlined, shadowed page with `--space-6` padding for long text. A `.ds-prose` inside it drops its 68ch cap and runs in two columns with a `--space-7` gap under a full-width h1, so the sheet is filled across the main column.\n- `.ds-prose`: long text inside a sheet: h1, h2, h3, p, ul, ol, strong, inline code (outlined, `--color-surface-alt`) and links are styled. At most 68ch wide.\n- `.ds-link`: any link in content: underlined. `.ds-link--quiet` removes the underline for titles and breadcrumbs. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-links` lays several out in a row.\n- `.ds-button`: the primary button, 40px tall, outlined, on a hard shadow. `.ds-button--secondary` is the white one. `.ds-button--danger` is the destructive action: flat `--color-danger` with `--color-text`; use it once per view, as the confirming button of a dialog or beside a secondary button. `.ds-button--large` (48px) for the intro, `.ds-button--small` (32px) for the navigation and inside cards. `is-hover` sinks it 2px toward its shadow, `is-active` 4px, `is-disabled` is flat grey, `is-focus` adds an outline. `.ds-buttons` is a row of them.\n- `.ds-badge`: 12px bold uppercase label in an outlined box, accent by default. `.ds-badge--alt` (`--color-accent-alt`, \"new\"), `.ds-badge--strong` (`--color-surface-strong`), `.ds-badge--plain` (white; counts in title strips and chips). Status labels: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, all with `--color-text` and the same outline. `.ds-badges` is a row of them. The alt and strong variants carry `--color-text`, like every other filled block; only the default badge uses `--color-accent-text`.\n- `.ds-form`: stacked fields: `.ds-form__field` with a bold 14px `.ds-form__label` above a `.ds-form__control` (input, select; `.ds-form__control--area` for a textarea), then `.ds-form__hint` or `.ds-form__error`. `is-focus` adds the hard shadow and an outline, `is-invalid` turns the border and shadow to `--color-danger`, `is-disabled` greys it. `.ds-form__check` wraps a `.ds-form__checkbox` and its text.\n- `.ds-table`: one outlined, shadowed box the full width of the main column. The head row is the primary bar with bold 14px text; rows are 8px padded, divided by rules and alternate white and page colour; `is-current` on a row fills it `--color-surface-alt`. A status column holds one badge per row. `.ds-table__num` right-aligns numbers, `.ds-table__code` sets a cell in monospace. A cell with `.ds-table__extra` is dropped below 600px.\n- `.ds-list`: ruled rows that fill a `.ds-grid__demo--flush` stage edge to edge; the card is its outline. Each `.ds-list__item` has a bold `.ds-list__title`, a `.ds-list__text` line and a muted `.ds-list__meta` on the right.\n- `.ds-panel`: an outlined box shown inside a card stage: a white `.ds-panel__title` strip over a rule and a `.ds-panel__body`. No shadow; the card around it carries one.\n- `.ds-tabs`: a row of separate outlined chips (`.ds-tabs__tab`), white on a small hard shadow; the current one (`is-current`) is filled with the accent and bold, `is-hover` moves into its shadow. On the home page it filters the catalogue; on an inner page it switches the views of the page and sits directly under the page header.\n- `.ds-notice`: one message in an outlined, shadowed box on `--color-notice` with a bold `.ds-notice__title` and `.ds-notice__text`. `.ds-notice--error` is on `--color-danger-surface`.\n- `.ds-pagination`: a centred row of 32px outlined squares (`.ds-pagination__link`); the current page (`is-current`) is on the accent, `is-disabled` is grey and flat, `is-hover` moves into its shadow.\n- `.ds-breadcrumb`: 14px trail of `.ds-breadcrumb__item` separated by a muted slash; the last has `is-current` and is bold. It is the first line of an inner page's main column.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`: a block with `.ds-page-header__title` (48px) and one `.ds-page-header__lead` line on the left, `.ds-page-header__actions` (one primary button, at most one secondary) on the right, closed by a rule. It has no fill of its own. One per page.\n- `.ds-dialog`: a 440px outlined box on `--shadow-dialog`, with a `.ds-dialog__bar` on `--color-surface-strong` (holding `.ds-dialog__title` and a square `.ds-dialog__close`), `.ds-dialog__body`, and a page-coloured `.ds-dialog__actions` strip over a rule with the buttons right-aligned. It sits on a `.ds-grid__demo--overlay` stage.\n- `.ds-empty`: outlined, shadowed box on `--color-surface-alt`, centred: `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: one inverted bar: `.ds-footer__brand`, a `.ds-footer__list` of `.ds-footer__link` in a line, and `.ds-footer__legal` at the right.\n- `.ds-menu`: a chunky drop-down, a `
` whose `` is the `.ds-menu__trigger` (a small secondary button that ends in a plus sign). `.ds-menu__list` is an outlined, shadowed box of `.ds-menu__item` rows divided by rules, each a `.ds-menu__link`. Use it for a short list of pages under one button.\n- `.ds-nav__fold`: the `.ds-menu` that stands in for the bar's links at 600px and below: a \"Menu\" button beside the brand that lists every view as a `.ds-menu__link--view` (the current one filled with the accent and barred on the left) and the actions the phone bar has no room for. It is hidden on wider screens, where the links show.\n- `.ds-progress`: how far something is: a `.ds-progress__label` line (what, and the figures) over a thick outlined `.ds-progress__track` holding a `.ds-progress__bar` (50% wide; `--25` and `--70` set other widths).\n- `.ds-switch`: an on and off control: a `