{ "id": "v1-nb-8837", "long_id": "v1.neubrutalism.portal.s08.p08.t03.u07", "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-8837", "preview_url": "https://chrono.skin/s/v1-nb-8837/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- `--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\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 `