{ "id": "v1-bg-3331", "long_id": "v1.bento-grids.landing.s03.p03.t03.u01", "name": "Whole-page bento, 2024", "era": { "slug": "bento-grids", "code": "bg", "name": "Bento grids", "years": [ 2022, 2026 ], "description": "Feature grids, 2022 to 2026: rounded cells of unequal size, each holding one idea, packed into a tight grid on a dark or very pale page." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "A landing page that is one bento from top to bottom: there is no separate hero band, the introduction is simply the largest cell of a six-track grid, and features, figures, the call to action and even the footer are cells around it. Cells are rounded, sit close together with a 12px gap, and differ strongly in size, from one-track icon cells to the four-track hero, with a pill-shaped navigation floating above the grid. The form was common on product, developer-tool and design-tool sites from about 2022 to 2026.", "url": "https://chrono.skin/s/v1-bg-3331", "preview_url": "https://chrono.skin/s/v1-bg-3331/specimen.html", "files": { "STYLE.md": "# Whole-page bento, 2024\n\n## Summary\n\nA landing page that is one bento from top to bottom: there is no separate hero band, the introduction is simply the largest cell of a six-track grid, and features, figures, the call to action and even the footer are cells around it. Cells are rounded, sit close together with a 12px gap, and differ strongly in size, from one-track icon cells to the four-track hero, with a pill-shaped navigation floating above the grid. The form was common on product, developer-tool and design-tool sites from about 2022 to 2026.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 1280px, designed at a 1440px viewport, padded by `--space-5` at the sides and below.\n- `.ds-nav` is not a bar: it is a pill as wide as its content, centred, sticky at the top with `--space-4` of clear space around it, floating over the cells with `--fill-bar`, a hairline and `--shadow-panel`. Brand at the left, four or five links, one small pill button at the right.\n- `.ds-brand`: the site's mark and name, at the left end of the floating navigation pill. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, a 1px hairline, `--radius-control`, `--shadow-control`), so it takes on every palette and surface; it holds the mark as inline SVG painted with `currentColor`. `.ds-brand__name` is the name in the heading family at 16px, with the heading weight, tracking and transform, in `--color-bar-text`. The name `chronoskin` and its mark are placeholders: the installing project puts its own name and logo here.\n- One `.ds-grid` of six equal tracks (about 203px). A cell takes two tracks by default; `--mini` takes one, `--half` three, `--wide` four, `--full` all six, `--tall` two rows. Rows of the home grid are at least `--size-row` (208px) tall. `.ds-grid--auto` lets rows follow their content.\n- The home page opens with the `.ds-hero` cell, four tracks by two rows, in the top-left corner, with a `--tall` two-track cell at its right. Below it a `--wide` `.ds-stats` cell with a two-track cell, then a row of two `--mini` cells and two default cells, then two `--half` cells, then the `--full` accent cell with its button at the right. No two neighbouring rows use the same split.\n- Tight: the gap between cells is `--space-gap` (12px) in both directions and the padding inside a cell is `--space-cell` (28px); the hero cell and the footer cell use `--space-7` (48px), a `--mini` cell `--space-4` (16px).\n- Spacing scale: `--space-1` 4px (pill padding, title to caption), `--space-2` 8px (button gap, nav pill padding), `--space-3` 12px (nav link padding, sidebar item padding), `--space-4` 16px (table cell padding, list gap, icon to title, nav offset from the top), `--space-5` 24px (page gutter, stack gap inside a cell, section title to grid), `--space-6` 32px (hero lead to buttons, footer columns), `--space-7` 48px (hero and footer padding), `--space-8` 64px (above a section title, dialog stage), `--space-9` 96px (textarea height).\n- Controls are `--size-control` (40px) tall, `--size-control-large` (48px) in the hero and the accent cell; icon tiles are `--size-icon` (44px) with a `--size-glyph` (22px) line icon.\n- A second run of cells may be introduced by a `.ds-section__head`: the title at `--text-h2` at the left and one grey line at the right on the same baseline, `--space-8` above and `--space-5` below. It is never centred.\n- Inner pages have no hero and keep the six tracks. Each is one `.ds-grid--auto` `.ds-grid--page` whose first cell is the `.ds-page-header`, a `--full` cell that holds the `.ds-breadcrumb` at its top, the title at `--text-h1` with one grey line and the buttons at the right, and at its bottom an optional `.ds-toolbar` with the `.ds-tabs` pill and a count. Under it the working table takes a `--wide` cell with a two-track cell beside it (an activity `.ds-list` or a `.ds-sidebar`); forms and messages take `--half` cells, a form with its dialog stage beside it, messages with a `--bare` empty cell.\n- Views: `home` is the landing grid (hero cell, a sample invoice, stats, the small feature cells and the call to action); `invoices` is the month's list (tabs in the page header, the table with pagination, the activity list, messages and the empty state for credit notes); `invoice` is one invoice (its lines and total, the action buttons, its terms in panels and its history); `new` is the form for an invoice with the confirmation dialog beside it; `guide` is the guide (prose, the section menu, labels, links and a terminal sample). The navigation pill marks Overview, Invoices, Latest or Guide; the form marks Invoices.\n- `.ds-footer` is the last cell: full width, the cell's fill and corners, four columns and a 12px strip inside.\n- Below 960px the grid has two tracks and every cell except `--mini` takes both; below 600px the navigation pill becomes a `--radius-page` box as wide as the page with its links on a second line, cells drop to `--space-5` padding, the stats stack, the `--row` cell stacks and the page header's buttons go under its text. Below 600px a table hides the columns marked `.ds-table__extra` and scrolls sideways inside `.ds-table__scroll` if it still does not fit; a row's first cell holds a `.ds-table__link` to its detail view.\n- On a phone (600px and below) the links of the pill stay in `.ds-nav__links`, which becomes an edge-to-edge strip on the second line of the box: one row that scrolls sideways without a scrollbar, with the right edge faded by a mask. A drop-down cannot open inside it, so the Credit notes entry of the Invoices menu is shown as `.ds-nav__more`, a last link in the strip, and the menu list and its caret are not shown. The current view's link stays a filled pill; the `.ds-nav__more` link is never filled. Below 960px a tooltip opens as a full row under its line.\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- A neutral graphite ramp without any blue in it: `--color-page`, `--color-canvas` and `--color-bar` `#1c1c1c`; cells `--color-surface` `#232323`; panels, the dialog and current navigation items `--color-surface-alt` `#2e2e2e`; current tab, neutral badges, chart bars and inline code `--color-surface-strong` `#3e3e3e`. `--color-bar-alt` and `--color-input` are the darker `#161616` (table head strip, tab row, form controls).\n- Text: `--color-bar-text` `#ffffff` (brand and hovered navigation), `--color-heading` `#ededed`, `--color-text` and `--color-heading-alt` `#dddddd`, `--color-text-muted`, `--color-link-quiet` and `--color-bar-alt-text` `#a0a0a0`, `--color-disabled-text` `#707070`.\n- Green leads. `--color-button` and `--color-accent` are the deeper green `#37996b` with white text: primary button, accent badge, highlighted chart bar, call-to-action cell. `--color-link`, `--color-focus` and `--color-success` are the brighter `#3ecf8e`: links, icons, the accent phrase of the hero title.\n- `--color-accent-alt` `#569cd6` is a quiet blue for \"new\" markers, passed checks, switched-on toggles and code keys, so that green stays the brand colour and the status colour only.\n- Borders are solid greys, not translucent white: `--color-border` `#343434`, `--color-border-strong` and `--color-input-border` `#505050`, `--color-border-muted` `#2e2e2e`.\n- Feature cells are barely tinted: `--color-fill-1` `#002533` (teal), `--color-fill-2` `#28302c` (green-grey), `--color-fill-3` `#0c0f24` (navy), `--color-fill-4` `#2e2e2e`.\n- Status: `--color-warning` `#f7be2b`, `--color-danger` `#fa1f41` on `--color-danger-surface` `#201818`; the notice is `--color-notice` `#002533` with `--color-notice-text` `#dddddd`. `--color-inverse` `#ededed` with `--color-inverse-text` `#1c1c1c` is the button on the accent cell.\n- One neutral grotesque, Inter first with the system sans behind it, for `--font-body`, `--font-heading` and `--font-ui`; `--font-mono` is the system mono.\n- Heavy headings: `--weight-display` 800 on the hero title and stat figures, `--weight-heading` and `--weight-bold` 700 on every title, `--weight-ui` 600 on buttons, navigation, tabs and labels, `--weight-body` 400.\n- Sizes are a step up from the usual: `--text-display` 56px at `--line-display` 1.06, `--text-h1` 46px, `--text-h2` 32px, `--text-h3` 22px at `--line-heading` 1.15; `--text-large` 20px for the lead and cell titles.\n- `--text-base` and `--text-ui` are both 16px (`--line-body` 1.5), so buttons, navigation and form controls read as large as the body; `--text-small` 14px is for captions, tables and lists.\n- Links in running text are underlined at rest and on hover (`--link-decoration`, `--link-decoration-hover` underline); quiet links in navigation, sidebar and footer are not (`--link-decoration-quiet` none). No tracking, no transforms.\n- Medium corners: `--radius-page` 20px on cells, `--radius-panel` 16px on panels, tables, notices and the dialog, `--radius-control` 11px on buttons, inputs and icon tiles, `--radius-pill` for badges, tabs and switches.\n- Cells are lit, not dropped: `--shadow-panel` is a 1px inset line of `--color-heading` at 5% on the top edge plus a 20px halo of `--color-accent` at 32%, so every cell stands in a glow of the accent colour that fills the gaps of the grid; the dialog has the same halo at 36%.\n- `--fill-panel` is a vertical gradient from 2% to 6% of `--color-text` laid into `--color-surface`: the cell is a touch stronger at the bottom than at the top.\n- Buttons are lit from above: `--fill-button` runs from the button colour mixed 15% with white down to the plain colour, `--shadow-control` adds an inset top line of `--color-heading` at 10% and a 2px drop of `--color-shadow` at 28%; hover deepens the drop to 4px at 25% and `--fill-button-hover` moves 15% toward the button's text colour.\n- `--fill-bar` is `--color-bar` at 80% so the page shows through the floating navigation pill. `--border-width` is 1px, `--border-width-strong` 2px for the focus ring. `--transition` is a 0.2s fade of colours and shadow.\n- The smallest text is 12px, written as `calc(var(--text-small) * 0.857)` because the vocabulary has no token for it: badges, hints, list meta, stat notes, the footer strip. Code in a cell is `calc(var(--text-small) * 0.886)`.\n- Which text sits on which fill: `--color-bar-text` on the navigation pill (current item on `--color-surface-alt`); `--color-heading`, `--color-text` and `--color-text-muted` on cells, including the hero cell, the footer cell and the `--color-fill-*` cells; `--color-accent-text` on the accent cell; `--color-bar-alt-text` on the table head strip and the tab row; `--color-inverse-text` only on the `--inverse` button. Table rows have no fill of their own and take `--color-text` on the cell.\n- Fills 1 to 3 are the corner of a diagonal gradient that fades to `--color-surface`; fill 4 is flat. At most half the cells of a grid are tinted.\n- The hero glow and the `--glow` cell are a radial fade from `--color-fill-2` to transparent, so a glow is always the palette's own tint (green-grey here) and a palette with neutral fills simply has none; the accent colour is never used for it.\n- One-off mixes written in `components.css` because no token exists: the button hairline (25% button text in the button colour), the `--new` and status badges (the colour at 14% with a 30% hairline), the danger button's hairline (danger at 45%) and hover fill, notice borders.\n\n## Components\n\n- `.ds-page` on ``: sets the page fill, family and body size. `.ds-page__inner` is the 1280px column.\n- `.ds-nav`: the floating pill. `.ds-nav__inner` is the pill itself and holds the `.ds-brand`, `.ds-nav__links` of `.ds-nav__link` (current: `is-current`, a filled pill) and `.ds-nav__actions` with one `.ds-button--small`, which takes the pill radius here.\n- `.ds-nav__more`: a link at the end of `.ds-nav__links` that repeats the drop-down's extra entry; hidden above 600px, where the drop-down opens, and shown in the strip on a phone.\n- `.ds-hero`: a `.ds-grid__cell` that also carries `.ds-hero`: four tracks by two rows, copy at the bottom left, one glow in the top-right corner. `.ds-hero__top` holds an announcement badge, then `.ds-hero__title` (`--text-display`, one phrase in `.ds-hero__title-accent`), `.ds-hero__lead`, `.ds-hero__actions` with two large buttons and the 12px `.ds-hero__note` on the same line. It is always the first child of the home grid.\n- `.ds-section__head`: left-aligned title line between two grids, with `.ds-section__title` and `.ds-section__lead`.\n- `.ds-grid`: the bento. Children are `.ds-grid__cell` with span variants `--mini`, `--half`, `--wide`, `--full`, `--tall`; alignment variants `--end`, `--center`, `--stack` (24px between children), `--row` (copy left in `.ds-grid__copy`, actions right); fill variants `--fill-1` to `--fill-4`, `--glow`, `--accent` (the call to action, with a `.ds-button--inverse`), `--bare` (outline only). Inside: `.ds-grid__icon` with a `.ds-grid__glyph`, `.ds-grid__head` (title at the left, a badge at the right), `.ds-grid__title`, `.ds-grid__text`, `.ds-grid__visual` (pushed to the bottom) and `.ds-grid__actions`. `.ds-grid--auto` is for cells that hold components; `.ds-grid--page` is the grid of an inner page; `.ds-grid__link` makes a cell title a link in the specimen.\n- Cell visuals: `.ds-chart` of `.ds-chart__bar` (`--2` to `--5` set the height, `is-current` the accent), `.ds-code` with `.ds-code__key` and `.ds-code__str`, `.ds-checks` of `.ds-checks__item` with `.ds-checks__mark`, `.ds-chips`, `.ds-rows` of `.ds-rows__item` with a `.ds-switch` (`is-on`), a figure or a small button.\n- `.ds-page-header`: a `--full` cell at the top of an inner page. It holds the `.ds-breadcrumb`, a `.ds-page-header__row` with `.ds-page-header__copy` (`.ds-page-header__title`, `.ds-page-header__text`) and `.ds-page-header__actions` at the right, and the `.ds-toolbar`. Never use it together with a `.ds-hero`.\n- `.ds-stat`: one figure: `.ds-stat__label` over `.ds-stat__value` (`--text-h1`, `--weight-display`, tabular figures, optional `.ds-stat__unit`) over an optional 12px `.ds-stat__note` (`--success`, `--warning`, `--danger`). `.ds-stats` is the row and is itself one `--wide` cell: three or four `.ds-stat` side by side, cut apart by vertical hairlines, not separate cells. A single `.ds-stat` may close a cell's visual; `.ds-stat--display` raises it to `--text-display`.\n- `.ds-prose`: long-form text in a `--wide` cell; styles h1 to h3, paragraphs, lists, `strong`, `code` and links.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` for grey links. `.ds-links` lays several out in a row.\n- `.ds-button`: primary. `--secondary` is held by a hairline, `--danger` is the destructive action (danger text on `--color-danger-surface` with a danger hairline, never a solid block), `--inverse` only on the accent cell, `--large` in the hero, `--small` in the navigation and in rows. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-badge`: 12px pill. `--accent` filled, `--new` tinted, `--count` a square-cornered number; optional `.ds-badge__dot`. Status labels are `--success`, `--warning` and `--danger`: coloured text on a 14% tint with a 30% hairline, used in a table's status column and a cell's head.\n- `.ds-form`: two-column grid of `.ds-form__field` (`--full` spans both) with `.ds-form__label` and `.ds-form__control` (`--area`; `is-invalid`, `is-focus`, `is-disabled`), `.ds-form__hint`, `.ds-form__error`, `.ds-form__check` with `.ds-form__checkbox`, and `.ds-form__actions`. It lives in a `--half` cell.\n- `.ds-table`: open rows straight on a `--wide` cell with no box around them: a `--fill-bar-alt` head strip with rounded ends, hairlines between rows; `.ds-table__num` right-aligns numbers, `.ds-table__muted` greys a column, `tr.is-current` sets a row in the heading colour and bold weight.\n- `.ds-list`: a timeline: each `.ds-list__item` is led by a `.ds-list__mark` dot and stacks `.ds-list__title`, optional `.ds-list__text` and `.ds-list__meta`; items are separated by space, not rules.\n- `.ds-panel`: a small card inside a cell with `.ds-panel__title`, `.ds-panel__body` and `.ds-panel__meta`. `.ds-panels` puts two side by side.\n- `.ds-tabs`: a segmented pill of `.ds-tabs__tab`; `is-current` is the filled segment. `.ds-toolbar` puts it on one line with a count, at the bottom of the page-header cell.\n- `.ds-sidebar`: a two-track cell with `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__link` (`is-current` filled).\n- `.ds-notice`: information box with `.ds-notice__title` and `.ds-notice__text`; `--error` is the danger variant. `.ds-notices` stacks them.\n- `.ds-pagination`: `.ds-pagination__link` items under a table in the same cell; `is-current` filled with a hairline, `is-disabled` greyed.\n- `.ds-breadcrumb`: trail of `.ds-breadcrumb__item` separated by slashes; the last carries `is-current`. It is the first line inside the page-header cell.\n- `.ds-dialog`: box with `.ds-dialog__bar` (`.ds-dialog__title`, `.ds-dialog__close` with `.ds-dialog__glyph`), `.ds-dialog__body` and `.ds-dialog__actions`, shown on a `.ds-stage`, a `--wide` cell filled with `--color-overlay`.\n- `.ds-empty`: centred icon, `.ds-empty__title`, `.ds-empty__text` and one secondary button inside a `--bare` cell.\n- `.ds-footer`: the last cell. `.ds-footer__inner` is the cell, with `.ds-footer__brand`, `.ds-footer__text`, three columns of `.ds-footer__title` over a `.ds-footer__list` of `.ds-footer__link`, and `.ds-footer__strip` across the bottom.\n- `.ds-menu`: a drop-down under a navigation item, opened by hover or keyboard focus (`is-open` by hand). `.ds-menu__list` of `.ds-menu__item` with an optional `.ds-menu__hint`, parted by `.ds-menu__rule`; `.ds-menu__caret` in the trigger; `--end` aligns it to the right edge. Use it under the one navigation item that has sub-pages.\n- `.ds-accordion`: `
` as `.ds-accordion__item` with a `.ds-accordion__head` summary and `.ds-accordion__body`. Use it for questions at the end of a guide or inside a tile.\n- `.ds-tooltip`: a focusable term with `.ds-tooltip__mark` and `.ds-tooltip__tip`, shown on hover or focus (`is-open` by hand) on `--fill-inverse`. Use it for one sentence of explanation, never for an action.\n- `.ds-progress`: `.ds-progress__label` with `.ds-progress__value` over `.ds-progress__bar` with `.ds-progress__fill` (`--1` to `--5` set the width; `--success`, `--warning` the colour). Use it inside a tile for a quota or a share used.\n\n## Never\n\n- `content-width <= 1280px`: everything stays in the centred 1280px grid.\n- `block-gap <= 64px`: cells sit 12px apart; the largest gap between stacked blocks is the 64px around a section title.\n- `palette-colours <= 36`: graphite greys, two greens and one blue; no purple, no second brand colour.\n- `font-weight <= 800`: 800 is the hero weight; nothing is heavier.\n- `font-size <= 56px`: the hero heading tops out at 56px; weight carries the emphasis, not size.\n- `font-size >= 12px`: the smallest text is 12px.\n- `font-families <= 2`: one sans for everything plus the mono for code.\n- `line-height <= 1.6`: body text sits at 1.5.\n- `uppercase-text <= 1%`: nothing is set in capitals.\n- `border-width <= 2px`: every hairline is 1px; 2px exists only as the focus ring.\n- `border-radius >= 4px`: no box is square; the smallest measured radius is 4px.\n- `text-shadow = none`: no visible text shadows.\n- `box-shadow-blur <= 25px`: shadows are quiet; the largest measured blur is 25px.\n- `gradient-fills <= 30%`: gradients are faint cell lighting and glows, on at most about a third of boxes.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Anything new is a cell: choose its span so that its row does not repeat the split of the row above, give it a title, one 14px caption and one small visual pushed to the bottom. A page-wide statement is a `--full` cell, never a band outside the grid; a box inside a cell is a `.ds-panel`; a chip is a `.ds-badge`. Use tokens only: fills are `--fill-panel` or a `--color-fill-*` tint, outlines are `--border-width` in `--color-border`, corners are `--radius-page` for cells, `--radius-panel` inside them and `--radius-control` for controls, spacing comes from the `--space-*` scale. Keep one subject per cell, separate cells with the 12px gap and never with a rule, and do not add a full-width navigation bar, a centred hero outside the grid or a footer band.\n", "components.css": "/* Layout tokens (structure part): whole-page bento. Everything, the hero included, is a cell of one six-track grid */\n:root {\n --size-page: 1280px;\n --size-measure: 600px;\n --size-row: 208px;\n --size-control: 40px;\n --size-control-large: 48px;\n --size-icon: 44px;\n --size-glyph: 22px;\n --size-check: 16px;\n --size-dot: 8px;\n --size-chart: 96px;\n --size-switch: 32px;\n --size-knob: 14px;\n --size-dialog: 480px;\n --size-blur: 12px;\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-9: 96px;\n --space-gap: 12px;\n --space-cell: 28px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\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 -webkit-font-smoothing: antialiased;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: 0 var(--space-5) var(--space-5);\n}\n\n/* views: one screen of the example site 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: a pill that floats over the page, centred, as wide as its content */\n.ds-nav {\n position: sticky;\n top: 0;\n z-index: 10;\n display: flex;\n justify-content: center;\n padding: var(--space-4) var(--space-5);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-panel);\n backdrop-filter: blur(var(--size-blur));\n}\n/* brand: the mark on a small tile dressed like the primary button, then the name */\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-glyph) + var(--space-1));\n height: calc(var(--size-glyph) + var(--space-1));\n background: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-base);\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 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: block;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n color: var(--color-link-quiet);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-bar-text);\n}\n/* the current view marks its navigation item; the form for a new invoice belongs to Invoices */\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(#invoices:target) .ds-nav__link[href=\"#invoices\"],\n.ds-page:has(#new:target) .ds-nav__link[href=\"#invoices\"],\n.ds-page:has(#invoice:target) .ds-nav__link[href=\"#invoice\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"]:not(.ds-nav__link--more) {\n background: var(--color-surface-alt);\n color: var(--color-bar-text);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-nav__actions .ds-button {\n border-radius: var(--radius-pill);\n}\n\n/* grid: six tracks. A cell takes two by default; mini, half, wide and full change the span, tall takes two rows */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n grid-auto-rows: minmax(var(--size-row), auto);\n grid-auto-flow: dense;\n gap: var(--space-gap);\n}\n.ds-grid--auto {\n grid-auto-rows: auto;\n}\n/* an inner page: the same grid, opened by the page header cell */\n.ds-grid--page {\n align-items: stretch;\n}\n.ds-grid__link {\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__link:hover,\n.ds-grid__link.is-hover {\n color: var(--color-link);\n}\n.ds-grid__cell {\n position: relative;\n display: flex;\n flex-direction: column;\n grid-column: span 2;\n min-width: 0;\n padding: var(--space-cell);\n overflow: hidden;\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-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--mini {\n grid-column: span 1;\n padding: var(--space-4);\n}\n.ds-grid__cell--half {\n grid-column: span 3;\n}\n.ds-grid__cell--wide {\n grid-column: span 4;\n}\n.ds-grid__cell--full {\n grid-column: 1 / -1;\n}\n.ds-grid__cell--tall {\n grid-row: span 2;\n}\n.ds-grid__cell--center {\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n.ds-grid__cell--stack {\n gap: var(--space-5);\n}\n.ds-grid__cell--fill-1 {\n background: linear-gradient(135deg, var(--color-fill-1), var(--color-surface));\n}\n.ds-grid__cell--fill-2 {\n background: linear-gradient(135deg, var(--color-fill-2), var(--color-surface));\n}\n.ds-grid__cell--fill-3 {\n background: linear-gradient(135deg, var(--color-fill-3), var(--color-surface));\n}\n.ds-grid__cell--fill-4 {\n background: var(--color-fill-4);\n}\n.ds-grid__cell--glow {\n background: radial-gradient(circle at 100% 100%, var(--color-fill-2), transparent 60%), var(--fill-panel);\n}\n.ds-grid__cell--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-grid__cell--bare {\n background: transparent;\n box-shadow: none;\n border-color: var(--color-border-strong);\n}\n.ds-grid__cell--row {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n}\n.ds-grid__icon {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-4);\n background: var(--color-page);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-grid__cell--mini .ds-grid__icon {\n margin-bottom: var(--space-3);\n}\n.ds-grid__glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-grid__head {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-grid__title {\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.3;\n color: var(--color-heading);\n}\n.ds-grid__cell--mini .ds-grid__title {\n font-size: var(--text-small);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n line-height: 1.5;\n color: var(--color-text-muted);\n}\n.ds-grid__cell--accent .ds-grid__title {\n font-size: var(--text-h2);\n line-height: var(--line-heading);\n color: var(--color-accent-text);\n}\n.ds-grid__cell--accent .ds-grid__text {\n font-size: var(--text-base);\n color: var(--color-accent-text);\n opacity: 0.85;\n}\n.ds-grid__copy {\n flex: 1;\n min-width: 0;\n}\n.ds-grid__visual {\n width: 100%;\n margin-top: auto;\n padding-top: var(--space-5);\n}\n.ds-grid__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-4);\n}\n.ds-grid__cell--row .ds-grid__actions {\n margin-top: 0;\n padding-top: 0;\n}\n\n/* hero: the largest cell of the grid, four tracks by two rows, copy set at the bottom left */\n.ds-hero {\n grid-column: span 4;\n grid-row: span 2;\n justify-content: flex-end;\n padding: var(--space-7);\n background: radial-gradient(ellipse at 100% 0, var(--color-fill-2), transparent 60%), var(--fill-panel);\n}\n.ds-hero__top {\n margin-bottom: auto;\n padding-bottom: var(--space-6);\n}\n.ds-hero__title {\n max-width: 14ch;\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 color: var(--color-heading);\n}\n.ds-hero__title-accent {\n color: var(--color-link);\n}\n.ds-hero__lead {\n max-width: var(--size-measure);\n margin: var(--space-4) 0 0;\n font-size: var(--text-large);\n line-height: 1.5;\n color: var(--color-text-muted);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2) var(--space-4);\n margin-top: var(--space-6);\n}\n.ds-hero__note {\n margin: 0;\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n\n/* section head: a left-aligned title line between two runs of cells */\n.ds-section__head {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2) var(--space-5);\n padding: var(--space-8) var(--space-2) var(--space-5);\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__lead {\n margin: 0;\n color: var(--color-text-muted);\n}\n\n/* page header: the first, full-width cell of an inner page. Trail on top, title and actions, tabs at the bottom */\n.ds-page-header {\n gap: var(--space-5);\n}\n.ds-page-header__row {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n}\n.ds-page-header__copy {\n flex: 1;\n min-width: 0;\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__text {\n max-width: var(--size-measure);\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* small things that live inside cells */\n.ds-chart {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n height: var(--size-chart);\n}\n.ds-chart__bar {\n flex: 1;\n height: 30%;\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n}\n.ds-chart__bar--2 {\n height: 45%;\n}\n.ds-chart__bar--3 {\n height: 60%;\n}\n.ds-chart__bar--4 {\n height: 75%;\n}\n.ds-chart__bar--5 {\n height: 100%;\n}\n.ds-chart__bar.is-current {\n background: var(--fill-accent);\n}\n.ds-stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n margin: 0;\n}\n.ds-stat__label {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n.ds-stat__value {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-stat__unit {\n font-size: var(--text-h3);\n color: var(--color-text-muted);\n}\n.ds-stat__note {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.34;\n color: var(--color-text-muted);\n}\n.ds-stat__note--success {\n color: var(--color-success);\n}\n.ds-stat__note--warning {\n color: var(--color-warning);\n}\n.ds-stat--display .ds-stat__value {\n font-size: var(--text-display);\n}\n.ds-stat--display .ds-stat__unit {\n font-size: var(--text-h2);\n}\n\n.ds-code {\n margin: 0;\n padding: var(--space-4);\n overflow: hidden;\n background: var(--color-page);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-mono);\n font-size: calc(var(--text-small) * 0.886);\n line-height: 1.6;\n white-space: pre;\n}\n.ds-code__key {\n color: var(--color-accent-alt);\n}\n.ds-code__str {\n color: var(--color-link);\n}\n.ds-checks {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-checks__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-checks__mark {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n color: var(--color-accent-alt);\n}\n.ds-chips {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n.ds-grid__cell--center .ds-chips {\n justify-content: center;\n}\n.ds-rows {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-rows__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--size-switch);\n height: calc(var(--size-knob) + var(--space-1));\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-switch::after {\n content: \"\";\n position: absolute;\n top: calc(var(--space-1) / 2);\n left: calc(var(--space-1) / 2);\n width: var(--size-knob);\n height: var(--size-knob);\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n}\n.ds-switch.is-on {\n background: var(--color-accent-alt);\n}\n.ds-switch.is-on::after {\n left: auto;\n right: calc(var(--space-1) / 2);\n background: var(--color-inverse);\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\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 font-size: var(--text-h1);\n font-weight: var(--weight-display);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n font-size: var(--text-h3);\n color: var(--color-heading-alt);\n}\n.ds-prose p,\n.ds-prose ul {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n.ds-prose ul {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n color: var(--color-text);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: 87.5%;\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\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}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n border-radius: calc(var(--radius-control) / 2);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n font-size: var(--text-small);\n}\n\n/* buttons: small, control corners, a hairline one step lighter than the fill */\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 padding: 0 var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\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 text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: color-mix(in srgb, var(--color-button) 85%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border-strong);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: var(--color-surface);\n}\n.ds-button--danger {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 20%, var(--color-danger-surface));\n color: var(--color-danger);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: var(--color-danger-surface);\n}\n.ds-button--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: transparent;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse) 86%, var(--color-inverse-text));\n color: var(--color-inverse-text);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button--small {\n min-height: var(--space-6);\n padding: 0 var(--space-3);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n box-shadow: none;\n cursor: not-allowed;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-ui);\n line-height: 1.34;\n white-space: nowrap;\n text-decoration: none;\n}\n.ds-badge--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-badge--new {\n background: color-mix(in srgb, var(--color-accent-alt) 14%, transparent);\n color: var(--color-accent-alt);\n border-color: color-mix(in srgb, var(--color-accent-alt) 30%, transparent);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 14%, transparent);\n color: var(--color-success);\n border-color: color-mix(in srgb, var(--color-success) 30%, transparent);\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 14%, transparent);\n color: var(--color-warning);\n border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 14%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);\n}\n.ds-badge--count {\n padding: var(--space-1) var(--space-2);\n border-radius: var(--radius-control);\n font-weight: var(--weight-bold);\n}\n.ds-badge__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-accent-alt);\n border-radius: var(--radius-pill);\n}\n.ds-badge--success .ds-badge__dot,\n.ds-badge--warning .ds-badge__dot,\n.ds-badge--danger .ds-badge__dot {\n background: currentColor;\n}\n\n/* form */\n.ds-form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: grid;\n align-content: start;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__field--full {\n grid-column: 1 / -1;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n color: var(--color-text);\n}\n.ds-form__control {\n width: 100%;\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: 1.4;\n transition: var(--transition);\n}\n.ds-form__control::placeholder {\n color: var(--color-disabled-text);\n}\n.ds-form__control--area {\n min-height: var(--space-9);\n resize: vertical;\n}\n.ds-form__control:focus-visible,\n.ds-form__control.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-form__control.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__hint {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-danger);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__checkbox {\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n grid-column: 1 / -1;\n}\n\n/* panel: the small card with panel corners; sits inside a cell */\n.ds-panel {\n min-width: 0;\n padding: var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-panel__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.4;\n color: var(--color-heading-alt);\n}\n.ds-panel__body {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel__meta {\n display: block;\n margin-top: var(--space-4);\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-panels {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-3);\n}\n\n/* tabs: a segmented pill */\n.ds-tabs {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n color: var(--color-bar-alt-text);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n outline: var(--focus-ring);\n}\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n\n/* notice */\n.ds-notice {\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 20%, transparent);\n border-radius: var(--radius-panel);\n font-size: var(--text-small);\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notice__text {\n margin: 0;\n opacity: 0.8;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notices {\n display: grid;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--space-6);\n min-height: var(--space-6);\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-link-quiet);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n background: var(--color-surface-alt);\n}\n.ds-pagination__link.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n pointer-events: none;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-disabled-text);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n}\n\n/* dialog: a lifted box on a dimmed stage */\n.ds-dialog {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--color-surface-alt);\n color: var(--color-text);\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}\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-4) var(--space-5);\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-base);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-dialog__close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n border: 0;\n border-radius: var(--radius-control);\n cursor: pointer;\n}\n.ds-dialog__glyph {\n width: var(--size-check);\n height: var(--size-check);\n}\n.ds-dialog__close:hover,\n.ds-dialog__close.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\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-2);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stage {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-8) var(--space-5);\n background: var(--color-overlay);\n}\n\n/* empty state: an empty cell with only an outline */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n text-align: center;\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-empty__text {\n max-width: 36ch;\n margin: var(--space-1) 0 var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n.ds-page-header .ds-breadcrumb {\n margin: 0;\n}\n\n/* stats: one wide cell cut into figures by hairlines */\n.ds-stats {\n flex-direction: row;\n align-items: stretch;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stats .ds-stat {\n flex: 1;\n justify-content: center;\n padding: var(--space-cell);\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stats .ds-stat:first-child {\n border-left: 0;\n}\n\n/* table: open rows straight on the cell, under a rounded head strip */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-size: var(--text-small);\n text-align: left;\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-table th:first-child {\n border-radius: var(--radius-control) 0 0 var(--radius-control);\n}\n.ds-table th:last-child {\n border-radius: 0 var(--radius-control) var(--radius-control) 0;\n}\n.ds-table td {\n padding: var(--space-4);\n color: var(--color-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tr.is-current td {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-table__scroll {\n max-width: 100%;\n overflow-x: auto;\n}\n.ds-table .ds-table__link {\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-table .ds-table__link:hover,\n.ds-table .ds-table__link.is-hover {\n color: var(--color-link);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__muted {\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n\n/* list: a timeline of items, each led by a dot */\n.ds-list {\n display: grid;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n gap: 0 var(--space-3);\n}\n.ds-list__mark {\n grid-row: span 3;\n width: var(--size-dot);\n height: var(--size-dot);\n margin-top: var(--space-2);\n background: var(--color-accent-alt);\n border-radius: var(--radius-pill);\n}\n.ds-list__title {\n grid-column: 2;\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link);\n}\n.ds-list__text {\n grid-column: 2;\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n grid-column: 2;\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n\n/* sidebar: a cell of its own beside the working cell */\n.ds-sidebar {\n font-size: var(--text-small);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-4);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: 1.3;\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n display: grid;\n gap: var(--space-1);\n margin: 0 calc(var(--space-3) * -1);\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 padding: var(--space-3);\n border-radius: var(--radius-control);\n font-size: var(--text-small);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n\n/* footer: the last cell of the page */\n.ds-footer {\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: 0 var(--space-5) var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: 3fr 1fr 1fr 1fr;\n gap: var(--space-6);\n padding: var(--space-7);\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}\n.ds-footer__brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-footer__text {\n max-width: 36ch;\n margin: var(--space-3) 0 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-footer__list {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-footer__strip {\n grid-column: 1 / -1;\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n padding-top: var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: calc(var(--text-small) * 0.857);\n}\n\n/* menu: a list that drops from a navigation item, on hover, focus or when opened */\n.ds-menu {\n position: relative;\n}\n.ds-menu__caret {\n width: var(--size-dot);\n height: var(--size-dot);\n margin-left: var(--space-1);\n}\n.ds-menu > .ds-nav__link {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n}\n.ds-menu__caret {\n flex: none;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: none;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text);\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 text-align: left;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list,\n.ds-menu[open] > .ds-menu__list,\n.ds-menu.is-open > .ds-menu__list {\n display: block;\n}\n.ds-menu__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-3);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.3;\n color: var(--color-text);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover,\n.ds-menu__item:focus-visible {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-menu__hint {\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-menu__rule {\n height: 0;\n margin: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* accordion: sections that open and close */\n.ds-accordion {\n display: grid;\n}\n.ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:first-child {\n border-top: 0;\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n list-style: none;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.35;\n color: var(--color-heading);\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::after {\n content: \"\";\n flex: none;\n align-self: center;\n display: inline-block;\n width: calc(var(--space-2) * 1.25);\n height: calc(var(--space-2) * 1.25);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n color: var(--color-link);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after,\n.ds-accordion__item.is-open > .ds-accordion__head::after {\n transform: rotate(45deg);\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n color: var(--color-link);\n}\n.ds-accordion__head:focus-visible,\n.ds-accordion__head.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n max-width: var(--size-measure);\n margin: 0;\n padding: 0 0 var(--space-4);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* tooltip: a hint over its trigger, on hover or focus */\n.ds-grid__cell:has(.ds-tooltip) {\n position: relative;\n overflow: visible;\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n cursor: help;\n}\n.ds-tooltip__mark {\n display: inline-block;\n width: var(--size-check);\n height: var(--size-check);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\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;\n color: var(--color-text-muted);\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 15;\n width: max-content;\n max-width: 28ch;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-body);\n line-height: 1.4;\n text-align: left;\n text-transform: none;\n letter-spacing: 0;\n white-space: normal;\n transform: translateX(-50%);\n visibility: hidden;\n opacity: 0;\n transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n\n/* progress: how far something is, as a bar */\n.ds-progress {\n display: grid;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-progress__label {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-progress__value {\n font-size: calc(var(--text-small) * 0.857);\n font-variant-numeric: tabular-nums;\n color: var(--color-text-muted);\n}\n.ds-progress__bar {\n display: block;\n height: var(--space-2);\n overflow: hidden;\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-progress__fill {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__fill--3 {\n width: 62%;\n}\n\n/* room above a component that follows text inside a tile */\n.ds-rows + .ds-progress {\n margin-top: var(--space-3);\n}\n\n@media (max-width: 960px) {\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-grid__cell,\n .ds-grid__cell--half,\n .ds-grid__cell--wide,\n .ds-hero {\n grid-column: 1 / -1;\n }\n .ds-grid__cell--mini {\n grid-column: span 1;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-footer__inner {\n grid-template-columns: 1fr 1fr;\n }\n}\n@media (max-width: 600px) {\n .ds-page__inner {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n }\n .ds-nav {\n padding: var(--space-3);\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2) var(--space-3);\n width: 100%;\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);\n border-radius: var(--radius-page);\n }\n .ds-nav__links {\n order: 3;\n width: 100%;\n overflow-x: auto;\n }\n .ds-grid {\n grid-auto-rows: auto;\n }\n .ds-grid__cell,\n .ds-hero {\n grid-row: auto;\n padding: var(--space-5);\n }\n .ds-grid__cell--mini {\n padding: var(--space-4);\n }\n .ds-grid__cell--row {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-hero__title,\n .ds-page-header__title,\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n .ds-stats {\n flex-direction: column;\n padding: 0;\n }\n .ds-stats .ds-stat {\n padding: var(--space-5);\n border-left: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n }\n .ds-stats .ds-stat:first-child {\n border-top: 0;\n }\n .ds-form,\n .ds-panels {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-table .ds-table__extra {\n display: none;\n }\n .ds-table {\n font-size: calc(var(--text-small) * 0.857);\n }\n .ds-footer__inner {\n padding: var(--space-5);\n }\n .ds-table th,\n .ds-table td {\n padding-left: var(--space-2);\n padding-right: var(--space-2);\n }\n .ds-page-header__copy {\n flex-basis: 100%;\n }\n .ds-tabs {\n max-width: 100%;\n overflow-x: auto;\n }\n .ds-tabs__tab {\n white-space: nowrap;\n }\n .ds-pagination,\n .ds-form__actions,\n .ds-dialog__actions,\n .ds-footer__strip {\n flex-wrap: wrap;\n }\n .ds-stage {\n padding: var(--space-5) var(--space-3);\n }\n}\n@media (max-width: 960px) {\n .ds-tooltip {\n position: static;\n }\n .ds-tooltip__tip {\n bottom: auto;\n left: var(--space-4);\n right: var(--space-4);\n width: auto;\n max-width: none;\n margin-top: var(--space-6);\n transform: none;\n }\n}\n\n/* phone navigation: one strip that scrolls sideways from edge to edge of the bar and fades out on the right;\n the drop-down cannot open inside a scroller, so its extra entry sits in the strip instead */\n.ds-nav__more {\n display: none;\n}\n@media (max-width: 600px) {\n .ds-nav__more {\n display: block;\n }\n .ds-nav__links {\n flex: none;\n width: calc(100% + var(--space-2) + var(--space-3));\n margin: 0 calc(-1 * var(--space-2)) 0 calc(-1 * var(--space-3));\n padding: 0 var(--space-8) 0 var(--space-3);\n scrollbar-width: none;\n mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-8)), transparent);\n }\n .ds-nav__links > li {\n flex: none;\n }\n .ds-nav__links .ds-nav__link {\n white-space: nowrap;\n }\n .ds-nav .ds-nav__links .ds-menu > .ds-menu__list,\n .ds-nav__links .ds-menu__caret {\n display: none;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin, whole-page bento specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n New invoice\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n Recurring invoices are here\n
\n

Get paid without chasing anyone

\n

chronoskin writes the invoice, sends it on the day you agreed and reminds the client politely until it is settled.

\n
\n Send a first invoice\n See a sample\n

Three invoices a month are free.

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

Invoice 0214

\n

Fennick & Daughters, due 30 June

\n
\n Sent\n
\n
\n
    \n
  • Site survey 640.00
    • \n
  • Drawings, two rounds 1,180.00
    • \n
  • Travel 92.50
    • \n
  • Tax at 20% 382.50
    • \n
\n

Total due2,295

\n
\n
\n\n
    \n
  • \n Paid this quarter\n 18.4k\n 12% up on last quarter\n
    • \n
  • \n Outstanding\n 3.1k\n 4 invoices waiting\n
    • \n
  • \n Days to payment\n 9\n Median of 46 invoices\n
    • \n
\n\n
\n

Reminders

\n

Polite, spaced out, and off the moment the money lands?Seen on the bank feed, which is read once an hour..

\n
\n
    \n
  • Three days before
    • \n
  • A week after
    • \n
\n
\n June collected 8 of 12 invoices\n \n
\n
\n
\n\n
\n \n

Card

\n
\n\n
\n \n

Transfer

\n
\n\n
\n

Before it is sent

\n
\n
    \n
  • Client address on file
    • \n
  • Tax rate matches the country
    • \n
  • Number follows the last one
    • \n
\n
\n
\n\n
\n

Income by month

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

A plain file behind every invoice

\n

Export the ledger whenever you like; nothing is locked in.

\n
\n
$ chronoskin export --year 2025\n  46 invoices, 3 open\n  wrote ledger-2025.csv
\n
\n
\n\n
\n

Speaks to your books

\n

Paid invoices land in the tools your accountant already opens.

\n
\n
\n Bank feed\n Spreadsheet\n Tax return\n Calendar\n Webhook\n
\n
\n
\n\n
\n
\n

Send the invoice you have been putting off

\n

It takes four fields. The reminders are on us.

\n
\n
\n Send a first invoice\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Ledger
    2. \n
  2. Invoices
    3. \n
  3. June
    4. \n
\n
\n
\n

Invoices

\n

Everything sent in June, with what is still owed.

\n
\n
\n Export\n New invoice\n
\n
\n
\n \n 12 invoices\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
NumberClientDueStatusAmount
0214Fennick & Daughters30 JuneSent2,295.00
0213Osei Joinery24 JunePaid840.00
0212Larkmoor Press18 JunePaid1,460.00
0211Bram Hollis2 JuneOverdue315.50
0210Osei Joinery1 JunePaid840.00
\n
\n \n
\n\n
\n

Activity

\n \n
\n\n
\n

Messages

\n
\n
\n Invoice 0214 was opened\n

The client viewed it twice. The first reminder goes out on 27 June.

\n
\n
\n Invoice 0211 is 14 days overdue\n

Two reminders were sent and neither was opened.

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

No credit notes

\n

A credit note appears here when an invoice is voided.

\n Read the guide\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Ledger
    2. \n
  2. Invoices
    3. \n
  3. 0214
    4. \n
\n
\n
\n

Invoice 0214

\n

Survey and drawings for Fennick & Daughters. The first reminder goes out on 27 June.

\n
\n
\n All invoices\n Copy as new\n
\n
\n
\n\n
\n
\n
\n

Fennick & Daughters

\n

Sent 16 June, viewed twice, due 30 June

\n
\n Sent\n
\n
\n
    \n
  • Site survey 640.00
    • \n
  • Drawings, two rounds 1,180.00
    • \n
  • Travel 92.50
    • \n
  • Tax at 20% 382.50
    • \n
\n

Total due2,295

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

Actions

\n

A sent invoice is never edited. Void it and a credit note points back to it.

\n
\n
\n \n \n \n \n
\n
    \n
  • Stop reminders for 0214
    • \n
  • Void 0214 with a credit note
    • \n
\n
\n\n
\n

Terms on this invoice

\n
\n
\n

Payment terms

\n

Fourteen days unless the client record says otherwise.

\n Set per client\n
\n
\n

Late fee

\n

Off by default. When on, it is added as its own line after thirty days.

\n Shown on the invoice\n
\n
\n
\n\n
\n

History

\n
    \n
  • \n \n Opened by the client\n 16 June · viewed twice\n
    • \n
  • \n \n Sent to the billing contact\n 16 June, 08:00 · on schedule\n
    • \n
  • \n \n Drafted from the May invoice\n 12 June · recurring\n
    • \n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Ledger
    2. \n
  2. Invoices
    3. \n
  3. New
    4. \n
\n
\n
\n

New invoice

\n

Four fields. It gets number 0215 and goes out the moment you confirm.

\n
\n
\n Back to invoices\n
\n
\n
\n\n
\n

Details

\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n Enter the amount as a number, such as 900.00.\n
\n
\n \n \n
\n
\n \n Cancel\n
\n
\n
\n\n
\n
\n
\n

Send invoice 0215?

\n \n
\n
\n

It goes to the billing contact at Fennick & Daughters. A sent invoice cannot be edited, only credited.

\n
\n
\n Not yet\n Send it\n
\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Ledger
    2. \n
  2. Guide
    3. \n
  3. Invoices
    4. \n
\n
\n
\n

How billing works

\n

The guide to invoices, credit notes and the labels you will meet on every screen.

\n
\n
\n New invoice\n
\n
\n
\n\n
\n
\n

Invoices

\n

An invoice is a numbered request for payment. Once sent it is never edited; a mistake is fixed with a credit note that points back to it.

\n

Numbering

\n

Numbers run in one sequence per year. Set the first with chronoskin number 0001 or in ledger settings.

\n

What a client sees

\n
    \n
  • Your details and theirs, with both tax numbers
    • \n
  • Each line with its quantity, rate and tax
    • \n
  • The due date and how to pay
    • \n
\n

Credit notes

\n

Voiding an invoice writes a credit note for the same amount and tells the client. Both stay in the ledger with their numbers.

\n

Questions

\n
\n
\n Can a sent invoice be changed?\n

No. Void it, and the credit note and the corrected invoice go out together.

\n
\n
\n When does the first reminder go?\n

Three days before the due date, unless reminders are off for that client.

\n
\n
\n Is the tax rate set per client?\n

Per client, with one default for everyone else.

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

Labels

\n

Pills mark state, squares count.

\n
\n Draft\n Recurring\n New\n 46\n
\n
\n Paid\n Sent\n Overdue\n
\n
\n\n
\n
\n

Read next

\n

A link when new, visited, under the pointer and pressed.

\n
\n

\n Credit notes\n Tax rates\n June invoices\n New invoice\n

\n
\n\n
\n

Set the first number from the terminal

\n

The sequence starts again each January unless you say otherwise.

\n
\n
$ chronoskin number 0001\n  next invoice will be 0001
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bento-grids.landing.s03.p03.t03.u01\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"bento-grids\",\n \"years\": [\n 2022,\n 2026\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bg-3331\",\n \"short\": \"v1-bg-3331\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #1c1c1c;\n --color-canvas: #1c1c1c;\n --color-surface: #232323;\n --color-surface-alt: #2e2e2e;\n --color-surface-strong: #3e3e3e;\n --color-bar: #1c1c1c;\n --color-bar-text: #ffffff;\n --color-bar-alt: #161616;\n --color-bar-alt-text: #a0a0a0;\n --color-inverse: #ededed;\n --color-inverse-text: #1c1c1c;\n --color-text: #dddddd;\n --color-text-muted: #a0a0a0;\n --color-heading: #ededed;\n --color-heading-alt: #dddddd;\n --color-link: #3ecf8e;\n --color-link-quiet: #a0a0a0;\n --color-link-visited: #85e0b7;\n --color-link-hover: #ededed;\n --color-link-active: #37996b;\n --color-border: #343434;\n --color-border-strong: #505050;\n --color-border-muted: #2e2e2e;\n --color-accent: #37996b;\n --color-accent-text: #ffffff;\n --color-accent-alt: #569cd6;\n --color-fill-1: #002533;\n --color-fill-2: #28302c;\n --color-fill-3: #0c0f24;\n --color-fill-4: #2e2e2e;\n --color-button: #37996b;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #2e2e2e;\n --color-button-secondary-text: #ededed;\n --color-input: #161616;\n --color-input-text: #dddddd;\n --color-input-border: #505050;\n --color-disabled: #2e2e2e;\n --color-disabled-text: #707070;\n --color-danger: #fa1f41;\n --color-danger-surface: #201818;\n --color-success: #3ecf8e;\n --color-warning: #f7be2b;\n --color-notice: #002533;\n --color-notice-text: #dddddd;\n --color-focus: #3ecf8e;\n --color-shadow: #000000;\n --color-overlay: rgb(22 22 22 / 0.8);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"Inter Variable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n --font-heading: Inter, \"Inter Variable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n --font-ui: Inter, \"Inter Variable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n --font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 20px;\n --text-display: 56px;\n --text-h1: 46px;\n --text-h2: 32px;\n --text-h3: 22px;\n --line-body: 1.5;\n --line-heading: 1.15;\n --line-display: 1.06;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 800;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 8px;\n --radius-panel: 12px;\n --radius-pill: 9999px;\n --radius-page: 24px;\n --shadow-panel: inset 0 1px 1px color-mix(in srgb, white 8%, transparent), 0 12px 12px color-mix(in srgb, var(--color-shadow) 12%, transparent);\n --shadow-control: 0 1px 2px color-mix(in srgb, var(--color-shadow) 16%, transparent);\n --shadow-control-hover: 0 2px 4px color-mix(in srgb, var(--color-shadow) 16%, transparent);\n --shadow-control-pressed: none;\n --shadow-dialog: inset 0 1px 2px color-mix(in srgb, white 12%, transparent), 0 20px 25px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar) 80%, transparent);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 95%, white), color-mix(in srgb, var(--color-surface) 88%, black));\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 85%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n --backdrop-blur: 0px;\n}\n" } }