{ "id": "v1-nb-8323", "long_id": "v1.neubrutalism.portal.s08.p03.t02.u03", "name": "Neubrutalism portal, events sheet with folder tabs (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": "portal", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "A community notice board in the rounded, friendly strand of neubrutalism: the brand stands on the page colour, a row of folder tabs is the navigation, and every view is laid out inside one big outlined sheet that stands on a hard, unblurred shadow. It was common from about 2021 to 2026 for event calendars, meetup and club pages, community directories and the small portals of neighbourhood groups. Dates are the pictures: a tilted ticket with a filled stub, a week of day cells with coloured heads, list rows led by a date square.", "url": "https://chrono.skin/s/v1-nb-8323", "preview_url": "https://chrono.skin/s/v1-nb-8323/specimen.html", "files": { "STYLE.md": "# Neubrutalism portal, events sheet with folder tabs (2021 to 2026)\n\n## Summary\n\nA community notice board in the rounded, friendly strand of neubrutalism: the brand stands on the page colour, a row of folder tabs is the navigation, and every view is laid out inside one big outlined sheet that stands on a hard, unblurred shadow. It was common from about 2021 to 2026 for event calendars, meetup and club pages, community directories and the small portals of neighbourhood groups. Dates are the pictures: a tilted ticket with a filled stub, a week of day cells with coloured heads, list rows led by a date square.\n\n## Layout\n\n- The page is fluid in its background only: `--size-page` is 100%, and the brand row, the tabs, the sheet and the footer share one centred width of `--size-content` (1180px), with at least `--space-gutter` (28px) at the sides. Designed at a 1440px viewport; the page colour and its pattern always show left and right of the sheet.\n- Order of a page: a full-width ticker line on `--fill-bar-alt`, the brand row (the `.ds-brand` at the left, an avatar and two small buttons at the right, standing on the page), the folder tabs, the sheet (`.ds-main`), and the footer as an inverted card under it.\n- Navigation is the row of folder tabs: each `.ds-nav__link` is a `--fill-bar` tab with an outline on three sides and rounded top corners, standing on the sheet's top edge. The current tab is filled with the accent and stands `--space-2` taller. The last tab is a `.ds-menu`. The tabs start `calc(var(--radius-page) / 2 + var(--space-4))` in from the sheet's corner.\n- The sheet is `--color-canvas` with a `--border-width-strong` outline, `--radius-page` corners, the `--shadow-dialog` shadow and `--space-7` (40px) of padding. Blocks inside it are `--space-7` apart (`.ds-column`); blocks in a `.ds-stack` are `--space-5` (20px) apart.\n- The home view: the `.ds-hero` (the claim at the left, the next event as a tilted `.ds-ticket` at the right), the inverted `.ds-stat` strip of four figures, the week (`.ds-row` with a `.ds-label`, then the `.ds-grid` of five day cells), and a `.ds-split` with the `.ds-list` of new events beside a `.ds-panel`.\n- Inner pages keep everything outside the sheet and drop the hero. Inside the sheet they start with a `.ds-page-header`: a `--color-surface-alt` box holding the breadcrumb, then the `--text-h1` title and one line of lead on the left and the page's actions on the right, centred on the row. Below it comes one `.ds-split`: a main column and a `--size-side` (320px) column on the right. Tabs are the first row of the main column, above the table; filters, the small month and the kinds of event are in the side column.\n- Spacing scale: `--space-1` 4px (gap between tabs and between month squares, inline code), `--space-2` 8px (badge padding, gaps between chips, label to control, overlap of stacked avatars), `--space-3` 12px (gap between list rows and accordion bars, row padding), `--space-4` 16px (panel and card padding, gap between buttons and between day cells), `--space-5` 20px (gap between stacked blocks, button side padding), `--space-6` 28px (gap between split columns, page header side padding), `--space-7` 40px (sheet padding, gap between the blocks of a view, hero gap), `--space-8` 56px (space under the footer).\n- Movement tokens: `--space-nudge` 2px (hover offset, focus offset) and `--space-press` 4px (pressed offset, the red shadow of an invalid field). A control sinks straight down.\n- Fixed sizes: `--size-control` 44px (buttons, inputs, folder tabs), `--size-control-large` 54px (hero buttons), `--size-control-small` 34px (small buttons, tab segments, pagination, step numbers), `--size-logo` 38px, `--size-avatar` 36px, `--size-date` 60px (the date square of a list row), `--size-stub` 150px (the ticket's stub), `--size-check` 20px, `--size-switch` 44px, `--size-bar` 14px, `--size-menu` 220px, `--size-tip` 200px, `--size-dialog` 440px.\n- Below 1000px the hero and every split stack, the ticket is no longer tilted, the week goes to three columns and the stat strip to two. Below 600px the side margins shrink to `--space-3`, the folder tabs become a wrapping row of fully outlined chips above the sheet, the sheet's outline thins to `--border-width` and its padding to `--space-3`, the week and form rows are one column, titles step down (`calc()` over `--text-h1` and `--text-h2`), hero and page header buttons fill the width, the tab bar stretches across, list rows wrap their meta line, and table columns marked `.ds-table__extra` are hidden so that a table never scrolls sideways. On a phone `.ds-nav__links` is one strip of cells, each 29% of the width, that scrolls sideways with the scrollbar hidden and ruled top and bottom; the current link keeps its mark, and on the last two views the strip starts at its far end so that the current cell is in view. The drop-down item (\"Places\") leaves the strip, because a menu cannot open inside a scrolling strip, and its places are reached from the calendar view.\n- Views: the specimen is one example site, a neighbourhood events board, with five views switched by plain `#name` links. `home` is this week (hero with the next event's ticket, stat strip, the next five days, newly pinned events beside the host of the month). `calendar` is the month as a list: page header with the breadcrumb, tabs, the events table, pagination and the key of labels, with the small month, two switches and the kinds of event in the side column. `event` is one event: a notice, what happens, who is coming and the booking dialog, with the details, a short accordion and an empty questions box at the side. `post` is the form to post an event: notices, the form with its switches and buttons, the three steps and the reader at the side. `guide` is the host guide on a sheet with further links, beside the questions accordion and a panel. The tabs mark 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## Components\n\n- `.ds-page`: on ``. Sets the page fill with its pattern, the base font and colour. The header, `.ds-main` and the footer are its children.\n- `.ds-brand`: the site's mark and name, first in the brand row and a link to the home view. `.ds-brand__mark` is a round `--size-logo` tile dressed like the primary button (`--fill-button`, `--color-button-text`, the outline, a small hard shadow); the mark is drawn with round caps and a 2.6 stroke. `.ds-brand__name` is the name in the heading face at `--text-h2`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the header. `.ds-nav__strip` is the ticker line with a `.ds-nav__strip-link`. `.ds-nav__top` holds the brand and `.ds-nav__actions` (an avatar and two small buttons). `.ds-nav__links` is the row of folder tabs, each a `.ds-nav__link` (`is-current`, `is-hover`, `is-focus`).\n- `.ds-menu`: a drop-down under the last folder tab, a `
` whose `` is a `.ds-nav__link` with `.ds-menu__trigger` (it shows a plus, a minus when open). `.ds-menu__list` is an outlined, shadowed box of `.ds-menu__item` rows divided by faint rules, each a `.ds-menu__link` that may end in a plain badge. Use it for places or categories that would not fit the tab row.\n- `.ds-main`: the sheet. Every `.ds-view` is inside it; `.ds-column` spaces a view's blocks.\n- `.ds-hero`: the introduction of the home view, standing directly on the sheet: `.ds-hero__text` with an optional badge, `.ds-hero__title` at display size, `.ds-hero__lead` and `.ds-hero__actions` (one primary and one secondary large button), beside a `.ds-ticket`. One per site.\n- `.ds-ticket`: one event as a ticket turned 2 degrees, with the dialog shadow: `.ds-ticket__stub` is the filled left part with `.ds-ticket__day` lines around a `.ds-ticket__number`; `.ds-ticket__body` holds badges, `.ds-ticket__title`, a `.ds-ticket__meta` line, a progress bar and the people going. Only the ticket is tilted; never turn a card, a row or text.\n- `.ds-stat`: the row of summary figures, one inverted strip (`--fill-inverse`) of four `.ds-stat__cell`, each a `.ds-stat__value` (`--text-h1`) over a `.ds-stat__label`, centred. Use under the hero.\n- `.ds-grid`: the week, five day cells. Each `.ds-grid__cell` (`--1` to `--4` set the head's fill; without one the head is `--color-surface-alt`) has a `.ds-grid__head` with `.ds-grid__day` and `.ds-grid__date`, and a `.ds-grid__body` list of `.ds-grid__event` items divided by faint rules: a `.ds-grid__time` in the monospace face over a `.ds-grid__title`. `.ds-grid__text` is a muted line for a day with room left.\n- `.ds-month`: a small calendar, a seven-column grid of `.ds-month__day` squares (`--head` for the weekday letters). `is-busy` outlines a day that has events, `is-current` fills today with the accent.\n- `.ds-page-header`: the head of an inner page, a filled outlined box: the `.ds-breadcrumb`, then `.ds-page-header__row` with `.ds-page-header__main` (`.ds-page-header__title`, `.ds-page-header__lead`) and `.ds-page-header__actions`. One per inner view.\n- `.ds-split`, `.ds-stack`, `.ds-row`, `.ds-label`, `.ds-note`: layout helpers. `.ds-split` is a main column and the 320px side column (`.ds-split--even` for halves); `.ds-stack` stacks blocks; `.ds-row` puts a heading and a link, or tabs and a count, on one line; `.ds-label` is a section heading; `.ds-note` is a muted line.\n- `.ds-prose`: long text: h1, h2, h3, p, ul, ol, strong, inline code (outlined, on `--color-surface-alt`) and links are styled. `.ds-sheet` is the outlined box an article sits on, inside the big sheet.\n- `.ds-link`: a link in content: lemon, underlined. `.ds-link--quiet` is cream without the underline, for titles, breadcrumbs and sidebar items. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-links` lays several out in a row.\n- `.ds-button`: lemon, indigo bold text, 2px outline, hard shadow, 44px tall, 12px corners. `.ds-button--secondary` is cream. `.ds-button--danger` is the destructive action, flat red with `--color-text`; use it once per view. `.ds-button--large` for the hero, `.ds-button--small` for the brand row and empty states, `.ds-button--wide` fills its box. `is-hover` sinks it 2px, `is-active` 4px with no shadow left, `is-disabled` is flat and dim, `is-focus` adds the dashed ring. `.ds-buttons` is a row of them.\n- `.ds-badge`: a small pill label, coral with indigo text by default. `.ds-badge--alt` deep green, `.ds-badge--plain` on the surface colour (counts). Status labels: `.ds-badge--success` (open, going), `.ds-badge--warning` (few left, not sure), `.ds-badge--danger` (full), all with `--color-text` and the outline. `.ds-badges` is a row of them.\n- `.ds-avatar`: a neighbour as initials on a filled circle (`--2`, `--3`, `--4` change the fill; `--small` for the brand row, `--large` with a shadow for a profile). `.ds-person` puts one beside a `.ds-person__name` and a `.ds-person__role`. `.ds-avatars` overlaps several in a row and ends with `.ds-avatars__more`.\n- `.ds-progress`: how far something is: a `.ds-progress__label` line over a `.ds-progress__track` pill holding a `.ds-progress__bar` whose width is set by `--10`, `--25`, `--70` or `--85` (50% without one). Use for places taken and for how complete a form is. `.ds-steps` is a numbered list of stages: `is-done` turns the number green, `is-current` fills it with the accent.\n- `.ds-switch`: an on and off control: a `