{ "id": "v1-gl-81bb", "long_id": "v1.glassmorphism.landing.s08.p01.t11.u11", "name": "Glassmorphism onboarding flow", "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": "landing", "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 light hairline edge and a long soft shadow, floating over a full-bleed gradient. Sign-in and setup screens of those years were its showpiece: the pitch written straight on the gradient at one side and a single tall card of glass holding the form at the other, with the steps of the flow as numbered discs across the top. This pack is that onboarding flow in its light form: white glass over a peach and rose dawn with gold and lilac light, aubergine text and buttons, a vermilion accent and a wide grotesque for headings.", "url": "https://chrono.skin/s/v1-gl-81bb", "preview_url": "https://chrono.skin/s/v1-gl-81bb/specimen.html", "files": { "STYLE.md": "# Glassmorphism onboarding flow\n\n## Summary\n\nGlassmorphism is the frosted-glass interface style of 2020 to 2026: translucent cards with a blurred backdrop, a light hairline edge and a long soft shadow, floating over a full-bleed gradient. Sign-in and setup screens of those years were its showpiece: the pitch written straight on the gradient at one side and a single tall card of glass holding the form at the other, with the steps of the flow as numbered discs across the top. This pack is that onboarding flow in its light form: white glass over a peach and rose dawn with gold and lilac light, aubergine text and buttons, a vermilion accent and a wide grotesque for headings.\n\n## Layout\n\n- Content column: `--size-page` (1160px), centred, with `--space-4` (24px) side padding below that width. The backdrop (`--fill-page` on `.ds-page`) fills the viewport.\n- Navigation: `.ds-nav` is one row on the backdrop, with no bar: the brand at the left, the steps of the flow in the middle as numbered discs joined by short lines (the current step's disc takes the accent fill and its label is bold), and at the right a Help link that opens a `.ds-menu`, and the account avatar. The row and the footer are written once, around the views.\n- Every screen is split by `.ds-page__split`: a free column on the left and a `--size-card` (480px) column on the right, `--space-6` (52px) apart. The right column holds the work card (`.ds-panel--card`), a tall sheet of glass with the form of that step; the left column holds what explains or accompanies it.\n- Home page: the split is centred vertically. On the left, on the backdrop: the hero (a badge, the title, the lead, two buttons), the row of three figures (`.ds-stat`) and the quotation `.ds-carousel`. On the right the sign-in card, which ends in an inverted band.\n- Inner pages have no hero. Under the navigation come the `.ds-breadcrumb` and, 10px below it, the `.ds-page-header` on the backdrop: title at `--text-h1` and one muted line on the left, at most two buttons on the right. Then the split: panels, notices, lists or an accordion in a `.ds-page__col` on the left, the work card (and, where a step has one, the dialog) on the right. A step that has to show a choice across the whole width (templates) uses one `.ds-page__col`: `.ds-tabs`, the `.ds-grid` of four cards, then `.ds-page__split--wide` with the table and its pagination beside a narrower summary panel.\n- Views: the specimen is one flow with five screens, one showing at a time. `welcome` is the home view (hero, figures, quotations, the sign-in card). `profile` is step 2: the picture, the notification switches and three questions beside the profile form. `workspace` is step 3: tabs, the four template cards, the table of what the chosen template creates, pagination and the summary. `team` is step 4: notices, the list of invited people and the empty list of requests beside the invitation card and the open dialog that withdrawing an invitation raises. `help` is the reading page: running text with the link states beside the contents sidebar and an accordion of questions. Each view is a `.ds-view` section; the step discs and the Help link are marked current from the address.\n- Spacing scale: `--space-1` 4px (inside template cards, between pagination cells), `--space-2` 10px (label to control, disc to label, badge padding), `--space-3` 16px (row padding, gaps between buttons and notices, title to lead), `--space-4` 24px (panel padding, the gap between neighbouring panels, form field gap), `--space-5` 32px (work card padding, gap above the figures and the carousel), `--space-6` 52px (the gap between the two halves, dialog padding, gap above the footer), `--space-7` 88px (textarea height only).\n- Glass: cards use `backdrop-filter: blur(var(--backdrop-blur))` (28px in this pack's surface set); menus, dialogs and the error notice use three times that with `saturate(180%)`. Never put a blurred element inside another; controls inside a card are plain translucent fills.\n- Below 1000px the two halves stack (text first, card second), the step labels are dropped so that only the numbered discs remain, and the template cards go two by two. Below 720px the navigation wraps: brand, Help and avatar on the first row and the discs spread across the second with their lines stretched between them; the hero title drops to `--text-h1`, columns marked `.ds-table__opt` are hidden and the page header's buttons move under its text. Nothing scrolls sideways at 390px except the carousel's own track.\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: Inter for body and headings, and a monospace (`--font-ui`: Geist Mono, JetBrains Mono, then the system monospace) for buttons, inputs, navigation, tabs and table cells as well as code.\n- Sizes: `--text-base` 16px, `--text-ui` and `--text-small` 13px, `--text-large` 18px, `--text-h3` 18px, `--text-h2` 24px, `--text-h1` 36px, `--text-display` 56px.\n- Body is airy and headings are light: `--line-body` 1.6, `--line-heading` 1.33, `--line-display` 1.14; `--weight-heading`, `--weight-display` and `--weight-ui` 500, `--weight-bold` 600.\n- No uppercase and no tracking from tokens; links are marked by colour and underlined on hover only.\n\n- `--fill-page` layers a 24px grid of 1px dots over the ember glow (an oval 760px wide at the top centre, 620px ovals at alternating edges below) on the page colour.\n- Corners are tight: `--radius-control` 3px, `--radius-panel` 6px, `--radius-page` 10px; only `--radius-pill` (30px) stays round.\n- `--border-width` and `--border-width-strong` are both 2px: the outline is the surface. Glass is smoked, `--fill-panel` being `--color-surface` mixed with 35% black, so a panel is a darker pane inside a pale 2px frame.\n- Nothing floats: `--shadow-panel` and `--shadow-control` are `none`. Only the dialog casts a shadow (`--shadow-dialog`, 0 24px 48px in black). A hovered button gains a 2px bright ring, and `--focus-ring` is a 2px dashed line.\n- `--shadow-text` is `none`.\n- `--backdrop-blur` is 3px, the lightest of the era: the dot grid and the glow stay readable through a pane, only softened. The strongest glass of a layout blurs three times that, 9px.\n- Every fill is flat; transitions run 0.15s.\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__split` the two halves (`--home` centres them vertically, `--wide` gives the right half less width, for a table beside a summary); `.ds-page__col` a vertical stack; `.ds-page__text` the free left half of the home view; `.ds-page__heading` a small heading on the backdrop with an optional badge; `.ds-page__note` a small muted line. `.ds-view` is one screen of the specimen; in an application each is its own document.\n- `.ds-nav`: the row on the backdrop. `.ds-nav__list` is the ordered list of steps; each `.ds-nav__item` holds a `.ds-nav__link` with a `.ds-nav__num` disc and a `.ds-nav__label`; the current one is `is-current` (the specimen sets it from the address). `.ds-nav__tools` holds `.ds-nav__help` (the trigger of the menu) and the account `.ds-avatar`. In an application without steps the discs can carry icons or be left out of the links.\n- `.ds-brand`: the site's mark and name at the left of the navigation: `.ds-brand__mark` is a small tile 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` the name in the heading font at `--text-h3`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the home page's introduction on the backdrop: a `.ds-badge`, `.ds-hero__title` at the display size, `.ds-hero__lead`, `.ds-hero__actions`. It has no art; the work card beside it is the picture.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__text` with `.ds-page-header__title` and `.ds-page-header__lead`, and `.ds-page-header__actions` at the right. No fill of its own. The breadcrumb goes 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. Put it inside a `.ds-panel`.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links. `.ds-link__sample` lays several out in a row.\n- `.ds-button`: primary, a dark solid 44px high with an 8px radius. `.ds-button--secondary` is white glass; `.ds-button--danger` is the destructive action, tinted with `--color-danger`, used once at the end of a group or as the confirming button of a dialog; `.ds-button--large` for the hero and the main action of a card; `.ds-button--block` fills the width of a card; `is-disabled` or `disabled` for the disabled state. `.ds-button__row` lays buttons out. One primary button per group.\n- `.ds-form`: vertical form inside the work card. `.ds-form__field` wraps a `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (in `.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__row` puts two fields side by side; `.ds-form__label-row` sets a tooltip beside a label; `.ds-form__actions` holds the buttons.\n- `.ds-table`: one sheet of glass with a `--fill-bar` head and hairline rows. `.ds-table__num` right-aligns figures, `.ds-table__opt` marks a column hidden on a phone, `.ds-table__meta` is muted text.\n- `.ds-list`: rows in one sheet of glass. `.ds-list__item` holds an optional `.ds-avatar`, a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`) and a badge or action at the right. `.ds-list__dot` is a status dot.\n- `.ds-panel`: the basic sheet of glass: `.ds-panel__title` strip, `.ds-panel__body`. `.ds-panel--card` is the work card: the largest radius, the dialog shadow, more padding, with a `.ds-panel__heading` (h2 size) and a muted `.ds-panel__text` line at the top (`--after` for one at the foot) and optionally a `.ds-panel__band` at its foot, an inverted strip with a `.ds-panel__band-link`. `.ds-panel--dark` is the bar-coloured variant. `.ds-panel__pair` with `.ds-panel__pair-value` is a label and its value on one line.\n- `.ds-grid`: four template cards of tinted glass. `.ds-grid__cell` with `--1` to `--4` takes its tint from `--color-fill-*` and is a link; the chosen one is `is-current` and wears the focus ring. Inside: `.ds-grid__mock` (a small drawing of the layout from `.ds-grid__bar` blocks; `--rows` stacks them, `.ds-grid__bar--short` shortens one), `.ds-grid__label`, `.ds-grid__value`, `.ds-grid__meta`.\n- `.ds-stat`: the row of three figures on the backdrop; `.ds-stat` is the row and each `.ds-stat__item` a figure behind a 2px rule in the accent colour: `.ds-stat__value` above `.ds-stat__label`. It has no glass.\n- `.ds-tabs`: text tabs on a hairline; `.ds-tabs__tab` with `is-current` carrying a 2px rule in the accent colour. For switching what a page shows.\n- `.ds-badge`: pill for counts and markers in the accent; `.ds-badge--alt` for \"new\", `.ds-badge--glass` for quiet labels, and the status labels `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`: a `--fill-bar-alt` pill with a 1px ring and a dot in the status colour.\n- `.ds-sidebar`: glass block of links in a column: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link` with `is-current`.\n- `.ds-notice`: information notice on `--color-notice`; `.ds-notice--error` on `--color-danger-surface` with a danger border, icon and title. `.ds-notice__icon`, `.ds-notice__title`; `.ds-notice__stack` stacks several. Notices sit beside the work card, not inside it.\n- `.ds-pagination`: left-aligned row of small glass cells, `.ds-pagination__link`; the current page is `is-current` and takes the primary button fill, `is-disabled` greys an end.\n- `.ds-breadcrumb`: small trail above the page header, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for the linked levels. In the flow it names the step.\n- `.ds-dialog`: a dimmed sheet (`--color-overlay`) with a centred `.ds-dialog__box` of the strongest glass: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: empty state on a glass panel: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary button.\n- `.ds-footer`: a full-width strip of faint glass over a hairline, `.ds-footer__inner` with `.ds-footer__links` and `.ds-footer__link`.\n- `.ds-menu`: a drop-down under a navigation item, shown on hover or focus (or with `is-open`): `.ds-menu__trigger` with a `.ds-menu__caret`, `.ds-menu__list` of the strongest glass, `.ds-menu__link` rows with an optional `.ds-menu__meta` at the right.\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`. For the questions a step raises.\n- `.ds-tooltip`: a round hint mark beside a label; `.ds-tooltip__tip` is an inverted block above it, shown on hover or focus (or with `is-open`). Keep the tip to one sentence.\n- `.ds-carousel`: one slide showing in a sheet of glass: `.ds-carousel__track` of `.ds-carousel__slide` items that snap as they scroll, `.ds-carousel__dots` with `.ds-carousel__dot` (the current one `is-current`), and optionally a `.ds-carousel__head` strip with `.ds-carousel__arrows` of `.ds-carousel__arrow` buttons. `.ds-carousel--quotes` is the home page's form: each slide a `.ds-carousel__quote` and an `.ds-avatar__row`.\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. Consecutive switches are divided by a hairline.\n- `.ds-progress`: a thin track with a `.ds-progress__bar` in the accent fill; width classes `--15`, `--25`, `--40`, `--65`, `--75`, `--90`. `.ds-progress__label` is a line above it with the name at the left and the figure at the right. Use it for how far the flow has come.\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 <= 4px`: rows of a table or list touch and are divided by a hairline.\n- `block-gap <= 52px`: neighbouring panels sit 24px apart; 52px is the largest gap on the page.\n- `content-width <= 1160px`: the column is capped while the backdrop fills the viewport.\n- `font-size <= 56px`: the hero title is the largest text.\n- `font-size >= 13px`: controls and meta text are the smallest text.\n- `font-weight <= 600`: headings are medium; 600 is for bold only.\n- `font-families <= 2`: one sans and one monospace.\n- `line-height <= 1.6`: body text is set at 1.6.\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 <= 2px`: every border is 2px, never heavier.\n- `border-radius <= 30px`: panels are 6px, large containers 10px, pills 30px.\n- `box-shadow-blur <= 48px`: only the dialog casts a shadow, blurred 48px.\n- `text-shadow = none`: no text shadow anywhere.\n- `gradient-fills <= 10%`: glass is a flat translucent fill.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new step is a `.ds-page__split` with its explanation on the left and a `.ds-panel--card` on the right; a new container starts from `.ds-panel` (fill, 1px edge, radius, shadow and blur together, never one without the others), a new control from `.ds-button--secondary` or `.ds-form__input`, a new overlay from `.ds-menu__list` or `.ds-dialog__box`. Use tokens only; for a shade or size with no token use `color-mix()` over tokens with `transparent`, or `calc()` over `--space-*` and `--size-*`. Keep one work card per screen and one primary button per card, keep the navigation free of any bar, and place glass only where the backdrop behind it has colour to show through.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1160px;\n --size-card: 480px;\n --size-dialog: 420px;\n --size-control: 44px;\n --size-step: 34px;\n --size-mock: 72px;\n --size-icon: 18px;\n --size-dot: 8px;\n --size-thumb: 22px;\n --size-track: 4px;\n --space-1: 4px;\n --space-2: 10px;\n --space-3: 16px;\n --space-4: 24px;\n --space-5: 32px;\n --space-6: 52px;\n --space-7: 88px;\n}\n\n/* shell: a full-bleed gradient; every screen is split into a text column on the backdrop and one tall card of glass */\n.ds-page {\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.ds-page__inner {\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__split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-card);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__split--home {\n align-items: center;\n padding: var(--space-5) 0 0;\n}\n.ds-page__split--wide {\n grid-template-columns: minmax(0, 1fr) calc(var(--size-card) - var(--space-7));\n gap: var(--space-4);\n}\n.ds-page__text {\n min-width: 0;\n}\n.ds-page__col {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-page__heading {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-2) 0 calc(-1 * var(--space-2));\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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page__note {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: the steps of the flow as numbered discs joined by a line, on the backdrop between the brand and the help menu */\n.ds-nav {\n position: relative;\n z-index: 4;\n color: var(--color-text);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n min-height: calc(var(--size-control) + 2 * var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4);\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: var(--size-step);\n height: var(--size-step);\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-h3);\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-nav__list {\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__item {\n display: flex;\n align-items: center;\n}\n.ds-nav__item + .ds-nav__item::before {\n content: \"\";\n width: var(--space-5);\n margin: 0 var(--space-2);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-2);\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 text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__num {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-step);\n height: var(--size-step);\n flex: none;\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n color: var(--color-bar-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-shadow: none;\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\n}\n.ds-nav__link:hover .ds-nav__num,\n.ds-nav__link.is-hover .ds-nav__num {\n border-color: var(--color-border-strong);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-nav__link.is-current .ds-nav__num,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#welcome\"] .ds-nav__num,\n.ds-page:has(#welcome:target) .ds-nav__link[href=\"#welcome\"] .ds-nav__num,\n.ds-page:has(#profile:target) .ds-nav__link[href=\"#profile\"] .ds-nav__num,\n.ds-page:has(#workspace:target) .ds-nav__link[href=\"#workspace\"] .ds-nav__num,\n.ds-page:has(#team:target) .ds-nav__link[href=\"#team\"] .ds-nav__num {\n background: var(--fill-accent);\n border-color: transparent;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#welcome\"],\n.ds-page:has(#welcome:target) .ds-nav__link[href=\"#welcome\"],\n.ds-page:has(#profile:target) .ds-nav__link[href=\"#profile\"],\n.ds-page:has(#workspace:target) .ds-nav__link[href=\"#workspace\"],\n.ds-page:has(#team:target) .ds-nav__link[href=\"#team\"],\n.ds-page:has(#help:target) .ds-nav__help {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-nav__help {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) 0;\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 text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n\n/* hero: badge, title, lead and actions on the backdrop, in the left half of the home screen */\n.ds-hero {\n padding: 0;\n}\n.ds-hero__title {\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: 46ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin-top: var(--space-4);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: var(--space-4) 0 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: head of an inner page, set on the backdrop like the hero, one size down */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n padding: var(--space-2) 0 var(--space-4);\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-base);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\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-1);\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-ui);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\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-control);\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-3);\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 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 padding: var(--space-3) var(--space-5);\n font-size: var(--text-base);\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 margin-top: var(--space-3);\n}\n\n/* panel: the basic sheet of glass */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\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;\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body > :first-child {\n margin-top: 0;\n}\n.ds-panel--dark {\n background: var(--fill-bar);\n border-color: var(--color-border-muted);\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\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\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-ui);\n font-weight: var(--weight-ui);\n text-transform: uppercase;\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-ui);\n font-size: var(--text-ui);\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-icon);\n height: var(--size-icon);\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 font-size: var(--text-ui);\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-thumb);\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 gap: var(--space-3);\n}\n\n/* table: glass sheet, dark glass head, hairline 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-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n font-size: var(--text-ui);\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-weight: var(--weight-bold);\n text-transform: uppercase;\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: rows inside a sheet of glass, divided by hairlines */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\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__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\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-weight: var(--weight-ui);\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: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: 50%;\n background: var(--color-accent-alt);\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}\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/* status badges: a dark glass pill with a 1px ring and a dot in the status colour, like the error notice */\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/* notice */\n.ds-notice {\n display: flex;\n align-items: flex-start;\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-ui);\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 -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-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-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n justify-content: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--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 -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: strongly blurred glass box on a dimmed sheet, shown in the page flow */\n.ds-dialog {\n display: flex;\n align-items: center;\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 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)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-4) var(--space-4) 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 text-align: center;\n}\n.ds-dialog__body {\n padding: var(--space-2) var(--space-4) var(--space-4);\n color: var(--color-text-muted);\n text-align: center;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n padding: 0 var(--space-4) var(--space-4);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n padding: var(--space-6) var(--space-4);\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 text-align: center;\n}\n.ds-empty__icon {\n width: var(--space-6);\n height: var(--space-6);\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-h3);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n max-width: 44ch;\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* sidebar */\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-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-sidebar__heading {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-sidebar__heading + .ds-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-4);\n}\n.ds-sidebar__list {\n margin: 0 calc(-1 * var(--space-2));\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2);\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: 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}\n\n/* menu: a drop-down of strong glass under a navigation item, shown on hover or focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__trigger {\n cursor: pointer;\n}\n.ds-menu__caret {\n width: var(--space-2);\n height: var(--space-2);\n flex: none;\n margin-bottom: var(--space-1);\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}\n.ds-menu__list {\n position: absolute;\n top: 100%;\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\n/* accordion: one sheet of glass, sections that open and close */\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\n/* tooltip: a round hint mark; the tip is an inverted block above it, shown on hover or focus */\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\n/* carousel: one slide showing in a sheet of glass, the rest reached by scrolling sideways; dots under it */\n.ds-carousel {\n overflow: hidden;\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-carousel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-carousel__arrows {\n display: flex;\n gap: var(--space-1);\n}\n.ds-carousel__arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-control) - var(--space-2));\n height: calc(var(--size-control) - var(--space-2));\n padding: 0;\n background: var(--color-border-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n color: var(--color-bar-text);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-carousel__arrow.is-disabled {\n opacity: 0.45;\n cursor: default;\n}\n.ds-carousel__track {\n display: flex;\n margin: 0;\n padding: 0;\n overflow-x: auto;\n list-style: none;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__track::-webkit-scrollbar {\n display: none;\n}\n.ds-carousel__slide {\n flex: 0 0 100%;\n min-width: 0;\n padding: var(--space-4);\n scroll-snap-align: start;\n}\n.ds-carousel__dots {\n display: flex;\n justify-content: center;\n gap: var(--space-2);\n padding: 0 0 var(--space-3);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: var(--radius-pill);\n background: color-mix(in srgb, var(--color-text) 28%, transparent);\n}\n.ds-carousel__dot.is-current {\n width: calc(var(--size-dot) * 3);\n background: var(--color-accent);\n}\n\n/* switch: an on/off control drawn over a checkbox */\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\n/* progress: a thin track with the accent fill */\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__bar--25 { width: 25%; }\n.ds-progress__bar--75 { width: 75%; }\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\n/* avatar: a round account picture drawn from initials */\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--2,\n.ds-avatar--3,\n.ds-avatar--4 {\n color: var(--color-text);\n}\n.ds-avatar--2 {\n background: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n}\n.ds-avatar--3 {\n background: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-avatar--4 {\n background: color-mix(in srgb, var(--color-fill-4) 55%, transparent);\n}\n.ds-avatar--large {\n width: calc(var(--size-control) * 1.6);\n height: calc(var(--size-control) * 1.6);\n font-size: var(--text-h3);\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\n/* the work card: the tall sheet of glass in the right half of a screen */\n.ds-panel--card {\n border-color: var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-panel--card .ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__heading {\n margin: 0 0 var(--space-1);\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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-panel__text--after {\n margin: var(--space-3) 0 0;\n}\n.ds-panel__band {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-5);\n background: var(--fill-inverse);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n color: var(--color-inverse-text);\n font-size: var(--text-ui);\n}\n.ds-panel__band-link {\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n.ds-panel__pair {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-panel__pair-value {\n font-weight: var(--weight-bold);\n}\n.ds-button--block {\n width: 100%;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-form__label-row {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* stats: figures set straight on the backdrop, each behind a short accent rule */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n margin: var(--space-5) 0 0;\n}\n.ds-stat__item {\n padding-left: var(--space-3);\n border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n}\n.ds-stat__value {\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 font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* carousel slide of this layout: a short quotation and who said it */\n.ds-carousel--quotes {\n margin-top: var(--space-5);\n}\n.ds-carousel__quote {\n margin: 0 0 var(--space-3);\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n\n/* tabs: text tabs on a hairline; the current one carries a rule in the accent colour */\n.ds-tabs {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(-1 * var(--border-width));\n padding: var(--space-2) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: var(--color-text-muted);\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 transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-text);\n}\n.ds-tabs__tab.is-current {\n border-bottom-color: var(--color-accent);\n color: var(--color-heading);\n}\n\n/* grid: template cards of tinted glass, each with a small drawing of its layout */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-3);\n background: linear-gradient(180deg, var(--color-surface-alt), transparent), var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n text-decoration: none;\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\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__cell:hover,\n.ds-grid__cell.is-hover {\n box-shadow: var(--shadow-dialog);\n}\n.ds-grid__cell.is-current {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-grid__mock {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-1);\n height: var(--size-mock);\n margin-bottom: var(--space-2);\n padding: var(--space-2);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\n}\n.ds-grid__mock--rows {\n grid-template-columns: minmax(0, 1fr);\n}\n.ds-grid__bar {\n background: color-mix(in srgb, var(--color-text) 22%, transparent);\n border-radius: var(--radius-control);\n}\n.ds-grid__bar--short {\n align-self: start;\n height: 55%;\n}\n.ds-grid__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-grid__value {\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 letter-spacing: var(--heading-tracking);\n}\n.ds-grid__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* footer: one line on the backdrop over a hairline */\n.ds-footer {\n margin-top: var(--space-6);\n background: var(--fill-bar-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-footer__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: var(--space-3) var(--space-4);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: underline;\n}\n\n/* adjustments to the shared parts for this layout */\n.ds-breadcrumb {\n margin-top: var(--space-2);\n}\n.ds-page-header {\n padding-bottom: var(--space-5);\n}\n.ds-panel__title,\n.ds-form__label,\n.ds-table th,\n.ds-sidebar__heading {\n text-transform: none;\n}\n.ds-nav .ds-menu__list {\n right: 0;\n}\n.ds-notice .ds-link--quiet {\n color: inherit;\n text-decoration: underline;\n}\n.ds-list__item .ds-avatar {\n margin-right: var(--space-1);\n}\n.ds-pagination {\n justify-content: flex-start;\n}\n.ds-list__meta {\n display: block;\n overflow-wrap: anywhere;\n}\n\n@media (max-width: 1000px) {\n .ds-page__split {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n }\n .ds-nav__label {\n display: none;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media (max-width: 720px) {\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-3);\n padding-top: var(--space-3);\n }\n .ds-nav__list {\n order: 3;\n flex-basis: 100%;\n justify-content: space-between;\n }\n .ds-nav__item + .ds-nav__item {\n flex: 1;\n }\n .ds-nav__item + .ds-nav__item::before {\n flex: 1;\n width: auto;\n }\n .ds-page__split--home {\n padding-top: var(--space-3);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-stat {\n gap: var(--space-3);\n }\n .ds-stat__value {\n font-size: var(--text-h2);\n }\n .ds-panel--card .ds-panel__body {\n padding: var(--space-4);\n }\n .ds-panel__band {\n padding: var(--space-3) var(--space-4);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n gap: var(--space-3);\n }\n .ds-tabs {\n gap: var(--space-3);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-2);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-list__item {\n flex-wrap: wrap;\n }\n .ds-page-header__text {\n flex-basis: 100%;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-dialog__actions,\n .ds-pagination {\n flex-wrap: wrap;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: set up your account\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n
    \n
  1. 1Sign in
    2. \n
  2. 2Profile
    3. \n
  3. 3Workspace
    4. \n
  4. 4Team
    5. \n
\n
\n
\n Help \n \n
\n ME\n
\n
\n
\n\n
\n\n
\n
\n
\n
\n New: bring a spreadsheet with you\n

Four short steps and your team is in

\n

Sign in, say who you are, pick a workspace and invite the others. Nothing is charged and every step can be changed later.

\n
\n Create an account\n Read the guide\n
\n
\n
\n
4
steps, one screen each
\n
6 min
for most people
\n
0
card details asked
\n
\n
\n
    \n
  • \n

    We imported the rota on a Friday and ran Monday from the board. Nobody asked where the spreadsheet had gone.

    \n
    DWDana WhitlowHarbour Point boat club
    \n
    • \n
  • \n

    The blank workspace was enough. Two lists and we were away.

    \n
    KOKofi OseiSaltmarsh allotments
    \n
    • \n
\n
\n
\n
\n
\n
\n

Sign in

\n

Step 1 of 4. New here? The same form creates your account.

\n
\n
\n Setup25%\n \n
\n
\n \n \n
\n
\n \n \n
\n \n Continue\n Email me a sign-in link\n
\n

By continuing you accept the terms of use.

\n
\n
\n Invited by a team?\n Enter your code\n
\n
\n
\n
\n\n
\n
    \n
  1. Setup
    2. \n
  2. Step 2 of 4
    3. \n
  3. Profile
    4. \n
\n
\n
\n

Say who you are

\n

Your team sees this beside everything you add.

\n
\n
\n Skip this step\n
\n
\n
\n
\n
\n

Your picture

\n
\n
\n ME\n Mara EllisonDrawn from your initials until you upload a photo\n
\n
\n MEMEMEME\n \n
\n
\n
\n
\n

Tell me about

\n
\n \n \n \n
\n
\n
\n
\n Why do you ask for my role?\n

It decides which workspace templates are offered in the next step. Nobody else sees it.

\n
\n
\n Can I change my handle later?\n

Once every 30 days, from your profile.

\n
\n
\n Who can see my email address?\n

Only the owners of workspaces you join.

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

Profile

\n

Step 2 of 4. Two fields are required.

\n
\n
\n \n \n
\n
\n \n \n A handle has no spaces. Try mara-ellison.\n
\n
\n \n \n \n \n \n
\n
\n \n \n One or two lines. Optional.\n
\n \n
\n Continue\n Back\n \n Discard\n
\n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Setup
    2. \n
  2. Step 3 of 4
    3. \n
  3. Workspace
    4. \n
\n
\n
\n

Pick a workspace to start from

\n

A template is only a first arrangement. Everything in it can be renamed or removed.

\n
\n
\n Back\n Use Club rota\n
\n
\n
\n \n
\n SelectedClub rota3 boards, 12 lists, a calendar\n Most usedEvent plan1 board, a timeline, a budget\n For committeesMinutes and actions2 boards, 6 lists\n Start emptyBlank1 board, nothing on it\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
Club rota createsHoldsItemsSample rows
BoardsDuties, boats, members324
ListsOne per week and per boat1296
CalendarTides and race days118
RolesOwner, editor, viewer30
RemindersThe evening before a duty20
\n \n
\n
\n

Your choice

\n
\n

Template Club rota

\n

Sample rows 138

\n

Step 3 of 4

\n \n

Sample rows are marked and can be cleared in one go from workspace settings.

\n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Setup
    2. \n
  2. Step 4 of 4
    3. \n
  3. Team
    4. \n
\n
\n
\n

Invite the others

\n

Four invitations sent, one accepted, one came back.

\n
\n
\n Back\n Finish setup\n
\n
\n
\n
\n
\n
\n \n
Invitations last seven days. After that the link stops working and you can send a new one.
\n
\n
\n \n
One address bounced. kofi@saltmarsh.example does not accept mail.
\n
\n
\n

Invited 4

\n
    \n
  • \n DW\n
    Dana Whitlowdana@harbourpoint.example, editor
    \n Joined\n
    • \n
  • \n TR\n
    Tobias Renntobias@harbourpoint.example, editor
    \n Invited\n
    • \n
  • \n IV\n
    Ines Vargaines@wrenhill.example, viewer
    \n Invited\n
    • \n
  • \n KO\n
    Kofi Oseikofi@saltmarsh.example, editor
    \n Bounced\n
    • \n
\n
\n \n

Nobody has asked to join

\n

People who open your workspace link without an invitation appear here for you to approve.

\n Copy the workspace link\n
\n
\n
\n
\n
\n

Send an invitation

\n

Step 4 of 4. One address at a time, or paste a list.

\n
\n
\n \n \n
\n
\n ?Editors change rows. Viewers read and comment.\n \n \n \n \n
\n Send invitation\n
\n
\n
\n
\n
\n

Withdraw Kofi's invitation?

\n

The address bounced. Withdrawing frees the seat; you can invite him again at another address.

\n
\n Keep\n Withdraw\n
\n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Setup
    2. \n
  2. Help
    3. \n
  3. Setup guide
    4. \n
\n
\n
\n

Setup guide

\n

What each step does and what you can leave for later.

\n
\n
\n Back to setup\n
\n
\n
\n
\n
\n
\n

From sign-in to a working board

\n

Setup has four screens. Only the first is required; the rest fill in sensible defaults if you skip them.

\n

What is saved, and when

\n

Each step is saved when you press Continue. Leaving half way keeps what you entered for seven days under your email address.

\n

What you can skip

\n
    \n
  • Profile: your name is taken from your email address.
    • \n
  • Workspace: you get the blank template.
    • \n
  • Team: you can invite people at any time.
    • \n
\n

Coming back to a step

\n

The numbered steps at the top are links. To reopen one from elsewhere, add #profile or #team to the setup address.

\n

\n Workspace templates\n Visited: profile\n Hovered link\n Active link\n

\n
\n
\n
\n
\n \n
\n
\n Is there anything to pay?\n

No. Setup never asks for card details, and a workspace of up to ten people stays free.

\n
\n
\n Can two people own a workspace?\n

Yes. Give a second person the owner role in step 4.

\n
\n
\n How do I bring a spreadsheet?\n

Choose any template, then use Import on its first board.

\n
\n
\n What if I picked the wrong template?\n

Clear the sample rows and apply another from workspace settings.

\n
\n
\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.glassmorphism.landing.s08.p01.t11.u11\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"glassmorphism\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-gl-81bb\",\n \"short\": \"v1-gl-81bb\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(17 25 39);\n --color-canvas: rgb(17 25 39);\n --color-surface: rgb(255 255 255 / 0.2);\n --color-surface-alt: rgb(255 255 255 / 0.25);\n --color-surface-strong: rgb(255 255 255 / 0.4);\n --color-bar: rgb(17 25 40 / 0.75);\n --color-bar-text: rgb(255 255 255);\n --color-bar-alt: rgb(17 25 40 / 0.6);\n --color-bar-alt-text: rgb(228 231 235);\n --color-inverse: rgb(241 247 255);\n --color-inverse-text: rgb(39 55 76);\n --color-text: rgb(255 255 255);\n --color-text-muted: rgb(209 213 219);\n --color-heading: rgb(255 255 255);\n --color-heading-alt: rgb(228 231 235);\n --color-link: rgb(38 230 255);\n --color-link-quiet: rgb(255 255 255);\n --color-link-visited: rgb(128 175 231);\n --color-link-hover: rgb(255 255 255);\n --color-link-active: rgb(79 229 255);\n --color-border: rgb(255 255 255 / 0.18);\n --color-border-strong: rgb(255 255 255 / 0.3);\n --color-border-muted: rgb(255 255 255 / 0.125);\n --color-accent: rgb(79 229 255);\n --color-accent-text: rgb(17 25 39);\n --color-accent-alt: rgb(19 169 135);\n --color-fill-1: rgb(46 29 125);\n --color-fill-2: rgb(47 110 211);\n --color-fill-3: rgb(138 35 135);\n --color-fill-4: rgb(80 149 228);\n --color-button: rgb(241 247 255);\n --color-button-text: rgb(31 57 88);\n --color-button-hover-text: rgb(17 25 39);\n --color-button-secondary: rgb(255 255 255 / 0.25);\n --color-button-secondary-text: rgb(255 255 255);\n --color-input: rgb(17 25 40 / 0.6);\n --color-input-text: rgb(255 255 255);\n --color-input-border: rgb(255 255 255 / 0.3);\n --color-disabled: rgb(75 86 99);\n --color-disabled-text: rgb(156 163 175);\n --color-danger: rgb(242 84 91);\n --color-danger-surface: rgb(17 25 40 / 0.75);\n --color-success: rgb(19 169 135);\n --color-warning: rgb(242 113 33);\n --color-notice: rgb(225 236 244 / 0.6);\n --color-notice-text: rgb(39 55 76);\n --color-focus: rgb(38 230 255);\n --color-shadow: rgb(31 38 135 / 0.37);\n --color-overlay: rgb(0 0 0 / 0.61);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"SF Pro Text\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n --font-heading: Inter, \"SF Pro Text\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n --font-ui: \"Geist Mono\", \"JetBrains Mono\", ui-monospace, SFMono-Regular, \"Roboto Mono\", Menlo, monospace;\n --font-mono: \"Geist Mono\", \"JetBrains Mono\", ui-monospace, SFMono-Regular, \"Roboto Mono\", Menlo, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 13px;\n --text-large: 18px;\n --text-display: 56px;\n --text-h1: 36px;\n --text-h2: 24px;\n --text-h3: 18px;\n --line-body: 1.6;\n --line-heading: 1.33;\n --line-display: 1.14;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 500;\n --weight-display: 500;\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: 2px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 6px;\n --radius-pill: 30px;\n --radius-page: 10px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: 0 0 0 2px var(--color-border-strong);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 24px 48px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page:\n radial-gradient(circle, color-mix(in srgb, var(--color-text) 16%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,\n radial-gradient(ellipse 760px 420px at 50% 0, var(--color-fill-1), transparent),\n radial-gradient(ellipse 620px 480px at 100% 1500px, var(--color-fill-1), transparent),\n radial-gradient(ellipse 620px 480px at 0 2700px, var(--color-fill-1), transparent),\n radial-gradient(ellipse 620px 480px at 100% 3900px, var(--color-fill-1), transparent),\n var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: color-mix(in srgb, var(--color-surface), black 35%);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 60%);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px dashed var(--color-focus);\n --transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n --backdrop-blur: 3px;\n}\n" } }