{ "id": "v1-fl-1111", "long_id": "v1.flat-design.landing.s01.p01.t01.u01", "name": "Flat design landing", "era": { "slug": "flat-design", "code": "fl", "name": "Flat design", "years": [ 2013, 2016 ], "description": "Product marketing, 2013 to 2016: full-width bands of solid colour, light sans-serif headings, thin one-pixel rules, and no gloss, bevel or drop shadow anywhere." }, "archetype": "landing", "mode": "pure", "viewport": { "width": 1280, "fluid": true }, "summary": "Flat design is the product-marketing look of 2013 to 2016: full-width bands of solid colour, light-weight sans-serif headings, thin 1px rules and no gloss, bevel, gradient or drop shadow anywhere. Pages are a white header bar, a single-colour hero with white text and two buttons, then alternating white and off-white bands holding a centred fixed column, ending in a dark multi-column footer. Colour does the work that depth did before: one blue for every action, and a few saturated block colours used as flat tiles.", "url": "https://chrono.skin/s/v1-fl-1111", "preview_url": "https://chrono.skin/s/v1-fl-1111/specimen.html", "files": { "STYLE.md": "# Flat design landing\n\n## Summary\n\nFlat design is the product-marketing look of 2013 to 2016: full-width bands of solid colour, light-weight sans-serif headings, thin 1px rules and no gloss, bevel, gradient or drop shadow anywhere. Pages are a white header bar, a single-colour hero with white text and two buttons, then alternating white and off-white bands holding a centred fixed column, ending in a dark multi-column footer. Colour does the work that depth did before: one blue for every action, and a few saturated block colours used as flat tiles.\n\n## Layout\n\n- The page is fluid: every band (`.ds-nav`, `.ds-hero`, `.ds-band`, `.ds-footer`) spans the full viewport and paints its own background. Content sits in a centred column of `--size-page` (960px), designed for a 1280px viewport. Never box the whole page in a frame.\n- Navigation is one white bar at the top, `--size-nav` (64px) tall, with a 1px bottom rule: wordmark left, links next to it, sign-in and a small outlined button on the right.\n- Sections are stacked bands. Alternate `--color-canvas` (white) and `--color-surface-alt` (#f8f8f8); use one `--color-fill-1` band per page for emphasis. Bands touch each other: the gap between them is 0, the space is inside.\n- Columns inside a band: `.ds-band__split` with a main column and a `--size-sidebar` (240px) side column, or two equal halves. Feature rows are 3 or 4 equal columns (`.ds-grid`).\n- Inner pages have no hero. Under the nav comes an off-white (`--color-surface-alt`) head made of two touching pieces: a `.ds-band--tight` strip with the `.ds-breadcrumb`, then `.ds-page-header` (title, one line of description, actions on the right), closed by a 1px rule. The working content follows in white and off-white bands in the same 960px column. A list page puts `.ds-tabs` first in the band directly under the page header, then `.ds-stat`, then the table with its pagination in `.ds-table__foot`. A detail page and a settings page use `.ds-band__split`: the work (table, action row, form) in the main column, small panels and section links in the 240px side column. The dark footer is unchanged.\n- Views. The specimen is an invoicing product with five views. `home` is the landing page: hero, the four feature tiles, running text beside a guide list and a plan panel, the emphasis band and the news list. `pricing` is an inner page with three plan panels and four answered questions. `invoices` is the list page: tabs, the month's figures, the invoice table with pagination and the status legend, and an empty estimates box. `invoice` is one invoice: its line items, the action row, the open send dialog, and amount, history and client in the side column. `settings` is the invoice defaults form with its notices beside the settings links, the last changes and a note. Below 760px the columns stack, the navigation wraps under the brand, grids fold to two columns or one, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does.\n- Spacing scale: `--space-1` 4px (inside pills, between a label and its field), `--space-2` 8px (between adjacent controls, button vertical padding), `--space-3` 16px (paragraph gap, cell padding, list row padding), `--space-4` 24px (grid gutter, button horizontal padding, panel padding, page side padding), `--space-5` 32px (between tab items, inset panel padding), `--space-6` 48px (column gap, gap between stacked blocks, footer padding), `--space-7` 80px (top and bottom padding of a band and of the hero).\n- Other sizes: `--size-tile` 160px (height of a colour tile), `--size-icon` 48px, `--size-dialog` 480px.\n\n## Typography and colour roles\n\n- One sans-serif family for everything (`--font-body`, `--font-heading`, `--font-ui` are the same stack). The references used commercial humanist and geometric sans faces (Segoe UI, Whitney, Gotham, Circular) and Open Sans; the stack is Open Sans, then Segoe UI, then Helvetica Neue. `--font-mono` is only for code.\n- Body is `--text-base` 15px at `--line-body` 1.55 in grey `--color-text` (#686868), not black. Headings are darker (`--color-heading` #2e2f33) and light: `--weight-heading` 300. Hierarchy comes from size and weight, never from colour blocks behind headings.\n- Sizes: `--text-display` 38px (hero title only), `--text-h1` 32px (band titles), `--text-h2` 24px, `--text-h3` 20px, `--text-large` 18px (lead lines, large buttons, list titles), `--text-ui` 14px (navigation, buttons, inputs, tables, footer), `--text-small` 12px (meta, captions, badges, breadcrumb).\n- `--weight-bold` and `--weight-ui` are 600 and are used for buttons, labels, table heads and small titles. Nothing is heavier.\n- `--color-heading-alt` (plum) is for small titles: panel title, sidebar title, h3 in prose.\n- Links are `--color-link` blue and never underlined, in any state; hover only changes the colour to `--color-link-hover`. Visited links keep the link colour. Quiet links (`--color-link-quiet`) are grey and turn blue on hover.\n- `--color-button` blue is the only action colour. `--color-accent` (coral) and `--color-accent-alt` (yellow) are for badges and markers, never for buttons. The only other filled button is the destructive one, in `--color-danger`.\n- Status colours: `--color-success` (the green of `--color-fill-4`), `--color-warning` (amber) and `--color-danger` (red) fill status pills with `--color-accent-text` on top. They mark the state of a row or record; they are not decoration and not section fills.\n- `--color-fill-1` (deep blue) fills the hero and the emphasis band. `--color-fill-1` to `--color-fill-4` fill grid tiles. Text on a fill is `--color-inverse-text`; on the yellow fill put only an icon, not running text. An icon on a fill never lies on the fill itself: `.ds-grid__icon` carries a round plate, `--color-inverse` mixed in at 40%, so the `--color-inverse-text` icon stays legible when a token set makes the fill pale (yellow, beige).\n- `--color-inverse` (#262626) is the footer. Footer text is `--color-text-muted`, footer titles `--color-inverse-text`.\n- Borders are 1px `--color-border`; `--border-width-strong` (2px) is only used for the current-item underline in navigation and tabs and under the table head.\n- One-off shades made with `color-mix()` because the vocabulary has no token: the darker inset inside a fill band and the hero blocks (`--color-inverse` at 16%), the ghost button border (`--color-inverse-text` at 50%), the footer rule (`--color-inverse-text` at 16%), the icon plate (`--color-inverse` at 40%), the `--alt` badge tint (`--color-accent-alt` at 30% over `--color-surface`), the hovered and pressed destructive button (`--color-danger` at 85% over `--color-inverse-text` and over `--color-inverse`). The hero lead uses `opacity: 0.8`.\n- There are no shadows, gradients or text shadows; every `--shadow-*` token is `none` and every `--fill-*` token is a flat colour. `--transition` is `none`.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, text colour and white page. Holds bands directly; it has no width of its own.\n- `.ds-band`: full-width section with a `.ds-band__inner` column. Variants `--alt` (off-white), `--strong` (light grey), `--fill` (deep blue, white text), `--tight` (16px padding, for a breadcrumb strip). `.ds-band__title` and `.ds-band__lead` head a band. `.ds-band__split` makes columns from `.ds-band__main`, `.ds-band__side`, `.ds-band__half`; with `--level` the columns end on one line and the last `.ds-panel` of a stacked side column grows to take up the difference; `.ds-band__inset` is the darker flat panel inside a `--fill` band. `.ds-stack` stacks blocks 48px apart (`--tight`: 24px).\n- `.ds-brand`: the site's mark and name, first in the top bar, at the left. `.ds-brand__mark` is a 28px tile dressed like the primary button (`--fill-button`, `--color-button-text` for the drawing, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font at `--text-h3` and `--weight-bold` (not the heading weight: the light headings of several token sets are too weak beside the tile) in `--color-heading`. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the top bar on `--fill-bar`: the `.ds-brand`, `.ds-nav__links` with `.ds-nav__link` (current item: `is-current`, blue with a 2px underline), `.ds-nav__aside` for sign-in and a small button. In the specimen the current item is marked by the view that is showing, with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: single-colour band under the nav. `.ds-hero__title` (38px, weight 300), `.ds-hero__lead`, `.ds-hero__actions` with one `.ds-button--inverse` and one `.ds-button--ghost`. `.ds-hero__art` is an optional arrangement of flat `.ds-hero__block` rectangles standing in for a product picture. The hero runs edge to edge and has no corners; `--radius-page` rounds its blocks and the grid tiles.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`. A full-width off-white strip with a 1px bottom rule; `.ds-page-header__inner` is the 960px column, `.ds-page-header__copy` holds `.ds-page-header__title` (32px, weight 300) and one `.ds-page-header__text` line (18px, weight 300), `.ds-page-header__actions` sits on the right with at most one primary and one `--secondary` button. Place it directly after the breadcrumb strip.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta and navigation inside content; `--more` appends a small chevron for \"Learn more\" links. `.ds-linkrow` lays links in a row.\n- `.ds-button`: flat blue button, 5px radius, 14px weight 600. Variants: `--secondary` (white with a 1px blue outline), `--danger` (flat `--color-danger` red with white text, for delete and other destructive actions only; one per view), `--inverse` (white, for use on a fill), `--ghost` (transparent with a 1px white outline, on a fill only), `--large`, `--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons 16px apart.\n- `.ds-form`: vertical form. `.ds-form__row` puts fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`, `.ds-form__submit` (full-width button).\n- `.ds-table`: data table with horizontal rules only: a 2px rule under the head, 1px between rows, alternate rows off-white, no outer border. `.ds-table__num` right-aligns numbers; `.ds-table__caption` is a small note below. Wrap it in `.ds-table__wrap` so that it scrolls on its own in a narrow window; `.ds-table__foot` is the row under it with the pagination at the left and a legend or count at the right.\n- `.ds-list`: news or post list separated by faint 1px rules. `.ds-list__item` holds `.ds-list__title`, `.ds-list__text`, `.ds-list__meta`.\n- `.ds-panel`: white box with a 1px border and `--radius-panel` corners (square here), a grey `.ds-panel__title` strip and `.ds-panel__body`. `.ds-panel__figure` is a large light numeral (a price or a count). `.ds-plans` sets three panels side by side on a pricing page.\n- `.ds-stat`: row of summary figures on an inner page, three to five across. Each `.ds-stat__item` is a `.ds-stat__figure` (38px, weight 300, the same light numeral as `.ds-panel__figure`) over a small grey `.ds-stat__label`. Items share the width equally and are divided by 1px vertical rules; there is no box, fill or icon around them.\n- `.ds-grid`: four equal columns (`--3` for three). Each `.ds-grid__cell` is a flat colour `.ds-grid__tile` (`--2`, `--3`, `--4` for the other fills) holding a line icon `.ds-grid__icon` on its darker round plate, then `.ds-grid__title`, `.ds-grid__text` and a link below the tile. The cell itself has no border or background.\n- `.ds-tabs`: row of text tabs on a 1px rule; `.ds-tabs__tab` with `is-current` gets a 2px blue underline. No boxes around tabs.\n- `.ds-badge`: fully rounded pill, 12px weight 600. Coral by default, `--alt` a 30% tint of `--color-accent-alt` over `--color-surface` with a `--border-width` outline in the full colour and `--color-heading` text (the text never lies on the accent itself, so the second accent may be light or dark), `--quiet` grey for counts. Status variants for table rows and record heads: `--success` (green: paid, done, online), `--warning` (amber: due soon, pending), `--danger` (red: overdue, failed), all with white text. `.ds-badgerow` for several.\n- `.ds-sidebar`: unboxed block with `.ds-sidebar__title`, `.ds-sidebar__list` of `.ds-sidebar__item` links and optional `.ds-sidebar__count`; the current row is `is-current`, plain bold text instead of a link.\n- `.ds-notice`: flat pale-blue message strip; `--error` is pale red with a 1px red border. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: row of `.ds-pagination__link`; `is-current` is a filled blue square with 5px corners, `is-disabled` is grey.\n- `.ds-breadcrumb`: 12px grey trail of `.ds-breadcrumb__item` separated by chevrons; the last item is `.ds-breadcrumb__current`.\n- `.ds-dialog`: dimmed block (`--color-overlay`) centring a flat white `.ds-dialog__box` with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body` and right-aligned `.ds-dialog__actions`. Corners are `--radius-panel`, its shadow `--shadow-dialog` (none here).\n- `.ds-empty`: centred message in a 1px bordered box on `--fill-panel`: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one button. It stands where a list would be.\n- `.ds-footer`: dark band with `.ds-footer__cols` (four columns of `.ds-footer__title` and `.ds-footer__list` / `.ds-footer__item` / `.ds-footer__link`) and a `.ds-footer__base` row with the copyright and `.ds-footer__legal` links.\n\n## Never\n\n- `block-gap <= 80px`: the largest space between blocks is the 80px band padding.\n- `content-width <= 960px`: content stays in the centred column while bands run edge to edge.\n- `underlined-links = 0%`: no reference underlines links, in any state.\n- `font-size <= 38px`: the hero title is the largest text.\n- `font-size >= 12px`: meta text and badges are the smallest.\n- `font-weight <= 600`: headings are light (300); 600 is the heaviest weight.\n- `font-families <= 2`: one sans-serif family, plus monospace for code.\n- `line-height <= 1.6`: body text is set at 1.55.\n- `letter-spacing = 0`: text is not tracked.\n- `uppercase-text = 0%`: navigation, buttons and headings are in sentence case.\n- `box-shadow = none`: no reference has a drop shadow; boxes are separated by fill or a 1px rule.\n- `text-shadow = none`: text is flat on every surface.\n- `gradient-fills = 0%`: every background is a single solid colour.\n- `border-width <= 2px`: rules are 1px; 2px only marks the current tab or navigation item.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new section is a `.ds-band` with a `.ds-band__inner`; a new box is a `.ds-panel` (1px border, square corners) or a flat fill with no border, never both a fill and a shadow. Controls take `--radius-control`, containers `--radius-panel` or `--radius-page` (both 0), and only pills take `--radius-pill`. New colours of emphasis come from `--color-fill-1` to `--color-fill-4`; new actions are always `--color-button`. Spacing comes from the `--space-*` scale, and any one-off shade is a `color-mix()` of tokens noted next to the rule.\n", "components.css": ":root {\n --size-page: 960px;\n --size-nav: 64px;\n --size-sidebar: 240px;\n --size-tile: 160px;\n --size-icon: 48px;\n --size-dialog: 480px;\n --size-field: 320px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 16px;\n --space-4: 24px;\n --space-5: 32px;\n --space-6: 48px;\n --space-7: 80px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n padding: 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}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\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/* band: a full-width strip; its inner column is the content width */\n.ds-band {\n background: var(--color-canvas);\n padding: var(--space-7) var(--space-4);\n}\n.ds-band--alt {\n background: var(--color-surface-alt);\n}\n.ds-band--strong {\n background: var(--color-surface-strong);\n}\n.ds-band--fill {\n background: var(--color-fill-1);\n color: var(--color-inverse-text);\n padding-top: var(--space-6);\n padding-bottom: var(--space-6);\n}\n.ds-band--tight {\n padding-top: var(--space-3);\n padding-bottom: var(--space-3);\n}\n.ds-band__inner {\n max-width: var(--size-page);\n margin: 0 auto;\n}\n.ds-band__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\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}\n.ds-band__lead {\n margin: 0 0 var(--space-6);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n}\n.ds-band--fill .ds-band__title,\n.ds-band--fill .ds-band__lead {\n color: inherit;\n}\n.ds-band__split {\n display: flex;\n gap: var(--space-6);\n align-items: flex-start;\n}\n/* level: both columns end on one line; the last panel of a stacked column takes up the difference */\n.ds-band__split--level {\n align-items: stretch;\n}\n.ds-band__split--level .ds-stack > .ds-panel:last-child {\n flex: 1 0 auto;\n}\n.ds-band__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-band__side {\n flex: 0 0 var(--size-sidebar);\n}\n.ds-band__half {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-band__inset {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n background: color-mix(in srgb, var(--color-inverse) 16%, transparent);\n}\n.ds-band__inset-title {\n margin: 0 0 var(--space-2);\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}\n.ds-band__inset-text {\n margin: 0;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n}\n.ds-stack--tight {\n gap: var(--space-4);\n}\n\n/* nav */\n.ds-nav {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n padding: 0 var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n max-width: var(--size-page);\n min-height: var(--size-nav);\n margin: 0 auto;\n display: flex;\n align-items: center;\n gap: var(--space-5);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: calc(var(--space-4) + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 80%;\n height: 80%;\n}\n.ds-brand__name {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__links {\n display: flex;\n align-items: stretch;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n flex: 1 1 auto;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) 0;\n color: var(--color-bar-text);\n font-weight: var(--weight-body);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-link);\n}\n.ds-nav__link.is-current {\n color: var(--color-link);\n border-bottom-color: var(--color-link);\n}\n/* the current view marks its navigation item; the invoice detail marks Invoices */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n color: var(--color-link);\n border-bottom-color: var(--color-link);\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n color: var(--color-link);\n border-bottom-color: var(--color-link);\n}\n.ds-page:has(#pricing:target) .ds-nav__link[href=\"#pricing\"] {\n color: var(--color-link);\n border-bottom-color: var(--color-link);\n}\n.ds-page:has(#invoices:target) .ds-nav__link[href=\"#invoices\"] {\n color: var(--color-link);\n border-bottom-color: var(--color-link);\n}\n.ds-page:has(#invoice:target) .ds-nav__link[href=\"#invoices\"] {\n color: var(--color-link);\n border-bottom-color: var(--color-link);\n}\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] {\n color: var(--color-link);\n border-bottom-color: var(--color-link);\n}\n.ds-nav__aside {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* hero */\n.ds-hero {\n background: var(--color-fill-1);\n color: var(--color-inverse-text);\n padding: var(--space-7) var(--space-4);\n}\n.ds-hero__inner {\n max-width: var(--size-page);\n margin: 0 auto;\n display: flex;\n align-items: center;\n gap: var(--space-6);\n}\n.ds-hero__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\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}\n.ds-hero__lead {\n margin: 0 0 var(--space-5);\n max-width: 44ch;\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n opacity: 0.8;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n align-items: center;\n}\n.ds-hero__art {\n flex: 0 0 40%;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: var(--space-2);\n}\n.ds-hero__block {\n height: var(--size-tile);\n border-radius: var(--radius-page);\n background: color-mix(in srgb, var(--color-inverse) 16%, transparent);\n}\n.ds-hero__block--2 {\n background: var(--color-fill-3);\n}\n.ds-hero__block--3 {\n background: var(--color-fill-2);\n}\n.ds-hero__block--short {\n height: var(--space-7);\n}\n.ds-hero__block--wide {\n grid-column: span 2;\n}\n\n/* page header: the head of an inner page; continues the off-white breadcrumb strip and closes with a rule */\n.ds-page-header {\n background: var(--color-surface-alt);\n padding: var(--space-3) var(--space-4) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__inner {\n max-width: var(--size-page);\n margin: 0 auto;\n display: flex;\n align-items: center;\n gap: var(--space-6);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title .ds-badge {\n margin-left: var(--space-2);\n}\n.ds-page-header__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\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}\n.ds-page-header__text {\n margin: 0;\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\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 0 var(--space-3);\n color: var(--color-heading);\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}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n margin-top: var(--space-5);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n margin-top: var(--space-4);\n color: var(--color-heading-alt);\n font-weight: var(--weight-body);\n}\n.ds-prose p {\n margin: 0 0 var(--space-3);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-3);\n padding-left: var(--space-4);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\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}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link);\n}\n.ds-link--more::after {\n content: \" \\203A\";\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0 0 var(--space-3);\n}\n\n/* buttons */\n.ds-button {\n display: inline-block;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\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: var(--line-body);\n text-align: center;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\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: var(--color-link-active);\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: var(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: currentColor;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--color-notice);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: var(--color-notice);\n color: var(--color-link-active);\n}\n.ds-button--danger {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 85%, var(--color-inverse-text));\n color: var(--color-button-hover-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: color-mix(in srgb, var(--color-danger) 85%, var(--color-inverse));\n}\n.ds-button--inverse {\n background: var(--color-inverse-text);\n color: var(--color-fill-1);\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: var(--color-notice);\n color: var(--color-fill-1);\n}\n.ds-button--ghost {\n background: transparent;\n color: var(--color-inverse-text);\n border-color: color-mix(in srgb, var(--color-inverse-text) 50%, transparent);\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n background: transparent;\n color: var(--color-inverse-text);\n border-color: var(--color-inverse-text);\n}\n.ds-button--large {\n padding: var(--space-3) var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-button--small {\n padding: var(--space-1) var(--space-3);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: transparent;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-2);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\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 font-weight: var(--weight-body);\n line-height: var(--line-body);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-3);\n}\n.ds-form__submit {\n flex: 1 1 auto;\n}\n.ds-linkrow:last-child {\n margin-bottom: 0;\n}\n\n/* table: rules between rows, no vertical lines, no outer box */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n color: var(--color-text);\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3);\n text-align: left;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table thead th {\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 font-weight: var(--weight-bold);\n}\n.ds-table tbody th {\n color: var(--color-heading);\n font-weight: var(--weight-body);\n}\n.ds-table tbody tr:nth-child(even) td,\n.ds-table tbody tr:nth-child(even) th {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__caption {\n caption-side: bottom;\n padding-top: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-align: left;\n}\n\n.ds-table__wrap {\n overflow-x: auto;\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-top: var(--space-4);\n}\n\n/* list */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__title {\n display: block;\n color: var(--color-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-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 margin: var(--space-1) 0 0;\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel */\n.ds-panel {\n background: var(--fill-panel);\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-panel__title {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__figure {\n display: block;\n color: var(--color-heading);\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}\n\n.ds-panel__title .ds-badge {\n float: right;\n}\n.ds-plans {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-4);\n}\n\n/* stats: light numerals in a row, divided by vertical rules; no boxes */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-stat__figure {\n display: block;\n color: var(--color-heading);\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 font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* grid: solid colour tiles with the caption underneath */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n}\n.ds-grid--3 {\n grid-template-columns: repeat(3, 1fr);\n}\n.ds-grid__cell {\n min-width: 0;\n}\n.ds-grid__tile {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-tile);\n margin-bottom: var(--space-3);\n background: var(--color-fill-1);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n}\n.ds-grid__tile--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__tile--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__tile--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n box-sizing: content-box;\n padding: var(--space-3);\n background: color-mix(in srgb, var(--color-inverse) 40%, transparent);\n border-radius: 50%;\n}\n.ds-grid__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: 0 0 var(--space-2);\n}\n\n/* tabs: text row on a rule, current tab marked by a strong underline */\n.ds-tabs {\n display: flex;\n gap: var(--space-5);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(0 - var(--border-width));\n padding: var(--space-2) 0;\n color: var(--color-text);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n border-bottom-color: var(--color-button);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n vertical-align: middle;\n white-space: nowrap;\n}\n.ds-badge--alt {\n background: color-mix(in srgb, var(--color-accent-alt) 30%, var(--color-surface));\n color: var(--color-heading);\n outline: var(--border-width) var(--border-style) var(--color-accent-alt);\n outline-offset: calc(var(--border-width) * -1);\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-accent-text);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-accent-text);\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* sidebar */\n.ds-sidebar {\n font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n}\n.ds-sidebar__item.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n float: right;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* notice */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border-radius: var(--radius-panel);\n font-size: var(--text-ui);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border: var(--border-width) var(--border-style) var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\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 font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__link {\n display: block;\n min-width: var(--space-5);\n padding: var(--space-1) var(--space-2);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n border-color: var(--color-border);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n font-weight: var(--weight-ui);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\\203A\";\n margin-right: var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n}\n\n/* dialog: a flat white box on a dimmed block; no shadow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--fill-panel);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-4) var(--space-5) 0;\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\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}\n.ds-dialog__close {\n color: var(--color-text-muted);\n font-size: var(--text-h2);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__body {\n padding: var(--space-3) 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-2);\n padding: var(--space-3) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* empty state */\n.ds-empty {\n padding: var(--space-6) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-3);\n color: var(--color-border-strong);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\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}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n}\n\n/* footer */\n.ds-footer {\n background: var(--fill-inverse);\n color: var(--color-text-muted);\n padding: var(--space-6) var(--space-4) var(--space-5);\n font-size: var(--text-ui);\n}\n.ds-footer__inner {\n max-width: var(--size-page);\n margin: 0 auto;\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n}\n.ds-footer__title {\n margin: 0 0 var(--space-2);\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n}\n.ds-footer__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__item {\n padding: var(--space-1) 0;\n}\n.ds-footer__link {\n color: var(--color-text-muted);\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-inverse-text);\n}\n.ds-footer__base {\n display: flex;\n justify-content: space-between;\n margin-top: var(--space-6);\n padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 16%, transparent);\n font-size: var(--text-small);\n}\n.ds-footer__legal {\n display: flex;\n gap: var(--space-4);\n}\n\n/* narrow windows: columns stack, the navigation wraps under the brand, wide tables scroll inside their own box */\n@media (max-width: 760px) {\n .ds-band {\n padding: var(--space-6) var(--space-3);\n }\n .ds-band--tight {\n padding-top: var(--space-3);\n padding-bottom: var(--space-3);\n }\n .ds-band__split {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-5);\n }\n .ds-band__side,\n .ds-band__main,\n .ds-band__half,\n .ds-band__inset {\n flex: 0 0 auto;\n }\n .ds-band__lead {\n margin-bottom: var(--space-5);\n }\n .ds-nav {\n padding: var(--space-2) var(--space-3) 0;\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2) var(--space-3);\n min-height: 0;\n }\n .ds-nav__links {\n order: 3;\n flex: 0 0 100%;\n gap: var(--space-4);\n }\n .ds-nav__link {\n padding: var(--space-2) 0;\n }\n .ds-hero {\n padding: var(--space-6) var(--space-3);\n }\n .ds-hero__inner {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-5);\n }\n .ds-hero__copy,\n .ds-hero__art {\n flex: 0 0 auto;\n }\n .ds-hero__block {\n height: var(--space-7);\n }\n .ds-hero__block--short {\n height: var(--space-6);\n }\n .ds-page-header {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n }\n .ds-page-header__inner {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-grid,\n .ds-grid--3 {\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-4) var(--space-3);\n }\n .ds-grid__tile {\n height: var(--space-7);\n }\n .ds-grid__icon {\n width: var(--space-5);\n height: var(--space-5);\n padding: var(--space-2);\n }\n .ds-plans {\n grid-template-columns: 1fr;\n }\n .ds-stat {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4) 0;\n }\n .ds-stat__item {\n padding: 0 var(--space-3);\n }\n .ds-stat__item:nth-child(odd) {\n padding-left: 0;\n border-left: 0;\n }\n .ds-stat__figure {\n font-size: var(--text-h1);\n }\n .ds-tabs {\n gap: var(--space-4);\n overflow-x: auto;\n }\n .ds-tabs__tab {\n white-space: nowrap;\n }\n .ds-table {\n min-width: 64ch;\n }\n .ds-form__row {\n flex-direction: column;\n gap: var(--space-3);\n }\n .ds-dialog {\n padding: var(--space-4) var(--space-3);\n }\n .ds-dialog__head {\n padding: var(--space-3) var(--space-3) 0;\n }\n .ds-dialog__body {\n padding: var(--space-3);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n padding: var(--space-3);\n }\n .ds-footer {\n padding: var(--space-5) var(--space-3) var(--space-4);\n }\n .ds-footer__cols {\n grid-template-columns: 1fr 1fr;\n }\n .ds-footer__base {\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin-top: var(--space-5);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: flat design landing specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n Sign in\n Try it free\n
\n
\n
\n\n
\n
\n
\n
\n

Invoices sent, tracked and paid from one tidy place

\n

chronoskin keeps the books for small studios, so the month closes itself while you get on with the work.

\n
\n Start a free trial\n See how it works\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n

Everything the month needs

\n

Four tools that share one ledger.

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

Invoices

\n

Send a bill in under a minute and see when it is opened.

\n See the list\n
\n
\n
\n \n
\n

Payments

\n

Cards and bank transfers land in the same ledger.

\n Open an invoice\n
\n
\n
\n \n
\n

Reports

\n

Cash flow by week, client or project, ready to export.

\n See the month\n
\n
\n
\n \n
\n

Time

\n

Track hours on any device and bill them in one step.

\n Compare plans\n
\n
\n
\n
\n\n
\n
\n
\n
\n

Built for the last day of the month

\n

Most bookkeeping is done in a hurry. chronoskin is laid out for that hour.

\n

Every screen shows one thing: what is owed, what is paid, or what is late. There are no dashboards to configure and nothing to install.

\n

What you get on day one

\n
    \n
  • Unlimited invoices and estimates
    • \n
  • Automatic reminders for late payers
    • \n
  • A ledger your accountant can read
    • \n
\n

For developers

\n

Create an invoice from your own app with a single call to POST /v1/invoices and receive a webhook when it is paid.

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

Studio plan

\n
\n $19\n

per month for up to five people. Cancel whenever you like.

\n See all plans\n
\n
\n
\n
\n
\n\n
\n
\n
\n

From the team

\n

Notes on what shipped and what is next.

\n
\n
\n

chronoskin now exports straight to your accountant

\n

4 May 2015. A single export produces the ledger, the receipts and the tax summary in the layout most practices ask for.

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

Product news

\n

What changed in the last three months.

\n \n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Home
    2. \n
  2. Pricing
    3. \n
\n
\n
\n
\n
\n
\n

Pricing

\n

One price per studio, whatever you bill. Thirty days free on every plan.

\n
\n
\n Start a free trial\n
\n
\n
\n\n
\n
\n
\n
\n

Solo plan

\n
\n $9\n

per month for one person. Unlimited invoices, five clients.

\n Choose Solo\n
\n
\n
\n

Studio plan Most chosen

\n
\n $19\n

per month for up to five people. Unlimited clients and reminders.

\n Choose Studio\n
\n
\n
\n

Agency plan

\n
\n $49\n

per month for twenty people. Projects, time tracking and reports.

\n Choose Agency\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n

Can I change plan later?

\n

Yes, in either direction and at any time. The new price starts with the next invoice we send you.

\n

What happens after the trial?

\n

Nothing, unless you choose a plan. Your invoices stay readable and can be exported for a year.

\n
\n
\n

Do you take a share of payments?

\n

No. Card processors charge their own fee; chronoskin adds nothing on top of the monthly price.

\n

Is there a contract?

\n

There is not. Plans are paid month by month and stop on the day you cancel.

\n
\n
\n

\n Taxes and receipts\n How billing works\n Discounts for charities\n Ask the team\n Terms of service\n

\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Home
    2. \n
  2. Invoices
    3. \n
  3. March 2015
    4. \n
\n
\n
\n
\n
\n
\n

Invoices

\n

Everything billed in March, with what is still owed.

\n
\n
\n Defaults\n New invoice\n
\n
\n
\n\n
\n
\n \n
\n
    \n
  • $18,420Billed this month
    • \n
  • $12,960Paid
    • \n
  • $4,180Outstanding
    • \n
  • 3Invoices overdue
    • \n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Amounts in US dollars. Showing 5 of 23 invoices.
InvoiceClientDueStatusAmount
0142Harbour Print Workshop28 March 2015Due soon$1,280.00
0141Linden & Vale21 March 2015Paid$3,400.00
0140Northgate Ceramics14 March 2015Overdue$640.00
0139Field Office12 March 2015Paid$2,150.00
0138Quarry Lane Books9 March 2015Paid$975.00
\n
\n
\n \n
\n New\n Beta\n 12\n Paid\n Due soon\n Overdue\n
\n
\n
\n
\n
\n
\n\n
\n
\n

Estimates

\n

Quotes you have sent that are not invoices yet.

\n
\n \n

No estimates yet

\n

Estimates you send to clients will appear here until they are accepted.

\n Create the first one\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Home
    2. \n
  2. Invoices
    3. \n
  3. 0142
    4. \n
\n
\n
\n
\n
\n
\n

Invoice 0142 Due soon

\n

Harbour Print Workshop, due 28 March 2015.

\n
\n
\n Back to the list\n
\n
\n
\n\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Hours are billed in quarters. Tax is not charged on this invoice.
ItemHoursRateAmount
Poster series, design9.00$80.00$720.00
Proofs and corrections3.50$80.00$280.00
Print supervision2.00$80.00$160.00
Paper samples1.00$120.00$120.00
\n
\n\n
\n Send invoice\n Preview\n Download PDF\n Delete draft\n \n
\n\n
\n
\n
\n

Send this invoice?

\n ×\n
\n
\n

Invoice 0142 for $1,280.00 will be emailed to the client today.

\n
\n
\n Cancel\n Send invoice\n
\n
\n
\n
\n\n
\n
\n

Amount due

\n
\n $1,280\n

Due in 6 days, on 28 March 2015. Terms: 14 days.

\n Change the terms\n
\n
\n \n
\n

Client

\n
\n

Harbour Print Workshop
Unit 4, Tannery Yard
accounts@harbourprint.example

\n All invoices for this client\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Home
    2. \n
  2. Settings
    3. \n
  3. Invoice defaults
    4. \n
\n
\n
\n
\n
\n
\n

Invoice defaults

\n

These details are printed on every new invoice.

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

Good to know

\n
\n

Changes apply from the next invoice you send. Drafts pick them up when you open them.

\n See your drafts\n
\n
\n
\n\n
\n
\n

Heads up. Invoices already sent keep the details they were sent with.

\n

We could not save the defaults. Check the highlighted field and try again.

\n
\n
\n
\n \n \n
\n \n \n \n \n
\n \n Cancel\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.flat-design.landing.s01.p01.t01.u01\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"flat-design\",\n \"years\": [\n 2013,\n 2016\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-fl-1111\",\n \"short\": \"v1-fl-1111\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f8f8f8;\n --color-surface-strong: #efefef;\n --color-bar: #ffffff;\n --color-bar-text: #2e2f33;\n --color-bar-alt: #efefef;\n --color-bar-alt-text: #686868;\n --color-inverse: #262626;\n --color-inverse-text: #ffffff;\n --color-text: #686868;\n --color-text-muted: #919496;\n --color-heading: #2e2f33;\n --color-heading-alt: #503750;\n --color-link: #007ee5;\n --color-link-quiet: #919496;\n --color-link-visited: #007ee5;\n --color-link-hover: #2895f1;\n --color-link-active: #1570a6;\n --color-border: #d9dadc;\n --color-border-strong: #c1c3c6;\n --color-border-muted: #efefef;\n --color-accent: #d65a3e;\n --color-accent-text: #ffffff;\n --color-accent-alt: #f8c433;\n --color-fill-1: #1570a6;\n --color-fill-2: #d65a3e;\n --color-fill-3: #f8c433;\n --color-fill-4: #2ebd59;\n --color-button: #1d81e2;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #007ee5;\n --color-input: #ffffff;\n --color-input-text: #2e2f33;\n --color-input-border: #c1c3c6;\n --color-disabled: #efefef;\n --color-disabled-text: #919496;\n --color-danger: #e81020;\n --color-danger-surface: #fff8f8;\n --color-success: #2ebd59;\n --color-warning: #f59b23;\n --color-notice: #e3f2ff;\n --color-notice-text: #1570a6;\n --color-focus: #007ee5;\n --color-shadow: rgb(0 0 0 / 0.15);\n --color-overlay: rgb(0 0 0 / 0.35);\n}\n\n/* @part type */\n:root {\n --font-body: \"Open Sans\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: \"Open Sans\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: \"Open Sans\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Menlo, Consolas, \"Liberation Mono\", monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 18px;\n --text-display: 38px;\n --text-h1: 32px;\n --text-h2: 24px;\n --text-h3: 20px;\n --line-body: 1.55;\n --line-heading: 1.3;\n --line-display: 1.25;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 300;\n --weight-display: 300;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: none;\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: 5px;\n --radius-panel: 0;\n --radius-pill: 500px;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: 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-link-hover);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }