{ "id": "v1-nb-4331-dc", "long_id": "v1.neubrutalism.landing.s04.p03.t03.u01.dc", "name": "Neubrutalism landing page, sticker board 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 }, "density": "compact", "summary": "A plans page in the playful strand of neubrutalism: a centred column of free-standing boxes, each with a thick black outline and a hard black shadow, on one loud flat page colour, with small cards set at a slight angle like stickers on a board. It was common from about 2021 to 2026 on the pricing and landing pages of creator tools, booking and membership products and component kits. Nothing is full-bleed and nothing touches: the navigation is a floating bar, the hero is a claim beside a collage of tilted cards, and the page sells through a row of plan cards with flat colour heads.", "url": "https://chrono.skin/s/v1-nb-4331-dc", "preview_url": "https://chrono.skin/s/v1-nb-4331-dc/specimen.html", "files": { "STYLE.md": "# Neubrutalism landing page, sticker board layout (2021 to 2026)\n\n## Summary\n\nA plans page in the playful strand of neubrutalism: a centred column of free-standing boxes, each with a thick black outline and a hard black shadow, on one loud flat page colour, with small cards set at a slight angle like stickers on a board. It was common from about 2021 to 2026 on the pricing and landing pages of creator tools, booking and membership products and component kits. Nothing is full-bleed and nothing touches: the navigation is a floating bar, the hero is a claim beside a collage of tilted cards, and the page sells through a row of plan cards with flat colour heads.\n\n## Layout\n\n- The page is fluid but the content is not: `--size-page` is 100% and every block sits in one centred column of `--size-content` (1120px), with `--space-gutter` (32px) kept free at the sides on narrow screens. Designed at a 1440px viewport. No block is full-bleed; the page colour shows around everything.\n- Blocks are separated by gaps, never by rules: `--space-8` (80px) between sections, `--space-6` (32px) between the boxes of one section and between the page header and the working area, `--space-5` (24px) between plan cards and stacked blocks.\n- Navigation is one floating `--size-nav` (64px) bar, `--space-5` below the top of the window, with a `--border-width-strong` outline, `--radius-page` corners and the panel shadow. It is a three-part grid: the `.ds-brand` at the left, the links centred (the current one an outlined accent block), two small buttons at the right. There is no announcement line.\n- The hero is two equal columns with a `--space-7` gap, vertically centred. Left: a small tag, the display title, a lead capped at `--size-measure` (520px) and one or two large buttons, all left-aligned. Right: a collage `--size-collage` (420px) tall of four `.ds-sticker` cards, `--size-sticker` (270px) wide, placed at the four corners so that neighbours overlap by a few pixels, each rotated 3 or 4 degrees, plus one round `.ds-stamp` of `--size-stamp` (132px) rotated 12 degrees. One phrase of the title sits in a tilted outlined block (`.ds-hero__mark`).\n- Directly under the hero: three stat cards in a row, `--space-6` apart, alternately rotated 1.5 degrees left and right.\n- A section (`.ds-section`) starts with a centred head (tag, 48px title, lead) or with none. Inside it boxes are laid out with `.ds-cols`: two equal columns, or `.ds-cols--side` for a main column plus a `--size-sidebar` (344px) column; `.ds-cols--stretch` makes both the same height. The plans are `.ds-grid`: four equal cards, `--space-5` apart, the recommended one raised by `--space-4`.\n- Tilt is decoration for small things only: stickers, the stamp, stat cards, the marked phrase and the flag on the recommended plan. Rotation never exceeds 4 degrees on anything that holds a sentence (12 on the stamp, 6 on the flag), and nothing that holds a form, a table or running text is rotated.\n- Inner pages keep the floating navigation and the footer and drop the hero, the stat cards and the plans. They start with the `.ds-breadcrumb` on the page colour, then the `.ds-page-header`: one outlined, shadowed `--color-surface-alt` box with the 60px title and one line of description on the left and the actions on the right, vertically centred. `--space-6` below it comes one `.ds-cols--side` row: the main column is a `.ds-folder` (the `.ds-tabs` standing on the top edge of an outlined box that holds a toolbar strip, the flush table and a pagination strip); the `--size-sidebar` column holds a form panel. Inner pages are left-aligned throughout.\n- The footer is one inverted, outlined box in the same column, `--space-8` below the last block, with `--space-6` of page colour under it.\n- Spacing scale: `--space-1` 4px (underline offset, link padding in the navigation, margins of the marked phrase), `--space-2` 8px (badge padding, gaps inside a sticker, label to control, gap between tabs and pagination squares), `--space-3` 12px (row padding in lists, tables and strips, gap between navigation buttons, brand gap), `--space-4` 16px (sticker and panel padding, gap between buttons, lift of the recommended plan), `--space-5` 24px (stat card and plan card padding, gap between plan cards and stacked blocks), `--space-6` 32px (sheet and page header padding, gap between columns and stat cards), `--space-7` 48px (hero column gap, section head to content, call to action and footer padding), `--space-8` 80px (gap between sections, hero top padding). `--space-gutter` 32px is the side padding of the page.\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` 44px (buttons, inputs, the current tab), `--size-control-large` 52px (hero and call to action buttons), `--size-control-small` 36px (navigation buttons, tabs, pagination squares), `--size-logo` 32px (the brand tile), `--size-check` 20px, `--size-dialog` 460px.\n- Below 900px the hero, the columns and the stat cards stack, the plans drop to two columns and the navigation links move to a second row inside the floating bar. Below 600px the page padding is `--space-3`, the plans are one column, the stickers stack in one column at 1.5 degrees and the stamp is hidden, stat cards and the recommended plan lose their tilt and lift, sections are `--space-7` apart, display and h1 text step down to `--text-h2`, notices and list rows stack, and table columns marked `.ds-table__extra` are hidden. On a phone `.ds-nav__links` is a ruled strip of four equal cells under the brand (the labels wrap inside their cell, the current link keeps its mark) and `.ds-nav__actions` is a full-width row below it with both buttons side by side.\n- Views: the specimen is one example site with four views, switched by plain `#name` links. `home` is the product page (hero with the sticker collage, stat cards, the four plans, the notebook list beside the import panel, the call to action). `guide` is an article: page header, the prose on a sheet, and a side column with the contents sidebar and a panel of further links. `timetable` is a studio's week: page header, notices, the folder with tabs, table and pagination, and the form panel in the side column. `class` is one class: page header with its action buttons, the list of people booked under the status key, the empty waiting list in the side column, and the confirmation dialog on its backdrop. 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- `--color-page` and `--color-canvas` are pale blue #dcebfe; `--color-surface` is white #ffffff for the rail, cards, stat tiles, tables, lists and the sheet. A plain card stage and even table rows take the pale blue.\n- `--color-button`, `--color-surface-strong` and `--color-bar-alt` are blue #5294ff with black text: the primary button, the brand mark, the title strips of cards and dialogs, the highlight behind a hovered link.\n- `--color-accent` is green #05e17a with black text: the current navigation item, rail link, filter chip and page, and the default badge. `--color-accent-alt` is yellow #facc00: the marked words of the intro title and \"new\" badges.\n- `--color-surface-alt` is sky #88c5ee: a hovered rail link, the empty state, the current table row, inline code.\n- `--color-fill-1` to `--color-fill-4` are blue #5294ff, green #05e17a, yellow #facc00 and lavender #b6ace4: the stages of demo cards whose content brings its own surface. Use each once before repeating.\n- Text, headings, every link colour, borders, focus and shadow are #000000; `--color-text-muted` #666666 (section notes, list meta, hints), `--color-border-muted` #b3b3b3 (the page grid). The navigation bar, the table head and the panel title (`--color-bar`) are white. The footer (`--color-inverse`) is black with white text.\n- Status: `--color-success` green #05e17a, `--color-warning` yellow #facc00, `--color-danger` red #dc341e, `--color-danger-surface` salmon #ee8888 behind an error notice, `--color-notice` lavender #b6ace4. All carry black text.\n- One grotesque sans for everything (`--font-body`, `--font-heading`, `--font-ui`: Public Sans, then DM Sans, Helvetica Neue); `--font-mono` for inline code, the command chip and class names in a table.\n- The whole page is heavy: `--weight-body` 500, `--weight-ui` 600 (navigation, rail links, chips, inputs, leads), `--weight-bold` 700 (buttons, labels, badges, the current rail link), `--weight-heading` 800 and `--weight-display` 900. Nothing is lighter than 500.\n- `--text-base` 16px at `--line-body` 1.5; `--text-small` 14px (rail headings, counts, notes, stat labels, table heads, list text, the footer); `--text-ui` 16px (navigation, rail links, chips, buttons, inputs); `--text-large` 24px for leads, the large button and the brand.\n- `--text-display` 72px at `--line-display` 1.1 for the intro title; `--text-h1` 48px (the inner page title, prose h1), `--text-h2` 36px (section titles, stat figures, prose h2), `--text-h3` 22px (card, panel, dialog and empty-state titles) at `--line-heading` 1.1. No tracking, no uppercase headings.\n- Uppercase is used only for the 12px `.ds-badge`. That size is `calc(var(--text-small) * 0.857)`; the vocabulary has no token for it.\n- Links in running text are underlined (`--link-decoration`) and lose the underline on hover (`--link-decoration-hover: none`), where the flat highlight replaces it; quiet links are never underlined.\n- `--border-width` is 3px on every box and rule; `--border-width-strong` 4px under the navigation.\n- All four radius tokens are 8px: buttons, inputs, cards, tiles, dialogs and badges share one rounded corner; badges are rounded rectangles, not pills.\n- Boxes that stand on the page sit on a second sheet, not a plain block: `--shadow-panel` is two hard shadows at the same `5px 5px` offset, a `--color-surface-strong` one on top and a `--color-shadow` one spread 3px behind it, so a filled, outlined copy of the box shows at its right and bottom edge like the next card in a stack. `--shadow-control` is the same at `4px 4px`, `--shadow-dialog` at `8px 8px`. No shadow is blurred. Filter chips and pagination squares carry the smaller `3px 3px` (`--shadow-control-hover`), as does a hovered button; a pressed one keeps `1px 1px` (`--shadow-control-pressed`). A box shown inside a card stage (the panel, the form box) has an outline but no shadow.\n- `--fill-page` draws a 70px grid of 1px lines (`--color-border-muted` at 50%) over the page colour; every other fill is flat.\n- `--focus-ring` is `3px solid` in `--color-focus`; `--transition` animates only `transform` and `box-shadow` over 0.2s.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill with its dots, the base font and colour and the side padding. Every block below is a direct child of it or of `
` and centres itself in the 1120px column.\n- `.ds-brand`: the site's mark and name, the first thing in the navigation bar 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 (a circle in this pack's own surface set) 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 floating navigation bar: the `.ds-brand`, `.ds-nav__links` of `.ds-nav__link` (the current one has `is-current`: an outlined accent block; a `.ds-badge` may sit inside a link) and `.ds-nav__actions` with two small buttons.\n- `.ds-hero`: the home page introduction. `.ds-hero__claim` holds an optional `.ds-badge`, the `.ds-hero__title` with one short phrase in `.ds-hero__mark` (a tilted, outlined `--color-accent-alt` block that never wraps), the `.ds-hero__lead` and `.ds-hero__actions`. `.ds-hero__collage` holds the stickers and is hidden from assistive technology. One per page.\n- `.ds-sticker`: a small outlined, shadowed card, 270px wide: `.ds-sticker__title`, `.ds-sticker__text`, `.ds-sticker__figure` (one large number that never wraps) and `.ds-sticker__row` for a title or tag pair on one line. `.ds-sticker--1` to `--4` set a flat fill, none leaves it white. `.ds-sticker--left` and `.ds-sticker--right` tilt it 4 and 3 degrees; `.ds-sticker--a` to `--d` place it at a corner of the collage. Keep the text to two short lines. `.ds-stamp` is the round accent seal, two or three uppercase words.\n- `.ds-stat`: the row of three summary figures. Each `.ds-stat__card` is an outlined, shadowed, slightly rotated card with a `.ds-stat__value` (60px) over a `.ds-stat__label`; every second card takes `--color-surface-alt`. Use directly under the hero.\n- `.ds-section`: any block of the home page below the stats. `.ds-section__head` centres a tag, a `.ds-section__title` and a `.ds-section__lead`. `.ds-label` is a 30px heading over a block that has no box title of its own. `.ds-label--flush` removes its bottom margin when it shares a `.ds-row` with something else.\n- `.ds-cols`: two equal columns; `.ds-cols--side` a main column and a 344px column; `.ds-cols--3` three equal columns; `.ds-cols--stretch` equal heights. `.ds-stack` stacks blocks 24px apart. `.ds-stack--wide` 32px. `.ds-row` puts two things on one line. `.ds-sheet` is a plain white outlined, shadowed box with 32px padding for long text or a group of small things. `.ds-sheet__text` is a paragraph in it above a button. `.ds-meta` is a muted 14px note.\n- `.ds-grid`: the four plan cards. Each `.ds-grid__cell` is an outlined, shadowed box: `.ds-grid__head` is the flat colour block (set by `.ds-grid__cell--1` to `--4`) with the `.ds-grid__title` and the `.ds-grid__price` (60px figure, `.ds-grid__per` for the period), then a rule, then `.ds-grid__body` with a `.ds-grid__text` line, the `.ds-grid__features` list and one `.ds-button--block`. A `.ds-grid__feature` starts with a small outlined accent square; `is-off` strikes it through in muted grey for a feature the plan lacks. `.ds-grid__cell--featured` raises the recommended plan and carries a tilted `.ds-badge` with `.ds-grid__flag` on its top right corner; only its button is primary.\n- `.ds-prose`: long text: h1, h2, h3, p, ul, ol, strong, inline code (pale yellow, outlined) and links inside it are styled. Put it in a `.ds-sheet`.\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`: pale yellow pill, black bold text, 3px outline, 4px hard shadow, 44px tall. `.ds-button--secondary` is white. `.ds-button--danger` is the destructive action (cancel a class, delete): flat red with the same black text, outline and shadow; use it once per view. `.ds-button--large` (52px, 20px text) for the hero and the call to action, `.ds-button--small` (36px, 14px text) for the navigation, `.ds-button--block` fills the width of a plan card. `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 an outlined pill, pink by default. `.ds-badge--alt` mint (\"new\"), `.ds-badge--strong` periwinkle, `.ds-badge--plain` white (counts, days, neutral tags). Status labels in table rows and stickers: `.ds-badge--success` mint, `.ds-badge--warning` amber, `.ds-badge--danger` red, all with black text. 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 3px 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`: an outlined, shadowed box; white head row with bold 14px text, rows divided by 3px black rules and alternating 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. A cell with `.ds-table__extra` is dropped below 600px. `.ds-table--flush` drops the outline, corners and shadow for a table inside a `.ds-folder`.\n- `.ds-folder`: the working box of an inner page: the `.ds-tabs` first, then `.ds-folder__body`, an outlined, shadowed box holding `.ds-folder__bar--top` (a count and one link on the page colour), a `.ds-table--flush` and `.ds-folder__bar--bottom` with the pagination.\n- `.ds-tabs`: folder tabs standing on the top edge of the box below, indented by `--space-4`: each `.ds-tabs__tab` is white with an outline on three sides and rounded top corners; the current one (`is-current`) is taller, pink and bold, `is-hover` is pale yellow. A `.ds-badge--plain` count may sit inside a tab. Use for two to four views of one box.\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 periwinkle `.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-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 pale cyan box with a bold `.ds-notice__title` and `.ds-notice__text`. `.ds-notice--error` is salmon with black text.\n- `.ds-pagination`: row of 36px white outlined pills (`.ds-pagination__link`) with a 2px shadow; the current page (`is-current`) is pink, `is-disabled` is grey and flat, `is-hover` moves into the shadow. On an inner page it sits in the bottom strip of the folder.\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, above the page header box.\n- `.ds-page-header`: the head of an inner page, used instead of the hero: the breadcrumb, then `.ds-page-header__box` with a block holding `.ds-page-header__title` (60px) and one `.ds-page-header__lead` line on the left and `.ds-page-header__actions` (one primary button, at most one secondary) on the right. One per page. `.ds-inner` is the column for the working area below it.\n- `.ds-dialog`: a 460px outlined box with the 8px hard shadow, a periwinkle `.ds-dialog__bar` (holding `.ds-dialog__title` and a round `.ds-dialog__close`), `.ds-dialog__body`, and a page-coloured `.ds-dialog__actions` strip over a rule with the buttons right-aligned. In the page flow it sits in a `.ds-backdrop`, an outlined box filled with `--color-overlay`.\n- `.ds-empty`: pale yellow outlined, shadowed box, centred: `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-cta`: the closing call to action: one `--color-fill-1` box with a 4px outline and the panel shadow, `.ds-cta__title` and `.ds-cta__lead` on the left, one large secondary button on the right.\n- `.ds-footer`: one inverted, outlined box: `.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` and a `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal` is a last line over a faint rule.\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-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 `