{ "id": "v1-nb-522a", "long_id": "v1.neubrutalism.app.s05.p02.t02.u10", "name": "Neubrutalism dashboard (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": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "An application screen in the neubrutalist look: a white rail of navigation on the left, a filled strip across the top and a working area of outlined cards on a dotted page, every card standing on a hard, unblurred shadow. It was common from about 2021 to 2026 in admin templates, dashboards of small software products and the component kits that fed them. Figures sit in chunky filled cards, tables and tabs are closed by thick rules, and nothing is shaded, blurred or faded.", "url": "https://chrono.skin/s/v1-nb-522a", "preview_url": "https://chrono.skin/s/v1-nb-522a/specimen.html", "files": { "STYLE.md": "# Neubrutalism dashboard (2021 to 2026)\n\n## Summary\n\nAn application screen in the neubrutalist look: a white rail of navigation on the left, a filled strip across the top and a working area of outlined cards on a dotted page, every card standing on a hard, unblurred shadow. It was common from about 2021 to 2026 in admin templates, dashboards of small software products and the component kits that fed them. Figures sit in chunky filled cards, tables and tabs are closed by thick rules, and nothing is shaded, blurred or faded.\n\n## Layout\n\n- The page is fluid: `--size-page` is 100%. `.ds-page` is a grid of two columns, a `--size-rail` (248px) rail on the left that runs the full height of the page and the rest for the top bar, the screen and the footer. Designed at a 1440px viewport, where the screen is 1128px of content; the content is capped at `--size-content` (1180px) and centred beyond that.\n- The rail (`.ds-nav`) is the only navigation: the brand, a label, a column of links with icons and counts (the current one a filled, outlined, shadowed block), then a storage card on the inverse fill. It is closed on its right by a `--border-width-strong` rule.\n- The top bar (`.ds-topbar`) is a `--size-topbar` (64px) strip on `--fill-bar-alt`, closed by a `--border-width-strong` rule: a `--size-search` (300px) search field, a line of status text, one small primary button and the signed-in person.\n- The screen (`.ds-main`, then one `.ds-screen` per view) stacks its blocks `--space-6` (24px) apart with `--space-gutter` (32px) at the sides. The home screen is: the hero card, a row of four stat cards, then two rows split 2:1 (`.ds-split--wide`). There are no full-bleed bands and no rules between blocks; every block is a card on the page fill.\n- Inner pages keep the rail, the top bar and the footer and drop the hero and the stat cards. The screen starts with the `.ds-breadcrumb`, then a `.ds-page-header` (34px title and one line of description on the left, at most two buttons on the right, bottom-aligned, no rule), then the working components. A list screen is a `.ds-split`: the main column holds the `.ds-tabs` standing on their thick rule, the table and a `.ds-row` with the pagination and a count; the `--size-side` (304px) side column holds a `.ds-sidebar` and plain panels. A board screen is one `.ds-grid` of four columns across the whole width. A form screen puts notices first, then a `.ds-split` with the form in a panel and a side column, then the dialog on its `.ds-overlay` block.\n- Spacing scale: `--space-1` 4px (gap between wave bars, underline offset, inline code padding), `--space-2` 8px (badge padding, gap between rail links, label to control, pagination gaps), `--space-3` 12px (row and strip padding, gaps inside a card, gap between board cards), `--space-4` 16px (panel body padding, side padding of rows, gap between buttons and fields), `--space-5` 20px (gap inside a stack, gap between board columns, stat card side padding), `--space-6` 24px (gap between the blocks of a screen and between columns), `--space-7` 32px (hero padding, screen top padding, sheet padding), `--space-8` 48px (screen bottom padding, overlay padding). `--space-gutter` 32px is the side padding of the top bar, the screen and the footer.\n- Movement tokens: `--space-nudge` 2px (hover offset, focus outline offset) and `--space-press` 4px (pressed offset, offset of the red shadow under an invalid field). Hover and press move a control straight down, never sideways, so the movement is right whichever way the surface set throws its shadows.\n- Fixed sizes: `--size-control` 40px (buttons, inputs, rail links, tabs), `--size-control-large` 48px (hero buttons), `--size-control-small` 32px (small buttons, pagination squares, the dialog's close button), `--size-logo` 32px, `--size-icon` 20px (rail icons), `--size-avatar` 32px, `--size-check` 20px, `--size-chart` 184px (height of the bar chart), `--size-wave` 64px, `--size-player` 340px (the card in the hero), `--size-meter` 14px, `--size-dialog` 460px, `--size-measure` 620px (lead text).\n- Below 1100px the hero stacks, and the stat row and the board drop to two columns. Below 900px the rail becomes a block across the top (brand, then the links in a wrapping row; the labels, counts and storage card are hidden), and every split stacks. Below 600px the status line and the person's name are hidden, the search field fills the top bar, the board and the form rows are one column, hero buttons fill the width, titles step down, the tabs scroll sideways inside their own row, notices stack and table columns marked `.ds-table__extra` are hidden so a table never scrolls sideways. On a phone `.ds-nav__links` is a bar of five equal cells fixed to the bottom edge of the window, each `.ds-nav__link` an icon (`.ds-nav__icon`, shown again here) above its label and separated by rules, the current one without a shadow and in the heavier weight; the rest of the rail is not shown.\n- Views: the specimen is one example application, a podcast studio, with five views switched by plain `#name` links. `home` is the overview (hero with the latest cut, stat cards, the plays chart beside the most-played ranking, recent activity beside an empty release slot). `episodes` is a list screen (breadcrumb, page header, tabs, table, pagination, the shows sidebar and the key of status labels). `board` is the production board (four columns of task cards, one of them empty, and a notice). `settings` is a form screen (notices, the show form with its buttons, who can edit, and the delete dialog). `guide` is a handbook article on a sheet with further links. The rail 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\n- Outlines are thin: `--border-width` 1px on every box and rule, `--border-width-strong` 2px under the navigation.\n- Corners are soft and grow with the box: `--radius-control` 14px, `--radius-panel` 18px, `--radius-page` 24px, `--radius-pill` 9999px so badges are full pills.\n- Shadows stay hard and unblurred, in pink, and fall straight down, so every box stands on a lip instead of a corner block: `--shadow-panel` `0 6px 0 0`, `--shadow-control` `0 4px 0 0`, `--shadow-control-hover` `0 2px 0 0`, `--shadow-control-pressed` zero offset, `--shadow-dialog` `0 10px 0 0`.\n- All fills are flat (`--fill-page` is the plain page colour, no grid).\n- `--focus-ring` is `2px solid` in `--color-focus`; `--transition` animates only `transform` and `box-shadow` over 0.12s.\n\n## Components\n\n- `.ds-page`: on ``. The two-column grid, the page fill with its dots, the base font and colour. Its children are the `.ds-nav` rail, the `.ds-topbar`, `
` and the `.ds-footer`.\n- `.ds-brand`: the site's mark and name at the top of the rail, a link to the overview. `.ds-brand__mark` is a `--size-logo` tile dressed like the primary button (`--fill-button`, mark in `--color-button-text`, outline, `--radius-control`, `--shadow-control`), so every palette and surface set reskins it. `.ds-brand__name` is the name in the heading font at `--text-large`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the rail. `.ds-nav__label` is a small uppercase label over `.ds-nav__links`, a column of `.ds-nav__link` rows, each with a `.ds-nav__icon` (inline SVG in `currentColor`) and optionally a plain badge with `.ds-nav__count` pushed to the right. The current link (`is-current`) is filled with the accent, outlined and shadowed; `is-hover` shows the outline only. `.ds-nav__card` is the inverse card at the foot, with `.ds-nav__card-title`, `.ds-nav__card-text`, a meter and one small secondary button.\n- `.ds-topbar`: the filled strip over the screen. `.ds-topbar__search` is a `.ds-form__control` of fixed width, `.ds-topbar__note` one line of status text that takes the free space, then one small button and `.ds-topbar__user` (a `.ds-avatar` and `.ds-topbar__name`).\n- `.ds-avatar`: a 32px outlined circle with two initials on `--color-accent-alt`; `.ds-avatar--2` and `.ds-avatar--3` use `--color-fill-2` and `--color-fill-3`. For people in lists, cards and the top bar.\n- `.ds-main`, `.ds-screen`: the working area and its stack of blocks. `.ds-split` is a main column plus the 304px side column; `.ds-split--wide` is two columns 2:1 of equal height. `.ds-stack` stacks blocks 20px apart, `.ds-row` puts two things at the ends of one line, `.ds-label` is a 24px heading over a block without a title strip, `.ds-note` a muted small line.\n- `.ds-hero`: the welcome card of the overview, on `--color-fill-1` with the largest radius and `--shadow-dialog`: `.ds-hero__text` (a plain badge, `.ds-hero__title` at display size and at most 18ch, `.ds-hero__lead`, `.ds-hero__actions` with one primary and one secondary large button) beside a `.ds-player`. One per application, on the overview only.\n- `.ds-player`: a white card for one recording: a `.ds-row` with a badge and a note, `.ds-player__title`, a `.ds-wave` (24 empty `.ds-wave__bar` spans drawn in `currentColor` on `--color-surface-alt`) and a row with a small button and a link. Use it for one highlighted item, not for lists.\n- `.ds-page-header`: the head of an inner screen: a block with `.ds-page-header__title` and one `.ds-page-header__lead` line on the left, `.ds-page-header__actions` on the right. It follows the breadcrumb and has no fill and no rule.\n- `.ds-stat`: the row of summary figures, four `.ds-stat__card` in a grid. Each card is outlined, shadowed and filled by `.ds-stat__card--1` to `--4` (white without a modifier) and holds a bold `.ds-stat__label`, a 34px `.ds-stat__value` and a `.ds-stat__note` line of comparison.\n- `.ds-chart`: a bar chart for up to twelve values: `.ds-chart__col` items, each a `.ds-chart__bar` over its label. The bar's height is set by `.ds-chart__bar--30`, `--45`, `--60`, `--75`, `--90` or `--100` (percent of `--size-chart`); `is-current` on a column turns its bar yellow, shadowed and its label bold. Put it in a panel body.\n- `.ds-meter`: an outlined pill track with a `.ds-meter__fill` whose width is `.ds-meter__fill--20`, `--35`, `--62`, `--80` or `--95`. `.ds-rank` is a list of `.ds-rank__item`, each a `.ds-rank__head` (a title and a `.ds-rank__num`) over a meter.\n- `.ds-grid`: the board, four columns. Each `.ds-grid__cell` is an outlined, shadowed column on `--color-canvas`: a `.ds-grid__head` (filled by `.ds-grid__cell--1` to `--4`, holding `.ds-grid__title` and a plain count badge) over a thick rule, then `.ds-grid__body` with a stack of `.ds-card`. An empty column holds a `.ds-empty` instead.\n- `.ds-card`: a task card: white, outlined, on `--shadow-control`, with `.ds-card__title`, one `.ds-card__text` line and a `.ds-card__foot` holding a status badge and an avatar.\n- `.ds-prose`: long text: h1, h2, h3, p, ul, ol, strong, inline code (outlined, on `--color-surface-alt`) and links inside it are styled. On a handbook page it sits in a `.ds-sheet`, a white card with the largest radius.\n- `.ds-link`: any link in content: `--color-link`, medium weight, underlined. `.ds-link--quiet` removes the underline for titles, breadcrumbs and row links. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-links` stacks several in a column.\n- `.ds-button`: the primary button, 40px tall, outlined, on `--shadow-control`. `.ds-button--secondary` is white. `.ds-button--danger` is the destructive action (delete a show): flat `--color-danger` with `--color-text`; use it once per view, at the end of a form's button row or as the confirming button of a dialog. `.ds-button--large` (48px, 18px text) for the hero, `.ds-button--small` (32px, 13px text) for the top bar, cards and panels. `is-hover` sinks it 2px toward its shadow, `is-active` 4px with the pressed shadow, `is-disabled` is flat grey, `is-focus` adds the focus ring 2px away. `.ds-buttons` is a row of them.\n- `.ds-badge`: a small bold label in an outlined pill, on the accent by default. `.ds-badge--alt` yellow (new), `.ds-badge--plain` white (counts, neutral states). Status labels, in table rows and on task cards: `.ds-badge--success` (published), `.ds-badge--warning` (in review), `.ds-badge--danger` (late, taken down), all with `--color-text`. No shadow. `.ds-badges` is a wrapping row of them.\n- `.ds-form`: stacked fields 16px apart; `.ds-form__row` puts two fields side by side. A `.ds-form__field` is a bold 13px `.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 have the outline and no shadow at rest; `is-focus` adds `--shadow-control` and the focus ring, `is-invalid` turns the border to `--color-danger` and puts a red shadow straight under the field, `is-disabled` greys it. `.ds-form__check` wraps a `.ds-form__checkbox` and its text. `.ds-form__foot` is the button row over a rule.\n- `.ds-table`: one outlined, shadowed box. The head row is on `--color-surface-strong` with bold 13px text and closed by a `--border-width-strong` rule; rows are divided by 2px rules; `is-current` on a row makes it pale and bold. `.ds-table__title` is the bold cell that names the row, `.ds-table__num` right-aligns numbers, and a cell with `.ds-table__extra` is dropped below 600px. A status column holds one badge per row.\n- `.ds-list`: one outlined, shadowed box of `.ds-list__item` rows divided by rules, each with an optional avatar, a `.ds-list__main` block (bold `.ds-list__title`, a `.ds-list__text` line) and a muted `.ds-list__meta` on the right.\n- `.ds-panel`: an outlined, shadowed box with a `.ds-panel__title` strip on `--color-surface-strong` over a rule (it may end with a plain badge) and a `.ds-panel__body`. `.ds-panel--plain` puts the strip on `--fill-bar` with `--color-bar-text`, for side columns.\n- `.ds-tabs`: a row of `.ds-tabs__tab` blocks with rounded top corners standing on a `--border-width-strong` rule; the current one (`is-current`) is on the accent and bold, `is-hover` is pale. Use for two to five views of one list; it is the first thing in the main column, directly over the table.\n- `.ds-sidebar`: an outlined, shadowed white block in the side column: a `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by faint rules, each a link or a name with a badge at the right. It may hold a `.ds-links` column instead.\n- `.ds-notice`: a one-line message in an outlined box on `--shadow-control`, with a bold `.ds-notice__title` and `.ds-notice__text`, on `--color-notice`. `.ds-notice--error` is on `--color-danger-surface` with `--color-text`.\n- `.ds-pagination`: a row of 32px outlined squares (`.ds-pagination__link`) on `--shadow-control-hover`; the current page (`is-current`) is on the accent, `is-disabled` is grey and flat, `is-hover` sinks into its shadow. It shares a `.ds-row` with a count.\n- `.ds-breadcrumb`: a 13px trail of `.ds-breadcrumb__item` separated by a muted slash; the last has `is-current` and is bold. It is the first line of every inner screen.\n- `.ds-dialog`: a 460px outlined box on `--shadow-dialog`, with a `.ds-dialog__bar` on `--color-surface-strong` (holding `.ds-dialog__title` and a square `.ds-dialog__close`), a `.ds-dialog__body`, and a `.ds-dialog__actions` strip on `--color-canvas` over a rule with the buttons right-aligned. In the page flow it sits on a `.ds-overlay` block, an outlined area filled with `--color-overlay`.\n- `.ds-empty`: an outlined box on `--color-surface-alt`, centred: `.ds-empty__title`, `.ds-empty__text` and one small button. It has no shadow, so it can stand inside a board column as well as in a split.\n- `.ds-footer`: one inverse strip under the screen, closed above by a thick rule: `.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-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 `