{ "id": "v1-nb-3333", "long_id": "v1.neubrutalism.landing.s03.p03.t03.u03", "name": "Neubrutalism landing page, catalogue layout (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": "landing", "mode": "pure", "viewport": { "width": 1440, "fluid": true }, "summary": "A dense catalogue page in the loud strand of neubrutalism: thick black outlines, hard offset shadows, flat saturated fills and heavy grotesque type, arranged as a fixed rail of categories beside a grid of demo cards. It was common from about 2021 to 2026 on the home pages of component kits, template shelves and small developer tools, where the page sells the product by showing its parts. The page fills the viewport, text is left-aligned throughout, and every card has a coloured title strip over a stage that holds the thing itself.", "url": "https://chrono.skin/s/v1-nb-3333", "preview_url": "https://chrono.skin/s/v1-nb-3333/specimen.html", "files": { "STYLE.md": "# Neubrutalism landing page, catalogue layout (2021 to 2026)\n\n## Summary\n\nA dense catalogue page in the loud strand of neubrutalism: thick black outlines, hard offset shadows, flat saturated fills and heavy grotesque type, arranged as a fixed rail of categories beside a grid of demo cards. It was common from about 2021 to 2026 on the home pages of component kits, template shelves and small developer tools, where the page sells the product by showing its parts. The page fills the viewport, text is left-aligned throughout, and every card has a coloured title strip over a stage that holds the thing itself.\n\n## Layout\n\n- The page is fluid: `--size-page` is 100%. Under one full-width navigation bar the page is a `.ds-shell` of two columns: a `--size-rail` (264px) rail on the left, white, with a rule on its right and running the full height of the page, and the main column (`.ds-main`) filling the rest with `--space-gutter` (32px) at its sides. Designed at a 1440px viewport, where the main column is 1112px of content.\n- Navigation is a single `--size-nav` (64px) bar closed by a `--border-width-strong` rule: a square brand mark and the brand at the left, the links next to it (the current one an outlined accent block), and at the right a `--size-search` (240px) search field and two small buttons. There is no announcement line.\n- Order of the home page inside the main column: a left-aligned intro (`.ds-hero`: tag, display title of at most 20ch, lead capped at `--size-measure` 640px, one large button beside a monospace command chip), a row of four stat tiles, then sections. A section (`.ds-section`) is a 36px title with a muted note at its right, an optional row of filter chips (`.ds-tabs`), and its content. Main-column blocks are `--space-6` (32px) apart; inside a section things are `--space-5` (24px) apart.\n- The catalogue is `.ds-grid`: three equal columns with a `--space-5` gap. A card may span two columns (`.ds-grid__cell--wide`) or all three (`.ds-grid__cell--full`). The stage of a card is at least `--size-demo` (176px) tall and centres what it shows.\n- The rail holds `.ds-sidebar` blocks `--space-6` apart, each a 14px heading over a tight list of links, 4px apart, with counts at the right.\n- Inner pages keep the navigation bar, the rail and the footer and drop the intro and the stat tiles. The rail shows the links of the current category. The main column starts with the `.ds-breadcrumb`, then a `.ds-page-header` (48px title and one line of description on the left, actions on the right, bottom-aligned, closed by a rule), then the `.ds-tabs` chips for the views of the page, then one full-width demo card whose stage holds the working component (a form sits in a `.ds-grid__form` box of `--size-form` 400px), then sections with the reference material, the table first. Cards on an inner page sit in the same three-column `.ds-grid` as the catalogue, so a preview and a related card can share a row; apart from that it is one column, with no side column besides the rail.\n- The footer is one inverted bar across the whole page: brand, a line of links, legal text.\n- Spacing scale: `--space-1` 4px (gap between rail links and navigation links, link padding, underline offset), `--space-2` 8px (badge padding, title strip padding, table and list row padding, gaps between pagination squares), `--space-3` 12px (gap between filter chips, stat tile padding, link side padding), `--space-4` 16px (side padding of strips, rows and tiles, gap between buttons and between hero elements, rail side padding), `--space-5` 24px (grid gap, stage padding, gap inside a section, navigation gap, footer padding), `--space-6` 32px (gap between main-column blocks and between rail blocks, rail top padding, sheet padding), `--space-7` 48px (main column top padding), `--space-8` 64px (main column bottom padding). `--space-gutter` 32px is the side padding of the navigation, the main column and the footer.\n- Movement tokens: `--space-nudge` 2px (hover offset, focus outline offset) and `--space-press` 4px (pressed offset). Hover and press move a control straight down, never sideways, and the red shadow of an invalid field falls straight down, so the movement is right whichever way the surface set throws its shadows (lower right, lower left or straight down).\n- Fixed sizes: `--size-control` 40px (buttons, inputs), `--size-control-large` 48px (the intro button and command chip), `--size-control-small` 32px (navigation buttons, filter chips, pagination squares), `--size-check` 20px, `--size-logo` 32px, `--size-dialog` 440px.\n- Below 900px the rail moves above the main column and its links wrap in rows, the grid and the stat tiles drop to two columns, the search field is hidden and the navigation links wrap onto a second row. Below 600px the main column's side padding is `--space-4`, the grid is one column, only the first block of the rail and the primary navigation button remain, counts in the rail are hidden, the intro title steps down to `--text-h2`, notices and list rows stack, the prose on a sheet runs in one column, and table columns marked `.ds-table__extra` are hidden.\n- Views: the specimen is one example site with four views, switched by plain `#name` links; each view is its own `.ds-shell` with a rail that fits it. `home` is the catalogue front page: intro, stat tiles, filter chips and the grid of block cards (a sketch of the block on a coloured stage, a line on what it is for and its size), closed by the latest changes in a wide card beside a handbook teaser. `block` is one block's page: breadcrumb, page header with the block's actions, the tab chips, the preview card with the form beside the card that shows its confirmation dialog, and the parts table with the key of status labels under it. `handbook` is an article: page header, the prose on a sheet, the related pages as text links, and the buttons to the pages before and after. `releases` is the change log: page header, notices, the release list in a card beside the empty \"coming next\" card, and pagination. The navigation 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\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 grid, the base font and colour. Its children are the navigation, one `.ds-shell` per page and the footer.\n- `.ds-brand`: the site's mark and name, the first thing in the header and a link to the home page. `.ds-brand__mark` is a `--size-logo` (32px) tile dressed like the primary button: `--fill-button` with the mark drawn in `--color-button-text`, a `--border-width` `--color-border` outline, `--radius-control` corners and the `--shadow-control` hard shadow, so every palette and surface set reskins it. The mark is inline SVG with square line caps and a 2.8 stroke. `.ds-brand__name` is the name in the heading font at `--text-large`, weight `--weight-heading`, with the heading tracking and transform, in `--color-bar-text`. One per page. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the navigation bar: the `.ds-brand` at the left, `.ds-nav__links` of `.ds-nav__link` (the current one has `is-current`; a `.ds-badge` may sit inside a link) and `.ds-nav__actions` with a search field (`.ds-form__control` plus `.ds-nav__search`) and small buttons.\n- `.ds-shell`: the two-column frame: `.ds-rail` (a `
` holding the `.ds-sidebar` blocks) and `.ds-main` (the page). `.ds-section` groups a title and its content in the main column; `.ds-section__head` puts `.ds-section__title` and a muted `.ds-section__note` on one line. `.ds-stack` stacks blocks `--space-4` apart (two notices, for example). The specimen uses `.ds-main` on a `
` inside one `
` that holds the views.\n- `.ds-sidebar`: one block of the rail: `.ds-sidebar__title` over a `.ds-sidebar__list` of `.ds-sidebar__link`, each of which may end with a `.ds-sidebar__count`. The current link (`is-current`) is an outlined accent block with bold text; `is-hover` is an outlined `--color-surface-alt` block; `is-focus` adds an outline.\n- `.ds-hero`: the left-aligned intro at the top of the home page's main column, one per page: an optional `.ds-badge`, `.ds-hero__title` with one phrase in `.ds-hero__mark` (outlined `--color-accent-alt` highlight), `.ds-hero__lead`, and `.ds-hero__actions` with one large button and an optional `.ds-hero__code` chip (a white outlined box with one line of monospace text). The marked phrase is an inline block with `--space-1` above and below, so its outline never touches the neighbouring lines whatever the display line height of the type set; keep it short enough to fit one line.\n- `.ds-stat`: the row of summary figures: four separate `.ds-stat__tile`, white, outlined and shadowed, each a 36px `.ds-stat__value` over a 14px `.ds-stat__label`. `.ds-stat` is the row; the single figure is `.ds-stat__tile`.\n- `.ds-grid`: the catalogue. Each `.ds-grid__cell` is an outlined, shadowed card: a `.ds-grid__bar` title strip on `--color-surface-strong` (holding `.ds-grid__title` and a plain count badge) over a rule, then the `.ds-grid__demo` stage. The stage is page-coloured by default; `.ds-grid__cell--1` to `--4` fill it with a `--color-fill-*`, `.ds-grid__demo--surface` makes it white, `.ds-grid__demo--overlay` is the dialog backdrop. `.ds-grid__demo--stretch` lets the content take the full width, `.ds-grid__demo--flush` removes the padding for a list. `.ds-grid__text` is a centred sentence on a stage, for a card that describes a block instead of showing it. Put only things with their own surface on a filled stage (buttons, badges, panels, boxes); bare text and links go on a white or page-coloured stage. A catalogue card shows a `.ds-grid__sketch` on its stage (a white outlined tile of at most `--size-sketch` 168px holding an inline SVG wireframe in `currentColor`) and ends with a `.ds-grid__body` caption over a rule: a `.ds-grid__text` line on what the block is for and a monospace `.ds-grid__meta` line with its size. `.ds-grid__form` is the white outlined box a form is shown in. A single `.ds-grid__cell` may stand outside a grid as the preview card of an inner page.\n- `.ds-sheet`: a white outlined, shadowed page with `--space-6` padding for long text. A `.ds-prose` inside it drops its 68ch cap and runs in two columns with a `--space-7` gap under a full-width h1, so the sheet is filled across the main column.\n- `.ds-prose`: long text inside a sheet: h1, h2, h3, p, ul, ol, strong, inline code (outlined, `--color-surface-alt`) and links are styled. At most 68ch wide.\n- `.ds-link`: any link in content: underlined. `.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 row.\n- `.ds-button`: the primary button, 40px tall, outlined, on a hard shadow. `.ds-button--secondary` is the white one. `.ds-button--danger` is the destructive action: flat `--color-danger` with `--color-text`; use it once per view, as the confirming button of a dialog or beside a secondary button. `.ds-button--large` (48px) for the intro, `.ds-button--small` (32px) for the navigation and inside cards. `is-hover` sinks it 2px toward its shadow, `is-active` 4px, `is-disabled` is flat grey, `is-focus` adds an outline. `.ds-buttons` is a row of them.\n- `.ds-badge`: 12px bold uppercase label in an outlined box, accent by default. `.ds-badge--alt` (`--color-accent-alt`, \"new\"), `.ds-badge--strong` (`--color-surface-strong`), `.ds-badge--plain` (white; counts in title strips and chips). Status labels: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, all with `--color-text` and the same outline. `.ds-badges` is a row of them. The alt and strong variants carry `--color-text`, like every other filled block; only the default badge uses `--color-accent-text`.\n- `.ds-form`: stacked fields: `.ds-form__field` with a bold 14px `.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`. `is-focus` adds the hard shadow and an outline, `is-invalid` turns the border and shadow to `--color-danger`, `is-disabled` greys it. `.ds-form__check` wraps a `.ds-form__checkbox` and its text.\n- `.ds-table`: one outlined, shadowed box the full width of the main column. The head row is the primary bar with bold 14px text; rows are 8px padded, divided by rules and alternate white and page colour; `is-current` on a row fills it `--color-surface-alt`. A status column holds one badge per row. `.ds-table__num` right-aligns numbers, `.ds-table__code` sets a cell in monospace. A cell with `.ds-table__extra` is dropped below 600px.\n- `.ds-list`: ruled rows that fill a `.ds-grid__demo--flush` stage edge to edge; the card is its outline. Each `.ds-list__item` has a bold `.ds-list__title`, a `.ds-list__text` line and a muted `.ds-list__meta` on the right.\n- `.ds-panel`: an outlined box shown inside a card stage: a white `.ds-panel__title` strip over a rule and a `.ds-panel__body`. No shadow; the card around it carries one.\n- `.ds-tabs`: a row of separate outlined chips (`.ds-tabs__tab`), white on a small hard shadow; the current one (`is-current`) is filled with the accent and bold, `is-hover` moves into its shadow. On the home page it filters the catalogue; on an inner page it switches the views of the page and sits directly under the page header.\n- `.ds-notice`: one message in an outlined, shadowed box on `--color-notice` with a bold `.ds-notice__title` and `.ds-notice__text`. `.ds-notice--error` is on `--color-danger-surface`.\n- `.ds-pagination`: a centred row of 32px outlined squares (`.ds-pagination__link`); the current page (`is-current`) is on the accent, `is-disabled` is grey and flat, `is-hover` moves into its shadow.\n- `.ds-breadcrumb`: 14px trail of `.ds-breadcrumb__item` separated by a muted slash; the last has `is-current` and is bold. It is the first line of an inner page's main column.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`: a block with `.ds-page-header__title` (48px) and one `.ds-page-header__lead` line on the left, `.ds-page-header__actions` (one primary button, at most one secondary) on the right, closed by a rule. It has no fill of its own. One per page.\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 square `.ds-dialog__close`), `.ds-dialog__body`, and a page-coloured `.ds-dialog__actions` strip over a rule with the buttons right-aligned. It sits on a `.ds-grid__demo--overlay` stage.\n- `.ds-empty`: outlined, shadowed box on `--color-surface-alt`, centred: `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: one inverted bar: `.ds-footer__brand`, a `.ds-footer__list` of `.ds-footer__link` in a line, and `.ds-footer__legal` at the right.\n\n## Never\n\n- `row-gap <= 24px`: table and list rows touch, rail links are 4px apart; the widest step between rows is the 24px gap of the card grid.\n- `block-gap <= 32px`: blocks of the main column are 32px apart, cards and the parts of a section 24px; the page is dense.\n- `content-width >= 90%`: rail and main column together fill the viewport; never a narrow centred column.\n- `palette-colours <= 15`: black, white, pale blue, blue, sky, green, yellow, lavender, salmon, red and the greys.\n- `font-weight >= 500`: no regular or light text; the page is set in medium and heavier.\n- `font-size <= 72px`: the intro title is the largest text.\n- `font-size >= 12px`: badge labels are the smallest text.\n- `font-families <= 2`: one sans and a monospace for code.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `letter-spacing = 0px`: nothing is tracked.\n- `uppercase-text <= 5%`: only 12px badges are uppercase.\n- `underlined-links <= 20%`: only links in running text are underlined.\n- `border-width >= 3px`: outlines and rules are 3px, 4px under the navigation; no hairlines.\n- `border-width <= 4px`: nothing heavier than 4px.\n- `border-radius <= 8px`: one 8px corner everywhere; no larger radii and no pills.\n- `box-shadow-blur <= 0px`: every shadow is a hard offset block.\n- `text-shadow = none`: no text shadow.\n- `gradient-fills <= 1%`: fills are flat; the only gradient is the grid on the page background.\n- `animation = none`: nothing moves on its own.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Something new to show on the home page becomes a catalogue card: a `.ds-grid__cell` with a `.ds-grid__bar` title strip, a `.ds-grid__demo` stage and, for a block, a sketch and a `.ds-grid__body` caption, one or two columns wide; do not place a component directly on the page grid. A new kind of page keeps the rail and stacks its parts in the main column `--space-6` apart, starting with the breadcrumb and page header; a new navigation group is another `.ds-sidebar` block in the rail. Anything that stands on the page gets the outline, the `--radius-panel` corner and the `--shadow-panel` hard shadow; anything shown inside a card stage gets the outline only, so shadows never stack. Anything clickable that is a box moves `--space-nudge` into its shadow on hover and `--space-press` when pressed. Colour a stage with one flat `--color-fill-*` only when its content has its own surface; text sits on white, the page colour or `--color-surface-strong` strips, never tinted or faded. For a size the vocabulary lacks, use `calc()` over an existing token, as the 12px badge text does.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 100%;\n --size-rail: 264px;\n --size-measure: 640px;\n --size-nav: 64px;\n --size-logo: 32px;\n --size-search: 240px;\n --size-control: 40px;\n --size-control-large: 48px;\n --size-control-small: 32px;\n --size-check: 20px;\n --size-demo: 176px;\n --size-sketch: 168px;\n --size-form: 400px;\n --size-dialog: 440px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 64px;\n --space-gutter: 32px;\n --space-nudge: 2px;\n --space-press: 4px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n width: var(--size-page);\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* typography */\n.ds-prose {\n max-width: 68ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-prose h1 {\n margin: 0 0 var(--space-5);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin: var(--space-6) 0 var(--space-4);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-3);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-prose a {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n text-underline-offset: var(--space-1);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n background: var(--color-surface-strong);\n}\n\n/* links: black on everything; hover is a flat highlight behind the text */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n text-decoration-thickness: var(--border-width);\n text-underline-offset: var(--space-1);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n text-decoration-thickness: var(--border-width);\n background: var(--color-surface-strong);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n background: var(--fill-accent);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* buttons: flat fill, black outline, hard shadow; the button moves into its shadow */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n color: var(--color-button-text);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-button--secondary {\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n}\n.ds-button--danger {\n color: var(--color-text);\n background: var(--color-danger);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button--small {\n min-height: var(--size-control-small);\n padding: 0 var(--space-4);\n font-size: var(--text-small);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n color: var(--color-button-hover-text);\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n transform: translateY(var(--space-nudge));\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n color: var(--color-text);\n background: var(--color-danger);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: translateY(var(--space-press));\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n color: var(--color-disabled-text);\n background: var(--color-disabled);\n box-shadow: var(--shadow-control-pressed);\n transform: none;\n cursor: not-allowed;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* badge: small bold uppercase label in an outlined box */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n padding: 0 var(--space-2);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-bold);\n line-height: 1.5;\n text-transform: uppercase;\n white-space: nowrap;\n vertical-align: middle;\n color: var(--color-accent-text);\n background: var(--fill-accent);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n}\n.ds-badge--alt {\n color: var(--color-text);\n background: var(--color-accent-alt);\n}\n.ds-badge--strong {\n color: var(--color-text);\n background: var(--color-surface-strong);\n}\n.ds-badge--plain {\n color: var(--color-text);\n background: var(--color-surface);\n}\n.ds-badge--success {\n color: var(--color-text);\n background: var(--color-success);\n}\n.ds-badge--warning {\n color: var(--color-text);\n background: var(--color-warning);\n}\n.ds-badge--danger {\n color: var(--color-text);\n background: var(--color-danger);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* form */\n.ds-form {\n display: grid;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: grid;\n gap: var(--space-2);\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n}\n.ds-form__control {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: var(--space-2) var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n color: var(--color-input-text);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n transition: var(--transition);\n}\n.ds-form__control--area {\n min-height: calc(var(--size-control) * 2);\n resize: vertical;\n}\n.ds-form__control:focus,\n.ds-form__control.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n box-shadow: var(--shadow-control);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n color: var(--color-disabled-text);\n background: var(--color-disabled);\n}\n.ds-form__control.is-invalid {\n border-color: var(--color-danger);\n box-shadow: 0 var(--space-press) 0 0 var(--color-danger);\n}\n.ds-form__error {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n color: var(--color-danger);\n}\n.ds-form__hint {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-base);\n font-weight: var(--weight-ui);\n}\n.ds-form__checkbox {\n appearance: none;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background: var(--color-text);\n box-shadow: inset 0 0 0 var(--space-nudge) var(--color-surface-strong);\n}\n.ds-form__checkbox:focus-visible,\n.ds-form__checkbox.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n\n/* notice */\n.ds-notice {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-notice-text);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-notice__title {\n flex: none;\n font-weight: var(--weight-bold);\n}\n.ds-notice__text {\n margin: 0;\n}\n.ds-notice--error {\n color: var(--color-text);\n background: var(--color-danger-surface);\n}\n\n/* dialog: an outlined box with a title strip, on a flat dark backdrop */\n.ds-dialog {\n max-width: var(--size-dialog);\n margin: 0 auto;\n color: var(--color-text);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\n}\n.ds-dialog__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-dialog__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading-alt);\n}\n.ds-dialog__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n padding: 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n cursor: pointer;\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-dialog__body {\n padding: var(--space-5) var(--space-4);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n padding: var(--space-4);\n background: var(--color-canvas);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-7) var(--space-5);\n text-align: center;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-2);\n}\n\n/* views: one screen shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: one compact bar across the top, brand mark, links, a search field and small buttons */\n.ds-nav {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n min-height: var(--size-nav);\n padding: 0 var(--space-gutter);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n gap: var(--space-3);\n}\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-logo);\n height: var(--size-logo);\n padding: var(--space-nudge);\n color: var(--color-button-text);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-bar-text);\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n text-underline-offset: var(--space-1);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#block:target) .ds-nav__link[href=\"#block\"],\n.ds-page:has(#handbook:target) .ds-nav__link[href=\"#handbook\"],\n.ds-page:has(#releases:target) .ds-nav__link[href=\"#releases\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-nav__search {\n width: var(--size-search);\n}\n\n/* shell: a fixed rail on the left, the page on the right */\n.ds-shell {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-rail {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n padding: var(--space-6) var(--space-4);\n color: var(--color-text);\n background: var(--color-surface);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-main {\n display: grid;\n gap: var(--space-6);\n align-content: start;\n min-width: 0;\n padding: var(--space-7) var(--space-gutter) var(--space-8);\n}\n.ds-section {\n display: grid;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-stack {\n display: grid;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-section__head {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-section__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-section__note {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n\n/* sidebar: a block of the rail, a small heading over a tight list of links with counts */\n.ds-sidebar {\n min-width: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n padding: 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-1) var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n color: var(--color-link-quiet);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-surface-alt);\n border-color: var(--color-border);\n}\n.ds-sidebar__link.is-current {\n font-weight: var(--weight-bold);\n color: var(--color-accent-text);\n background: var(--fill-accent);\n border-color: var(--color-border);\n}\n.ds-sidebar__link:focus-visible,\n.ds-sidebar__link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n.ds-sidebar__count {\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n font-variant-numeric: tabular-nums;\n}\n\n/* hero: a left-aligned page intro at the top of the main column */\n.ds-hero {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-4);\n}\n.ds-hero__title {\n max-width: 20ch;\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-hero__mark {\n display: inline-block;\n max-width: 100%;\n margin: var(--space-1) 0;\n padding: 0 var(--space-2);\n color: var(--color-text);\n background: var(--color-accent-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-hero__lead {\n max-width: var(--size-measure);\n margin: 0;\n font-size: var(--text-large);\n font-weight: var(--weight-ui);\n line-height: 1.4;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n margin-top: var(--space-2);\n}\n.ds-hero__code {\n display: inline-flex;\n align-items: center;\n min-height: var(--size-control-large);\n padding: 0 var(--space-4);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n\n/* page header: title and description on the left, actions on the right, closed by a rule */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n padding-bottom: var(--space-5);\n color: var(--color-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-page-header__lead {\n max-width: var(--size-measure);\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n font-weight: var(--weight-ui);\n line-height: 1.4;\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* stats: a row of separate outlined tiles */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n}\n.ds-stat__tile {\n display: flex;\n flex-direction: column-reverse;\n padding: var(--space-3) var(--space-4);\n color: var(--color-text);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__value {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-stat__label {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n line-height: 1.4;\n}\n\n/* grid: catalogue cards, a title strip over a stage with a sketch of the block, then a caption */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-width: 0;\n color: var(--color-text);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-grid__cell--wide {\n grid-column: span 2;\n}\n.ds-grid__cell--full {\n grid-column: 1 / -1;\n}\n.ds-grid__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading-alt);\n}\n.ds-grid__demo {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n min-height: var(--size-demo);\n padding: var(--space-5);\n background: var(--color-canvas);\n}\n.ds-grid__demo--stretch {\n align-items: stretch;\n}\n.ds-grid__demo--flush {\n padding: 0;\n justify-content: flex-start;\n align-items: stretch;\n}\n.ds-grid__demo--surface {\n background: var(--color-surface);\n}\n.ds-grid__demo--overlay {\n background: var(--color-overlay);\n}\n.ds-grid__cell--1 .ds-grid__demo {\n background: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__demo {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__demo {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__demo {\n background: var(--color-fill-4);\n}\n.ds-grid__text {\n max-width: 48ch;\n margin: 0;\n text-align: center;\n}\n.ds-grid__sketch {\n display: block;\n width: 100%;\n max-width: var(--size-sketch);\n padding: var(--space-3);\n color: var(--color-text);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-grid__sketch svg {\n display: block;\n width: 100%;\n}\n.ds-grid__body {\n display: grid;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-4) var(--space-4);\n color: var(--color-text);\n background: var(--color-surface);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__body .ds-grid__text {\n max-width: none;\n text-align: left;\n}\n.ds-grid__meta {\n margin: 0;\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n.ds-grid__form {\n width: 100%;\n max-width: var(--size-form);\n padding: var(--space-5);\n color: var(--color-text);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n\n/* sheet: a plain outlined page for long text */\n.ds-sheet {\n padding: var(--space-6);\n color: var(--color-text);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-sheet .ds-prose {\n max-width: none;\n column-count: 2;\n column-gap: var(--space-7);\n}\n.ds-sheet .ds-prose h1 {\n column-span: all;\n}\n.ds-sheet .ds-prose h2,\n.ds-sheet .ds-prose h3 {\n break-after: avoid;\n}\n.ds-sheet .ds-prose h2:first-of-type {\n margin-top: 0;\n}\n.ds-sheet .ds-prose p,\n.ds-sheet .ds-prose li {\n break-inside: avoid;\n}\n\n/* table: one outlined, shadowed box; tight rows divided by rules */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-size: var(--text-base);\n color: var(--color-text);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-2) var(--space-4);\n text-align: left;\n vertical-align: middle;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table th {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-bar-text);\n background: var(--fill-bar);\n}\n.ds-table tbody tr:nth-child(even) td {\n background: var(--color-canvas);\n}\n.ds-table tbody tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody tr.is-current td {\n background: var(--color-surface-alt);\n font-weight: var(--weight-bold);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__code {\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* list: ruled rows that fill their card edge to edge */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text);\n background: var(--color-surface);\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-4);\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__title {\n margin: 0;\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.45;\n}\n.ds-list__meta {\n flex: none;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n\n/* panel: outlined box with a title strip */\n.ds-panel {\n width: 100%;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-bar-text);\n background: var(--fill-bar);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__body {\n padding: var(--space-3) var(--space-4) var(--space-4);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-2);\n}\n\n/* tabs: a row of separate outlined chips; the current one is filled */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-tabs__tab {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control-small);\n padding: 0 var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-transform: var(--ui-transform);\n text-decoration: none;\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n box-shadow: var(--shadow-control-pressed);\n transform: translateY(var(--space-nudge));\n}\n.ds-tabs__tab.is-current {\n font-weight: var(--weight-bold);\n color: var(--color-accent-text);\n background: var(--fill-accent);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n\n/* pagination: small outlined squares */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control-small);\n min-height: var(--size-control-small);\n padding: 0 var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-pressed);\n transform: translateY(var(--space-nudge));\n}\n.ds-pagination__link.is-current {\n color: var(--color-accent-text);\n background: var(--fill-accent);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n background: var(--color-disabled);\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.4;\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item.is-current {\n font-weight: var(--weight-bold);\n}\n\n/* footer: one inverted bar, brand left, links in a line, legal text right */\n.ds-footer {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-6);\n padding: var(--space-5) var(--space-gutter);\n color: var(--color-inverse-text);\n background: var(--fill-inverse);\n}\n.ds-footer__brand {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: 1;\n}\n.ds-footer__list {\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.45;\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n text-underline-offset: var(--space-1);\n}\n.ds-footer__legal {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.45;\n}\n\n@media (max-width: 900px) {\n .ds-shell {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-rail {\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--space-4) var(--space-6);\n padding: var(--space-4);\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-sidebar__list {\n display: flex;\n flex-wrap: wrap;\n }\n .ds-grid,\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-grid__cell--wide {\n grid-column: 1 / -1;\n }\n .ds-nav {\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2) var(--space-4);\n padding: var(--space-3) var(--space-4);\n }\n .ds-nav__links {\n order: 3;\n flex: 0 0 100%;\n flex-wrap: wrap;\n }\n .ds-nav__search {\n display: none;\n }\n}\n\n@media (max-width: 600px) {\n .ds-nav__link {\n padding: 0 var(--space-2);\n font-size: var(--text-small);\n }\n .ds-nav__link .ds-badge,\n .ds-nav__actions .ds-button--secondary,\n .ds-sidebar + .ds-sidebar,\n .ds-sidebar__count,\n .ds-table .ds-table__extra {\n display: none;\n }\n .ds-nav__actions {\n gap: var(--space-3);\n }\n .ds-main {\n padding: var(--space-6) var(--space-4) var(--space-7);\n }\n .ds-hero__title {\n font-size: var(--text-h2);\n }\n .ds-page-header__title {\n font-size: var(--text-h2);\n }\n .ds-section__title,\n .ds-prose h1 {\n font-size: calc(var(--text-h2) * 0.8);\n }\n .ds-prose h2 {\n font-size: var(--text-h3);\n }\n .ds-hero__actions .ds-button,\n .ds-hero__code {\n width: 100%;\n }\n .ds-hero__code {\n overflow: hidden;\n }\n .ds-page-header__actions .ds-button {\n flex: 1 1 auto;\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stat {\n gap: var(--space-4);\n }\n .ds-grid__demo,\n .ds-sheet {\n padding: var(--space-4);\n }\n .ds-grid__demo--flush {\n padding: 0;\n }\n .ds-sheet .ds-prose {\n column-count: 1;\n }\n .ds-sheet .ds-prose h2:first-of-type {\n margin-top: var(--space-5);\n }\n .ds-grid__form {\n padding: var(--space-4);\n }\n .ds-tabs {\n flex-wrap: wrap;\n }\n .ds-table th,\n .ds-table td {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n }\n .ds-notice,\n .ds-list__item {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-1);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-footer {\n padding: var(--space-5) var(--space-4);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: neubrutalism landing specimen, catalogue layout\n\n\n\n\n\n
\n \n \n chronoskin\n \n \n
\n \n Sign in\n Get the kit\n
\n
\n\n
\n
\n
\n
\n \n \n
\n\n
\n
\n Release 6, eighty-four blocks\n

Back-office screens, one block at a time.

\n

chronoskin is a shelf of plain, copyable interface blocks for the tools nobody outside your company will ever see.

\n
\n Get the kit →\n chronoskin add orders-table\n
\n
\n\n
\n
\n
Blocks on the shelf
\n
84
\n
\n
\n
Whole screens
\n
17
\n
\n
\n
Scripts to install
\n
0
\n
\n
\n
Teams using it
\n
2,960
\n
\n
\n\n
\n
\n

All blocks

\n

Showing 6 of 84, newest first

\n
\n \n
    \n
  • \n

    Orders table

    Stable
    \n
    \n
    \n

    Sortable rows with a status column, a numeric column and a pager underneath.

    \n

    5 parts, 3.9 kB

    \n
    \n
    • \n
  • \n

    Customer form

    Changed
    \n
    \n
    \n

    One column of fields for adding or editing a record, with a calm error line.

    \n

    5 parts, 3.4 kB

    \n
    \n
    • \n
  • \n

    Status labels

    Stable
    \n
    \n
    \n

    Approved, waiting and rejected, in the three sizes a table and a header need.

    \n

    9 labels, 1.1 kB

    \n
    \n
    • \n
  • \n

    Action bar

    New
    \n
    \n
    \n

    A primary action, a way out and a destructive one, kept apart on purpose.

    \n

    12 buttons, 2.2 kB

    \n
    \n
    • \n
  • \n

    Inline messages

    Stable
    \n
    \n
    \n

    A running import and a stopped one: what happened, then what to do next.

    \n

    7 messages, 1.6 kB

    \n
    \n
    • \n
  • \n

    Blank slates

    Draft
    \n
    \n
    \n

    What a queue, a search and an inbox say when there is nothing in them.

    \n

    9 slates, 1.8 kB

    \n
    \n
    • \n
  • \n

    Fresh on the shelf

    All releases
    \n
    \n
      \n
    • \n
      \n

      Detail sheet

      \n

      One record on one page, with its history down the side.

      \n
      \n 12 days ago\n
      • \n
    • \n
      \n

      Customer form

      \n

      The error line now sits under the field, not beside it.

      \n
      \n 12 days ago\n
      • \n
    • \n
      \n

      Orders table

      \n

      A wider amount column and a pager that fits a phone.

      \n
      \n Last month\n
      • \n
    \n
    \n
    • \n
  • \n

    New to the shelf?

    4 pages
    \n
    \n
    \n

    Start with the handbook

    \n
    \n

    Pick a block, press copy, paste it where the screen needs it. The second page shows how.

    \n Copying a block\n
    \n
    \n
    \n
    • \n
\n
\n
\n
\n
\n\n
\n
\n
\n \n \n
\n\n
\n
    \n
  1. Blocks
    2. \n
  2. Records
    3. \n
  3. Customer form
    4. \n
\n
\n
\n

Customer form

\n

One column of fields for adding or editing a customer record.

\n
\n
\n \n \n \n \n
\n
\n \n
\n
\n

Preview

Stable
\n
\n
\n
\n
\n \n \n
\n
\n \n \n

Six digits follow the letter.

\n
\n
\n \n \n
\n
\n \n \n

Shown at the top of every order.

\n
\n \n
\n \n Cancel\n
\n
\n
\n
\n
\n
\n

Removing it

Confirm
\n
\n
\n
\n

Remove this block?

\n ×\n
\n
\n

Customer form leaves your kit and its five parts go with it. Screens that already use it keep their copy.

\n
\n
\n Go back\n \n
\n
\n
\n
\n
\n
\n
\n

Parts

\n

5 parts, 3.4 kB together

\n
\n \n \n \n \n \n \n \n \n \n \n \n
PartClassStatusSinceBytes
Text fieldfield-textStableRelease 1620
Choice fieldfield-choiceStableRelease 1710
Error linefield-errorChangedRelease 6280
Long textfield-areaStableRelease 2540
Inline help bubblefield-bubbleRetiredRelease 31,250
\n
\n In review\n New\n Draft\n 5 parts\n Stable\n Changed\n Retired\n
\n
\n
\n
\n
\n\n
\n
\n
\n \n \n
\n\n
\n
    \n
  1. Blocks
    2. \n
  2. Handbook
    3. \n
  3. Copying a block
    4. \n
\n
\n
\n

Handbook

\n

Four short pages. Read the second one and you can start.

\n
\n
\n Try it on a block\n
\n
\n
\n
\n

Copying a block

\n

A block is one file of markup and the classes it needs. Nothing is installed, so nothing can go out of date behind your back.

\n

Three steps

\n

Pick a block, press copy, paste it where the screen needs it. Set data-density on the wrapper if the table should be tighter.

\n
    \n
  • Keep the class names as they are
    • \n
  • Change the words, not the spacing
    • \n
  • Put one primary action on a screen
    • \n
\n

When a block does not fit

\n

Take the nearest one and remove parts. Removing is always safe; adding a new kind of box rarely is.

\n
\n
\n
\n
\n

Related pages

\n

Two minutes each

\n
\n \n
\n
\n ← Start here\n Changing colours →\n
\n
\n
\n
\n\n
\n
\n
\n \n \n
\n\n
\n
    \n
  1. Blocks
    2. \n
  2. Releases
    3. \n
  3. Release 6
    4. \n
\n
\n
\n

Releases

\n

What changed on the shelf, newest first.

\n
\n
\n How to update\n Get release 6\n
\n
\n
\n
\n Release 6 is out\n

Nine new blocks and a calmer error line. Copy them again to update.

\n
\n
\n Release 5 withdrawn\n

Its date field lost the keyboard focus. Use release 6 instead.

\n
\n
\n
\n
\n

This year

Page 2 of 9
\n
\n \n
\n
\n
\n

Coming next

0
\n
\n
\n

Nothing scheduled

\n

Release 7 has no date yet. Ask for a block and it goes on the list.

\n Ask for a block\n
\n
\n
\n
\n \n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.neubrutalism.landing.s03.p03.t03.u03\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"neubrutalism\",\n \"years\": [\n 2021,\n 2026\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-nb-3333\",\n \"short\": \"v1-nb-3333\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #dcebfe;\n --color-canvas: #dcebfe;\n --color-surface: #ffffff;\n --color-surface-alt: #88c5ee;\n --color-surface-strong: #5294ff;\n --color-bar: #ffffff;\n --color-bar-text: #000000;\n --color-bar-alt: #5294ff;\n --color-bar-alt-text: #000000;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #666666;\n --color-heading: #000000;\n --color-heading-alt: #000000;\n --color-link: #000000;\n --color-link-quiet: #000000;\n --color-link-visited: #000000;\n --color-link-hover: #000000;\n --color-link-active: #000000;\n --color-border: #000000;\n --color-border-strong: #000000;\n --color-border-muted: #b3b3b3;\n --color-accent: #05e17a;\n --color-accent-text: #000000;\n --color-accent-alt: #facc00;\n --color-fill-1: #5294ff;\n --color-fill-2: #05e17a;\n --color-fill-3: #facc00;\n --color-fill-4: #b6ace4;\n --color-button: #5294ff;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #000000;\n --color-disabled: #aeaeae;\n --color-disabled-text: #303030;\n --color-danger: #dc341e;\n --color-danger-surface: #ee8888;\n --color-success: #05e17a;\n --color-warning: #facc00;\n --color-notice: #b6ace4;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: rgb(0 0 0 / 0.75);\n}\n\n/* @part type */\n:root {\n --font-body: \"Public Sans\", \"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: \"Public Sans\", \"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: \"Public Sans\", \"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 24px;\n --text-display: 72px;\n --text-h1: 48px;\n --text-h2: 36px;\n --text-h3: 22px;\n --line-body: 1.5;\n --line-heading: 1.1;\n --line-display: 1.1;\n --weight-body: 500;\n --weight-bold: 700;\n --weight-heading: 800;\n --weight-display: 900;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 3px;\n --border-width-strong: 4px;\n --border-style: solid;\n --radius-control: 8px;\n --radius-panel: 8px;\n --radius-pill: 8px;\n --radius-page: 8px;\n --shadow-panel: 5px 5px 0 0 var(--color-surface-strong), 5px 5px 0 3px var(--color-shadow);\n --shadow-control: 4px 4px 0 0 var(--color-surface-strong), 4px 4px 0 3px var(--color-shadow);\n --shadow-control-hover: 3px 3px 0 0 var(--color-shadow);\n --shadow-control-pressed: 1px 1px 0 0 var(--color-shadow);\n --shadow-dialog: 8px 8px 0 0 var(--color-surface-strong), 8px 8px 0 3px var(--color-shadow);\n --shadow-text: none;\n --fill-page:\n linear-gradient(90deg, color-mix(in srgb, var(--color-border-muted) 50%, transparent) 1px, transparent 0) 0 0 / 70px 70px,\n linear-gradient(color-mix(in srgb, var(--color-border-muted) 50%, transparent) 1px, transparent 0) 0 0 / 70px 70px,\n var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid var(--color-focus);\n --transition: transform 0.2s ease, box-shadow 0.2s ease;\n --backdrop-blur: 0px;\n}\n" } }