{ "id": "v1-my-3333", "long_id": "v1.material-you.docs.s03.p03.t03.u03", "name": "Tonal component kit docs, 2025", "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": "docs", "mode": "pure", "viewport": { "width": 1440, "fluid": false }, "summary": "A documentation and component gallery site in the tonal language of 2021 to 2026: a top app bar with a pill search field, a navigation drawer whose current page sits on a tonal pill, and the content on one rounded sheet. The palette is a warm light scheme from an orange key colour, with brown-tinted neutrals, a sand secondary and an olive tertiary. Headings are a serif (Roboto Serif) over a plain sans body at 17px, corners run from 16 to 32px, and cards carry one faint shadow at most.", "url": "https://chrono.skin/s/v1-my-3333", "preview_url": "https://chrono.skin/s/v1-my-3333/specimen.html", "files": { "STYLE.md": "# Tonal component kit docs, 2025\n\n## Summary\n\nA documentation and component gallery site in the tonal language of 2021 to 2026: a top app bar with a pill search field, a navigation drawer whose current page sits on a tonal pill, and the content on one rounded sheet. The palette is a warm light scheme from an orange key colour, with brown-tinted neutrals, a sand secondary and an olive tertiary. Headings are a serif (Roboto Serif) over a plain sans body at 17px, corners run from 16 to 32px, and cards carry one faint shadow at most.\n\n## Layout\n\n- Designed at 1440px; `--size-page` is 1440px and the page does not stretch beyond it. `.ds-nav` is the top app bar (`--size-bar` 64px) across both columns; below it the `.ds-sidebar` drawer (`--size-drawer` 296px, sticky) on the left and the views on the right. Each view is one `.ds-main` sheet (`--color-canvas`, `--radius-page`, padding `--space-6` by `--space-7`).\n- The bar holds `.ds-brand` (as wide as the drawer), the `.ds-search` pill (up to `--size-search` 520px) and the links at the right, each a pill.\n- Home view: a `.ds-banner` on `--fill-bar-alt`, `.ds-hero` (two cards `--space-2` apart: the title card at 7 parts on `--color-surface-alt`, the artwork card at 5 on `--fill-accent`), `.ds-stats` `--space-2` under it, then `.ds-section` blocks: a `.ds-toolbar` (section title and filter chips) over the `.ds-grid` of six component cards in three columns, and `.ds-columns` with the changes list at 3 parts and a tonal card at 2. `.ds-footer` is an inverted rounded block under the sheet.\n- Spacing: `--space-1` 4px, `--space-2` 8px (between hero cards and stat tiles, inside a component card), `--space-3` 12px, `--space-4` 16px (between component cards, sheet to window edge), `--space-5` 24px (card padding, bar padding, columns gap), `--space-6` 36px (sheet top padding), `--space-7` 56px (sheet side padding, hero card padding, above a section), `--space-8` 80px.\n- Heights: buttons `--size-control` 40px; fields `--size-field` 56px; drawer items, the search bar and table rows `--size-row-dense` 56px; list rows and the tall tabs `--size-row` 64px; previews `--size-preview` 152px. `--size-measure` 720px caps running text, `--size-toc` 220px is the contents column, `--size-dialog` 360px.\n- Inner pages (every view but the home view) have no hero and no banner. The bar and drawer stay; the sheet opens with `.ds-breadcrumb` (where the view is below another), then `.ds-page-header`, then `.ds-tabs` across the sheet, then the content: `.ds-article` (text with `.ds-guides`, notices and pagination, beside the `.ds-toc` contents column); a `.ds-toolbar` over the table; or `.ds-columns` with the form at 3 parts and a `.ds-stack` at 2.\n- Views: `components` (home) is the gallery. `guidance` is one component's guidance article with do and do not cards. `tokens` is the token table with status badges. `feedback` is the request form beside the discard dialog and the open requests. `search` shows an empty result.\n- Below 1100px the article and columns become one column, the contents column is dropped and the grid has two columns. Below 800px the bar wraps to a brand row, the search pill and a row of links; the drawer becomes one row of outlined chips that scrolls sideways; hero, stats, grid and guides stack; the tabs scroll sideways; `.ds-table__extra` cells are hidden.\n\n## Typography and colour roles\n\n- Two families: `--font-heading` is Roboto Serif (then Noto Serif, Georgia) for every title, the brand name and the stat figures; `--font-body` and `--font-ui` are Noto Sans. `--font-mono` is Noto Sans Mono.\n- Sizes: `--text-base` 17px at `--line-body` 1.55; `--text-small` 13px; `--text-ui` 14px; `--text-large` 21px (leads); `--text-display` 52px at `--line-display` 1.15 with `--display-tracking` -0.5px; `--text-h1` 34px, `--text-h2` 26px, `--text-h3` 21px at `--line-heading` 1.3.\n- Weights: display 400, headings 500, `--weight-ui` 600, `--weight-bold` 700. `--ui-transform` is `none`.\n- Links are not underlined at rest, underlined on hover.\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- Elevation is shown by tone, not shadow. `--shadow-panel` and `--shadow-control` sit on cards and buttons and are `none` or one faint layer; `--shadow-control-hover` is on hovered buttons and on the search bar, `--shadow-control-pressed` on a pressed button and the selected chip, `--shadow-dialog` on dialogs and the floating action button. `--shadow-text` is on the hero title and button labels (`none`). `--backdrop-blur` blurs what lies behind the dialog scrim (`0px`).\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\n## Components\n\n- `.ds-page` on ``: the shell grid on `--fill-page`.\n- `.ds-nav`: the top app bar on `--fill-bar`, holding the brand, the search bar and `.ds-nav__links` of pill-shaped `.ds-nav__link` items; the current one is filled with `--fill-button-secondary`.\n- `.ds-sidebar`: the navigation drawer, written once outside the views. `.ds-sidebar__title` heads a group (a rule separates groups), `.ds-sidebar__list` holds 56px pill-shaped `.ds-sidebar__link` rows with an icon and an optional `.ds-sidebar__count`. A link marked `--page` is the page of a view and is put on the secondary container while that view is open; `is-current` does the same by hand.\n- `.ds-main`: the content sheet of a view. `.ds-banner`: a pill on `--fill-bar-alt` with a badge, `.ds-banner__text` and a text button.\n- `.ds-hero`: two cards. `.ds-hero__copy` holds `.ds-hero__title`, `.ds-hero__lead` and a `.ds-buttons` group on `--color-surface-alt`; `.ds-hero__art` holds `.ds-shapes` on `--fill-accent`.\n- `.ds-stat` here is a low row, figure and label on one baseline, on `--fill-panel`.\n- `.ds-toolbar`: a title or chips on the left and chips or badges on the right.\n- `.ds-grid`: three columns of component cards. Each `.ds-grid__cell` is a filled card with a `.ds-grid__preview` (`--2`, `--3`, `--4` pick the fill) above `.ds-grid__title` and `.ds-grid__text`. Previews are drawn with `.ds-mini` stand-ins: a filled pill, `--tonal`, `--outlined`, `--chip`, `--fab`, and `--card` with `.ds-mini__line` (`--short`) bars.\n- `.ds-tabs`: here one row of tall equal `.ds-tabs__tab` pills on `--fill-panel`; `is-current` is on the secondary container.\n- `.ds-article`: text column and contents column. `.ds-toc` with `.ds-toc__title`: the contents list. `.ds-guides` holds two `.ds-guide` cards: `.ds-guide__preview` ruled underneath in `--color-success`, `.ds-guide__body` with a `.ds-guide__label`; `--dont` turns the rule and label to `--color-danger`.\n- `.ds-swatch` (`--2`, `--3`, `--4`, `--button`, `--canvas`): a colour disc in a table cell.\n- `.ds-footer`: a rounded block on `--fill-inverse` with `.ds-footer__legal` and `.ds-footer__links` 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`. `.ds-shapes` with `.ds-shape--1` to `--4`: the circle, rounded square and pill drawn as artwork.\n- `.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 <= 8px`: list rows touch and are divided by hairlines.\n- `block-gap <= 56px`: blocks on the sheet are at most 56px apart.\n- `content-width <= 80%`: the drawer takes the left fifth of the window.\n- `uppercase-text = 0%`: labels are sentence case.\n- `font-weight <= 700`: bold is for strong text only.\n- `font-weight >= 400`: no thin text.\n- `font-size >= 13px`: the smallest labels are 13px.\n- `font-size <= 52px`: the hero title is the largest text.\n- `font-families <= 3`: a serif for headings, a sans for text and the mono.\n- `line-height <= 1.7`: body text is 17px on a 26px line.\n- `underlined-links <= 10%`: links are marked by colour.\n- `gradient-fills = 0%`: every fill is one flat tone.\n- `text-shadow = none`: no text has a shadow.\n- `border-width <= 4px`: outlines are 1px; the rule under a guidance preview is 4px.\n- `box-shadow-blur <= 10px`: shadows are one or two small warm layers.\n- `border-radius <= 32px`: containers stop at 32px; 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: 1440px;\n --size-drawer: 296px;\n --size-bar: 64px;\n --size-measure: 720px;\n --size-icon: 24px;\n --size-icon-small: 18px;\n --size-mark: 36px;\n --size-control: 40px;\n --size-field: 56px;\n --size-fab: 56px;\n --size-chip: 32px;\n --size-badge: 22px;\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: 56px;\n --size-area: 136px;\n --size-dialog: 360px;\n --size-empty: 88px;\n --size-art: 280px;\n --size-preview: 152px;\n --size-search: 520px;\n --size-toc: 220px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 36px;\n --space-7: 56px;\n --space-8: 80px;\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 top app bar, a navigation drawer and the content sheet */\n.ds-page {\n display: grid;\n grid-template-columns: var(--size-drawer) minmax(0, 1fr);\n align-content: start;\n max-width: var(--size-page);\n min-height: 100vh;\n margin: 0 auto;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-nav {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n gap: var(--space-5);\n min-height: var(--size-bar);\n padding: var(--space-1) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav .ds-brand {\n width: calc(var(--size-drawer) - var(--space-5) - var(--space-5));\n flex: none;\n}\n.ds-nav .ds-search {\n flex: 0 1 var(--size-search);\n min-height: var(--size-row-dense);\n}\n.ds-nav__links {\n display: flex;\n gap: var(--space-1);\n margin: 0 0 0 auto;\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=\"#components\"],\n.ds-page:has(#components:target) .ds-nav__link[href=\"#components\"],\n.ds-page:has(#guidance:target) .ds-nav__link[href=\"#guidance\"],\n.ds-page:has(#tokens:target) .ds-nav__link[href=\"#tokens\"],\n.ds-page:has(#feedback:target) .ds-nav__link[href=\"#feedback\"],\n.ds-nav__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n\n/* sidebar: the navigation drawer, the current page on a tonal pill */\n.ds-sidebar {\n grid-column: 1;\n grid-row: 2 / span 2;\n align-self: start;\n position: sticky;\n top: 0;\n display: grid;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3) var(--space-5);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-4) 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 margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__list + .ds-sidebar__title {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n margin-top: var(--space-2);\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-5) 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-decoration: none;\n transition: var(--transition);\n}\n.ds-sidebar__count {\n margin-left: auto;\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-sidebar__link:hover, .ds-sidebar__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 8%, transparent);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-sidebar__link--page[href=\"#components\"],\n.ds-page:has(#components:target) .ds-sidebar__link--page[href=\"#components\"],\n.ds-page:has(#guidance:target) .ds-sidebar__link--page[href=\"#guidance\"],\n.ds-page:has(#tokens:target) .ds-sidebar__link--page[href=\"#tokens\"],\n.ds-page:has(#feedback:target) .ds-sidebar__link--page[href=\"#feedback\"],\n.ds-page:has(#search:target) .ds-sidebar__link--page[href=\"#search\"],\n.ds-sidebar__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-view {\n grid-column: 2;\n min-width: 0;\n}\n.ds-main {\n margin: 0 var(--space-4) 0 0;\n padding: var(--space-6) var(--space-7) var(--space-7);\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n.ds-banner {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin-bottom: var(--space-4);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-pill);\n font-size: var(--text-ui);\n}\n.ds-banner__text {\n flex: 1;\n margin: 0;\n}\n.ds-banner .ds-button--text {\n color: var(--color-bar-alt-text);\n}\n\n/* hero: a title card and an artwork card, side by side */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n gap: var(--space-2);\n}\n.ds-hero__copy,\n.ds-hero__art {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--space-7);\n border-radius: var(--radius-page);\n}\n.ds-hero__copy {\n background: var(--color-surface-alt);\n color: var(--color-text);\n}\n.ds-hero__art {\n align-items: center;\n background: var(--fill-accent);\n color: var(--color-accent-text);\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 color: var(--color-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 44ch;\n margin: var(--space-4) 0 var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n color: var(--color-text-muted);\n}\n.ds-stats {\n margin-top: var(--space-2);\n gap: var(--space-2);\n}\n.ds-stat {\n flex-direction: row;\n align-items: baseline;\n gap: var(--space-3);\n background: var(--fill-panel);\n border-radius: var(--radius-page);\n}\n\n/* grid: component cards, each with a small drawn preview */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-2) var(--space-2) var(--space-4);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell:hover, .ds-grid__cell.is-hover {\n border-color: var(--color-border-strong);\n}\n.ds-grid__preview {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-preview);\n margin-bottom: var(--space-3);\n background: var(--color-fill-1);\n border-radius: calc(var(--radius-page) - var(--space-2));\n}\n.ds-grid__preview--2 { background: var(--color-fill-2); }\n.ds-grid__preview--3 { background: var(--color-fill-3); }\n.ds-grid__preview--4 { background: var(--color-fill-4); }\n.ds-grid__title {\n margin: 0;\n padding: 0 var(--space-3);\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 padding: 0 var(--space-3);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n\n/* mini: the drawn stand-ins inside previews and guidance cards */\n.ds-mini {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n height: var(--size-chip);\n min-width: var(--size-row);\n padding: 0 var(--space-3);\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 font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n}\n.ds-mini--tonal {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-mini--outlined {\n background: transparent;\n color: var(--color-text);\n border-color: var(--color-border-strong);\n}\n.ds-mini--chip {\n min-width: 0;\n background: var(--color-canvas);\n color: var(--color-text);\n border-color: var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-mini--fab {\n width: var(--size-fab);\n min-width: 0;\n height: var(--size-fab);\n padding: 0;\n background: var(--color-canvas);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-mini--card {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-2);\n width: 45%;\n height: auto;\n padding: var(--space-3);\n background: var(--color-canvas);\n border-radius: var(--radius-panel);\n}\n.ds-mini__line {\n display: block;\n height: var(--space-2);\n background: var(--color-border);\n border-radius: var(--radius-pill);\n}\n.ds-mini__line--short {\n width: 55%;\n background: var(--color-border-strong);\n}\n\n/* tabs here are one row of tall equal pills */\n.ds-tabs {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n gap: 0;\n background: var(--fill-panel);\n border-bottom: 0;\n border-radius: var(--radius-pill);\n}\n.ds-tabs__tab {\n justify-content: center;\n width: 100%;\n min-height: var(--size-row);\n border-radius: var(--radius-pill);\n font-size: var(--text-base);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-tabs__tab.is-current::after {\n content: none;\n}\n\n/* guidance: an article with a contents column and do and do not cards */\n.ds-article {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, var(--size-toc));\n gap: var(--space-7);\n align-items: start;\n}\n.ds-toc {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-toc__title {\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-text-muted);\n}\n.ds-guides {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n margin: var(--space-5) 0;\n}\n.ds-guide {\n display: flex;\n flex-direction: column;\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-guide__preview {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-preview);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width-strong) solid var(--color-success);\n}\n.ds-guide--dont .ds-guide__preview {\n border-bottom-color: var(--color-danger);\n}\n.ds-guide__body {\n margin: 0;\n padding: var(--space-4);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-guide__label {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin-bottom: var(--space-1);\n color: var(--color-success);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n}\n.ds-guide--dont .ds-guide__label {\n color: var(--color-danger);\n}\n.ds-swatch {\n display: inline-block;\n width: var(--size-icon);\n height: var(--size-icon);\n margin-right: var(--space-2);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n vertical-align: middle;\n}\n.ds-swatch--2 { background: var(--color-fill-2); }\n.ds-swatch--3 { background: var(--color-fill-3); }\n.ds-swatch--4 { background: var(--color-fill-4); }\n.ds-swatch--button { background: var(--fill-button); }\n.ds-swatch--canvas { background: var(--color-canvas); }\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-4);\n}\n\n/* footer: the inverted block that closes the sheet column */\n.ds-footer {\n grid-column: 2;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n margin: var(--space-2) var(--space-4) var(--space-4) 0;\n padding: var(--space-5) var(--space-7);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n font-size: var(--text-ui);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover {\n text-decoration: underline;\n}\n.ds-footer__legal {\n margin: 0;\n}\n\n@media (max-width: 1100px) {\n .ds-article,\n .ds-columns,\n .ds-columns--even {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-toc {\n display: none;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media (max-width: 800px) {\n .ds-page {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-nav,\n .ds-sidebar,\n .ds-view,\n .ds-footer {\n grid-column: 1;\n }\n .ds-nav {\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-3);\n padding: var(--space-2) var(--space-4);\n }\n .ds-nav .ds-brand {\n width: auto;\n flex: 1;\n }\n .ds-nav .ds-search {\n order: 3;\n flex: none;\n width: 100%;\n }\n .ds-nav__links {\n order: 4;\n width: 100%;\n margin: 0;\n overflow-x: auto;\n }\n .ds-nav__link {\n padding: 0 var(--space-3);\n }\n .ds-sidebar {\n grid-row: auto;\n position: static;\n display: flex;\n gap: var(--space-1);\n padding: 0 var(--space-4) var(--space-3);\n overflow-x: auto;\n }\n .ds-sidebar__title {\n display: none;\n }\n .ds-sidebar__list {\n display: flex;\n gap: var(--space-1);\n }\n .ds-sidebar__link {\n min-height: var(--size-chip);\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n white-space: nowrap;\n }\n .ds-sidebar__link .ds-icon,\n .ds-sidebar__count {\n display: none;\n }\n .ds-main {\n margin: 0 var(--space-2);\n padding: var(--space-4);\n }\n .ds-footer {\n margin: var(--space-2);\n padding: var(--space-5);\n }\n .ds-hero,\n .ds-stats,\n .ds-grid,\n .ds-guides,\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero__copy,\n .ds-hero__art {\n padding: var(--space-5);\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-shapes {\n width: var(--size-preview);\n height: var(--size-preview);\n }\n .ds-banner {\n flex-wrap: wrap;\n padding: var(--space-3) var(--space-4);\n border-radius: var(--radius-panel);\n }\n .ds-banner__text {\n flex: 1 1 70%;\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-tabs {\n grid-auto-columns: max-content;\n border-radius: var(--radius-panel);\n }\n .ds-tabs__tab {\n min-height: var(--size-row-dense);\n padding: 0 var(--space-3);\n font-size: var(--text-ui);\n }\n .ds-table__extra {\n display: none;\n }\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: tonal component kit documentation specimen\n\n\n\n\n\n
\n \n \n chronoskin\n \n Search components and tokens\n \n
\n\n\n\n
\n
\n
\n 3.2\n

The new release adds the segmented button and renames two colour tokens.

\n See what changed\n
\n
\n
\n

Components

\n

Twenty-four building blocks for chronoskin apps, each with guidance, measurements and tokens.

\n
\n Start with buttons\n Browse the tokens\n
\n
\n
\n
\n \n \n \n \n
\n
\n
\n
\n

24

components

\n

48

colour tokens

\n

3.2

current release

\n
\n\n
\n
\n

Actions and selection

\n \n
\n
\n SaveCancel

Buttons

Filled, tonal, outlined and text

\n

Floating action button

The one main action of a screen

\n OakAshSteel

Chips

Filters, choices and suggestions

\n

Cards

Filled or outlined, never both

\n

Switches

On and off, with a thumb that grows

\n

Navigation bar

Three to five places, one pill

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

Latest changes

All releases
\n \n
\n
\n

New to the kit?

\n

Read the page on buttons first. It shows how the four emphasis levels work, and every other component follows the same pattern.

\n
Read the guidanceAsk for a component
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Components
    2. \n
  2. Actions
    3. \n
  3. Buttons
    4. \n
\n
\n
\n

Buttons

\n

Buttons start most actions. Four kinds carry four levels of emphasis.

\n
\n
\n Tokens\n Suggest a change\n
\n
\n \n
\n
\n
\n

Choosing a button

\n

Pick the kind by how much the action matters on this screen, not by how it looks.

\n

A screen has one filled button at most. Tonal buttons support it, outlined buttons step back, and text buttons sit inside cards and dialogs. Every kind uses the class ds-button and is described in the token table.

\n

Emphasis

\n
    \n
  • Filled for the action that finishes the task
    • \n
  • Tonal for the next most likely action
    • \n
  • Outlined and text for everything else
    • \n
\n

Labels

\n

Start with a verb and keep to three words. Sentence case, no full stop.

\n
\n
\n
\n
CancelSave
\n

DoPair one filled button with a quieter one.

\n
\n
\n
CancelSave
\n

Do notPut two filled buttons side by side.

\n
\n
\n
\n

Destructive actionsUse the danger variant only for the final step, inside a dialog.

\n

The raised button is withdrawnIt was removed in 3.0. Replace it with the tonal button.

\n
\n
    \n
    • \n
  • 1
    • \n
  • 2
    • \n
  • 3
    • \n
  • 4
    • \n
    • \n
\n
\n \n
\n
\n
\n\n
\n
\n
\n
\n

Colour tokens

\n

Every colour in the kit is a tone of one source colour. Use the role, never the value.

\n
\n
\n Report a token\n
\n
\n
\n \n
\n 48 tokens\n Stable\n Renamed\n Withdrawn\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
TokenUsed forStatusSinceTone
primaryFilled buttons, the current pageStable1.040
primary-containerFloating button, hero cardsStable1.090
secondary-containerTonal buttons, navigation pillStable1.090
tertiary-containerNotices, contrasting accentsStable2.090
surface-container-highestTonal cards, inline codeRenamed3.290
surface-raisedWas used for raised buttonsWithdrawn1.098
\n
\n
\n
\n

Text on a fill

\n

Each container has its own text role. Pair them as the table shows and contrast takes care of itself in light and dark.

\n
\n
\n

Elevation is a tint

\n

A raised surface takes the next container tone. Shadows are kept for things that float.

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

Request a component

\n

Tell the kit team what is missing. Requests are read every Thursday.

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

Discard this request?

\n

What you have written will be lost. Drafts are kept for a week.

\n
\n Keep writing\n Discard\n
\n
\n
\n
\n

Open requests

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

Search

\n

No results for \"carousel\" in components, guidance or tokens.

\n
\n
\n Clear the search\n
\n
\n
\n
\n \n

Nothing matches \"carousel\"

\n

The kit has no carousel yet. You can ask for one, or look at cards in a scrolling row.

\n Request a component\n
\n
\n

People also look for

\n \n

Search looks at page titles, token names and the first paragraph of each guidance page.

\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.material-you.docs.s03.p03.t03.u03\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"material-you\",\n \"years\": [\n 2021,\n 2026\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-my-3333\",\n \"short\": \"v1-my-3333\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f8ebe0;\n --color-canvas: #fff8f4;\n --color-surface: #fdf1e7;\n --color-surface-alt: #f4e5d8;\n --color-surface-strong: #ecdccd;\n --color-bar: #f8ebe0;\n --color-bar-text: #221a14;\n --color-bar-alt: #f6e0b0;\n --color-bar-alt-text: #241a04;\n --color-inverse: #382e28;\n --color-inverse-text: #ffede2;\n --color-text: #221a14;\n --color-text-muted: #52443b;\n --color-heading: #2e1508;\n --color-heading-alt: #8f4c1c;\n --color-link: #9a4a14;\n --color-link-quiet: #221a14;\n --color-link-visited: #5f6135;\n --color-link-hover: #733509;\n --color-link-active: #351000;\n --color-border: #d7c2b7;\n --color-border-strong: #85736a;\n --color-border-muted: #eeddd0;\n --color-accent: #ffdbc8;\n --color-accent-text: #351000;\n --color-accent-alt: #5f6135;\n --color-fill-1: #ffdbc8;\n --color-fill-2: #f6e0b0;\n --color-fill-3: #e5e6ad;\n --color-fill-4: #ecdccd;\n --color-button: #9a4a14;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #f6e0b0;\n --color-button-secondary-text: #241a04;\n --color-input: #fff8f4;\n --color-input-text: #221a14;\n --color-input-border: #85736a;\n --color-disabled: #eadfd6;\n --color-disabled-text: #a3948a;\n --color-danger: #ba1a1a;\n --color-danger-surface: #ffdad6;\n --color-success: #4a6a1c;\n --color-warning: #a86400;\n --color-notice: #e5e6ad;\n --color-notice-text: #1c1d00;\n --color-focus: #9a4a14;\n --color-shadow: #3b1e0a;\n --color-overlay: rgb(34 26 20 / 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: \"Noto Sans\", \"Open Sans\", \"Segoe UI\", Arial, sans-serif;\n --font-heading: \"Roboto Serif\", \"Noto Serif\", \"Source Serif 4\", Georgia, serif;\n --font-ui: \"Noto Sans\", \"Open Sans\", \"Segoe UI\", Arial, sans-serif;\n --font-mono: \"Noto Sans Mono\", \"Source Code Pro\", Menlo, monospace;\n --text-base: 17px;\n --text-small: 13px;\n --text-ui: 14px;\n --text-large: 21px;\n --text-display: 52px;\n --text-h1: 34px;\n --text-h2: 26px;\n --text-h3: 21px;\n --line-body: 1.55;\n --line-heading: 1.3;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 500;\n --weight-display: 400;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -0.5px;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 4px;\n --border-style: solid;\n --radius-control: 16px;\n --radius-panel: 24px;\n --radius-pill: 9999px;\n --radius-page: 32px;\n --shadow-panel: 0 1px 2px 0 color-mix(in srgb, var(--color-shadow) 18%, transparent);\n --shadow-control: none;\n --shadow-control-hover: 0 2px 6px 0 color-mix(in srgb, var(--color-shadow) 22%, transparent);\n --shadow-control-pressed: inset 0 0 0 1px color-mix(in srgb, var(--color-shadow) 20%, transparent);\n --shadow-dialog: 0 2px 3px 0 color-mix(in srgb, var(--color-shadow) 24%, transparent), 0 6px 10px 4px color-mix(in srgb, var(--color-shadow) 12%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar-alt) 40%, var(--color-bar));\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 84%, black);\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.3s cubic-bezier(0.05, 0.7, 0.1, 1), color 0.3s cubic-bezier(0.05, 0.7, 0.1, 1), box-shadow 0.3s cubic-bezier(0.05, 0.7, 0.1, 1), border-radius 0.3s cubic-bezier(0.05, 0.7, 0.1, 1);\n --backdrop-blur: 0px;\n}\n" } }