{ "id": "v1-my-6666", "long_id": "v1.material-you.landing.s06.p06.t06.u06", "name": "Tonal app landing page, 2024", "era": { "slug": "material-you", "code": "my", "name": "Material You", "years": [ 2021, 2026 ], "description": "The tonal design of 2021 to 2026: every surface a tint of one key colour, large 16 to 28px corners, pill buttons and navigation indicators, filled tonal controls instead of shadows, big friendly type and plenty of space." }, "archetype": "landing", "mode": "pure", "viewport": { "width": 1440, "fluid": false }, "summary": "The landing page of an app in the tonal language of 2021 to 2026: a floating pill of navigation over wide rounded bands, the first a tonal hero with a phone drawn beside the pitch, then feature cards in four tones, quotes and a dark closing band. This set is the monochrome scheme: neutral grey surfaces with one teal primary and its pale container, 12 to 16px corners, pill buttons, and a hairline of shadow under cards and the floating bar. Headings are a geometric grotesque (Space Grotesk) at medium weight, at most 48px, over Public Sans.", "url": "https://chrono.skin/s/v1-my-6666", "preview_url": "https://chrono.skin/s/v1-my-6666/specimen.html", "files": { "STYLE.md": "# Tonal app landing page, 2024\n\n## Summary\n\nThe landing page of an app in the tonal language of 2021 to 2026: a floating pill of navigation over wide rounded bands, the first a tonal hero with a phone drawn beside the pitch, then feature cards in four tones, quotes and a dark closing band. This set is the monochrome scheme: neutral grey surfaces with one teal primary and its pale container, 12 to 16px corners, pill buttons, and a hairline of shadow under cards and the floating bar. Headings are a geometric grotesque (Space Grotesk) at medium weight, at most 48px, over Public Sans.\n\n## Layout\n\n- Designed at 1440px. The window is `--fill-page` with `--space-3` at its sides; every band is centred and at most `--size-page` 1280px wide, and bands are `--space-3` apart.\n- `.ds-nav` is a pill on `--fill-bar`, at most `--size-bar` 920px wide, centred and sticky `--space-3` from the top, with `--shadow-control-hover`: `.ds-brand` at the left, `.ds-nav__links` centred (each a `--size-control` 44px pill), `.ds-nav__tools` (a text button and the one filled button) at the right.\n- Home view, a `.ds-main` column: `.ds-hero` (copy on the left, `.ds-hero__art` `--size-art` 420px wide on the right holding `.ds-shapes` and the `.ds-phone`), `.ds-stats` (four tiles), a `.ds-band` with a section head, filter chips and the `.ds-grid` of four feature cards, a `.ds-band` with the quotes (`.ds-list--quotes`, three across, and `.ds-carousel__dots`), a `.ds-pair` of two cards (what is new; a `.ds-capture` field), and `.ds-cta`, the closing band on `--fill-inverse`. `.ds-footer` is a tonal band with four columns.\n- Spacing: `--space-1` 4px (between navigation pills, icon to label), `--space-2` 8px (between buttons, chips, cards inside the phone), `--space-3` 12px (between bands, tiles and cards), `--space-4` 16px (field gap, row padding), `--space-5` 24px (card padding, under a section head), `--space-6` 32px (footer padding, columns gap), `--space-7` 48px (band top and bottom, sheet padding), `--space-8` 72px (band sides).\n- Heights: buttons and navigation pills `--size-control` 44px; large buttons, fields and the search bar `--size-field` 56px; chips `--size-chip` 32px; list rows `--size-row` 64px; table rows and tabs `--size-row-dense` 52px; feature cards at least `--size-tile` 280px; quote cards at least `--size-quote` 200px. The phone is `--size-phone` 272px by `--size-phone-tall` 540px. `--size-measure` 640px caps running text, `--size-dialog` is 400px.\n- Inner pages have no hero. The floating navigation stays; the view is one `.ds-sheet` (`--color-canvas`, `--radius-page`, `--space-7` of padding) that opens with `.ds-breadcrumb` (where the view is below another), then `.ds-page-header`, then the working components: `.ds-tabs` over `.ds-columns` (table and pagination at 3 parts, a `.ds-stack` of cards at 2); or a large `.ds-search` over `.ds-layout` (the `.ds-sidebar` at 1 part, article and cards at 3); or `.ds-columns--even` with the form and a stack.\n- Views: `home` is the landing page. `download` lists the releases under device tabs, with the steps to install. `help` has the topics, one answer and an empty list of sent questions. `start` is the sign-up form with its notices and the confirmation dialog.\n- Below 1100px the hero stacks (art under the copy), grids and stats have two columns and paired blocks one. Below 640px the navigation pill becomes a rounded block of two rows (brand and the filled button, then the links across the width), everything is one column and `.ds-table__extra` cells are hidden.\n\n## Typography and colour roles\n\n- `--font-heading` is Space Grotesk (then Sora, Urbanist, Century Gothic); `--font-body` and `--font-ui` are Public Sans; `--font-mono` (Space Mono) is for code only.\n- Sizes: `--text-base` 16px at `--line-body` 1.45; `--text-small` 12px (meta, labels, badges, the labels inside the phone); `--text-ui` 14px (buttons, chips, tabs, navigation, table cells, card text); `--text-large` 19px (hero lead, quotes, prose lead); `--text-display` 48px at `--line-display` 1.1 with `--display-tracking` -1.2px (hero title only); `--text-h1` 32px, `--text-h2` 24px, `--text-h3` 18px at `--line-heading` 1.2 with `--heading-tracking` -0.4px.\n- Weights: headings, display and labels 500, `--weight-bold` 600, body 400. `--ui-transform` is `none`: labels are sentence case.\n- Links in running text are underlined (`--link-decoration`); navigation, titles and quiet links are not.\n- The era's rule for text on fills, which every layout and every token set of this era keeps: on `--fill-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` and on all four `--color-fill-*` blocks, text is `--color-text`, titles `--color-heading` and captions `--color-text-muted`; the fills are container tones, so the ordinary text colours stay readable on them in a light and in a dark scheme. On `--fill-bar` text is `--color-bar-text`; on `--fill-bar-alt` it is `--color-bar-alt-text`; on `--fill-inverse` it is `--color-inverse-text`; on `--fill-accent` it is `--color-accent-text`; on `--fill-button` it is `--color-button-text`; on `--fill-button-secondary` it is `--color-button-secondary-text`; on `--color-notice` it is `--color-notice-text`; on `--color-danger-surface` the body is `--color-text` and the title and icon are `--color-danger`. A solid block of `--color-danger`, `--color-success`, `--color-warning` or `--color-accent-alt` carries `--color-canvas` as its text colour, because the status colours are dark in a light scheme and pale in a dark one, always opposite to the canvas.\n- Tonal roles: `--color-page` is the surface container behind everything; the bar, rail or drawer and the table head are on `--fill-bar`, which the surface part sets to a neighbouring container tone, so each surface set shows there; `--color-canvas` is the plain surface of the rounded content sheet; `--color-surface` (container low) fills cards and list cards, `--color-surface-alt` (container high) stat tiles and dialogs, `--color-surface-strong` (container highest) tonal cards, inline code and hovered rows. `--color-accent` is the primary container: hero card, floating action button, default badge, the disc of an empty state. `--color-button-secondary` is the secondary container: tonal buttons and every pill indicator behind a current navigation item, chip or tab. `--color-accent-alt` is the tertiary colour, used solid for \"new\" markers. `--color-fill-1` to `--color-fill-4` are the primary, secondary and tertiary containers and the highest surface container.\n- `--color-link` is the primary colour: links, outlined and text button labels, the current tab, list markers. Visited links take the tertiary `--color-link-visited`. `--color-border` (outline variant) draws card outlines, chips and dividers, `--color-border-strong` (outline) the outlined button and the off switch, `--color-border-muted` the dividers inside lists and tables. `--color-input-border` outlines fields; `--color-focus` is the focus line.\n- Status badges are tonal: `--color-success`, `--color-warning` or `--color-danger` mixed at 22% into `--color-canvas`, with `--color-text` and a dot in the full status colour.\n- Shape: every button, badge, search bar, navigation indicator and pagination link uses `--radius-pill`; fields and chips use `--radius-control`; cards, notices, tables and the floating action button use `--radius-panel`; the content sheet, hero, grid tiles, dialogs and empty states use `--radius-page`.\n- One-off values built with `color-mix()` because the vocabulary has no token: an 8% or 10% wash of the label colour for hovered tonal, outlined, text and icon buttons, chips and navigation items; the 22% status tints; the danger colour mixed with 12% of `--color-text` for a hovered danger button.\n- Elevation is shown by tone first. `--shadow-panel` is a hairline under cards and quote cards, `--shadow-control` under buttons; `--shadow-control-hover` is on hovered buttons, the search bar and the floating navigation, `--shadow-control-pressed` on a pressed button and the selected chip, `--shadow-dialog` on dialogs and the phone. `--shadow-text` is on the hero title and button labels (`none`). `--backdrop-blur` blurs what lies behind the dialog scrim (`0px`).\n- The phone is built from tokens only: a body on `--fill-inverse`, a screen on `--color-canvas`, cards in the four `--color-fill-*` tones and `.ds-line` bars in the text colour at 22% or 60% opacity standing for text.\n\n## Components\n\n- `.ds-page` on ``: the window on `--fill-page`.\n- `.ds-nav`: the floating navigation pill on `--fill-bar`. `.ds-nav__links` holds pill-shaped `.ds-nav__link` items, the current one (`is-current`, or the rule for the open view) filled with `--fill-button-secondary`; `.ds-nav__tools` holds the buttons.\n- `.ds-main`: the column of bands of a view. `.ds-sheet`: the canvas sheet of an inner view. `.ds-band`: a canvas band of the home view with a `.ds-section__head` and, under a title, a `.ds-section__lead`.\n- `.ds-hero`: the pitch on `--fill-accent`. `.ds-hero__copy` holds `.ds-hero__kicker` (a badge and a line), `.ds-hero__title`, `.ds-hero__lead`, a `.ds-buttons` group of large buttons and `.ds-hero__note`; an outlined button inside it takes the accent text colour. `.ds-hero__art` holds `.ds-shapes` (`.ds-shape--1` to `--4`: circle, rounded square, pill, tile) behind the phone.\n- `.ds-phone`: the drawn handset. `.ds-phone__screen` stacks `.ds-phone__bar` (a title and `.ds-phone__dot`), `.ds-phone__card` blocks (`--2`, `--3`, `--4` pick the fill, `--tall` the height; two share a row in `.ds-phone__pair`) and `.ds-phone__nav` with `.ds-phone__tab` marks, one `is-current`. `.ds-line` (`--short`, `--strong`) is a bar standing for a line of text.\n- `.ds-grid`: four feature cards. Each `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) has a `.ds-grid__art` tile with an icon, `.ds-grid__title`, `.ds-grid__text` and a `.ds-grid__more` line; hovering tightens the corners.\n- `.ds-list--quotes`: the list as three quote cards in a row, each a `.ds-list__quote` over `.ds-list__who` (avatar, name as `.ds-list__title`, role as `.ds-list__meta`); `is-current` is the card in front, a tone stronger. `.ds-carousel__steps` holds its previous and next buttons, `.ds-carousel__dots` its `.ds-carousel__dot` marks.\n- `.ds-pair`: two large cards side by side. `.ds-capture`: one pill-shaped field and a large button in a row.\n- `.ds-cta`: the closing band on `--fill-inverse` with `.ds-cta__title`, `.ds-cta__text` and a `.ds-button--on-inverse`.\n- `.ds-tabs`: a hairline-ruled row of `.ds-tabs__tab`; `is-current` is link-coloured with a short rounded `--border-width-strong` indicator under the label.\n- `.ds-sidebar`: the topic list of the help view, a filled card with `.ds-sidebar__title` and a `.ds-sidebar__list` of pill-shaped `.ds-sidebar__link` rows; `is-current` is on the secondary container. `.ds-layout` places it beside the content.\n- `.ds-steps`: a numbered list, each `.ds-steps__item` led by its number on a secondary-container disc.\n- `.ds-footer`: a band on `--fill-bar-alt`; `.ds-footer__inner` has four columns with the name, a `.ds-footer__legal` line, and `.ds-footer__title` over a `.ds-footer__list` of `.ds-footer__link`.\n- `.ds-brand`: the site's mark and name, one link. `.ds-brand__mark` is a round tile dressed like the filled button (`--fill-button`, `--color-button-text`, `--radius-pill`, `--shadow-control`, a transparent `--border-width` border) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-page-header`: the head of an inner view, unboxed on the sheet. `.ds-page-header__body` holds `.ds-page-header__title` (`--text-h1`) and `.ds-page-header__text` (one muted line); `.ds-page-header__actions` sits at the right with one filled button at most.\n- `.ds-prose`: long-form text; styles h1 to h3, paragraphs, lists, `strong`, inline `code` and links. `.ds-prose__lead` is the larger opening paragraph.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` is text-coloured, `--more` carries a chevron. `.ds-links` lays several out in a row.\n- `.ds-button`: the filled pill button. `--secondary` is the tonal button, `--outlined` has a `--color-border-strong` outline and a link-coloured label, `--text` has no container, `--danger` is filled with `--color-danger` (with `--text` it is a danger-coloured text button for dialogs), `--large` is the tall form for a hero or an order form, `--icon` is a round icon button, `--fab` is the floating action button, a rounded square in `--fill-accent`, and `--on-inverse` is the button on an inverted block. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`. Never more than one filled button in a group.\n- `.ds-icon`: stroked inline SVG in the current text colour; `--small` inside buttons, chips and tabs.\n- `.ds-chip`: an outlined 32px chip; `is-current` fills it with the secondary container. Group with `.ds-chips`.\n- `.ds-form`: stacked fields. `.ds-form__field` wraps a small `.ds-form__label` above a `.ds-form__control` (56px, outlined, `--fill-input`; `--area` for a textarea; wrapped in `.ds-form__select` for a select); `.ds-form__row` puts two fields side by side. `is-focus` shows the focus ring, `is-invalid` on the field plus `.ds-form__error` shows an error, `.ds-form__hint` is help text. `.ds-form__check` with `.ds-form__checkbox` is a checkbox row; `.ds-form__check--between` with `.ds-form__check-text` and a `.ds-switch` is a setting row. `.ds-form__actions` holds the buttons.\n- `.ds-switch`: a checkbox drawn as a pill track; the thumb is small and outline-coloured when off, larger and in `--color-button-text` on a `--fill-button` track when on.\n- `.ds-table`: inside `.ds-table-wrap`, an outlined rounded container. The head row is on `--fill-bar`; rows are divided by `--color-border-muted`; `.ds-table__num` right-aligns numbers, `.ds-table__name` sets a code name, `.ds-table__extra` marks cells a phone can do without; `tr.is-current` is tinted.\n- `.ds-list`: rows of `.ds-list__item`, each with an optional `.ds-list__icon` disc (`--1`, `--3`, `--4` pick the fill), `.ds-list__body` with `.ds-list__title` and `.ds-list__text`, and `.ds-list__meta` or a button on the right. `--cards` turns every row into its own filled card, `--space-2` apart, and `is-current` puts the selected one on the secondary container.\n- `.ds-panel`: a filled card with `.ds-panel__title`, `.ds-panel__body` and optional `.ds-panel__head` and `.ds-panel__actions`. `--outlined` is the outlined card on the canvas, `--tonal` the stronger tint, `--accent` the primary container. A card is filled or outlined, never both.\n- `.ds-stat`: one summary figure, a tile with `.ds-stat__value` and `.ds-stat__label`. Three or more sit in a `.ds-stats` row.\n- `.ds-badge`: a small pill in `--fill-accent`; `--new` is the solid tertiary colour, `--count` a solid danger count, and `--success`, `--warning`, `--danger` are the tonal status labels with a dot. Group with `.ds-badges`.\n- `.ds-notice`: a tonal card with a leading icon, `.ds-notice__body` and `.ds-notice__title`; `--error` is on `--color-danger-surface` with a danger-coloured title. Group with `.ds-notices`.\n- `.ds-pagination`: a row of round `.ds-pagination__link`; `is-current` is filled like the primary button, `is-disabled` is grey; previous and next are chevron icons.\n- `.ds-breadcrumb`: a muted trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`.\n- `.ds-dialog`: a `--color-surface-alt` sheet with `--radius-page` corners, an optional `.ds-dialog__icon`, `.ds-dialog__title`, `.ds-dialog__body` and right-aligned text buttons in `.ds-dialog__actions`. It sits on `.ds-overlay`, the scrim.\n- `.ds-empty`: a centred block with `.ds-empty__mark` (a rounded square in `--fill-accent` holding an icon), `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-search`: the search bar, one pill on `--fill-input` with an icon and `.ds-search__text`. `.ds-avatar`: a disc with initials. `.ds-snackbar`: a short message on `--fill-inverse` with `.ds-snackbar__action`.\n- `.ds-search--large` is the search field of the help view. `.ds-section` with `.ds-section__head`, `.ds-section__title` and `.ds-section__label` titles a block; `.ds-columns` (`--even`) puts two blocks side by side and `.ds-stack` piles cards in one of them.\n\n## Never\n\n- `row-gap <= 12px`: quote cards are 12px apart and table rows touch.\n- `block-gap <= 48px`: bands are 12px apart, blocks inside them at most 48px.\n- `content-width <= 90%`: bands stop at 1280px of a 1440px window.\n- `uppercase-text = 0%`: buttons, tabs and navigation labels are sentence case.\n- `font-weight <= 600`: semibold is the heaviest weight.\n- `font-weight >= 400`: no thin text.\n- `font-size >= 12px`: the smallest labels are 12px.\n- `font-size <= 48px`: the hero title is the largest text.\n- `font-families <= 3`: a heading face, a text face and the mono for code.\n- `line-height <= 1.6`: body text is 16px on a 23px line.\n- `underlined-links <= 25%`: only links in running text are underlined.\n- `gradient-fills = 0%`: every fill is one flat tone.\n- `text-shadow = none`: no text has a shadow.\n- `border-width <= 2px`: outlines are 1px; the tab indicator, checkbox and switch track are 2px.\n- `box-shadow-blur <= 6px`: shadows are hairlines; the largest is under the phone and dialogs.\n- `border-radius <= 24px`: containers are 12 or 16px, the phone body 24px; anything rounder is a full pill.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Anything that holds content is a `.ds-panel`: filled with a container tone, or outlined on the canvas, with `--radius-panel`. Anything pressed is a `.ds-button` variant and stays a full pill. A selected state is the secondary container (`--fill-button-secondary` with `--color-button-secondary-text`) on a pill or on the item itself. Raise something by moving it to the next surface tone, not by adding a shadow. Use tokens only, take heights and gaps from the `--size-*` and `--space-*` scale, and follow the rule for text on fills in \"Typography and colour roles\". Never add a gradient, an uppercase label, a square corner on a container or a second filled button beside the first.\n", "components.css": ":root {\n --size-page: 1280px;\n --size-bar: 920px;\n --size-measure: 640px;\n --size-icon: 24px;\n --size-icon-small: 18px;\n --size-mark: 40px;\n --size-control: 44px;\n --size-field: 56px;\n --size-fab: 56px;\n --size-chip: 32px;\n --size-badge: 24px;\n --size-check: 18px;\n --size-switch: 52px;\n --size-thumb: 16px;\n --size-thumb-on: 24px;\n --size-row: 64px;\n --size-row-dense: 52px;\n --size-area: 112px;\n --size-dialog: 400px;\n --size-empty: 80px;\n --size-art: 420px;\n --size-phone: 272px;\n --size-phone-tall: 540px;\n --size-tile: 280px;\n --size-quote: 200px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 72px;\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.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* icons: stroked inline SVG in the current text colour */\n.ds-icon {\n display: inline-block;\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-icon--small {\n width: var(--size-icon-small);\n height: var(--size-icon-small);\n}\n\n/* brand: a round tile dressed like the filled button, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\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-large);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n line-height: var(--line-heading);\n}\n\n/* section titles on the canvas */\n.ds-section {\n margin-top: var(--space-7);\n}\n.ds-section__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n margin-bottom: var(--space-4);\n}\n.ds-section__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-section__label {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-columns {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-columns--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ds-stack {\n display: grid;\n gap: var(--space-4);\n}\n\n/* page header of an inner view */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: var(--space-3) 0 var(--space-5);\n}\n.ds-page-header__body {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: var(--space-2);\n}\n\n/* prose */\n.ds-prose {\n max-width: var(--size-measure);\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-3);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\n.ds-prose > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose p,\n.ds-prose ul {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-link);\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-surface-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n line-height: var(--line-heading);\n color: var(--color-text-muted);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n border-radius: var(--radius-control);\n transition: var(--transition);\n}\n.ds-link:visited, .ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover, .ds-link.is-hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-link:active, .ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible, .ds-link.is-focus { outline: var(--focus-ring); outline-offset: var(--border-width-strong); }\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--more {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n\n/* buttons: every button is a full pill */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\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 margin: 0;\n padding: 0 var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover, .ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active, .ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible, .ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:hover, .ds-button--secondary.is-hover {\n background: color-mix(in srgb, var(--color-button-secondary-text) 10%, var(--color-button-secondary));\n color: var(--color-button-secondary-text);\n}\n.ds-button--outlined {\n background: transparent;\n color: var(--color-link);\n border-color: var(--color-border-strong);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--text {\n padding: 0 var(--space-3);\n background: transparent;\n color: var(--color-link);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--outlined:hover, .ds-button--outlined.is-hover,\n.ds-button--text:hover, .ds-button--text.is-hover {\n background: color-mix(in srgb, var(--color-link) 10%, transparent);\n color: var(--color-link);\n box-shadow: none;\n}\n.ds-button--danger {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-button--danger:hover, .ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 88%, var(--color-text));\n color: var(--color-canvas);\n}\n.ds-button--text.ds-button--danger {\n background: transparent;\n color: var(--color-danger);\n}\n.ds-button--text.ds-button--danger:hover, .ds-button--text.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 10%, transparent);\n color: var(--color-danger);\n}\n.ds-button--on-inverse {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n}\n.ds-button--on-inverse:hover, .ds-button--on-inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 88%, var(--color-inverse));\n color: var(--color-inverse);\n}\n.ds-button--large {\n min-height: var(--size-field);\n padding: 0 var(--space-6);\n font-size: var(--text-base);\n}\n.ds-button--icon {\n width: var(--size-control);\n padding: 0;\n background: transparent;\n color: inherit;\n box-shadow: none;\n}\n.ds-button--icon:hover, .ds-button--icon.is-hover {\n background: color-mix(in srgb, currentColor 10%, transparent);\n color: inherit;\n box-shadow: none;\n}\n.ds-button--fab {\n min-width: var(--size-fab);\n min-height: var(--size-fab);\n padding: 0 var(--space-4);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-button--fab:hover, .ds-button--fab.is-hover {\n background: color-mix(in srgb, var(--color-accent-text) 10%, var(--color-accent));\n color: var(--color-accent-text);\n box-shadow: var(--shadow-dialog);\n}\n.ds-button:disabled, .ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: transparent;\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n pointer-events: none;\n}\n\n/* chips and badges */\n.ds-chips,\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-chip);\n padding: 0 var(--space-4);\n background: transparent;\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-chip:hover, .ds-chip.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-chip.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: transparent;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n min-height: var(--size-badge);\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n white-space: nowrap;\n}\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-canvas);\n}\n.ds-badge--count {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n}\n.ds-badge--success { background: color-mix(in srgb, var(--color-success) 22%, var(--color-canvas)); }\n.ds-badge--warning { background: color-mix(in srgb, var(--color-warning) 22%, var(--color-canvas)); }\n.ds-badge--danger { background: color-mix(in srgb, var(--color-danger) 22%, var(--color-canvas)); }\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-radius: 50%;\n background: currentColor;\n}\n.ds-badge--success::before { background: var(--color-success); }\n.ds-badge--warning::before { background: var(--color-warning); }\n.ds-badge--danger::before { background: var(--color-danger); }\n\n/* avatar: a tonal disc with initials */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-fill-3);\n color: var(--color-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n}\n\n/* search: one pill */\n.ds-search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n flex: 1;\n min-width: 0;\n min-height: var(--size-field);\n padding: 0 var(--space-5);\n background: var(--fill-input);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-hover);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-decoration: none;\n}\n.ds-search__text {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n/* form: fields with a label above */\n.ds-form {\n display: grid;\n gap: var(--space-5);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: start;\n}\n.ds-form__field {\n display: grid;\n align-content: start;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-text-muted);\n}\n.ds-form__control {\n display: block;\n width: 100%;\n min-height: var(--size-field);\n margin: 0;\n padding: 0 var(--space-4);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n appearance: none;\n transition: var(--transition);\n}\n.ds-form__control--area {\n min-height: var(--size-area);\n padding: var(--space-3) var(--space-4);\n resize: vertical;\n}\n.ds-form__control:focus, .ds-form__control.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--border-width) * -1);\n border-color: var(--color-focus);\n}\n.ds-form__select {\n position: relative;\n display: block;\n}\n.ds-form__select::after {\n content: \"\";\n position: absolute;\n top: 50%;\n right: var(--space-5);\n width: var(--space-2);\n height: var(--space-2);\n border-right: var(--border-width-strong) solid var(--color-input-text);\n border-bottom: var(--border-width-strong) solid var(--color-input-text);\n transform: translateY(-75%) rotate(45deg);\n pointer-events: none;\n}\n.ds-form__hint {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n font-size: var(--text-small);\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__label {\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__control {\n border-color: var(--color-danger);\n outline: var(--border-width) solid var(--color-danger);\n outline-offset: calc(var(--border-width-strong) * -1);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-control);\n color: var(--color-text);\n}\n.ds-form__check--between {\n justify-content: space-between;\n min-height: var(--size-row);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__check-text {\n display: grid;\n}\n.ds-form__check-text small {\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-form__checkbox {\n position: relative;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n background: transparent;\n border: var(--border-width-strong) solid var(--color-input-border);\n border-radius: calc(var(--size-check) / 6);\n cursor: pointer;\n}\n.ds-form__checkbox:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-form__checkbox:checked::after {\n content: \"\";\n position: absolute;\n left: 30%;\n top: 5%;\n width: 35%;\n height: 65%;\n border-right: var(--border-width-strong) solid var(--color-button-text);\n border-bottom: var(--border-width-strong) solid var(--color-button-text);\n transform: rotate(45deg);\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* switch: the thumb grows when it is on */\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--size-switch);\n height: var(--size-chip);\n margin: 0;\n appearance: none;\n background: var(--color-surface-strong);\n border: var(--border-width-strong) solid var(--color-border-strong);\n border-radius: var(--radius-pill);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 25%;\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-border-strong);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: var(--transition);\n}\n.ds-switch:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-switch:checked::before {\n left: 69%;\n width: var(--size-thumb-on);\n height: var(--size-thumb-on);\n background: var(--color-button-text);\n}\n.ds-switch:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n\n/* table: an outlined container, the head in the bar tone */\n.ds-table-wrap {\n overflow-x: auto;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-canvas);\n font-size: var(--text-ui);\n color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n height: var(--size-row-dense);\n padding: var(--space-2) 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-ui);\n white-space: nowrap;\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) 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__name {\n font-family: var(--font-mono);\n}\n.ds-table tr.is-current td {\n background: var(--color-surface);\n}\n.ds-table a {\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table a:hover {\n color: var(--color-link-hover);\n}\n\n/* list: rows with a leading tonal disc */\n.ds-list {\n display: grid;\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 min-height: var(--size-row);\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-text);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-fill-2);\n color: var(--color-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-list__icon--1 { background: var(--color-fill-1); }\n.ds-list__icon--3 { background: var(--color-fill-3); }\n.ds-list__icon--4 { background: var(--color-fill-4); }\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-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover {\n color: var(--color-link-hover);\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n flex: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: right;\n}\n.ds-list--cards {\n gap: var(--space-2);\n}\n.ds-list--cards .ds-list__item,\n.ds-list--cards .ds-list__item:last-child {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-list--cards .ds-list__item.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n box-shadow: none;\n}\n.ds-list--cards .ds-list__item.is-current .ds-list__title,\n.ds-list--cards .ds-list__item.is-current .ds-list__text,\n.ds-list--cards .ds-list__item.is-current .ds-list__meta {\n color: var(--color-button-secondary-text);\n}\n.ds-list--cards .ds-list__item.is-current .ds-list__icon {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n\n/* panel: a filled card; outlined and tonal variants */\n.ds-panel {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n padding: var(--space-5);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel--outlined {\n background: var(--color-canvas);\n border-color: var(--color-border);\n box-shadow: none;\n}\n.ds-panel--tonal {\n background: var(--color-surface-strong);\n box-shadow: none;\n}\n.ds-panel--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n box-shadow: none;\n}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-panel__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-panel--accent .ds-panel__title {\n color: var(--color-accent-text);\n}\n.ds-panel__body {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-panel--accent .ds-panel__body {\n color: var(--color-accent-text);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__body p:last-child {\n margin-bottom: 0;\n}\n.ds-panel__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-2);\n}\n\n/* stats: tonal tiles, one figure each */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n}\n.ds-stat__value {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-stat__label {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n\n/* tabs: primary tabs with a short rounded indicator */\n.ds-tabs {\n display: flex;\n gap: var(--space-1);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n overflow-x: auto;\n}\n.ds-tabs__tab {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\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 text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover, .ds-tabs__tab.is-hover {\n color: var(--color-text);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-link);\n}\n.ds-tabs__tab.is-current::after {\n content: \"\";\n position: absolute;\n left: var(--space-4);\n right: var(--space-4);\n bottom: 0;\n height: var(--border-width-strong);\n background: var(--color-link);\n border-radius: var(--border-width-strong) var(--border-width-strong) 0 0;\n}\n\n/* notices: tonal cards with a leading icon */\n.ds-notices {\n display: grid;\n gap: var(--space-3);\n}\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border-radius: var(--radius-panel);\n}\n.ds-notice__body {\n margin: 0;\n min-width: 0;\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n}\n.ds-notice--error .ds-notice__title,\n.ds-notice--error .ds-icon {\n color: var(--color-danger);\n}\n\n/* pagination: round links, the current one filled */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: var(--space-5) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n color: var(--color-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover, .ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n pointer-events: none;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-top: var(--border-width) solid currentColor;\n border-right: var(--border-width) solid currentColor;\n transform: rotate(45deg);\n}\n.ds-breadcrumb__link {\n color: var(--color-text-muted);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover {\n color: var(--color-link-hover);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n font-weight: var(--weight-ui);\n}\n\n/* dialog: a tinted sheet with the largest corners, on a scrim */\n.ds-overlay {\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-panel);\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog {\n display: grid;\n gap: var(--space-4);\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__icon {\n color: var(--color-link);\n}\n.ds-dialog__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-dialog__body {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-7) var(--space-5);\n background: var(--fill-panel);\n border-radius: var(--radius-page);\n text-align: center;\n}\n.ds-empty__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-empty);\n height: var(--size-empty);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-page);\n}\n.ds-empty__title {\n margin: var(--space-2) 0 0;\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 color: var(--color-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-2);\n max-width: 44ch;\n color: var(--color-text-muted);\n}\n\n/* snackbar: the inverted block */\n.ds-snackbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n min-height: var(--size-row-dense);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-size: var(--text-ui);\n}\n.ds-snackbar__action {\n padding: var(--space-2) var(--space-3);\n color: var(--color-inverse-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* shapes: the soft geometric figures used as artwork */\n.ds-shapes {\n position: relative;\n flex: none;\n width: var(--size-art);\n height: var(--size-art);\n}\n.ds-shape {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-text);\n}\n.ds-shape--1 {\n inset: 0 40% 40% 0;\n background: var(--fill-button);\n color: var(--color-button-text);\n border-radius: 50%;\n}\n.ds-shape--2 {\n inset: 12% 0 46% 52%;\n background: var(--color-fill-3);\n border-radius: var(--radius-page);\n}\n.ds-shape--3 {\n inset: 58% 30% 0 8%;\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-radius: var(--radius-pill);\n}\n.ds-shape--4 {\n inset: 62% 0 6% 74%;\n background: var(--color-canvas);\n border-radius: var(--radius-panel);\n}\n.ds-hero__copy {\n min-width: 0;\n}\n.ds-section--tight {\n margin-top: var(--space-4);\n}\n\n\n/* shell: a floating pill of navigation over wide rounded bands */\n.ds-page {\n min-height: 100vh;\n margin: 0;\n padding: 0 var(--space-3) var(--space-3);\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-nav {\n position: sticky;\n top: var(--space-3);\n z-index: 5;\n display: flex;\n align-items: center;\n gap: var(--space-4);\n max-width: var(--size-bar);\n margin: 0 auto var(--space-3);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n justify-content: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: inline-flex;\n align-items: center;\n min-height: var(--size-control);\n padding: 0 var(--space-4);\n color: var(--color-bar-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-nav__link:hover, .ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 10%, transparent);\n}\n.ds-nav__link:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#download:target) .ds-nav__link[href=\"#download\"],\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"],\n.ds-page:has(#start:target) .ds-nav__link[href=\"#start\"],\n.ds-nav__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-main {\n display: grid;\n gap: var(--space-3);\n max-width: var(--size-page);\n margin: 0 auto;\n}\n.ds-main > * {\n min-width: 0;\n}\n.ds-sheet {\n padding: var(--space-7);\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n\n/* hero: the pitch on a tonal band, a phone drawn beside it */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-art);\n align-items: center;\n gap: var(--space-7);\n padding: var(--space-7) var(--space-8);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-page);\n overflow: hidden;\n}\n.ds-hero__kicker {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 46ch;\n margin: var(--space-4) 0 var(--space-6);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-hero__note {\n margin: var(--space-4) 0 0;\n font-size: var(--text-ui);\n}\n.ds-hero .ds-button--outlined {\n color: var(--color-accent-text);\n border-color: var(--color-accent-text);\n}\n.ds-hero .ds-button--outlined:hover {\n background: color-mix(in srgb, var(--color-accent-text) 10%, transparent);\n}\n.ds-hero__art {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(var(--size-phone-tall) + var(--space-5));\n}\n.ds-hero__art .ds-shapes {\n position: absolute;\n inset: 8% 0;\n width: auto;\n height: auto;\n}\n\n/* phone: a handset drawn from tokens, its screen made of tonal cards */\n.ds-phone {\n position: relative;\n display: block;\n flex: none;\n width: var(--size-phone);\n height: var(--size-phone-tall);\n padding: var(--space-2);\n background: var(--fill-inverse);\n border-radius: calc(var(--radius-page) + var(--space-2));\n box-shadow: var(--shadow-dialog);\n}\n.ds-phone__screen {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n height: 100%;\n padding: var(--space-3);\n background: var(--color-canvas);\n color: var(--color-text);\n border-radius: var(--radius-page);\n overflow: hidden;\n}\n.ds-phone__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\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 color: var(--color-heading);\n}\n.ds-phone__dot {\n display: block;\n flex: none;\n width: var(--space-6);\n height: var(--space-6);\n background: var(--color-fill-3);\n border-radius: 50%;\n}\n.ds-phone__card {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n gap: var(--space-2);\n flex: 1;\n min-height: 0;\n padding: var(--space-3);\n background: var(--color-fill-1);\n border-radius: var(--radius-panel);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n}\n.ds-phone__card--2 { background: var(--color-fill-2); }\n.ds-phone__card--3 { background: var(--color-fill-3); }\n.ds-phone__card--4 { background: var(--color-fill-4); }\n.ds-phone__card--tall {\n flex: 2;\n}\n.ds-phone__pair {\n display: flex;\n flex: 1.4;\n gap: var(--space-2);\n min-height: 0;\n}\n.ds-phone__nav {\n display: flex;\n align-items: center;\n justify-content: space-around;\n margin: var(--space-1) calc(var(--space-3) * -1) calc(var(--space-3) * -1);\n padding: var(--space-3);\n background: var(--color-surface-alt);\n}\n.ds-phone__tab {\n display: block;\n width: var(--space-5);\n height: var(--space-3);\n background: var(--color-border);\n border-radius: var(--radius-pill);\n}\n.ds-phone__tab.is-current {\n width: var(--space-7);\n background: var(--fill-button-secondary);\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n}\n.ds-line {\n display: block;\n width: 100%;\n height: var(--space-2);\n background: currentColor;\n border-radius: var(--radius-pill);\n opacity: 0.22;\n}\n.ds-line--short {\n width: 55%;\n}\n.ds-line--strong {\n width: 70%;\n opacity: 0.6;\n}\n\n.ds-stats {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.ds-stat {\n background: var(--color-canvas);\n}\n.ds-band {\n padding: var(--space-7) var(--space-8);\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n.ds-band > .ds-section__head {\n align-items: center;\n margin-bottom: var(--space-5);\n}\n.ds-section__lead {\n max-width: 56ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n}\n\n/* grid: four large feature cards, one tone each */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n min-height: var(--size-tile);\n padding: var(--space-5);\n background: var(--color-fill-1);\n color: var(--color-text);\n border-radius: var(--radius-page);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__cell--4 { background: var(--color-fill-4); }\n.ds-grid__cell:hover, .ds-grid__cell.is-hover {\n border-radius: var(--radius-control);\n}\n.ds-grid__art {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-fab);\n height: var(--size-fab);\n margin-bottom: auto;\n background: var(--color-canvas);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n}\n.ds-grid__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-grid__more {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-text);\n}\n\n/* carousel: three of the quotes, drawn still */\n.ds-carousel__steps {\n display: flex;\n gap: var(--space-2);\n}\n.ds-list--quotes {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-list--quotes .ds-list__item,\n.ds-list--quotes .ds-list__item:last-child {\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-5);\n min-height: var(--size-quote);\n padding: var(--space-5);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-list--quotes .ds-list__item.is-current {\n background: var(--color-surface-strong);\n}\n.ds-list__quote {\n margin: 0;\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 letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-list__who {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n width: 100%;\n}\n.ds-list--quotes .ds-list__meta {\n text-align: left;\n}\n.ds-carousel__dots {\n display: flex;\n justify-content: center;\n gap: var(--space-2);\n margin-top: var(--space-5);\n}\n.ds-carousel__dot {\n display: block;\n width: var(--space-2);\n height: var(--space-2);\n background: var(--color-border-strong);\n border-radius: var(--radius-pill);\n}\n.ds-carousel__dot.is-current {\n width: var(--space-6);\n background: var(--fill-button);\n}\n\n/* closing rows */\n.ds-pair {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-3);\n align-items: stretch;\n}\n.ds-pair > .ds-panel {\n padding: var(--space-6);\n border-radius: var(--radius-page);\n}\n.ds-capture {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n.ds-capture .ds-form__control {\n flex: 1 1 var(--size-tile);\n width: auto;\n border-radius: var(--radius-pill);\n padding: 0 var(--space-5);\n}\n.ds-cta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-7) var(--space-8);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n}\n.ds-cta__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-cta__text {\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n\n/* inner views */\n.ds-layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-sheet .ds-badges {\n margin-bottom: var(--space-4);\n}\n.ds-search--large {\n flex: none;\n max-width: var(--size-measure);\n margin-bottom: var(--space-6);\n}\n.ds-steps {\n display: grid;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n counter-reset: step;\n}\n.ds-steps__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n counter-increment: step;\n}\n.ds-steps__item::before {\n content: counter(step);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-chip);\n height: var(--size-chip);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n\n/* sidebar: the topics of the help view */\n.ds-sidebar {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-3);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-text-muted);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-sidebar__link:hover, .ds-sidebar__link.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-sidebar__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n\n/* footer: a tonal band with the brand and three short columns */\n.ds-footer {\n max-width: var(--size-page);\n margin: var(--space-3) auto 0;\n padding: var(--space-6) var(--space-8);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-page);\n font-size: var(--text-ui);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-footer__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-footer__list {\n display: grid;\n gap: var(--space-1);\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 text-decoration: underline;\n}\n.ds-footer__legal {\n max-width: 36ch;\n margin: var(--space-3) 0 0;\n}\n\n@media (max-width: 1100px) {\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n padding: var(--space-7);\n }\n .ds-grid,\n .ds-stats {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-list--quotes,\n .ds-pair,\n .ds-columns,\n .ds-columns--even,\n .ds-layout {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-band,\n .ds-cta,\n .ds-footer {\n padding: var(--space-6);\n }\n .ds-sidebar__list {\n display: flex;\n flex-wrap: wrap;\n }\n}\n@media (max-width: 640px) {\n .ds-page {\n padding: 0 var(--space-2) var(--space-2);\n }\n .ds-nav {\n top: var(--space-2);\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2);\n margin-bottom: var(--space-2);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);\n border-radius: var(--radius-page);\n }\n .ds-nav__links {\n order: 3;\n flex-basis: 100%;\n justify-content: space-between;\n }\n .ds-nav__link {\n min-height: var(--size-chip);\n padding: 0 var(--space-3);\n }\n .ds-nav .ds-button--text {\n display: none;\n }\n .ds-main {\n gap: var(--space-2);\n }\n .ds-hero,\n .ds-band,\n .ds-cta,\n .ds-footer,\n .ds-sheet,\n .ds-pair > .ds-panel {\n padding: var(--space-5) var(--space-4);\n }\n .ds-hero__art .ds-shapes {\n display: none;\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-grid,\n .ds-stats,\n .ds-form__row,\n .ds-footer__inner {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid__cell {\n min-height: 0;\n }\n .ds-grid__art {\n margin-bottom: var(--space-3);\n }\n .ds-band > .ds-section__head {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-table__extra {\n display: none;\n }\n .ds-cta__title {\n font-size: var(--text-h2);\n }\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: tonal app landing page specimen\n\n\n\n\n\n
\n \n \n chronoskin\n \n \n
\n Sign in\n Start free\n
\n
\n\n
\n
\n
\n
\n

NewVersion 4 takes its colours from your wallpaper

\n

A week you can see at a glance

\n

chronoskin puts your plans, lists and reminders on one calm screen, on every device you own.

\n
\n Get the app\n See how it works\n
\n

Free for one person. No card, no trial clock.

\n
\n
\n
\n \n \n \n \n
\n
\n
\n
Wednesday
\n
Three things today
\n
\n
Shopping
\n
Choir, 19:00
\n
\n
Tomorrow
\n
\n
\n
\n
\n
\n\n
\n

4.8

Average of 21,000 ratings

\n

2 min

To set up a first week

\n

6

Kinds of device, one account

\n

0

Advertisements, ever

\n
\n\n
\n
\n

Four things it does well

Nothing here needs a manual. Each part works alone and better together.

\n \n
\n
\n

One week, one screen

Events, lists and reminders share a single view, so nothing hides in another tab.

How the week works \n

Shared without fuss

Hand a list to someone with a link. They do not need an account to tick things off.

Sharing a list \n

Your colours

The whole app takes its tones from one colour: your wallpaper, or any you pick.

Choosing a colour \n

Works on the train

Everything is on the device. Changes made in a tunnel sync when you come out.

Working offline \n
\n
\n\n
\n
\n

People who plan with it

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

  • I stopped keeping a paper diary beside the phone. That had never happened before.

    IV
    Ines VargaTeacher, plans a household of five
    • \n

  • The shared shopping list alone has saved us an argument a week.

    TR
    Tomas ReylJoiner, uses it with his partner
    • \n

  • Our choir of fourteen runs on one calendar now, and nobody had to install anything.

    MV
    Mirela VossChoir secretary since 2019
    • \n
\n
\n
\n\n
\n
\n

What is new in version 4

June
\n

Colours from your wallpaper, a week view on watches, and lists that can repeat. Version 3 keeps working and updates itself when you are ready.

\n
\n See all releases\n Read the notes\n
\n
\n
\n

Send the link to your phone

\n

We write once, with the download link, and never again.

\n
\n \n Send it\n
\n
\n
\n\n
\n

Start with this week

Two minutes to set up. Free for one person, for good.

\n Start free\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. The app
    2. \n
  2. Download
    3. \n
  3. Phones
    4. \n
\n
\n
\n

Download chronoskin

\n

One account, every device. Version 4.0.2 is the current release.

\n
\n
\n Get it for this phone\n
\n
\n \n
\n
\n
\n 4 releases\n New\n Current\n Ends in March\n Unsupported\n
\n
\n \n \n \n \n \n \n \n \n
ReleasePublishedSupportNeedsSize, MB
4.0.22 OctoberCurrentSystem 13 or later38.4
4.0.011 JuneCurrentSystem 13 or later38.1
3.8.520 JanuaryEnds in MarchSystem 11 or later31.7
2.9.15 May 2024UnsupportedSystem 9 or later24.0
\n
\n
    \n
    • \n
  • 1
    • \n
  • 2
    • \n
  • 3
    • \n
    • \n
\n
\n
\n
\n

Three steps

\n
    \n
  1. Install it from your phone's store
    2. \n
  2. Sign in, or start without an account
    3. \n
  3. Pick a colour and add this week
    4. \n
\n
\n

Coming from version 3?Your lists move over the first time you open the new one.

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

Help

\n

Short answers, written by the people who make the app.

\n
\n
\n Ask us directly\n
\n
\n Search the answers\n
\n \n
\n
\n

How the week works

\n

The week is the home screen. Everything with a date lands on it without being asked.

\n

Each day is a column of cards. A card is an event, a list or a reminder, and the tag today pins one to the top. Lists without a date wait in the tray below.

\n

Moving things

\n

Press and hold a card, then drag it to another day. Shared cards move for everyone.

\n
    \n
  • Drag to the edge to reach next week
    • \n
  • Drop on the tray to remove the date
    • \n
  • Shake, or use undo, to put it back
    • \n
\n

On a watch

\n

The watch shows today only. Turn the crown for tomorrow.

\n
\n
\n
\n

Related answers

\n \n
\n
\n \n

No questions sent yet

\n

When you write to us, the conversation is kept here.

\n Ask a question\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n

Start free

\n

An account keeps your devices in step. It takes one screen.

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

Free means freeOne person, every feature, no end date.

\n

The address is incompleteWe need it to send the sign-in link.

\n
\n
\n
\n \n

Check your inbox

\n

We will send a sign-in link. It works once and for fifteen minutes.

\n
\n Change the address\n Send the link\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.material-you.landing.s06.p06.t06.u06\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"material-you\",\n \"years\": [\n 2021,\n 2026\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-my-6666\",\n \"short\": \"v1-my-6666\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ececec;\n --color-canvas: #fafafa;\n --color-surface: #f3f3f3;\n --color-surface-alt: #e6e6e6;\n --color-surface-strong: #dedede;\n --color-bar: #ececec;\n --color-bar-text: #1a1c1c;\n --color-bar-alt: #dadada;\n --color-bar-alt-text: #1a1c1c;\n --color-inverse: #2f3131;\n --color-inverse-text: #f0f1f1;\n --color-text: #1a1c1c;\n --color-text-muted: #454747;\n --color-heading: #101212;\n --color-heading-alt: #004f50;\n --color-link: #006a6b;\n --color-link-quiet: #1a1c1c;\n --color-link-visited: #5d5f5f;\n --color-link-hover: #004f50;\n --color-link-active: #002020;\n --color-border: #c5c7c7;\n --color-border-strong: #757777;\n --color-border-muted: #e2e2e2;\n --color-accent: #c4eceb;\n --color-accent-text: #002020;\n --color-accent-alt: #3c4a4a;\n --color-fill-1: #c4eceb;\n --color-fill-2: #dadada;\n --color-fill-3: #c9cdcd;\n --color-fill-4: #dedede;\n --color-button: #006a6b;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #dadada;\n --color-button-secondary-text: #1a1c1c;\n --color-input: #fafafa;\n --color-input-text: #1a1c1c;\n --color-input-border: #757777;\n --color-disabled: #e4e4e4;\n --color-disabled-text: #9a9c9c;\n --color-danger: #a8201a;\n --color-danger-surface: #f7dcd9;\n --color-success: #3d6b2c;\n --color-warning: #8d6200;\n --color-notice: #d6dada;\n --color-notice-text: #161d1d;\n --color-focus: #1a1c1c;\n --color-shadow: #000000;\n --color-overlay: rgb(26 28 28 / 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: \"Public Sans\", \"Source Sans 3\", \"Segoe UI\", \"Helvetica Neue\", sans-serif;\n --font-heading: \"Space Grotesk\", Sora, Urbanist, \"Century Gothic\", \"Trebuchet MS\", sans-serif;\n --font-ui: \"Public Sans\", \"Source Sans 3\", \"Segoe UI\", \"Helvetica Neue\", sans-serif;\n --font-mono: \"Space Mono\", \"IBM Plex Mono\", Menlo, monospace;\n --text-base: 16px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 19px;\n --text-display: 48px;\n --text-h1: 32px;\n --text-h2: 24px;\n --text-h3: 18px;\n --line-body: 1.45;\n --line-heading: 1.2;\n --line-display: 1.1;\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.4px;\n --display-tracking: -1.2px;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 12px;\n --radius-panel: 12px;\n --radius-pill: 9999px;\n --radius-page: 16px;\n --shadow-panel: 0 1px 2px 0 color-mix(in srgb, var(--color-shadow) 14%, transparent);\n --shadow-control: 0 1px 1px 0 color-mix(in srgb, var(--color-shadow) 12%, transparent);\n --shadow-control-hover: 0 1px 3px 0 color-mix(in srgb, var(--color-shadow) 26%, transparent);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 2px 6px 0 color-mix(in srgb, var(--color-shadow) 28%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-surface);\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) 80%, black);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-text);\n --transition: background-color 0.1s linear, color 0.1s linear;\n --backdrop-blur: 0px;\n}\n" } }