{ "id": "v1-nb-514b-dr", "long_id": "v1.neubrutalism.app.s05.p01.t04.u11.dr", "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 }, "density": "roomy", "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-514b-dr", "preview_url": "https://chrono.skin/s/v1-nb-514b-dr/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- `--color-page` and `--color-canvas` are aqua #99f6e4; `--fill-page` adds a 24px grid of 1px dots (`--color-border` at 16%). `--color-surface` is white for the navigation bar, stickers, stat cards, plan bodies, sheets, tables, lists and inputs. Toolbar strips inside a box and even table rows take the page colour.\n- Text, headings, every link colour, borders, focus and shadow are #000000. `--color-text-muted` is #5c5c66 (dates, hints, counts, a feature a plan does not include), `--color-border-muted` #b8b8b8 (dividers of the sidebar list, the box of a missing feature), disabled is #d8d8d8 with #5c5c66 text.\n- `--color-button` and `--color-surface-alt` are pale yellow #fff59f with black text: the primary button, the brand tile, every second stat card, the page header box, the empty state, the current table row, inline code, a hovered tab. The secondary button is white.\n- `--color-accent` is pink #ffa6f6 with black text: the current navigation item, tab and page, the default badge, the stamp, the bullet of an included feature, the flag on the recommended plan. `--color-accent-alt` is bright mint #b8ff9f: the marked phrase of the hero title and \"new\" badges.\n- `--color-surface-strong` is periwinkle #a5b4fb: panel and dialog title strips and the highlight behind a hovered link.\n- `--color-fill-1` to `--color-fill-4` are pink #ffa6f6, periwinkle #a5b4fb, yellow #fff59f and mint #c6fab4, always with black text: the heads of the four plan cards, the stickers and the call to action box. Use each once before repeating.\n- Status, all with black text and a black outline: `--color-success` mint #b8ff9f, `--color-warning` amber #f0b100, `--color-danger` red #fb2c36 (error text, the invalid field, the destructive button, the danger badge), `--color-danger-surface` salmon #f37777 behind an error notice, `--color-notice` pale cyan #a6faff.\n- `--color-inverse` is near-black #17171c with `--color-inverse-text` #fafaf9: the footer. `--color-overlay` is the same dark at 75%, behind a dialog. `--color-bar` is white (navigation bar, table head, plain panel title); `--color-bar-alt` is pink.\n- Two families. `--font-heading` is a heavy condensed display face (Big Shoulders Display, then Barlow Condensed, Avenir Next Condensed, Arial Narrow) for every title, price and figure and for the brand name. `--font-body` and `--font-ui` are the system sans for text, buttons, navigation and inputs. One of the references used a commercial-looking caps-only condensed face; the openly licensed Big Shoulders Display, measured in another, stands in for both. `--font-mono` is for inline code.\n- `--text-display` 72px at `--line-display` 1, weight `--weight-display` 900: the hero title only. `--text-h1` 60px (the inner page title, prose h1, stat figures, plan prices, the figure on a sticker), `--text-h2` 48px (section and call to action titles, prose h2), `--text-h3` 30px (plan, sticker, panel, sidebar, dialog, empty-state and label titles), all weight 700 at `--line-heading` 1. Condensed type runs narrow, so these sizes read about a third smaller than they measure. No tracking, no uppercase headings.\n- `--text-base` 16px at `--line-body` 1.5; `--text-small` 14px (labels, meta, table heads, plan text and features, sticker text, the footer); `--text-ui` 16px (navigation, buttons, inputs, tabs); `--text-large` 20px at 1.4 (leads, large buttons, the brand name).\n- Weights: 400 body, 500 (`--weight-ui`) navigation, links, inputs, leads and plan features, 700 (`--weight-bold`) buttons, badges, labels, 900 only on the hero title.\n- Uppercase is used only for 12px bold labels (`.ds-badge`, `.ds-footer__title`) and the 14px stamp. The 12px 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. Hover puts a flat `--color-surface-strong` highlight behind the text, active a `--fill-accent` one.\n- `--border-width` is 3px on every box and rule; `--border-width-strong` 4px on the navigation bar and the call to action box.\n- Corners: `--radius-control` 24px, which makes buttons, inputs and navigation items pills and gives a textarea soft corners; `--radius-panel` 8px (stickers, stat cards, panels, tables, lists, dialogs, tabs, the marked phrase); `--radius-page` 12px (the navigation bar, plan cards, sheets, the page header, the call to action, the footer); `--radius-pill` 9999px, so badges are full pills.\n- Shadows are hard and black: `--shadow-panel` and `--shadow-dialog` `8px 8px 0 0`, `--shadow-control` `4px 4px 0 0` (buttons, the brand tile, the stamp), `--shadow-control-hover` `2px 2px 0 0` (a hovered button, pagination squares, the dialog close box), `--shadow-control-pressed` zero offset. Inputs have no shadow at rest. The footer and the dialog backdrop have an outline but no shadow.\n- `--focus-ring` is `3px solid` black; `--transition` animates only `transform` and `box-shadow` over 0.15s.\n\n- Outlines are the heaviest of the era: `--border-width` and `--border-width-strong` are both 4px, on every box and every rule.\n- Every radius token is 0: all boxes, controls and badges are square.\n- Shadows are large, hard and black: `--shadow-panel` and `--shadow-dialog` `8px 8px 0 0`, `--shadow-control` `6px 6px 0 0`, `--shadow-control-hover` `4px 4px 0 0`, `--shadow-control-pressed` `2px 2px 0 0`.\n- Three fills are hatched with thin diagonal lines, 2px in every 10px at 45 degrees: the page (`--fill-page`, `--color-border` at 9%), the secondary bar (`--fill-bar-alt`, its text colour at 22%) and the inverted block (`--fill-inverse`, its text colour at 14%). Every other fill is flat, and no box that holds running text is hatched.\n- `--focus-ring` is `4px solid` in `--color-focus`; `--transition` animates only `transform` and `box-shadow` over 0.15s.\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 ``. 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 `