{ "id": "v1-nb-4322-dr", "long_id": "v1.neubrutalism.landing.s04.p03.t02.u02.dr", "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": "roomy", "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-4322-dr", "preview_url": "https://chrono.skin/s/v1-nb-4322-dr/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- The page, the canvas and every surface are one white (`--color-page`, `--color-canvas`, `--color-surface` #ffffff); cells are told apart by black rules and by flat saturated fills, not by tints. Table rows do not alternate.\n- `--color-surface-strong` and `--color-accent` are pink #ff90e8 with black text: panel, dialog and hero card title strips, the current navigation item, tab and page, the default badge, the highlight behind a hovered link. `--color-surface-alt` is yellow #ffc900: the hero stage, the actions cell of the page header, the empty state, the current table row, inline code, a hovered tab. `--color-accent-alt` is lemon #f1f333: the marked words of the hero title and \"new\" badges.\n- `--color-fill-1` to `--color-fill-4` are pink #ff90e8, yellow #ffc900, teal #23a094 and periwinkle #90a8ed, always with black text: every second cell of the grid and the left half of the call to action. Use each once before repeating.\n- The primary button is black with white text (`--color-button` #000000, `--color-button-text` #ffffff), and so is the last navigation cell; the secondary button is white. The tag strip (`--color-bar-alt`) and the footer (`--color-inverse`) are the same black with white text; the navigation row and the table head (`--color-bar`) are white.\n- Text, headings, every link colour, borders, focus and shadow are #000000. `--color-text-muted` is #666666 (dates, hints, the count beside the tabs), `--color-border-muted` #b3b3b3 (dividers of the sidebar list), disabled is #aeaeae with #303030 text.\n- Status: `--color-success` teal #23a094, `--color-warning` yellow #ffc900, `--color-danger` red #dc341e (error text, the destructive button, the danger badge), `--color-danger-surface` #e2442f behind an error notice, `--color-notice` periwinkle #90a8ed. All carry black text.\n- One geometric sans for body, headings and controls (`--font-body`, `--font-heading`, `--font-ui`: Google Sans Flex, Albert Sans, then Avenir Next); `--font-mono` only for inline code.\n- Nothing is bold. `--weight-body`, `--weight-heading`, `--weight-display` and `--weight-ui` are 400; `--weight-bold` is 500 and is the only emphasis (buttons, labels, badges, strong text, the tag strip). Size carries the hierarchy.\n- `--text-base` 18px at `--line-body` 1.55; `--text-small` 14px for labels, meta, table heads, grid cell text and the footer; `--text-ui` 16px for navigation, buttons, inputs, tabs and the tag strip; `--text-large` 24px for leads, large buttons and the brand.\n- `--text-display` 60px at `--line-display` 1.1 for the hero title; `--text-h1` 48px (prose h1, the inner page title, stat figures, the call to action, the footer brand), `--text-h2` 36px (section heads, prose h2) and `--text-h3` 24px (grid cell, cell label, panel, sidebar, dialog and empty-state titles) at `--line-heading` 1.25. No tracking, no uppercase headings.\n- Uppercase is used only for 12px labels: `.ds-badge` and `.ds-footer__title`. 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`); navigation, titles and breadcrumbs are not (`--link-decoration-quiet`). Visited links are not marked.\n- `--border-width` is a 1px black hairline on every box and rule; `--border-width-strong` 2px only under the navigation.\n- Corners: `--radius-control` 4px on buttons, inputs and icon boxes; `--radius-panel` and `--radius-page` 0, so cards, panels and dialogs are square; `--radius-pill` 9999px, so badges and the current navigation item are full pills.\n- Nothing has a shadow at rest: `--shadow-panel` and `--shadow-control` are `none`, so the hero cards are told apart by their overlap and outline. A hard shadow appears with interaction only: `--shadow-control-hover` is `2px 2px 0 0` black (also the pagination squares and icon boxes), `--shadow-control-pressed` is `none`, and the dialog alone floats on `--shadow-dialog` `4px 4px 0 0`.\n- All fills are flat (`--fill-page` is the plain page colour, no grid); `--fill-button-hover` equals `--fill-button`, hover moves the button and gives it its shadow.\n- `--focus-ring` is `2px solid` black; `--transition` animates only `transform` and `box-shadow` over 0.14s.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. 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 `