{ "id": "v1-nb-1192", "long_id": "v1.neubrutalism.landing.s01.p01.t09.u02", "name": "Neubrutalism landing page (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 fluid marketing page in the neubrutalist look: every box has a 2px black outline and a hard black shadow offset 4px down and right with no blur, fills are flat and saturated, and type is a bold geometric sans in black. It was common from about 2021 to 2026 on landing pages for small software products, creator tools and component kits. Sections run the full width of the viewport and are divided by black rules instead of gaps, while the content inside them sits in a centred 1216px column on a pale warm page with a faint grid.", "url": "https://chrono.skin/s/v1-nb-1192", "preview_url": "https://chrono.skin/s/v1-nb-1192/specimen.html", "files": { "STYLE.md": "# Neubrutalism landing page (2021 to 2026)\n\n## Summary\n\nA fluid marketing page in the neubrutalist look: every box has a 2px black outline and a hard black shadow offset 4px down and right with no blur, fills are flat and saturated, and type is a bold geometric sans in black. It was common from about 2021 to 2026 on landing pages for small software products, creator tools and component kits. Sections run the full width of the viewport and are divided by black rules instead of gaps, while the content inside them sits in a centred 1216px column on a pale warm page with a faint grid.\n\n## Layout\n\n- The page is fluid: `--size-page` is 100% and every section (`.ds-nav`, `.ds-hero`, `.ds-stat`, `.ds-page-header`, `.ds-band`, `.ds-footer`) is full-bleed. Content inside a section is centred in `--size-content` (1216px) with `--space-gutter` (32px) at the sides. Designed at a 1440px viewport.\n- Order of a page: a 14px announcement strip, a white `--size-nav` (64px) navigation bar closed by a 3px rule, a centred hero, a row of three stat cells, then bands, a coloured call-to-action band and one dark footer.\n- Inner pages keep the announcement strip, navigation and footer and drop the hero and the stat row. In their place comes a `.ds-page-header`: a white full-bleed section closed by a 2px rule, holding the breadcrumb, then the 48px page title and one line of description on the left with the page's actions on the right, bottom-aligned, in the same 1216px column. Its padding is `--space-7` above and `--space-6` below, half the hero's. Below it the working area is one `.ds-band` on the page grid with a `.ds-split`: the main column is a `.ds-stack` that starts with a `.ds-row` (the `.ds-tabs` tray on the left, a count on the right), then the table and its pagination; the 320px side column holds a form panel or a `.ds-sidebar`. Inner pages are left-aligned throughout; only the home page centres text.\n- Sections touch. They are separated by a 2px `--color-border` rule and a change of flat fill, never by a vertical gap.\n- Columns inside a band: `.ds-grid` is four equal columns with a `--space-5` gap; `.ds-split` is a main column plus a `--size-sidebar` (320px) column with a `--space-8` gap; `.ds-split--even` is two equal columns.\n- Text columns: hero lead and band heads are capped at `--size-measure` (672px) and centred; prose at 68ch, left-aligned.\n- Spacing scale: `--space-1` 4px (inline code and tab tray padding, underline offset), `--space-2` 8px (badge padding, gaps between pagination squares, label to control), `--space-3` 12px (control and row padding, list row padding), `--space-4` 16px (panel body padding, gap between buttons, table cell padding), `--space-5` 24px (gap between cards and stacked blocks, button side padding), `--space-6` 32px (stat cell padding, footer column gap, page header bottom padding), `--space-7` 48px (tight band padding, band head to content, page header top padding), `--space-8` 64px (band padding top and bottom, split gap), `--space-9` 96px (hero padding top and bottom).\n- Movement tokens: `--space-nudge` 2px (hover offset, focus outline offset) and `--space-press` 4px (pressed offset, equal to the shadow 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` 44px (buttons, inputs), `--size-control-large` 52px (hero buttons), `--size-control-small` 36px (navigation buttons, tabs, pagination squares), `--size-logo` 32px (the brand tile), `--size-check` 20px, `--size-icon` 48px, `--size-art` 112px (colour block of a grid card), `--size-dialog` 480px.\n- Below 900px the grid drops to two columns, splits and stats stack, and the navigation links wrap onto a second row under the brand and the two buttons. Below 600px the gutters shrink to `--space-4`, the grid is one column, the hero buttons fill the width, display and h1 text step down to `--text-h2`, list rows and notices stack, and table columns marked `.ds-table__extra` are hidden so a table never scrolls sideways. On a phone (600px and below) the `.ds-nav__links` stay a wrapping row of small `.ds-nav__link` pills under the brand and the two buttons, the `.ds-badge` inside a link is hidden and the current link keeps its mark; `.ds-tabs` scrolls sideways.\n- Views: the specimen is one example site with four views, switched by plain `#name` links. `home` is the product page (hero, stat row, the four tool cards, the changelog list beside the import panel, the call to action). `guide` is an article: page header, the prose with its further links, and a side column with the contents sidebar and a panel. `invoices` is a client's invoice list: page header with the breadcrumb, tabs, table, pagination with the status key, and the edit form in the side column. `invoice` is one invoice: page header with the action buttons, notices, the line table, a summary sidebar, the empty payments box, and the confirmation dialog on its overlay band. 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 families: `--font-body` is the system sans (system-ui, Segoe UI, Roboto) for running text; `--font-heading` and `--font-ui` are Space Grotesk (then Archivo, then the system sans) for headings, buttons, navigation and inputs. `--font-mono` (Geist Mono, then the system monospace) for inline code.\n- Headings are uppercase: `--heading-transform: uppercase` on the hero title, band titles, the page title and prose headings, weight 700 (`--weight-heading`, `--weight-display`), `--line-heading` 1 and `--line-display` 1.1, no tracking. Buttons and navigation stay in sentence case (`--ui-transform: none`).\n- Text is small and dense: `--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` 30px, `--text-h3` 18px.\n- Weights: 400 body, 500 (`--weight-ui`) navigation, links, inputs and leads, 700 (`--weight-bold`) buttons, labels and badges.\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. Sections are its direct children (inside `
`); there is no wrapper column.\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`: site header. `.ds-nav__strip` is the optional yellow announcement line with a `.ds-nav__strip-link`. `.ds-nav__bar` holds the `.ds-brand`, `.ds-nav__links` of `.ds-nav__link` (the current one has `is-current`: a coral outlined block) and `.ds-nav__actions` with small buttons. A `.ds-badge` may sit inside a link.\n- `.ds-hero`: centred introduction on the page grid: an optional `.ds-badge`, `.ds-hero__title` at display size with one phrase wrapped in `.ds-hero__mark` (green outlined highlight), `.ds-hero__lead`, and `.ds-hero__actions` with one primary and at most one secondary large button. One per page. 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: a white full-bleed strip of three `.ds-stat__cell` divided by vertical 2px rules, each with a `.ds-stat__value` (48px bold) over a `.ds-stat__label` (20px). Use directly under the hero on the home page; no outline or shadow of its own, the section rules close it.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`: white, full-bleed, closed by a 2px rule. `.ds-page-header__inner` is the 1216px column; put the `.ds-breadcrumb` first, then `.ds-page-header__row` with a block holding `.ds-page-header__title` (48px) and one `.ds-page-header__lead` line (20px) on the left and `.ds-page-header__actions` (one primary button, at most one secondary) on the right. One per page.\n- `.ds-band`: any full-width section. Variants set the fill: none (page grid), `.ds-band--surface` (white), `.ds-band--alt` (pale yellow), `.ds-band--fill-1` to `.ds-band--fill-4`, `.ds-band--overlay` (dialog backdrop), and `.ds-band--tight` for less padding. `.ds-band__inner` is the 1216px column. `.ds-band__head` centres a `.ds-band__title` and `.ds-band__lead` (add `.ds-band__head--flush` when it is the whole band, as in a call to action). `.ds-band__label` is a 20px heading over a small block.\n- `.ds-split`: main column plus a 320px side column; `.ds-split--even` for two halves. `.ds-stack` stacks blocks with a 24px gap (`.ds-stack--wide` 48px). `.ds-row` puts a title and a control on one line.\n- `.ds-grid`: four cards. Each `.ds-grid__cell` is an outlined, shadowed box: `.ds-grid__art` is the flat colour block (set by `.ds-grid__cell--1` to `--4`) holding a white `.ds-grid__icon` with an inline SVG, then a rule, then `.ds-grid__body` with `.ds-grid__title` and `.ds-grid__text`.\n- `.ds-prose`: long text: h1, h2, h3, p, ul, ol, strong, inline code (pale yellow outlined) and links inside it are styled.\n- `.ds-link`: any link in content: black, medium weight, 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`: yellow, black bold text, 2px outline, 4px hard shadow, 44px tall. `.ds-button--secondary` is white. `.ds-button--danger` is the destructive action (delete, void): flat red `--color-danger` with the same black text, outline and shadow; use it once per view, as the confirming button of a dialog or beside a secondary button. `.ds-button--large` (52px, 20px text) for the hero and call to action, `.ds-button--small` (36px, 14px text) for the navigation. `is-hover` sinks it 2px toward its shadow, `is-active` 4px with no shadow left, `is-disabled` is flat grey with no shadow, `is-focus` adds a black outline 2px away. `.ds-buttons` is a row of them.\n- `.ds-badge`: 12px bold uppercase label in a 2px outlined box with 5px corners, coral by default. `.ds-badge--alt` green (positive, \"new\"), `.ds-badge--strong` yellow, `.ds-badge--plain` white (counts, neutral tags). Status labels, in table rows and lists: `.ds-badge--success` green (paid, done), `.ds-badge--warning` amber (due soon, pending), `.ds-badge--danger` red (overdue, failed), all with black text and the same outline. No shadow. `.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`. Controls are white with a 2px outline and no shadow at rest; `is-focus` adds the hard shadow and an outline, `is-invalid` turns the border and shadow red, `is-disabled` greys it. `.ds-form__check` wraps a `.ds-form__checkbox` and its text.\n- `.ds-table`: one outlined, shadowed box. A cell with `.ds-table__extra` is dropped below 600px; mark the columns a phone can do without. The head row is white with bold 14px text; rows are divided by 2px black rules and alternate white and page colour; `is-current` on a row makes it pale yellow and bold. A status column holds one badge per row. `.ds-table__num` right-aligns numbers.\n- `.ds-list`: one outlined, shadowed box of `.ds-list__item` rows divided by black rules, each with a bold `.ds-list__title`, a `.ds-list__text` line and a muted `.ds-list__meta` on the right.\n- `.ds-panel`: outlined, shadowed box with a yellow `.ds-panel__title` strip over a rule and a `.ds-panel__body`. `.ds-panel--plain` makes the strip white. The plain title strip is filled with `--fill-bar` and takes `--color-bar-text`, so a dark bar works as well as a light one.\n- `.ds-tabs`: a white outlined tray of `.ds-tabs__tab`; the current one (`is-current`) is a coral outlined block with bold text, `is-hover` is pale yellow. Use for two to four views of one block; on an inner page it is the first row of the main column, above the table.\n- `.ds-sidebar`: outlined, shadowed white block with a `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by faint `--color-border-muted` rules; an item may end with a plain badge.\n- `.ds-notice`: one-line message in an outlined, shadowed sky-blue box with a bold `.ds-notice__title` and `.ds-notice__text`. `.ds-notice--error` is coral with black text.\n- `.ds-pagination`: row of 36px white outlined squares (`.ds-pagination__link`) with a 2px shadow; the current page (`is-current`) is coral, `is-disabled` is grey and flat, `is-hover` moves into the shadow.\n- `.ds-breadcrumb`: 14px trail of `.ds-breadcrumb__item` separated by a muted slash; the last has `is-current` and is bold. On an inner page it is the first line of the page header.\n- `.ds-dialog`: a 480px outlined box with the same 4px hard shadow, a yellow `.ds-dialog__bar` (holding `.ds-dialog__title` and a square `.ds-dialog__close`, a button or a link back to the list), `.ds-dialog__body`, and a page-coloured `.ds-dialog__actions` strip over a rule with the buttons right-aligned. It sits on `.ds-band--overlay`.\n- `.ds-empty`: pale yellow outlined, shadowed box, centred: `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: one dark block: `.ds-footer__inner` is a 2:1:1:1 grid with `.ds-footer__brand` and `.ds-footer__text`, then columns with an uppercase `.ds-footer__title` in `--color-inverse-text` and a `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal` is a last line over a faint rule.\n- `.ds-carousel`: a row of quotes of which one shows, in one outlined, shadowed box. `.ds-carousel__track` scrolls sideways with scroll snap; each `.ds-carousel__slide` holds a `.ds-carousel__quote` and a `.ds-carousel__who` line with a `.ds-avatar`. `.ds-carousel__controls` is the strip below with two `.ds-carousel__arrow` buttons and the `.ds-carousel__dots` (the current `.ds-carousel__dot` is wider and filled). Use it for what customers say, on the home page.\n- `.ds-avatar`: a person as initials on a filled, outlined circle (`--2`, `--3` change the fill). Use it beside a name.\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 `