{ "id": "v1-nb-6535", "long_id": "v1.neubrutalism.blog.s06.p05.t03.u05", "name": "Neubrutalism personal page (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": "blog", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "A creator's own page in the neubrutalist look: a centred masthead, a profile card with a tilted portrait, and a stack of big outlined link buttons, every box on a hard, unblurred shadow over a flat coloured page. It was common from about 2021 to 2026 for link-in-bio pages, portfolios of illustrators and developers and the small sites of one-person studios. Boxes stand free on the page colour in one centred column; nothing is full-bleed except the masthead and the footer.", "url": "https://chrono.skin/s/v1-nb-6535", "preview_url": "https://chrono.skin/s/v1-nb-6535/specimen.html", "files": { "STYLE.md": "# Neubrutalism personal page (2021 to 2026)\n\n## Summary\n\nA creator's own page in the neubrutalist look: a centred masthead, a profile card with a tilted portrait, and a stack of big outlined link buttons, every box on a hard, unblurred shadow over a flat coloured page. It was common from about 2021 to 2026 for link-in-bio pages, portfolios of illustrators and developers and the small sites of one-person studios. Boxes stand free on the page colour in one centred column; nothing is full-bleed except the masthead and the footer.\n\n## Layout\n\n- The page is fluid: `--size-page` is 100%, but the content is one centred column of `--size-content` (1080px) with `--space-gutter` (24px) at the sides. Designed at a 1440px viewport, where the page colour shows as wide margins left and right of the column.\n- The masthead (`.ds-nav`) is centred and stacked: a `--fill-bar-alt` announcement line, then on `--fill-bar` the brand (mark tilted 6 degrees, name at 28px) over a centred row of link chips, closed by a `--border-width-strong` rule. There is no button in the masthead.\n- The home page is a `.ds-home` grid: a `--size-profile` (384px) column with the profile card (`.ds-hero`) and the stat box under it, and a wide column with the `.ds-linkstack`, then two equal columns for a short list and a panel. Columns are `--space-7` (32px) apart, blocks inside a column `--space-6` (24px).\n- Inner pages keep the masthead and the footer and drop the profile card, the stats and the link stack. They start with a centred `.ds-page-header`: the breadcrumb, a 40px title, one line of description of at most `--size-measure` (600px) and at most one button, all centred. Below it, blocks stack `--space-7` apart in the same column: a gallery page has the `.ds-tabs` bar centred, the three-column `.ds-grid`, a key of labels and centred pagination; an article page is a `.ds-split` (the text on a `.ds-sheet`, a `--size-profile` side column with a `.ds-sidebar` and a panel); a form page is `.ds-split--even` with notices above it.\n- Spacing scale: `--space-1` 4px (underline offset, brand tile padding), `--space-2` 8px (badge padding, gap between masthead chips, label to control), `--space-3` 12px (gap between list rows, row padding, gap between stacked buttons), `--space-4` 16px (panel and card padding, gap between buttons and fields), `--space-5` 20px (gap between link buttons, sidebar padding), `--space-6` 24px (gap inside a column, profile card padding, grid column gap), `--space-7` 32px (gap between columns and between the blocks of a page, grid row gap, sheet and sign-up padding), `--space-8` 48px (top padding of the column, footer padding, overlay padding), `--space-9` 72px (bottom padding of the column).\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` 44px (buttons, inputs, tab segments), `--size-control-large` 54px (the main button of the profile card), `--size-control-small` 34px (masthead chips, small buttons, pagination), `--size-logo` 36px, `--size-icon` 44px (icon tile of a link button), `--size-link` 84px (least height of a link button), `--size-portrait` 152px, `--size-art` 148px (picture of a project card), `--size-check` 20px, `--size-dialog` 440px.\n- Below 900px every two-column arrangement stacks (profile card first, then the link stack) and the grid drops to two columns. Below 600px the grid and form rows are one column, masthead chips shrink and wrap, titles step down, the page header button fills the width, the tab bar fills the width and scrolls inside itself, the sign-up field and button stack, list rows and notices stack, and table columns marked `.ds-table__extra` are hidden so a table never scrolls sideways. On a phone (600px and below) the links `.ds-nav__links` are not shown; the \"Menu\" button `.ds-nav__fold` beside the brand opens a full-width list of every view as `.ds-menu__link--view` rows, the current one filled with the accent and barred on the left.\n- Views: the specimen is one example site, the page of a map illustrator, with five views switched by plain `#name` links. `home` is the link-in-bio page (profile card, three figures, four link buttons, recent news beside a \"now\" panel). `work` is the portfolio (page header with the breadcrumb, tabs, six project cards, the key of labels, pagination). `project` is one project (the story on a sheet with further links, a facts sidebar and a panel). `hire` is the rates and enquiry page (notices, the rates table and a confirmation dialog beside the enquiry form with its buttons). `letter` is the newsletter (sign-up box, past letters, an empty slot for this month). The masthead 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 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 flat page fill, the base font and colour. Its children are the `.ds-nav` masthead, `
` and the `.ds-footer`; each view holds one `.ds-column`.\n- `.ds-brand`: the site's mark and name, centred at the top of the masthead and a link to the home page. `.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`) and tilted 6 degrees, so every palette and surface set reskins it. `.ds-brand__name` is the name in the heading font at `--text-h2`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the masthead. `.ds-nav__strip` is the announcement line with a `.ds-nav__strip-link`; `.ds-nav__bar` stacks the `.ds-brand` over `.ds-nav__links`, a centred wrapping row of `.ds-nav__link` chips. The current chip (`is-current`) is filled with the accent and outlined; `is-hover` shows the outline only.\n- `.ds-main`, `.ds-column`: the centred column and its stack of blocks. `.ds-home` is the home grid (profile column, wide column). `.ds-split` is a main column plus a 384px side column; `.ds-split--even` is two halves. `.ds-stack` stacks blocks 24px apart, `.ds-row` puts two things at the ends of a line, `.ds-label` is a 28px heading over a block without a title strip, `.ds-note` a muted small line.\n- `.ds-hero`: the profile card, one per site, on the home page: `.ds-hero__art` (a `--color-fill-1` field holding the `.ds-portrait`) over a rule, then `.ds-hero__text` with a status badge, `.ds-hero__title` at 32px, `.ds-hero__lead` and `.ds-hero__actions`, a column of one large primary button and one secondary button at full width. It stands on `--shadow-dialog`.\n- `.ds-portrait`: the avatar, drawn in CSS: a `--size-portrait` tile on `--color-accent-alt`, outlined, shadowed and tilted 5 degrees, with a `.ds-portrait__head` circle and a `.ds-portrait__body` shape on `--color-fill-3`. A project with a real photograph replaces the two inner spans with it and keeps the tile.\n- `.ds-stat`: the row of summary figures, one outlined, shadowed box of three `.ds-stat__cell` divided by vertical rules, each a 28px `.ds-stat__value` over a `.ds-stat__label`. It sits under the profile card.\n- `.ds-linkstack`: the stack of big link buttons, the main navigation of the home page. Each `.ds-linkstack__link` is an outlined, shadowed row at least `--size-link` tall, filled by `--1` to `--4` (white without a modifier): a round `.ds-linkstack__icon` tile with an inline SVG, `.ds-linkstack__main` with a `.ds-linkstack__title` and one `.ds-linkstack__text` line, and a `.ds-linkstack__arrow`. `is-hover` sinks it 2px and shortens its shadow. Four to six links; more belong on an inner page.\n- `.ds-page-header`: the centred head of an inner page: the `.ds-breadcrumb`, `.ds-page-header__title`, one `.ds-page-header__lead` and optionally `.ds-page-header__actions` with one button. No fill and no rule.\n- `.ds-grid`: project cards in three columns. Each `.ds-grid__cell` is an outlined, shadowed card: `.ds-grid__art` (a field `--size-art` tall, filled by `.ds-grid__cell--1` to `--4`, holding an inline SVG drawing in `currentColor`) over a rule, then `.ds-grid__body` with a `.ds-grid__title` link, a `.ds-grid__text` line and a `.ds-badges` row.\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 an article page it sits in a `.ds-sheet`, an outlined, shadowed card.\n- `.ds-link`: any link in content: underlined, weight 600. `.ds-link--quiet` removes the underline for titles and breadcrumbs. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-links` lays several out in a wrapping row.\n- `.ds-button`: the primary button, a 44px pill, outlined, on `--shadow-control`. `.ds-button--secondary` is off-white. `.ds-button--danger` is the destructive action (clear a form): 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` (54px, 19px text) for the profile card, `.ds-button--small` (34px, 13px text) inside panels and the empty state. `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` off-white (years, neutral facts). Status labels on project cards and in the sidebar: `.ds-badge--success` (prints available, open for commissions), `.ds-badge--warning` (few left), `.ds-badge--danger` (sold out), all with `--color-text`. No shadow. `.ds-badges` is a wrapping row; `.ds-badges--key` centres it as the key under a gallery.\n- `.ds-form`: stacked fields 16px apart; `.ds-form__row` puts two 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-signup`: the newsletter box: outlined, on `--color-fill-2` and `--shadow-dialog`, a `.ds-label` and `.ds-signup__text` beside a `.ds-signup__form` whose `.ds-signup__line` holds one field and one button. One per page.\n- `.ds-table`: one outlined, shadowed box with a head row on `--color-surface-alt` and rows divided by rules; `is-current` on a row puts it on `--color-surface-strong` in bold. `.ds-table__num` right-aligns numbers; a cell with `.ds-table__extra` is dropped below 600px. Inside a `.ds-panel--flush` it loses its own outline and shadow and the panel is its frame.\n- `.ds-list`: separate rows, each `.ds-list__item` an outlined card on `--shadow-control`, 12px apart: a `.ds-list__main` block (bold `.ds-list__title`, a `.ds-list__text` line) and a muted `.ds-list__meta` on the right. For news and past letters.\n- `.ds-panel`: an outlined, shadowed box with a `.ds-panel__title` strip on `--color-surface-strong` over a rule and a `.ds-panel__body`. `.ds-panel--plain` puts the strip on `--fill-bar` with `--color-bar-text`; `.ds-panel--flush` removes the body padding for a table.\n- `.ds-tabs`: one outlined pill bar on `--shadow-control`, cut into segments by rules: each `.ds-tabs__item` holds a `.ds-tabs__tab`; the current one (`is-current`) is filled with the accent and bold, `is-hover` is on `--color-surface-alt`. Centred under the page header; two to five segments.\n- `.ds-sidebar`: an outlined, shadowed block beside an article: a `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by faint rules, each a fact with its value at the right, or a link.\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 centred row of 34px outlined pills (`.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.\n- `.ds-breadcrumb`: a centred 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 the page header.\n- `.ds-dialog`: a 440px outlined box on `--shadow-dialog`, with a `.ds-dialog__bar` on `--color-surface-strong` (holding `.ds-dialog__title` and a round `.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, shadowed box on `--color-surface-alt`, centred: `.ds-empty__title`, `.ds-empty__text` and one small button.\n- `.ds-footer`: one inverse block, centred, closed above by a thick rule: `.ds-footer__brand`, a `.ds-footer__list` of underlined `.ds-footer__link` in a line and `.ds-footer__legal`.\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-nav__fold`: the `.ds-menu` that stands in for the bar's links at 600px and below: a \"Menu\" button beside the brand that lists every view as a `.ds-menu__link--view` (the current one filled with the accent and barred on the left) and the actions the phone bar has no room for. It is hidden on wider screens, where the links show.\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 `