{ "id": "v1-gl-3443", "long_id": "v1.glassmorphism.app.s03.p04.t04.u03", "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-3443", "preview_url": "https://chrono.skin/s/v1-gl-3443/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- One family for everything: `--font-body`, `--font-heading` and `--font-ui` are the same rounded system sans (`ui-rounded`, then Nunito). `--font-mono` is for code and the key hint in the search field. Two references used a commercial geometric sans; the rounded system face of the third is the open stack.\n- Text is set a step heavier than usual: `--weight-body` 500, `--weight-ui` and `--weight-heading` 600, `--weight-bold` and `--weight-display` 700.\n- Sizes: `--text-base` 16px body, `--text-ui` 14px for buttons, inputs, tabs, table cells, notices and sidebar links, `--text-small` 12px for meta text, rail labels, badges, table heads and pane titles, `--text-large` 20px for lead text, `--text-h3` 18px, `--text-h2` 24px (stat figures, dialog title), `--text-h1` 30px (page title, tile figures, gauge figure), `--text-display` 52px for the hero title only. Line height 1.4 for body, 1.2 for headings and controls, 1.05 for the hero title.\n- Uppercase is used only on small labels: `.ds-page__pane-title`, `.ds-sidebar__heading`, `.ds-grid__label`, `.ds-stat__label` and table head cells, written as `text-transform: uppercase` in the component because `--heading-transform` and `--ui-transform` are `none`.\n- The window is `--color-surface` thinned to 45% of itself, the faintest glass on the page; the panes on it are `--fill-panel` (in this surface set `--color-surface` at 60%, slate at 6%) and the wells inside a pane `--color-surface`. All three carry `--color-text` (226 232 240); `--color-heading` is white, `--color-heading-alt` (small labels and pane titles) is the text colour, `--color-text-muted` is slate (144 161 185).\n- Wells and chips inside the window are plain translucent fills with no blur: `--color-surface` for `.ds-panel`, `--color-surface-alt` (16%) for the current rail and sidebar item, list icons and hovered pagination cells, `--color-surface-strong` (28%) for meter and slider tracks.\n- Bar glass: `--fill-bar` (page colour at 70%) with `--color-bar-text` for the rail and code blocks; `--fill-bar-alt` (21 30 40 at 60%) with `--color-bar-alt-text` for the table head, the status-bar footer and status badges.\n- Hairlines: `--color-border` (white at 12%) between panes and around wells and tiles, `--color-border-strong` (20%) around the window, the dialog box and notices, `--color-border-muted` (6%) between rows.\n- `--color-fill-1` to `--color-fill-4` (teal, blue, green, amber brown) are the backdrop glows and the tints of the grid tiles, always mixed with `transparent` at 55%; `--color-fill-2` also makes the glow behind the hero gauge.\n- `--color-button` is lime (199 242 132) with near-black text, the only opaque surface besides badges. `--color-accent` is the same lime: counts, the current tab underline, the gauge ring and the stat meters. `--color-accent-alt` (blue) marks \"new\" and the inner gauge ring. Links in running text are `--color-link` (mint) with no underline; titles, table and sidebar links are `--color-link-quiet`.\n- Status colours: `--color-success` green, `--color-warning` orange, `--color-danger` pink red. They appear as a 1px ring and an 8px dot on status badges, as list dots, as the border and title of an error, and at 70% as the tint of the destructive button; never as large fills.\n- Shadows: the window and every pane carry `--shadow-panel`, the dialog box `--shadow-dialog`; wells, tiles and controls have none, and a hovered button gets a 3px ring of the accent (`--shadow-control-hover`). `--shadow-text` is `none`.\n- One-off values with no token: the window's fill is `--color-surface` mixed at 45% with `transparent`, `saturate(160%)` is written inline, a well's corner is `min(var(--radius-panel), var(--radius-control))`, tile tints and the hero glow use `color-mix()` over `--color-fill-*`, the destructive button mixes `--color-danger` at 70% with `transparent`, the dialog box lays `--color-surface-alt` over `--color-canvas` at 82%, and the rail and footer corners are `calc(var(--radius-page) - var(--border-width))`.\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 <= 52px`: the hero title is the largest text.\n- `font-size >= 12px`: meta text, badges and rail labels are the smallest text.\n- `font-weight <= 700`: headings are semibold, bold is 700, nothing is black.\n- `font-families <= 2`: one rounded sans and 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%`: links are marked by colour; underline is a hover state.\n- `uppercase-text <= 10%`: uppercase is for small labels only, never for headings, buttons or body.\n- `border-width <= 2px`: borders are 1px; 2px is the strong width.\n- `border-radius <= 30px`: list cards are 6px, cards 14px, controls 22px (full pills); only badges and tabs reach 30px.\n- `box-shadow-blur <= 24px`: shadows are short: 21px on cards, 24px on the dialog and the dock.\n- `text-shadow = none`: no text shadow anywhere.\n- `gradient-fills <= 10%`: glass is a flat translucent fill; gradients are the backdrop, the two orbs and the sheen of secondary buttons.\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.p04.t04.u03\",\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-3443\",\n \"short\": \"v1-gl-3443\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(9 13 16);\n --color-canvas: rgb(9 13 16);\n --color-surface: rgb(144 161 185 / 0.1);\n --color-surface-alt: rgb(144 161 185 / 0.16);\n --color-surface-strong: rgb(144 161 185 / 0.28);\n --color-bar: rgb(9 13 16 / 0.7);\n --color-bar-text: rgb(226 232 240);\n --color-bar-alt: rgb(21 30 40 / 0.6);\n --color-bar-alt-text: rgb(226 232 240);\n --color-inverse: rgb(226 232 240);\n --color-inverse-text: rgb(9 13 16);\n --color-text: rgb(226 232 240);\n --color-text-muted: rgb(144 161 185);\n --color-heading: rgb(255 255 255);\n --color-heading-alt: rgb(226 232 240);\n --color-link: rgb(60 227 171);\n --color-link-quiet: rgb(226 232 240);\n --color-link-visited: rgb(102 160 245);\n --color-link-hover: rgb(255 255 255);\n --color-link-active: rgb(199 242 132);\n --color-border: rgb(255 255 255 / 0.12);\n --color-border-strong: rgb(255 255 255 / 0.2);\n --color-border-muted: rgb(255 255 255 / 0.06);\n --color-accent: rgb(199 242 132);\n --color-accent-text: rgb(9 13 16);\n --color-accent-alt: rgb(39 117 202);\n --color-fill-1: rgb(6 76 67);\n --color-fill-2: rgb(39 117 202);\n --color-fill-3: rgb(7 82 41);\n --color-fill-4: rgb(99 63 13);\n --color-button: rgb(199 242 132);\n --color-button-text: rgb(9 13 16);\n --color-button-hover-text: rgb(9 13 16);\n --color-button-secondary: rgb(144 161 185 / 0.16);\n --color-button-secondary-text: rgb(226 232 240);\n --color-input: rgb(9 13 16 / 0.55);\n --color-input-text: rgb(226 232 240);\n --color-input-border: rgb(255 255 255 / 0.12);\n --color-disabled: rgb(21 30 40);\n --color-disabled-text: rgb(73 86 104);\n --color-danger: rgb(242 54 116);\n --color-danger-surface: rgb(242 54 116 / 0.14);\n --color-success: rgb(96 205 136);\n --color-warning: rgb(255 153 0);\n --color-notice: rgb(39 117 202 / 0.28);\n --color-notice-text: rgb(226 232 240);\n --color-focus: rgb(199 242 132);\n --color-shadow: rgb(0 0 0 / 0.4);\n --color-overlay: rgb(9 13 16 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: ui-rounded, \"SF Pro Rounded\", Nunito, \"Varela Round\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n --font-heading: ui-rounded, \"SF Pro Rounded\", Nunito, \"Varela Round\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n --font-ui: ui-rounded, \"SF Pro Rounded\", Nunito, \"Varela Round\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, \"Roboto Mono\", Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 20px;\n --text-display: 52px;\n --text-h1: 30px;\n --text-h2: 24px;\n --text-h3: 18px;\n --line-body: 1.4;\n --line-heading: 1.2;\n --line-display: 1.05;\n --weight-body: 500;\n --weight-bold: 700;\n --weight-heading: 600;\n --weight-display: 700;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: 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: 2px;\n --border-style: solid;\n --radius-control: 22px;\n --radius-panel: 6px;\n --radius-pill: 30px;\n --radius-page: 14px;\n --shadow-panel: 0 10px 21px 0 var(--color-shadow), inset 0 2px 0 0 color-mix(in srgb, white 55%, transparent), inset 0 -2px 0 0 color-mix(in srgb, black 12%, transparent);\n --shadow-control: 0 2px 8px 0 var(--color-shadow), inset 0 1px 0 0 color-mix(in srgb, white 35%, transparent);\n --shadow-control-hover: 0 5px 15px 0 var(--color-shadow);\n --shadow-control-pressed: inset 0 1px 12px 0 var(--color-shadow);\n --shadow-dialog: 0 12px 24px 0 var(--color-shadow), inset 0 2px 0 0 color-mix(in srgb, white 55%, transparent), inset 0 -2px 0 0 color-mix(in srgb, black 12%, transparent);\n --shadow-text: none;\n --fill-page:\n radial-gradient(circle 150px at 86% 250px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 84px at 7% 520px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 210px at 97% 1280px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 120px at 4% 1850px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 170px at 92% 2550px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 110px at 10% 3250px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 190px at 88% 3950px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n linear-gradient(180deg, var(--color-fill-2) 0, var(--color-fill-1) 380px, var(--color-page) 1000px, var(--color-fill-4) 2100px, var(--color-page) 3100px, var(--color-fill-1) 4400px);\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: 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: radial-gradient(circle at 30% 20%, color-mix(in srgb, white 15%, transparent), transparent 70%), var(--color-button-secondary);\n --transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n --backdrop-blur: 10px;\n}\n" } }