{ "id": "v1-gl-3ba2", "long_id": "v1.glassmorphism.app.s03.p11.t10.u02", "name": "Glassmorphism showcase app", "era": { "slug": "glassmorphism", "code": "gl", "name": "Glassmorphism", "years": [ 2020, 2026 ], "description": "Frosted glass, 2020 to 2026: translucent panels with a blurred backdrop, a thin light border and a soft shadow, floating over a colourful gradient." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "Glassmorphism is the frosted-glass interface style of 2020 to 2026: translucent cards with a blurred backdrop, a 1px light border and a soft tinted shadow, floating over a sky of colour that fades down the page, with pale translucent bubbles drifting in it. It was common in product pages, generators and dashboards, and in its light form it used white glass over pale blue with dark navy text. This pack is the showcase form of it: a wide centred hero over a stage of overlapping tilted glass cards, bands of free-standing cards set far apart, a three-column feature row, and the navigation as a dock floating at the bottom of the window.", "url": "https://chrono.skin/s/v1-gl-3ba2", "preview_url": "https://chrono.skin/s/v1-gl-3ba2/specimen.html", "files": { "STYLE.md": "# Glassmorphism showcase app\n\n## Summary\n\nGlassmorphism is the frosted-glass interface style of 2020 to 2026: translucent cards with a blurred backdrop, a 1px light border and a soft tinted shadow, floating over a sky of colour that fades down the page, with pale translucent bubbles drifting in it. It was common in product pages, generators and dashboards, and in its light form it used white glass over pale blue with dark navy text. This pack is the showcase form of it: a wide centred hero over a stage of overlapping tilted glass cards, bands of free-standing cards set far apart, a three-column feature row, and the navigation as a dock floating at the bottom of the window.\n\n## Layout\n\n- Content column: `--size-page` (1120px), centred, with `--space-4` (24px) side padding below that width. The backdrop (`--fill-page` on `.ds-page`) fills the viewport. There is no bar at the top or bottom; every surface is a rounded card standing free on the backdrop.\n- Navigation: `.ds-nav` is a dock, a rounded strip of frosted bar glass, centred and sticky 24px above the bottom edge of the window. Each item is `--size-dock` (76px) wide at least, an icon above a short label. The top of the page only carries `.ds-page__top`: the brand on the left and one secondary button on the right, on the backdrop.\n- Home page: brand row, then announcements (`.ds-notice__stack`, centred, at most 76 characters wide), then the `.ds-hero`: eyebrow pill, display title, lead and two large buttons, all centred, and below them the `.ds-hero__stage` (`--size-stage`, 340px high) with three overlapping tilted cards and two orbs. The `.ds-stat` strip is pulled up 64px over the foot of the stage and inset 64px on each side.\n- Bands: the rest of the home page is a series of `.ds-page__band` sections `--space-7` (104px) apart. A band opens with a centred `.ds-page__heading` and `.ds-page__sub` on the backdrop, 40px above its content. Content is either the three-column `.ds-grid`, or a `.ds-page__split`: a wide column on the left and a `--size-aside` (340px) column on the right holding the `.ds-sidebar` and small cards in a `.ds-page__stack`. The aside is always on the right.\n- Inner pages have no hero and no stage. Their one band is `.ds-page__band--first`, 16px under the brand row, and starts with the `.ds-breadcrumb` trail centred on the backdrop; 16px below it the `.ds-page-header` is a full-width glass card with the title and one line on the left and the actions on the right. Under it a `.ds-page__stack` at 24px gaps. A working page has `.ds-tabs` as a centred row of pills, the table as one wide card and the pagination with previous and next pushed to the two ends, or the form in a wide card with its fields in two columns and the dialog as a dimmed band under it; nothing sits beside a table or a form. A reading or overview page uses the `.ds-page__split`: list cards or the prose card on the left, small cards, a notice and the empty state in the aside.\n- Views: the specimen is one site with five screens, one showing at a time; the brand row, the footer and the dock are written once around them. `desk` is the home view (announcements, hero, figures, the tile grid, the week's activity beside the jump list). `invoices` is the list (tabs, table, pagination). `invoice` is one invoice being edited: the form card and, under it, the open dialog its Void button raises. `clients` is the client list beside an error notice and two small cards. `reminders` is the reading page: running text and link states beside a note card and the empty list of disputed invoices. Each view is a `.ds-view` section; `.ds-nav__link` is marked current from the address, and `invoice` marks the Invoices item.\n- The footer is a rounded card of bar glass 104px below the last band, with four columns. `.ds-page` is a column as tall as the window and `.ds-page__views` (the `
` around the views) takes the spare height, so on a page shorter than the window the footer and, under it, the dock still sit at the bottom edge instead of the dock hanging in the middle of the window.\n- Spacing scale: `--space-1` 4px (icon to label in the dock, badge dot), `--space-2` 8px (label to control, gaps between pills and notices), `--space-3` 16px (row padding, gap between list cards and buttons), `--space-4` 24px (card padding, gap between cards, form gap), `--space-5` 40px (large card padding, heading to content, hero top), `--space-6` 64px (stat strip overlap and inset, dialog band padding, list tile size), `--space-7` 104px (between bands, textarea height).\n- Controls are `--size-control` (44px) high; large hero buttons 60px.\n- Glass: cards use `backdrop-filter: blur(var(--backdrop-blur))`, the surface token for how strongly glass blurs what lies behind it (10px in this pack's surface set); the dock, the stat strip, the footer and the dialog, the strongest glass, use three times that: `blur(calc(var(--backdrop-blur) * 3))` (30px). Never put a blurred element inside another blurred element.\n- Below 900px the split, the form and the footer become one column, the grid two, the stage is hidden and the stat strip stacks. Below 600px the side padding drops to 16px, bands sit 64px apart, the hero title drops to `--text-h1`, the grid is one column, tabs, pagination and button rows wrap, table columns marked `.ds-table__opt` are hidden, the footer shows its three link columns side by side under its first block, and the dock items lose their minimum width so the dock fits the window.\n- On a phone (600px and below) the dock stays at the bottom of the window with an icon above each label; its `.ds-nav__link` items have no minimum width and a `--space-2` gap so the whole dock fits.\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- Two families: headings and the hero title are a text serif (`--font-heading`: New York, Iowan Old Style, Source Serif 4, Georgia) at regular weight; body and controls are the system sans. The references used commercial serif and sans faces; these are the closest system and open stacks.\n- `--weight-heading` and `--weight-display` are 400: the serif does the work, not the weight. `--weight-ui` 500, `--weight-bold` 600.\n- Sizes: `--text-base` 16px, `--text-ui` 15px, `--text-small` 13px, `--text-large` 20px, `--text-h3` 18px, `--text-h2` 24px, `--text-h1` 32px, `--text-display` 60px.\n- Line height: `--line-body` 1.4, `--line-heading` 1.2, `--line-display` 1.1.\n- No uppercase and no tracking from tokens; links are marked by colour and underlined on hover only.\n\n- Backdrop: `--color-page` is a blue-black (7 8 10) with a fine grid of faint dots and one ember glow: `--color-fill-1` (150 28 36), a dark crimson, falling from the top centre and returning at the edges further down. `--color-fill-2` (graphite, 67 67 69), `--color-fill-3` (62 43 104) and `--color-fill-4` (80 70 228) are used only as tile tints.\n- Glass is almost clear: `--color-surface` white at 5%, `--color-surface-alt` 9%, `--color-surface-strong` 16%. The edge does the work: `--color-border` white at 12%, `--color-border-strong` white at 40% for dialogs, notices and secondary buttons, `--color-border-muted` 6% for hairlines.\n- Dark glass: `--color-bar` (black at 60%) for bars, table heads and code blocks, `--color-bar-alt` (17 18 20 at 70%) for tabs, footer and status badges, `--color-input` (17 18 20 at 80%) for form controls.\n- Text is white; `--color-text-muted` is neutral grey (156 156 157) with no colour cast, and `--color-heading-alt` is light grey (230 230 230).\n- `--color-button` is a light grey solid (230 230 230) with near-black text, the brightest thing on the page. The secondary button is clear glass with the bright edge.\n- `--color-accent`, `--color-link` and `--color-focus` are sky blue (86 194 255) with near-black text on it. `--color-accent-alt` is indigo (80 70 228) with white text.\n- Status: `--color-danger` is the coral red of the glow family (255 99 99), `--color-success` 89 212 153, `--color-warning` 255 197 49. `--color-notice` is the accent at 10% with light grey text.\n- `--color-shadow` and `--color-overlay` are black at 60%.\n\n## Components\n\n- `.ds-page`: on ``; paints the backdrop and sets the base type. `.ds-page__inner` is the width container, `.ds-page__views` the block around the views that takes the spare height of the window, `.ds-page__top` the brand row with the `.ds-brand` and `.ds-page__mark`, `.ds-page__band` a section 104px below the previous one (`--first` for the one band of an inner page), `.ds-view` one screen of the specimen, `.ds-page__heading` and `.ds-page__sub` its centred heading and lead on the backdrop, `.ds-page__split` the wide-plus-aside grid, `.ds-page__stack` a vertical stack at 24px, `.ds-page__icon` a 22px icon.\n- `.ds-brand`: the site's mark and name, at the left of `.ds-page__top`, on the backdrop: `.ds-brand__mark` is a small tile (30px) dressed like the primary button (`--fill-button`, `--color-button-text`, a 1px `--color-border` edge, `--radius-control`, `--shadow-control`) holding the mark as inline SVG, `.ds-brand__name` is the name in the heading font at `--text-h2` in `--color-heading`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the dock: a floating strip of bar glass at the bottom of the window, placed last in ``. `.ds-nav__list`, `.ds-nav__link` (icon above label); the current item is `is-current`, a pane of light glass with a border. Four to six items.\n- `.ds-hero`: centred page introduction: `.ds-hero__eyebrow` (a glass pill with one short fact), `.ds-hero__title` at the display size, `.ds-hero__lead`, `.ds-hero__actions`, then `.ds-hero__stage` with `.ds-hero__orb` (`--a`, `--b`) and three `.ds-hero__card` plates (`--a` left, `--b` centre and in front, `--c` right) that overlap and tilt; each holds `.ds-hero__caption` and `.ds-hero__figure`. One stage per page.\n- `.ds-page-header`: head of an inner page, used instead of the hero: a full-width glass card with `.ds-page-header__text` (`.ds-page-header__title` at 28px, `.ds-page-header__lead` at 20px) and `.ds-page-header__actions` on the right, at most one primary button. Put the breadcrumb directly above it.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`. `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a code block on bar glass. Put prose inside a `.ds-panel`.\n- `.ds-link`: underlined link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for navy, undecorated links in tables and lists. `.ds-link__sample` is a row of links.\n- `.ds-button`: primary, a solid blue pill, 44px high, uppercase. `.ds-button--secondary` is a glass button with a light blue border; `.ds-button--danger` is the destructive action: a glass button tinted red at 70% with a red border, solid red on hover; use it once per group. `.ds-button--large` for the hero; `is-disabled` or `disabled` for the disabled state. `.ds-button__row` lays out a group.\n- `.ds-form`: a two-column grid of fields inside a `.ds-panel`. `.ds-form__field` stacks a bold `.ds-form__label` over a control; `.ds-form__field--wide` spans both columns. Controls: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (inside `.ds-form__select-wrap` with a `.ds-form__chevron`), `.ds-form__range`, `.ds-form__check` with `.ds-form__checkbox`. An invalid input takes `is-error` and is followed by `.ds-form__error`; `.ds-form__hint` is help text. `.ds-form__actions` is the button row across the bottom, above a hairline.\n- `.ds-table`: data table as one wide glass card: a head row on bar glass with bold 14px labels, rows 16px padded and divided by hairlines. `.ds-table__num` right-aligns a numeric column, `.ds-table__opt` marks a column hidden below 600px, `.ds-table__meta` is muted text, `is-hover` on a row tints it.\n- `.ds-list`: a stack of separate glass cards 16px apart, one per item: `.ds-list__tile` (a 64px tinted square with an icon; `--alt` for the second tint), `.ds-list__body` with `.ds-list__title` (20px, bold) and `.ds-list__meta`, then a quiet link.\n- `.ds-panel`: a free-standing glass card, 40px padded, 14px radius, with a 24px `.ds-panel__title` and `.ds-panel__body`. `.ds-panel--compact` (24px padding) for the aside column.\n- `.ds-grid`: three columns of large feature cards, six cells in two rows. `.ds-grid__cell` with `--1` to `--4` picks the tint; inside, a round `.ds-grid__chip` with an icon, the `.ds-grid__label` (20px, bold) and a muted `.ds-grid__meta`.\n- `.ds-stat`: the row of summary figures: one strip of bar glass laid over the foot of the hero stage. Each `.ds-stat__item` is centred, `.ds-stat__value` (28px, bold) above `.ds-stat__label`. Three to five items. Use it once, on the home page.\n- `.ds-tabs`: a centred row of separate pills, `.ds-tabs__tab`; the selected one is `is-current` and takes the accent fill. Use it for view switches under the page header.\n- `.ds-badge`: pill for counts and markers: blue by default, `.ds-badge--alt` light blue for \"new\", `.ds-badge--glass` neutral glass for quiet counts. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: a frosted pill with navy text, a 1px ring and a leading 8px dot in the status colour.\n- `.ds-sidebar`: a glass card in the right column of a split band: `.ds-sidebar__heading` (16px, bold), `.ds-sidebar__list` with hairlines between items, `.ds-sidebar__link` with `is-current`.\n- `.ds-notice`: announcement above the hero, navy glass with white text; `.ds-notice--error` is pale pink glass with a red border, icon and title. `.ds-notice__icon`, `.ds-notice__title`; `.ds-notice__stack` centres and stacks several.\n- `.ds-pagination`: row of glass cells; the first and last items are `.ds-pagination__edge` (and `--end`) so previous and next sit at the two ends of the column with the numbers centred. `.ds-pagination__link`; the current page is `is-current` and takes the primary button fill.\n- `.ds-breadcrumb`: small centred trail above the page header, `.ds-breadcrumb__item` separated by arrows, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a dimmed band (`--color-overlay`) with a centred `.ds-dialog__box` of strongly blurred glass, 560px wide: `.ds-dialog__title` and `.ds-dialog__body` left-aligned, `.ds-dialog__actions` right-aligned with the confirming button last. The box is frosted glass over the canvas colour (`--color-surface-alt` laid over `--color-canvas` at 82%, written with `color-mix()`), so its text keeps the contrast it has on the page under any palette.\n- `.ds-empty`: empty state as a small left-aligned glass card: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-footer`: a rounded card of bar glass in the column: a first block with `.ds-footer__brand` and one line, then three columns of `.ds-footer__heading` over `.ds-footer__links` with `.ds-footer__link`.\n- `.ds-menu`: a drop-down of the strongest glass under its `.ds-menu__trigger`, shown on hover or focus (or with `is-open`): `.ds-menu__list` of `.ds-menu__link` rows with an optional `.ds-menu__meta`. Use it for the account or workspace menu; `.ds-menu__group` sets it beside a button, `.ds-menu__list--start` hangs it from the left edge.\n- `.ds-accordion`: one sheet of glass of `
` sections: `.ds-accordion__item`, `.ds-accordion__summary` with a chevron that turns when open, `.ds-accordion__body`. Use it for questions and for settings that are rarely opened; `.ds-accordion--flush` drops its own sheet when it sits inside another panel.\n- `.ds-tooltip`: a round hint mark inside a form label; `.ds-tooltip__tip` is an inverted block above it, shown on hover or focus (or with `is-open`). One sentence.\n- `.ds-switch`: an on/off row: `.ds-switch__text` with a `.ds-switch__hint`, the hidden `.ds-switch__input` checkbox and the drawn `.ds-switch__track`, which takes the accent fill when on. `.ds-switch__group` is the tinted box that holds a few of them, divided by hairlines.\n- `.ds-progress`: a thin track with a `.ds-progress__bar` in the accent fill; width classes `--15`, `--25`, `--40`, `--65`, `--75`, `--85`, `--90`. Use it under a figure that is a share of a whole; `.ds-progress__label` is an optional line above it.\n- `.ds-avatar`: a round account picture drawn from initials, in the accent fill; `--2` to `--4` take a tint from `--color-fill-*`, `--large` is the profile size. `.ds-avatar__row` sets it beside `.ds-avatar__name` and `.ds-avatar__meta`.\n\n## Never\n\n- `row-gap <= 16px`: list cards sit 16px apart; table rows touch.\n- `block-gap <= 104px`: bands sit 104px apart and nothing is further apart than that.\n- `content-width <= 1120px`: the column is capped while the backdrop fills the viewport.\n- `font-size <= 60px`: the hero title is the largest text.\n- `font-size >= 13px`: meta text and badges are the smallest text.\n- `font-weight <= 600`: headings are regular weight; 600 is for bold only.\n- `font-families <= 3`: one serif for headings, one sans, one monospace.\n- `line-height <= 1.5`: body text is set at 1.4.\n- `letter-spacing = 0`: no tracking on any text.\n- `underlined-links <= 25%`: underline is a hover state.\n- `uppercase-text <= 10%`: uppercase is for small labels only.\n- `border-width <= 1px`: every border is a 1px hairline.\n- `border-radius <= 30px`: wells are 10px, the sheet, tiles and controls 20px; only badges and the navigation pill reach 30px.\n- `box-shadow-blur <= 40px`: sheet shadows blur 38px, the dialog 40px.\n- `gradient-fills <= 10%`: glass is a flat translucent fill; the only gradient is the backdrop.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new container starts from `.ds-panel` (fill, 1px border, radius, shadow and blur together, never one without the others), a new row of items from `.ds-list__item`, a new control from `.ds-button--secondary` or `.ds-form__input`, an overlay from `.ds-dialog__box`, anything that floats over the page from `.ds-nav`. A new topic becomes a new `.ds-page__band` with its own centred heading, not a card squeezed beside an existing one. Use tokens only; for a shade or size with no token use `color-mix()` over tokens with `transparent`, or `calc()` over `--space-*`. Keep opaque fills to buttons and badges, keep every card free-standing with the backdrop visible between cards, and never add a full-width bar.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1120px;\n --size-aside: 340px;\n --size-dialog: 560px;\n --size-dock: 76px;\n --size-control: 44px;\n --size-stage: 340px;\n --size-card: 300px;\n --size-orb: 150px;\n --size-chip: 48px;\n --size-icon: 22px;\n --size-dot: 8px;\n --size-thumb: 20px;\n --size-track: 4px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 16px;\n --space-4: 24px;\n --space-5: 40px;\n --space-6: 64px;\n --space-7: 104px;\n}\n\n/* shell: full backdrop, one wide column, bands stacked far apart */\n.ds-page {\n display: flex;\n flex-direction: column;\n margin: 0;\n min-height: 100vh;\n background: var(--fill-page);\n background-color: var(--color-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/* the column fills the window, so on a short page the footer and the dock still rest at its bottom edge */\n.ds-page__inner {\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4);\n}\n.ds-page__views {\n flex: 1 0 auto;\n}\n.ds-page__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) 0;\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-icon) + var(--space-2));\n height: calc(var(--size-icon) + var(--space-2));\n flex: none;\n padding: var(--space-1);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-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 text-shadow: var(--shadow-text);\n}\n.ds-page__band {\n margin-top: var(--space-7);\n}\n.ds-page__band--first {\n margin-top: var(--space-3);\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.ds-page__heading {\n max-width: 28ch;\n margin: 0 auto;\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-align: center;\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page__sub {\n max-width: 56ch;\n margin: var(--space-2) auto var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n text-align: center;\n}\n.ds-page__split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n gap: var(--space-4);\n align-items: start;\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-page__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n}\n\n/* nav: a dock of dark glass that floats at the bottom edge of the window */\n.ds-nav {\n position: sticky;\n bottom: var(--space-4);\n z-index: 3;\n display: flex;\n align-items: stretch;\n gap: var(--space-1);\n width: fit-content;\n max-width: calc(100% - 2 * var(--space-4));\n margin: var(--space-5) auto var(--space-4);\n padding: var(--space-2);\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-nav__list {\n display: flex;\n align-items: stretch;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-1);\n min-width: var(--size-dock);\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#desk\"],\n.ds-page:has(#desk:target) .ds-nav__link[href=\"#desk\"],\n.ds-page:has(#invoices:target) .ds-nav__link[href=\"#invoices\"],\n.ds-page:has(#invoice:target) .ds-nav__link[href=\"#invoices\"],\n.ds-page:has(#clients:target) .ds-nav__link[href=\"#clients\"],\n.ds-page:has(#reminders:target) .ds-nav__link[href=\"#reminders\"] {\n background: var(--color-surface);\n border-color: var(--color-border);\n}\n\n/* breadcrumb: centred trail above the page header */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\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: \"→\";\n margin-right: var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* page header: a band of glass, title left and action right */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n margin-top: var(--space-3);\n padding: var(--space-5);\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-page-header__text {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\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 text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* hero: centred text, then a stage of overlapping tilted glass cards */\n.ds-hero {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-5) 0 0;\n text-align: center;\n}\n.ds-hero__eyebrow {\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface-alt);\n border-radius: var(--radius-pill);\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-hero__title {\n max-width: 18ch;\n margin: var(--space-3) 0 0;\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 text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 52ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3);\n margin-top: var(--space-4);\n}\n.ds-hero__stage {\n position: relative;\n width: 100%;\n height: var(--size-stage);\n margin-top: var(--space-5);\n text-align: left;\n}\n.ds-hero__orb {\n position: absolute;\n width: var(--size-orb);\n height: var(--size-orb);\n border-radius: 50%;\n background: radial-gradient(circle at 30% 25%, var(--color-fill-4), var(--color-fill-2));\n}\n.ds-hero__orb--a {\n top: 0;\n left: 27%;\n}\n.ds-hero__orb--b {\n top: 44%;\n left: 82%;\n background: radial-gradient(circle at 30% 25%, var(--color-accent), var(--color-fill-3));\n}\n.ds-hero__card {\n position: absolute;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n width: var(--size-card);\n padding: var(--space-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-hero__card--a {\n top: 22%;\n left: 12%;\n transform: rotate(-10deg);\n}\n.ds-hero__card--b {\n top: 6%;\n left: calc(50% - var(--size-card) / 2 - var(--space-4));\n z-index: 1;\n width: calc(var(--size-card) + 2 * var(--space-4));\n padding: var(--space-5) var(--space-4);\n transform: rotate(-3deg);\n}\n.ds-hero__card--c {\n top: 28%;\n left: 64%;\n transform: rotate(8deg);\n}\n.ds-hero__caption {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-hero__figure {\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 text-shadow: var(--shadow-text);\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 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 margin-top: var(--space-5);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-4);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-4);\n}\n.ds-prose li + li {\n margin-top: var(--space-2);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-bar-alt);\n border-radius: var(--radius-control);\n color: var(--color-accent);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-prose__code {\n margin: var(--space-3) 0 0;\n padding: var(--space-3) var(--space-4);\n overflow-x: auto;\n background: var(--color-bar);\n border-radius: var(--radius-panel);\n color: var(--color-bar-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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 text-decoration: var(--link-decoration-hover);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\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__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-4);\n}\n\n/* buttons */\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: var(--space-2) var(--space-4);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\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 box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-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(--space-1);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n border-color: var(--color-border-strong);\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-text);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: linear-gradient(var(--color-surface-strong), var(--color-surface-strong)), var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 70%, transparent);\n border-color: var(--color-danger);\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-secondary-text);\n}\n.ds-button--large {\n min-height: calc(var(--size-control) + var(--space-3));\n padding: var(--space-3) var(--space-5);\n font-size: var(--text-large);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: not-allowed;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* panel: a free-standing glass card with a large heading */\n.ds-panel {\n padding: var(--space-5);\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-panel--compact {\n padding: var(--space-4);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-3);\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-panel__body > :first-child {\n margin-top: 0;\n}\n\n/* form: fields in two columns inside a wide card */\n.ds-form {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__field--wide {\n grid-column: 1 / -1;\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__textarea,\n.ds-form__select {\n width: 100%;\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\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 color: var(--color-input-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-disabled-text);\n opacity: 1;\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n resize: vertical;\n}\n.ds-form__select {\n appearance: none;\n -webkit-appearance: none;\n padding-right: var(--space-5);\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-3);\n width: var(--size-thumb);\n height: var(--size-thumb);\n transform: translateY(-50%);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus,\n.ds-form__textarea:focus,\n.ds-form__select:focus,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: 0;\n border-color: var(--color-focus);\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 font-weight: var(--weight-bold);\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 width: var(--size-thumb);\n height: var(--size-thumb);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__range {\n width: 100%;\n height: var(--size-control);\n margin: 0;\n background: transparent;\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-webkit-slider-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc((var(--size-track) - var(--size-thumb)) / 2);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n -webkit-appearance: none;\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n grid-column: 1 / -1;\n gap: var(--space-3);\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* table: a wide glass card, tall rows */\n.ds-table {\n width: 100%;\n overflow: hidden;\n border-collapse: separate;\n border-spacing: 0;\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list: every item is its own glass card, with a tinted tile in front */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-list__tile {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n flex: none;\n background-color: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n color: var(--color-text);\n}\n.ds-list__tile--alt {\n background-color: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-family: var(--font-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 text-decoration: var(--link-decoration-hover);\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/* grid: three columns of large tinted feature cards */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-5) var(--space-4);\n background-color: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-grid__cell--1 {\n background-color: color-mix(in srgb, var(--color-fill-1) 55%, transparent);\n}\n.ds-grid__cell--2 {\n background-color: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n}\n.ds-grid__cell--3 {\n background-color: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-grid__cell--4 {\n background-color: color-mix(in srgb, var(--color-fill-4) 55%, transparent);\n}\n.ds-grid__chip {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-chip);\n height: var(--size-chip);\n margin-bottom: var(--space-3);\n background: var(--color-surface-alt);\n border-radius: 50%;\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-text);\n}\n.ds-grid__label {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-grid__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* stats: one strip of dark glass pulled up over the foot of the hero stage */\n.ds-stat {\n position: relative;\n z-index: 2;\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n gap: var(--space-4);\n margin: calc(-1 * var(--space-6)) var(--space-6) 0;\n padding: var(--space-4) var(--space-5);\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n color: var(--color-bar-text);\n text-align: center;\n}\n.ds-stat__item {\n display: flex;\n flex-direction: column-reverse;\n}\n.ds-stat__label {\n font-size: var(--text-small);\n opacity: 0.8;\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-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n\n/* tabs: a centred row of separate pills */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n border-color: var(--color-border-strong);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-accent);\n border-color: transparent;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: none;\n vertical-align: middle;\n white-space: nowrap;\n}\n.ds-badge--alt {\n background: var(--color-accent-alt);\n color: var(--color-text);\n}\n.ds-badge--glass {\n background: var(--color-surface-alt);\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-text);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n background: var(--fill-bar-alt);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-success);\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-warning);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-danger);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* sidebar: a glass card in the right column of a split band */\n.ds-sidebar {\n padding: var(--space-4);\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-sidebar__heading {\n margin: 0 0 var(--space-3);\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-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__list > li + li {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-2);\n color: var(--color-link-quiet);\n font-size: var(--text-base);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n font-weight: var(--weight-bold);\n}\n\n/* notice: a centred announcement under the brand row */\n.ds-notice {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n color: var(--color-notice-text);\n font-size: var(--text-small);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-text);\n}\n.ds-notice--error .ds-notice__icon,\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n width: 100%;\n max-width: 76ch;\n margin: 0 auto;\n}\n\n/* pagination: previous and next at the ends, numbers in the middle */\n.ds-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__edge {\n flex: 1;\n}\n.ds-pagination__edge--end {\n display: flex;\n justify-content: flex-end;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n text-transform: var(--ui-transform);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n border-color: transparent;\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\n}\n\n/* dialog: a wide glass box on a dimmed band, text left, actions right */\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-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3));\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3));\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__body {\n margin-top: var(--space-2);\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n margin-top: var(--space-5);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n padding: var(--space-4);\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-empty__icon {\n width: var(--size-chip);\n height: var(--size-chip);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* footer: a rounded block of dark glass with link columns */\n.ds-footer {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n margin-top: var(--space-7);\n padding: var(--space-5);\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-footer__brand {\n display: block;\n margin-bottom: var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-footer__heading {\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-footer__links {\n display: flex;\n flex-direction: column;\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}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n.ds-menu {\n position: relative;\n}\n.ds-menu__trigger {\n cursor: pointer;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 5;\n display: none;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\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 -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-menu__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-accordion {\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n flex: none;\n border-right: var(--border-width) var(--border-style) currentColor;\n border-bottom: var(--border-width) var(--border-style) currentColor;\n transform: rotate(45deg);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::after {\n transform: rotate(-135deg);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(-1 * var(--space-1));\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 var(--space-4) var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: none;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n display: none;\n width: max-content;\n max-width: 26ch;\n padding: var(--space-2) var(--space-3);\n transform: translateX(-50%);\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-inverse-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-align: left;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n cursor: pointer;\n}\n.ds-switch + .ds-switch {\n margin-top: var(--space-3);\n padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch__text {\n min-width: 0;\n}\n.ds-switch__hint {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-switch__input {\n position: absolute;\n right: 0;\n width: calc(var(--size-thumb) * 2);\n height: var(--size-thumb);\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n width: calc(var(--size-thumb) * 2);\n height: calc(var(--size-thumb) + var(--space-1));\n flex: none;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: calc(var(--size-thumb) - var(--space-1));\n height: calc(var(--size-thumb) - var(--space-1));\n transform: translateY(-50%);\n background: var(--color-input-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch__track.is-on {\n background: var(--fill-accent);\n border-color: transparent;\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch__track.is-on::after {\n left: calc(100% - var(--size-thumb));\n background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch__track.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch__input:disabled + .ds-switch__track,\n.ds-switch__track.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n}\n.ds-progress {\n display: block;\n height: calc(var(--size-track) * 2);\n overflow: hidden;\n background: color-mix(in srgb, var(--color-text) 18%, transparent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin-bottom: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n flex: none;\n background: var(--fill-accent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-avatar__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-avatar__name {\n display: block;\n color: var(--color-text);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-avatar__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-menu__list--start {\n right: auto;\n left: 0;\n}\n.ds-menu__group {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-progress__bar--85 { width: 85%; }\n.ds-stat__value .ds-progress,\n.ds-stat__item > .ds-progress,\n.ds-grid__cell .ds-progress {\n width: 100%;\n min-width: calc(var(--space-6) * 2);\n margin-top: var(--space-2);\n}\n.ds-accordion--flush {\n background: transparent;\n border-color: transparent;\n box-shadow: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n.ds-accordion--flush .ds-accordion__summary,\n.ds-accordion--flush .ds-accordion__body {\n padding-left: 0;\n padding-right: 0;\n}\n.ds-switch__group {\n padding: var(--space-3) var(--space-4);\n background: var(--color-border-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-form__label .ds-tooltip {\n margin-left: var(--space-1);\n vertical-align: middle;\n}\n@media (max-width: 900px) {\n .ds-page__split,\n .ds-form,\n .ds-footer {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-stat {\n grid-auto-flow: row;\n margin: var(--space-4) 0 0;\n }\n .ds-hero__stage {\n display: none;\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-page__band {\n margin-top: var(--space-6);\n }\n .ds-page__band--first {\n margin-top: var(--space-2);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead,\n .ds-page__sub {\n font-size: var(--text-base);\n }\n .ds-page__heading {\n font-size: var(--text-h2);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page-header__text,\n .ds-list__body {\n flex-basis: 60%;\n }\n .ds-page-header,\n .ds-list__item,\n .ds-tabs,\n .ds-pagination,\n .ds-form__actions,\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-table th,\n .ds-table td {\n padding-left: var(--space-2);\n padding-right: var(--space-2);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-dialog {\n padding: var(--space-4) var(--space-3);\n }\n .ds-nav__link {\n min-width: 0;\n padding: var(--space-2) var(--space-1);\n }\n .ds-nav__list {\n gap: var(--space-2);\n }\n .ds-page__top,\n .ds-menu__group {\n gap: var(--space-2);\n }\n .ds-menu__group .ds-button {\n min-width: 0;\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n }\n .ds-brand__name {\n font-size: var(--text-large);\n }\n .ds-footer {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4) var(--space-3);\n padding: var(--space-4);\n }\n .ds-footer > :first-child {\n grid-column: 1 / -1;\n }\n}\n@media (max-width: 600px) {\n .ds-pagination {\n flex-wrap: nowrap;\n gap: var(--space-1);\n }\n .ds-pagination__link {\n min-width: calc(var(--size-control) - var(--space-2));\n padding: 0 var(--space-2);\n }\n}\n@media (max-width: 1100px) {\n .ds-form__label {\n position: relative;\n }\n .ds-form__label .ds-tooltip {\n position: static;\n }\n .ds-form__label .ds-tooltip__tip {\n left: 0;\n max-width: min(26ch, 100%);\n transform: none;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: get paid without the chasing\n\n\n\n\n\n
\n\n
\n \n \n chronoskin\n \n
\nNew invoice\n
\nOB\n\n
\n
\n
\n\n
\n\n
\n\n
\n
\n \n
Quarter closes on Friday. Invoices sent after 18:00 that day are dated to the next quarter.
\n
\n
\n \n
Two reminders were not delivered. The address for Fennick & Row bounced twice. Correct it before the next run.
\n
\n
\n\n
\n Spring quarter · 41 invoices so far\n

Get paid without the chasing

\n

Write an invoice in a minute, send it, and let the reminders go out on their own.

\n
\n New invoice\n See your clients\n
\n
\n \n \n
\n Invoice 0139 · Oakhollow Dairy\n 640.00\n Reminder goes out tomorrow\n
\n
\n Invoice 0142 · Marrow Lane Studio\n 1,280.00\n Paid in full, four days early\n
\n
\n Invoice 0144 · Tessel Print\n 2,015.50\n Draft, three lines\n
\n
\n
\n\n
\n
\n
Billed this quarter
\n
38,420
\n
\n
\n
Still outstanding
\n
6,115
\n
\n
\n
Paid on time
\n
87%
\n
\n
\n
Days to payment
\n
11.4
\n
\n
\n\n
\n

Everything between the work and the money

\n

Six parts of the workspace; the first three are a tap from the dock.

\n
\n
\n \n Invoices 41\n Numbered in order, with your terms and tax lines filled in.\n
\n
\n \n Clients 18\n One card per client: addresses, rates and what they still owe.\n
\n
\n \n Reminders New\n A polite note at seven days, a firmer one at twenty-one.\n
\n
\n \n Time sheets\n Hours logged against a client turn into invoice lines.\n
\n
\n \n Reports\n Billed, paid and overdue by month, ready for the accountant.\n
\n
\n \n Payments\n Bank transfers are matched to invoices by their reference.\n
\n
\n
\n\n
\n

This week on your desk

\n

What moved since Monday, newest first.

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

Next run

\n
\n Four reminders are queued for tomorrow at 09:00. See how reminders work.\n
\n
\n
\n
\n
\n\n
\n\n
\n
\n\n
    \n
  1. Workspace
    2. \n
  2. Invoices
    3. \n
  3. Spring quarter
    4. \n
\n\n
\n
\n
\n

Invoices

\n

Forty-one invoices dated between April and June.

\n
\n
\n Clients\n New invoice\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 \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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NumberClientStatusDueAmount
0142Marrow Lane StudioPaid14 May1,280.00
0141Halewick BoatyardDue soon19 May3,460.00
0139Oakhollow DairyDue soon17 May640.00
0131Oakhollow DairyOverdue21 April2,015.50
0128Fennick & RowPaid12 April890.00
0127Tessel PrintPaid9 April1,150.00
0125Marrow Lane StudioPaid2 April2,400.00
\n\n \n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. Workspace
    2. \n
  2. Invoices
    3. \n
  3. 0139
    4. \n
\n\n
\n
\n
\n

Invoice 0139 Due soon

\n

Oakhollow Dairy, 640.00, due on 17 May. One reminder has gone out.

\n
\n
\n Back to the list\n
\n
\n\n
\n

Edit invoice 0139

\n
\n
\n \n \n \n \n \n
\n
\n \n \n
\n
\n \n \n Enter the amount as a number, for example 640.00.\n
\n
\n \n \n Between 7 and 30 days after the invoice date.\n
\n
\n \n \n
\n \n
\n\n\n
\n
\n \n Save draft\n \n \n
\n
\n
\n\n
\n
\n

Void invoice 0139?

\n
The number stays used and the invoice is kept as void. Oakhollow Dairy receives a short note that nothing is owed.
\n
\n Keep invoice\n Void it\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. Workspace
    2. \n
  2. Clients
    3. \n
  3. All
    4. \n
\n\n
\n
\n
\n

Clients

\n

Eighteen clients, the ones who owe most first.

\n
\n
\n New invoice\n
\n
\n\n
\n
    \n
  • \n \n
    \n Oakhollow Dairy\n Owes 2,655.50 · two open invoices, one overdue\n
    \n Overdue\n
    • \n
  • \n \n
    \n Halewick Boatyard\n Owes 3,460.00 · one open invoice, due 19 May\n
    \n Due soon\n
    • \n
  • \n \n
    \n Marrow Lane Studio\n Nothing owed · paid 3,680.00 this quarter\n
    \n Paid up\n
    • \n
  • \n \n
    \n Tessel Print\n Nothing owed · one draft waiting\n
    \n Draft\n
    • \n
  • \n \n
    \n Fennick & Row\n Nothing owed · address bounced twice\n
    \n Paid up\n
    • \n
\n
\n
\n \n
One address bounces. Correct the address for Fennick & Row before the next run.
\n
\n
\n

Newest client

\n
\n Halewick Boatyard was added on Monday by Odile Brandt, at the day rate with terms of 14 days.\n
\n
\n
\n

Owed in total

\n
\n 6,115.50 across three invoices and two clients. Open invoices\n
\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. Workspace
    2. \n
  2. Invoices
    3. \n
  3. Reminders
    4. \n
\n\n
\n
\n
\n

Reminders

\n

Notes that go out on their own when an invoice is late.

\n
\n
\n See open invoices\n
\n
\n\n
\n
\n
\n

How reminders work

\n

A reminder is an ordinary message from you, sent on the day you would have remembered to write it.

\n

Each invoice has a due date and a grace period of three days. After that the first reminder goes out. Every message is stored with the field sent_as, so a reply reaches your own inbox.

\n

Stopping a run

\n

A run ends the moment a payment is matched. You can also pause it by hand for one client or for one invoice.

\n

A reminder is held back when

\n
    \n
  • the client has written to you in the last two days,
    • \n
  • part of the amount has already arrived,
    • \n
  • the invoice is marked as disputed.
    • \n
\n 
invoice: 0131\nfirst:   due + 3 days\nsecond:  due + 21 days\ntone:    polite
\n

\n Normal link\n Visited link\n Hovered link\n Active link\n Quiet link\n

\n
\n
\n
\n
\n

Tone of the notes

\n
\n First notes are short and friendly. Second notes name the amount and the day it was due. Nothing is sent at weekends.\n
\n
\n
\n
\nCan I stop one reminder?\n

Yes. Pause the run on the invoice and the next note waits until you start it again.

\n
\n
\nWho is the sender?\n

You are. Replies come to your own inbox.

\n
\n
\nWhat if the client has paid?\n

The run ends the moment the payment is matched.

\n
\n
\n
\n \n

No disputed invoices

\n

When a client questions an amount, mark the invoice and it will wait here.

\n Mark an invoice\n
\n
\n
\n
\n\n
\n
\n\n
\n\n \n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.glassmorphism.app.s03.p11.t10.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"glassmorphism\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"app\",\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-gl-3ba2\",\n \"short\": \"v1-gl-3ba2\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(7 8 10);\n --color-canvas: rgb(7 8 10);\n --color-surface: rgb(255 255 255 / 0.05);\n --color-surface-alt: rgb(255 255 255 / 0.09);\n --color-surface-strong: rgb(255 255 255 / 0.16);\n --color-bar: rgb(0 0 0 / 0.6);\n --color-bar-text: rgb(255 255 255);\n --color-bar-alt: rgb(17 18 20 / 0.7);\n --color-bar-alt-text: rgb(230 230 230);\n --color-inverse: rgb(230 230 230);\n --color-inverse-text: rgb(7 8 10);\n --color-text: rgb(255 255 255);\n --color-text-muted: rgb(156 156 157);\n --color-heading: rgb(255 255 255);\n --color-heading-alt: rgb(230 230 230);\n --color-link: rgb(86 194 255);\n --color-link-quiet: rgb(255 255 255);\n --color-link-visited: rgb(147 130 255);\n --color-link-hover: rgb(255 255 255);\n --color-link-active: rgb(255 99 99);\n --color-border: rgb(255 255 255 / 0.12);\n --color-border-strong: rgb(255 255 255 / 0.4);\n --color-border-muted: rgb(255 255 255 / 0.06);\n --color-accent: rgb(86 194 255);\n --color-accent-text: rgb(7 8 10);\n --color-accent-alt: rgb(80 70 228);\n --color-fill-1: rgb(150 28 36);\n --color-fill-2: rgb(67 67 69);\n --color-fill-3: rgb(62 43 104);\n --color-fill-4: rgb(80 70 228);\n --color-button: rgb(230 230 230);\n --color-button-text: rgb(7 8 10);\n --color-button-hover-text: rgb(0 0 0);\n --color-button-secondary: rgb(255 255 255 / 0.06);\n --color-button-secondary-text: rgb(255 255 255);\n --color-input: rgb(17 18 20 / 0.8);\n --color-input-text: rgb(255 255 255);\n --color-input-border: rgb(255 255 255 / 0.12);\n --color-disabled: rgb(31 32 37);\n --color-disabled-text: rgb(106 107 108);\n --color-danger: rgb(255 99 99);\n --color-danger-surface: rgb(255 99 99 / 0.1);\n --color-success: rgb(89 212 153);\n --color-warning: rgb(255 197 49);\n --color-notice: rgb(86 194 255 / 0.1);\n --color-notice-text: rgb(230 230 230);\n --color-focus: rgb(86 194 255);\n --color-shadow: rgb(0 0 0 / 0.6);\n --color-overlay: rgb(0 0 0 / 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n --font-heading: \"New York\", \"Iowan Old Style\", \"Source Serif 4\", Georgia, serif;\n --font-ui: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n --font-mono: Menlo, Monaco, \"Lucida Console\", \"Liberation Mono\", monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 15px;\n --text-large: 20px;\n --text-display: 60px;\n --text-h1: 32px;\n --text-h2: 24px;\n --text-h3: 18px;\n --line-body: 1.4;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\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: 1px;\n --border-style: solid;\n --radius-control: 20px;\n --radius-panel: 10px;\n --radius-pill: 30px;\n --radius-page: 20px;\n --shadow-panel: 0 22px 38px -6px var(--color-shadow);\n --shadow-control: 0 1px 1px 0 var(--color-shadow);\n --shadow-control-hover: 0 8px 32px 0 var(--color-shadow);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 20px 40px 0 var(--color-shadow);\n --shadow-text: 0 2px 4px var(--color-shadow);\n --fill-page: linear-gradient(320deg, var(--color-fill-1), var(--color-fill-2), var(--color-fill-3));\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: color-mix(in srgb, var(--color-surface), white 20%);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 40%);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --fill-button-secondary: var(--color-button-secondary);\n --transition: background-color 0.2s ease, box-shadow 0.2s ease;\n --backdrop-blur: 16px;\n}\n" } }