{ "id": "v1-bg-6111", "long_id": "v1.bento-grids.shop.s06.p01.t01.u01", "name": "Product announcement bento, 2025", "era": { "slug": "bento-grids", "code": "bg", "name": "Bento grids", "years": [ 2022, 2026 ], "description": "Feature grids, 2022 to 2026: rounded cells of unequal size, each holding one idea, packed into a tight grid on a dark or very pale page." }, "archetype": "shop", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "A product page in the manner of a hardware announcement: the thing itself, drawn in CSS, stands in a tall tile in the middle of a six-track bento, and its facts flank it as small tiles, each one large numeral with its unit or one icon with two words. The page is near-black, tiles are a shade lighter and lit from below with a faint top edge, a single coral accent colours units, icons and the closing price tile, and controls look like low keycaps. The form was common for device, operating-system and app launches from about 2022 to 2026.", "url": "https://chrono.skin/s/v1-bg-6111", "preview_url": "https://chrono.skin/s/v1-bg-6111/specimen.html", "files": { "STYLE.md": "# Product announcement bento, 2025\n\n## Summary\n\nA product page in the manner of a hardware announcement: the thing itself, drawn in CSS, stands in a tall tile in the middle of a six-track bento, and its facts flank it as small tiles, each one large numeral with its unit or one icon with two words. The page is near-black, tiles are a shade lighter and lit from below with a faint top edge, a single coral accent colours units, icons and the closing price tile, and controls look like low keycaps. The form was common for device, operating-system and app launches from about 2022 to 2026.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 1180px, designed at a 1440px viewport, padded by `--space-5` (20px) at the sides. The navigation bar's hairline and the footer's hairline run the full width; everything else is a tile in the column.\n- `.ds-nav` is a thin product bar, `--size-nav` (52px) tall, sticky, translucent with a hairline under it: the `.ds-brand` at the left, and at the right the four page links, the price in grey and one small button. It is the product's own bar, not a company menu.\n- `.ds-grid` has six equal tracks (180px at full width) and rows of at least `--size-row` (196px). A tile takes one track by default; `--wide` takes two, `--half` three, `--wider` four, `--full` all six, `--tall` two rows. `--centre` places a tile on tracks three and four across the first three rows. `.ds-grid--auto` lets rows follow their content.\n- The home page has no band above the grid and no separate hero: the `.ds-hero` is the `--centre` tile. To its left and right the small tiles flow in three rows, two tracks a side, mirrored: a two-track figure tile opposite two one-track tiles in row one, the reverse in row two, and again a two-track tile opposite two one-track tiles in row three. Under them the `.ds-stats` strip takes a full row, then two `--half` tiles, then the full-width `--accent` tile with the price at the left and the order button at the right.\n- A one-track tile holds one icon, a title of one or two words and one short caption, centred; or one small figure. A two-track tile holds a title at the top and one large figure with its unit and a caption at the bottom. Never put two figures in one tile.\n- Tiles never touch. The gap is `--space-gap` (20px) in both directions and the padding inside a tile is `--space-cell` (28px).\n- Spacing scale: `--space-1` 4px (pill padding, title to caption, figure to unit), `--space-2` 8px (button gap, figure to label, the bezel of the device), `--space-3` 12px (control padding, table cell padding, nav actions gap), `--space-4` 16px (icon to title, form gap, list row padding), `--space-5` 20px (page gutter, stack gap inside a tile, panel padding), `--space-6` 28px (footer columns, split tile gap), `--space-7` 40px (above a view, under the page header), `--space-8` 56px (dialog stage), `--space-9` 88px (under a view, textarea height).\n- Controls are `--size-control` (38px) tall, `--size-control-large` (48px) in the hero and the price tile; icon tiles are `--size-icon` (44px) with a `--size-glyph` (22px) line icon; the device drawing is at most `--size-device` (248px) wide.\n- Inner pages (compare, support, order) keep the bar, the column, the six tracks and the gap, and have no hero and no centre tile. A view opens `--space-7` under the bar with the `.ds-breadcrumb`, then the `.ds-page-header` on the bare page (title at `--text-h1`, one line at `--text-large`, one button at the right on the baseline), `--space-7` above the tiles. An optional `.ds-toolbar` with the `.ds-tabs` at the left and a count at the right follows, `--space-gap` above a `.ds-grid--auto`. The comparison table takes a `--wider` tile with a two-track tile of panels beside it and three two-track tiles under it; prose takes a `--wider` `--tall` tile with a two-track `.ds-sidebar` and a two-track list beside it; the order form takes a `--wider` tile with the two-track bag summary beside it, and stock, messages and the dialog stage take two-track tiles in a row of three.\n- Views: `home` is the announcement (the clock in the centre, nine fact tiles, the figures strip, what is in the box, a week of charging, the price); `compare` is the two sizes side by side (tabs, the table, a panel per size, two figures, a short call to order); `support` is the guide (topics, prose, software updates with pagination, downloads, a terminal sample, an empty repairs record); `order` is the form with its buttons, the bag, stock by finish with status badges, the checkout's notices and the dialog that empties the bag. The bar marks Overview, Compare, Support or Order.\n- Below 1100px the large figures and the clock's time step down to `--text-h1`. Below 960px the grid has four tracks: the centre tile comes first across all four and the fact tiles follow in rows of four tracks; `--half` and `--wider` tiles take the full width; the bar's links move to a centred second line; the footer has two columns. Below 600px the grid has two tracks with a 12px gap: two-track tiles take both, one-track tiles stay side by side in pairs, the stats strip becomes two by two, the price in the bar hides, a split tile stacks and the page header's button goes under its text. A table hides the columns marked `.ds-table__extra` and scrolls sideways inside `.ds-table__scroll` if it still does not fit.\n- On a phone (600px and below) the bar keeps its second line of links; the price (`.ds-nav__price`) is not shown, the page padding drops to `--space-4`, and the Support drop-down opens as a full row under the links instead of under its own link. The current view's link stays a filled pill. Below 960px a tooltip opens as a full row under its line.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- One sans family everywhere: `--font-body`, `--font-heading` and `--font-ui` are the same Inter-first stack. The references used Inter or commercial grotesques of the same shape (a geometric sans and a custom UI sans); Inter with system fallbacks is the substitute. `--font-mono` is only for code.\n- Sizes: `--text-base` 16px at `--line-body` 1.5; `--text-small` and `--text-ui` 14px (captions in cells, navigation, buttons, table, form); `--text-large` 18px (hero lead, cell titles); `--text-display` 60px at `--line-display` 1.13 (hero title, big stat number); `--text-h1` 40px, `--text-h2` 30px, `--text-h3` 20px at `--line-heading` 1.2. The smallest text is 12px, written as `calc(var(--text-small) * 0.857)` because the vocabulary has no token for it: badges, hints, meta, the eyebrow. Code in a cell is 12.4px, `calc(var(--text-small) * 0.886)`.\n- Weights: `--weight-body` 400, `--weight-ui` 500, `--weight-heading` and `--weight-bold` 600, `--weight-display` 700. No tracking on headings. The only uppercase text is the 12px `.ds-section__eyebrow`, tracked by `calc(var(--text-small) * 0.2)`.\n- `--color-page` and `--color-canvas` `#111113`: the page. `--color-surface` `#1d1c20`: cells, lit by `--fill-panel` (a 5% lighter to 12% darker vertical gradient). `--color-surface-alt` `#29292b`: panels, dialog, current nav and sidebar item, secondary button. `--color-surface-strong` `#323238`: current tab and page, neutral badges, chart bars, inline code.\n- `--color-text` `#e0e0e0` body; `--color-text-muted` `#a9a9a9` for every caption, lead and meta line; `--color-heading` white; `--color-heading-alt` `#eeeeee` for panel, sidebar and footer titles.\n- `--color-accent` / `--color-button` `#5e69d1` periwinkle: primary button, accent badge, the highlighted chart bar, the closing call-to-action cell. `--color-link` `#768cff` is its lighter step for links, icons, the eyebrow and focus. `--color-accent-alt` `#3ecf8e` green marks \"new\", passed checks and switched-on toggles only.\n- Status colours: `--color-success` `#3ecf8e` (the same green as `--color-accent-alt`, the only green measured in the references), `--color-warning` `#f7be2b` (the one amber measured) and `--color-danger` `#f24822`. They appear only as small text, a dot, or a 14% tint with a 30% hairline on a status badge, never as a filled block.\n- `--color-fill-1` to `--color-fill-4` are dark tints (navy, green, plum, grey) for feature cells. Fills 1 to 3 are used as the top of a gradient that fades to `--color-surface`; fill 4 is flat. At most half the cells of a grid are tinted.\n- Borders: `--color-border` (white at 8%) on every cell, panel and bar; `--color-border-strong` (white at 16%) on secondary buttons, the dialog and the empty cell; `--color-border-muted` `#2b292e` for rows inside a box. All are `--border-width` 1px; `--border-width-strong` 2px is the focus ring only.\n- Links have no underline (`--link-decoration: none`) and gain one on hover; quiet links (`--color-link-quiet`) in navigation, sidebar and footer turn white on hover and never underline.\n- Radii: `--radius-page` 24px for grid cells, `--radius-panel` 12px for panels, tables, notices, code blocks and the dialog, `--radius-control` 8px for buttons, inputs, icon tiles and nav items (chart bars and inline code take half of it), `--radius-pill` for badges, tabs and switches.\n- Shadows: `--shadow-panel` is a 1px inset white highlight on the top edge plus a soft 12px drop; `--shadow-dialog` is the same idea with a 25px blur. Buttons have a 1px lighter hairline and a 2px shadow. No text shadow.\n- The hero glow and the `--glow` cell are a radial fade from `--color-fill-1` to transparent, so a glow is always the palette's own tint (navy here) and a palette with neutral fills simply has none; the accent colour is never used for it.\n- One-off mixes written in `components.css` because no token exists: the button hairline (25% button text in the button colour), the `--new` and status badges (the colour at 14% and 30% over transparent), the danger button's hairline (danger at 45%) and hover fill (20% danger in `--color-danger-surface`), notice borders.\n- `--color-notice` `#1a3045` with `--color-notice-text` `#bae6fd` is the information notice; `--color-danger` `#f24822` on `--color-danger-surface` `#201818` is the error. `--color-inverse` white is used only for the button on the accent cell.\n- `--transition` is a 0.15s colour fade on links, buttons and inputs. Nothing moves or scales.\n\n## Components\n\n- `.ds-page` on ``: dark page, sets the family and body size. `.ds-page__inner` is the 1180px column; every view wraps its content in one.\n- `.ds-nav`: the thin sticky product bar. `.ds-nav__inner` holds the `.ds-brand` at the left, then `.ds-nav__links` of `.ds-nav__link` (the current view's link is filled with `--color-surface-alt`; `is-current` does the same by hand) and `.ds-nav__actions` with the `.ds-nav__price` and one `.ds-button--small`.\n- `.ds-brand`: the site's mark and name, at the left of the bar. `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, a 1px hairline, `--radius-control`, `--shadow-control`), so it takes on every palette and surface; it holds the mark as inline SVG painted with `currentColor`. `.ds-brand__name` is the name in the heading family at 20px in `--color-bar-text`. The name `chronoskin` and its mark are placeholders: the installing project puts its own name and logo here.\n- `.ds-hero`: the `--centre` tile of the home grid, everything centred: a `.ds-badge--new` at the top, the `.ds-device`, then `.ds-hero__title` (the product's name at `--text-h1`) with `.ds-hero__lead`, then `.ds-hero__actions` with one primary and one secondary large button over a 12px `.ds-hero__note`. One per site, home page only.\n- `.ds-device`: the product drawn in CSS: `.ds-device__body` (the bezel, with the dialog's shadow) around `.ds-device__face` (the paper face in the inverse colours, with `.ds-device__time` at the display size and `.ds-device__date` in mono) over a `.ds-device__foot`. Redraw it for another product from the same parts: a body, a face in the inverse colours, one large reading.\n- `.ds-grid`: the bento. Children are `.ds-grid__cell` with span variants `--wide`, `--half`, `--wider`, `--full`, `--tall` and `--centre`; arrangement variants `--center` (for a one-track icon or figure tile), `--end`, `--between`, `--stack` (20px between children), `--split` (copy left in `.ds-grid__copy`, actions right); fill variants `--fill-1` to `--fill-4`, `--accent` (the price tile), `--bare` (outline only). Inside: `.ds-grid__icon` with a `.ds-grid__glyph`, `.ds-grid__title` (`--large` for the title of a `--half` or wider tile), `.ds-grid__text`, `.ds-grid__visual` and `.ds-grid__actions`. `.ds-grid--auto` is for tiles that hold components.\n- `.ds-figure`: one large numeral: `.ds-figure__value` (64px, weight 600, tabular) with its `.ds-figure__unit` in the accent colour at 24px, over a 14px `.ds-figure__label`. It sits at the bottom of a two-track tile under a `.ds-grid__title`. `.ds-figure--small` (44px) is for a one-track tile and for a total in a summary.\n- Other tile contents: `.ds-finishes` of round `.ds-finishes__dot` samples (`--2` to `--4`, `is-current` ringed), `.ds-chart` of `.ds-chart__bar` (`--2` to `--5`, `is-current`), `.ds-checks`, `.ds-chips`, `.ds-rows`, `.ds-code`, `.ds-switch`, and `.ds-facts` with `.ds-facts__row`, `.ds-facts__term` and `.ds-facts__value` for a two-column summary.\n- `.ds-page-header`: the head of an inner page, on the bare page. `.ds-page-header__copy` holds `.ds-page-header__title` (an `h1` at `--text-h1`) and one line of `.ds-page-header__text` at 20px; `.ds-page-header__actions` sits at the right with one button. Put a `.ds-breadcrumb` above it. Never together with a `.ds-hero`.\n- `.ds-stat`: one figure of the strip: `.ds-stat__value` (`--text-h1`, tabular, with a grey `.ds-stat__unit`) over `.ds-stat__label`, with an optional 12px `.ds-stat__note` (`--success`, `--warning`, `--danger`). `.ds-stats` is the row: a `--full` tile laid out as four centred columns parted by hairlines; use four.\n- `.ds-prose`: long-form text in a `--wider` tile; styles h1 to h3, paragraphs, lists, `strong`, `code` and links.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` for grey navigation links. `.ds-links` lays several out in a row.\n- `.ds-button`: the light keycap. `--secondary` is dark with a grey hairline, `--danger` is the destructive action (danger text on `--color-danger-surface` with a danger hairline, never a solid block; one per group, beside a secondary button), `--inverse` only on the price tile, `--large` in the hero and the price tile, `--small` in the bar. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-badge`: 12px label with 6px corners. `--accent` filled coral, `--new` a tint of `--color-accent-alt`, `--count` a number; optional `.ds-badge__dot`. Status labels are `--success` (ready to ship), `--warning` (two weeks) and `--danger` (sold out): coloured text on a 14% tint with a 30% hairline. Use them for stock and order state and nowhere decorative.\n- `.ds-form`: two-column grid of `.ds-form__field` (`--full` spans both) with `.ds-form__label` and `.ds-form__control` (`--area` for a textarea; `is-invalid`, `is-focus`, `is-disabled`), `.ds-form__hint`, `.ds-form__error`, `.ds-form__check` with `.ds-form__checkbox`, and `.ds-form__actions`. The buttons follow the form in a `.ds-buttons` row.\n- `.ds-table`: a rounded box with a grey head; rows are parted by the table's own `--color-border-muted` fill showing through a hairline gap. `.ds-table__num` right-aligns numbers (one column per model in a comparison), `.ds-table__muted` greys a column, `tr.is-current` lifts a row, `.ds-table__link` in the first cell leads to its explanation. Put it in a `--wider` tile inside `.ds-table__scroll`.\n- `.ds-list`: hairline-separated `.ds-list__item` with `.ds-list__title`, optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: a small card with `.ds-panel__title`, `.ds-panel__body` and `.ds-panel__meta`, one per model or note, inside a tile. `.ds-panels` puts two side by side.\n- `.ds-tabs`: a segmented strip of `.ds-tabs__tab`; `is-current` is the filled segment. `.ds-toolbar` puts tabs and a count on one line between the page header and the grid.\n- `.ds-sidebar`: a two-track tile with `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__link` (`is-current` filled).\n- `.ds-notice`: information box with `.ds-notice__title` and `.ds-notice__text`; `--error` is the dark red variant. `.ds-notices` stacks them.\n- `.ds-pagination`: `.ds-pagination__link` items under a list or table; `is-current` filled with a hairline, `is-disabled` greyed.\n- `.ds-breadcrumb`: 14px trail of `.ds-breadcrumb__item` separated by slashes; the last carries `is-current`. The first thing on an inner page.\n- `.ds-dialog`: 460px box with `.ds-dialog__bar` (`.ds-dialog__title`, `.ds-dialog__close` with a `.ds-dialog__glyph`), `.ds-dialog__body` and `.ds-dialog__actions`. Shown on a `.ds-stage`, a tile filled with `--color-overlay`.\n- `.ds-empty`: centred icon tile, `.ds-empty__title`, `.ds-empty__text` and one secondary button inside a `--bare` tile.\n- `.ds-footer`: hairline on top, then the small print first: `.ds-footer__notes` with numbered `.ds-footer__note` lines at 12px; then `.ds-footer__inner` with `.ds-footer__brand` and `.ds-footer__text` beside three columns of `.ds-footer__title` over a `.ds-footer__list` of `.ds-footer__link`.\n- `.ds-menu`: a drop-down under a navigation item, opened by hover or keyboard focus (`is-open` by hand). `.ds-menu__list` of `.ds-menu__item` with an optional `.ds-menu__hint`, parted by `.ds-menu__rule`; `.ds-menu__caret` in the trigger; `--end` aligns it to the right edge. Use it under the one navigation item that has sub-pages.\n- `.ds-accordion`: `
` as `.ds-accordion__item` with a `.ds-accordion__head` summary and `.ds-accordion__body`. Use it for questions at the end of a guide or inside a tile.\n- `.ds-tooltip`: a focusable term with `.ds-tooltip__mark` and `.ds-tooltip__tip`, shown on hover or focus (`is-open` by hand) on `--fill-inverse`. Use it for one sentence of explanation, never for an action.\n- `.ds-progress`: `.ds-progress__label` with `.ds-progress__value` over `.ds-progress__bar` with `.ds-progress__fill` (`--1` to `--5` set the width; `--success`, `--warning` the colour). Use it inside a tile for a quota or a share used.\n\n## Never\n\n- `content-width <= 1180px`: everything stays in the centred 1180px column.\n- `block-gap <= 56px`: tiles sit 20px apart; the largest gap between stacked blocks is the 40px under a page header.\n- `font-families <= 2`: one sans for everything plus the mono for code.\n- `font-size >= 12px`: the smallest measured text is 12px.\n- `font-size <= 72px`: the largest measured hero heading is 72px; this pack tops out at 60px.\n- `font-weight <= 700`: no black or heavy weights.\n- `underlined-links <= 1%`: links are told apart by colour; underline appears only on hover.\n- `uppercase-text <= 1%`: capitals are limited to a short eyebrow label.\n- `line-height <= 1.7`: body text sits between 1.5 and 1.7.\n- `border-width <= 2px`: every hairline is 1px; 2px exists only as the focus ring.\n- `border-radius >= 4px`: no box is square; the smallest measured radius is 4px.\n- `text-shadow = none`: no visible text shadows.\n- `box-shadow-blur <= 25px`: shadows are quiet; the largest measured blur is 25px.\n- `gradient-fills <= 30%`: gradients are faint cell lighting and glows, on at most about a third of boxes.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. A new fact about the product is a new tile: one track for an icon with two words and a caption, two tracks for a title and one `.ds-figure`; keep the two sides of the centre tile mirrored and their rows unevenly split. A new drawing of the product is built like `.ds-device`, from a body, a face in the inverse colours and one large reading, with tokens only and never an image. A contained box inside a tile is a `.ds-panel`; a label is a `.ds-badge`. Use tokens only: fills are `--fill-panel`, a `--color-fill-*` tint fading into `--color-surface`, or `--fill-accent` with `--color-accent-text`; outlines are `--border-width` in `--color-border`; corners are `--radius-page` for tiles, `--radius-panel` inside them and `--radius-control` for controls; spacing comes from the `--space-*` scale. Keep one figure per tile, colour only its unit, separate tiles with the gap and never with a rule, and do not add a second accent colour, a light section, a centred hero band above the grid or a photograph.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1180px;\n --size-measure: 640px;\n --size-nav: 52px;\n --size-row: 196px;\n --size-control: 38px;\n --size-control-large: 48px;\n --size-device: 248px;\n --size-icon: 44px;\n --size-glyph: 22px;\n --size-check: 16px;\n --size-dot: 8px;\n --size-chart: 112px;\n --size-switch: 32px;\n --size-knob: 14px;\n --size-dialog: 460px;\n --size-blur: 16px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 20px;\n --space-6: 28px;\n --space-7: 40px;\n --space-8: 56px;\n --space-9: 88px;\n --space-gap: 20px;\n --space-cell: 28px;\n}\n\n/* shell */\n.ds-page {\n margin: 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 -webkit-font-smoothing: antialiased;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n.ds-view {\n padding: var(--space-7) 0 var(--space-9);\n}\n\n/* nav: a thin product bar. The name at the left, the pages, the price and the order button at the right */\n.ds-nav {\n position: sticky;\n top: 0;\n z-index: 10;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n backdrop-filter: blur(var(--size-blur));\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n/* brand: the mark on a small tile dressed like the primary button, then the name */\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin-right: auto;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-glyph) + var(--space-1));\n height: calc(var(--size-glyph) + var(--space-1));\n background: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 70%;\n height: 70%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-bar-text);\n}\n.ds-nav__links {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-3);\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 line-height: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n color: var(--color-link-quiet);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-bar-text);\n}\n/* the current view marks its item in the bar */\n.ds-nav__link.is-current,\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(#compare:target) .ds-nav__link[href=\"#compare\"],\n.ds-page:has(#order:target) .ds-nav__link[href=\"#order\"],\n.ds-page:has(#support:target) .ds-nav__link[href=\"#support\"] {\n background: var(--color-surface-alt);\n color: var(--color-bar-text);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-nav__price {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n color: var(--color-bar-alt-text);\n white-space: nowrap;\n}\n\n/* grid: the bento. Six tracks on a fixed row; the product stands in the middle and the facts flank it */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n grid-auto-rows: minmax(var(--size-row), auto);\n gap: var(--space-gap);\n}\n.ds-grid--auto {\n grid-auto-rows: auto;\n}\n.ds-grid__cell {\n position: relative;\n display: flex;\n flex-direction: column;\n min-width: 0;\n padding: var(--space-cell);\n overflow: hidden;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--wide {\n grid-column: span 2;\n}\n.ds-grid__cell--half {\n grid-column: span 3;\n}\n.ds-grid__cell--wider {\n grid-column: span 4;\n}\n.ds-grid__cell--full {\n grid-column: 1 / -1;\n}\n.ds-grid__cell--tall {\n grid-row: span 2;\n}\n/* the centre tile: tracks three and four, three rows tall, placed first so the small tiles flow round it */\n.ds-grid__cell--centre {\n grid-column: 3 / span 2;\n grid-row: 1 / span 3;\n}\n.ds-grid__cell--between {\n justify-content: space-between;\n}\n.ds-grid__cell--center {\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n.ds-grid__cell--stack {\n gap: var(--space-5);\n}\n.ds-grid__cell--fill-1 {\n background: radial-gradient(120% 90% at 50% 0, var(--color-fill-1), var(--color-surface) 85%);\n}\n.ds-grid__cell--fill-2 {\n background: radial-gradient(120% 90% at 50% 0, var(--color-fill-2), var(--color-surface) 85%);\n}\n.ds-grid__cell--fill-3 {\n background: radial-gradient(120% 90% at 50% 0, var(--color-fill-3), var(--color-surface) 85%);\n}\n.ds-grid__cell--fill-4 {\n background: var(--color-fill-4);\n}\n.ds-grid__cell--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-grid__cell--bare {\n background: transparent;\n box-shadow: none;\n border-color: var(--color-border-strong);\n}\n.ds-grid__icon {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-4);\n background: var(--color-page);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-grid__glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.3;\n letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-grid__title--large {\n font-size: var(--text-large);\n}\n.ds-grid__cell--accent .ds-grid__title {\n font-size: var(--text-h2);\n line-height: var(--line-heading);\n color: var(--color-accent-text);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n line-height: 1.45;\n color: var(--color-text-muted);\n}\n.ds-grid__cell--accent .ds-grid__text {\n color: var(--color-accent-text);\n opacity: 0.8;\n}\n.ds-grid__visual {\n width: 100%;\n margin-top: auto;\n padding-top: var(--space-5);\n}\n.ds-grid__cell--split {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-6);\n}\n.ds-grid__copy {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-width: 0;\n}\n.ds-grid__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-5);\n}\n.ds-grid__cell--split .ds-grid__actions {\n flex: none;\n margin-top: 0;\n padding-top: 0;\n}\n\n/* hero: the centre tile. The product drawn in CSS, its name, one line and the order button, all centred */\n.ds-hero {\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n text-align: center;\n background: radial-gradient(90% 60% at 50% 0, var(--color-fill-1), transparent 80%), var(--fill-panel);\n}\n.ds-hero__title {\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 color: var(--color-heading);\n}\n.ds-hero__lead {\n max-width: 30ch;\n margin: var(--space-3) auto 0;\n color: var(--color-text-muted);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2);\n}\n.ds-hero__note {\n margin: var(--space-3) 0 0;\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n\n/* device: the clock itself. A bezel, a paper face in the inverse colours, a foot */\n.ds-device {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n max-width: var(--size-device);\n margin: auto 0;\n}\n.ds-device__body {\n width: 100%;\n padding: var(--space-2);\n background: var(--color-surface-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-device__face {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n aspect-ratio: 4 / 3;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-panel);\n}\n.ds-device__time {\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-device__date {\n margin-top: var(--space-2);\n font-family: var(--font-mono);\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.34;\n opacity: 0.7;\n}\n.ds-device__foot {\n width: 36%;\n height: var(--space-2);\n background: var(--color-surface-strong);\n border-radius: 0 0 var(--radius-control) var(--radius-control);\n}\n\n/* figure: one large numeral with its unit and a line of what it measures */\n.ds-figure {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: auto 0 0;\n}\n.ds-figure__value {\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n color: var(--color-heading);\n}\n.ds-figure__unit {\n margin-left: var(--space-1);\n font-size: var(--text-h2);\n letter-spacing: 0;\n color: var(--color-link);\n}\n.ds-figure__label {\n font-size: var(--text-small);\n line-height: 1.45;\n color: var(--color-text-muted);\n}\n.ds-figure--small .ds-figure__value {\n font-size: var(--text-h1);\n}\n.ds-figure--small .ds-figure__unit {\n font-size: var(--text-h3);\n}\n.ds-grid__cell--center .ds-figure {\n align-items: center;\n margin: 0;\n}\n\n/* finishes: the colours the case comes in, as a row of round samples */\n.ds-finishes {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-finishes__dot {\n width: var(--size-icon);\n height: var(--size-icon);\n background: var(--fill-inverse);\n border: var(--border-width-strong) solid var(--color-border-strong);\n border-radius: 50%;\n}\n.ds-finishes__dot--2 {\n background: var(--color-surface-strong);\n}\n.ds-finishes__dot--3 {\n background: var(--color-fill-1);\n}\n.ds-finishes__dot--4 {\n background: var(--fill-accent);\n}\n.ds-finishes__dot.is-current {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n\n/* inner page: the trail, the page header on the bare page, then tiles */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: 0 0 var(--space-7);\n}\n.ds-page-header__copy {\n flex: 1;\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-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-page-header__text {\n max-width: var(--size-measure);\n margin: var(--space-3) 0 0;\n font-size: var(--text-large);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-toolbar {\n margin-bottom: var(--space-gap);\n}\n\n/* small things that live inside tiles */\n.ds-chart {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n height: var(--size-chart);\n}\n.ds-chart__bar {\n flex: 1;\n height: 30%;\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n}\n.ds-chart__bar--2 {\n height: 45%;\n}\n.ds-chart__bar--5 {\n height: 100%;\n}\n.ds-chart__bar.is-current {\n background: var(--fill-accent);\n}\n.ds-stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n margin: 0;\n}\n.ds-stat__label {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\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: 1;\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-stat__unit {\n font-size: var(--text-h3);\n color: var(--color-text-muted);\n}\n.ds-stat__note {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.34;\n color: var(--color-text-muted);\n}\n/* stats: one strip across the grid, four figures parted by hairlines */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n align-items: center;\n gap: 0;\n margin: 0;\n list-style: none;\n}\n.ds-stats .ds-stat {\n align-items: center;\n padding: 0 var(--space-4);\n text-align: center;\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stats .ds-stat:first-child {\n border-left: 0;\n}\n.ds-stats .ds-stat__note {\n justify-content: center;\n}\n.ds-facts {\n display: grid;\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-facts__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-facts__row:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-facts__term {\n color: var(--color-text-muted);\n}\n.ds-facts__value {\n margin: 0;\n font-weight: var(--weight-bold);\n text-align: right;\n color: var(--color-heading);\n}\n.ds-code {\n margin: 0;\n padding: var(--space-4);\n overflow: hidden;\n background: var(--color-page);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-mono);\n font-size: calc(var(--text-small) * 0.886);\n line-height: 1.6;\n white-space: pre;\n}\n.ds-code__key {\n color: var(--color-accent-alt);\n}\n.ds-code__str {\n color: var(--color-link);\n}\n.ds-checks {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-checks__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-checks__mark {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n color: var(--color-accent-alt);\n}\n.ds-chips {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n.ds-grid__cell--center .ds-chips {\n justify-content: center;\n}\n.ds-rows {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-rows__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--size-switch);\n height: calc(var(--size-knob) + var(--space-1));\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-switch::after {\n content: \"\";\n position: absolute;\n top: calc(var(--space-1) / 2);\n left: calc(var(--space-1) / 2);\n width: var(--size-knob);\n height: var(--size-knob);\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n}\n.ds-switch.is-on {\n background: var(--color-accent-alt);\n}\n.ds-switch.is-on::after {\n left: auto;\n right: calc(var(--space-1) / 2);\n background: var(--color-inverse);\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\n 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 {\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n font-size: var(--text-h3);\n color: var(--color-heading-alt);\n}\n.ds-prose p,\n.ds-prose ul {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n.ds-prose ul {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n color: var(--color-text);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: 87.5%;\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\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n border-radius: calc(var(--radius-control) / 2);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n font-size: var(--text-small);\n}\n\n/* buttons: small, 8px corners, a hairline one step lighter than the fill */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: 0 var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\n border-radius: var(--radius-control);\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;\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,\n.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,\n.ds-button.is-active {\n background: color-mix(in srgb, var(--color-button) 85%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border-strong);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: var(--color-surface);\n}\n.ds-button--danger {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 20%, var(--color-danger-surface));\n color: var(--color-danger);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: var(--color-danger-surface);\n}\n.ds-button--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: transparent;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse) 86%, var(--color-inverse-text));\n color: var(--color-inverse-text);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button--small {\n min-height: var(--space-6);\n padding: 0 var(--space-3);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n box-shadow: none;\n cursor: not-allowed;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-ui);\n line-height: 1.34;\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-badge--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-badge--new {\n background: color-mix(in srgb, var(--color-accent-alt) 14%, transparent);\n color: var(--color-accent-alt);\n border-color: color-mix(in srgb, var(--color-accent-alt) 30%, transparent);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 14%, transparent);\n color: var(--color-success);\n border-color: color-mix(in srgb, var(--color-success) 30%, transparent);\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 14%, transparent);\n color: var(--color-warning);\n border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 14%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);\n}\n.ds-badge--count {\n padding: var(--space-1) var(--space-2);\n border-radius: var(--radius-control);\n font-weight: var(--weight-bold);\n}\n.ds-badge__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-accent-alt);\n border-radius: var(--radius-pill);\n}\n.ds-badge--success .ds-badge__dot,\n.ds-badge--warning .ds-badge__dot,\n.ds-badge--danger .ds-badge__dot {\n background: currentColor;\n}\n\n/* form */\n.ds-form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: grid;\n align-content: start;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__field--full {\n grid-column: 1 / -1;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n color: var(--color-text);\n}\n.ds-form__control {\n width: 100%;\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\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-ui);\n font-size: var(--text-ui);\n line-height: 1.4;\n transition: var(--transition);\n}\n.ds-form__control::placeholder {\n color: var(--color-disabled-text);\n}\n.ds-form__control--area {\n min-height: var(--space-9);\n resize: vertical;\n}\n.ds-form__control:focus-visible,\n.ds-form__control.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-form__control.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__hint {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-danger);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__checkbox {\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n grid-column: 1 / -1;\n}\n\n/* table: its own box inside a tile, hairline rows */\n.ds-table {\n width: 100%;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n border-collapse: separate;\n border-spacing: 0 var(--border-width);\n overflow: hidden;\n background: var(--color-border-muted);\n font-size: var(--text-small);\n text-align: left;\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-page);\n color: var(--color-text);\n}\n.ds-table tr.is-current td {\n background: var(--color-surface);\n}\n.ds-table__scroll {\n max-width: 100%;\n overflow-x: auto;\n}\n.ds-table .ds-table__link {\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-table .ds-table__link:hover,\n.ds-table .ds-table__link.is-hover {\n color: var(--color-link);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__muted {\n color: var(--color-text-muted);\n}\n\n/* list */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-4) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list__title {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link);\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n\n/* panel: the small card. 12px corners, sits inside a cell or in a row of its own */\n.ds-panel {\n min-width: 0;\n padding: var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-panel__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.4;\n color: var(--color-heading-alt);\n}\n.ds-panel__body {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel__meta {\n display: block;\n margin-top: var(--space-4);\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-panels {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-3);\n}\n\n/* tabs: a segmented pill */\n.ds-tabs {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\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 line-height: 1.2;\n color: var(--color-bar-alt-text);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n outline: var(--focus-ring);\n}\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n\n/* sidebar */\n.ds-sidebar {\n font-size: var(--text-small);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-heading);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n display: grid;\n gap: var(--space-1);\n margin: 0 calc(var(--space-3) * -1);\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n font-size: var(--text-small);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n\n/* notice */\n.ds-notice {\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 20%, transparent);\n border-radius: var(--radius-panel);\n font-size: var(--text-small);\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notice__text {\n margin: 0;\n opacity: 0.8;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notices {\n display: grid;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--space-6);\n min-height: var(--space-6);\n padding: 0 var(--space-3);\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 color: var(--color-link-quiet);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n background: var(--color-surface-alt);\n}\n.ds-pagination__link.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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 gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-disabled-text);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n}\n\n/* dialog: a lifted 12px box on a dimmed stage */\n.ds-dialog {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-dialog__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-dialog__close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n border: 0;\n border-radius: var(--radius-control);\n cursor: pointer;\n}\n.ds-dialog__glyph {\n width: var(--size-check);\n height: var(--size-check);\n}\n.ds-dialog__close:hover,\n.ds-dialog__close.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stage {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-8) var(--space-5);\n background: var(--color-overlay);\n}\n\n/* empty state: an empty tile with only an outline */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n text-align: center;\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-empty__text {\n max-width: 36ch;\n margin: var(--space-1) 0 var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* footer: the small print first, then the link columns */\n.ds-footer {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-footer__notes {\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: var(--space-6) var(--space-5) 0;\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.5;\n}\n.ds-footer__note {\n max-width: 96ch;\n margin: 0 0 var(--space-2);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: var(--space-6);\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: var(--space-6) var(--space-5) var(--space-7);\n}\n.ds-footer__brand {\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 color: var(--color-heading);\n}\n.ds-footer__text {\n max-width: 34ch;\n margin: var(--space-2) 0 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-footer__list {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-link-hover);\n}\n\n/* menu: a list that drops from a navigation item, on hover, focus or when opened */\n.ds-menu {\n position: relative;\n}\n.ds-menu__caret {\n width: var(--size-dot);\n height: var(--size-dot);\n margin-left: var(--space-1);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: none;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n text-align: left;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list,\n.ds-menu[open] > .ds-menu__list,\n.ds-menu.is-open > .ds-menu__list {\n display: block;\n}\n.ds-menu__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-3);\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 line-height: 1.3;\n color: var(--color-text);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover,\n.ds-menu__item:focus-visible {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-menu__hint {\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-menu__rule {\n height: 0;\n margin: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* accordion: sections that open and close */\n.ds-accordion {\n display: grid;\n}\n.ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:first-child {\n border-top: 0;\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n list-style: none;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.35;\n color: var(--color-heading);\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::after {\n content: \"\";\n flex: none;\n align-self: center;\n display: inline-block;\n width: calc(var(--space-2) * 1.25);\n height: calc(var(--space-2) * 1.25);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n color: var(--color-link);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after,\n.ds-accordion__item.is-open > .ds-accordion__head::after {\n transform: rotate(45deg);\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n color: var(--color-link);\n}\n.ds-accordion__head:focus-visible,\n.ds-accordion__head.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n max-width: var(--size-measure);\n margin: 0;\n padding: 0 0 var(--space-4);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* tooltip: a hint over its trigger, on hover or focus */\n.ds-grid__cell:has(.ds-tooltip) {\n position: relative;\n overflow: visible;\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n cursor: help;\n}\n.ds-tooltip__mark {\n display: inline-block;\n width: var(--size-check);\n height: var(--size-check);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-bold);\n line-height: 1;\n color: var(--color-text-muted);\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 15;\n width: max-content;\n max-width: 28ch;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-body);\n line-height: 1.4;\n text-align: left;\n text-transform: none;\n letter-spacing: 0;\n white-space: normal;\n transform: translateX(-50%);\n visibility: hidden;\n opacity: 0;\n transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n\n/* progress: how far something is, as a bar */\n.ds-progress {\n display: grid;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-progress__label {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-progress__value {\n font-size: calc(var(--text-small) * 0.857);\n font-variant-numeric: tabular-nums;\n color: var(--color-text-muted);\n}\n.ds-progress__bar {\n display: block;\n height: var(--space-2);\n overflow: hidden;\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-progress__fill {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__fill--3 {\n width: 62%;\n}\n\n/* room above a component that follows text inside a tile */\n.ds-figure + .ds-progress,\n.ds-grid__text + .ds-switch {\n margin-top: var(--space-3);\n}\n\n@media (max-width: 1100px) {\n .ds-figure__value,\n .ds-device__time {\n font-size: var(--text-h1);\n }\n .ds-figure__unit {\n font-size: var(--text-h3);\n }\n}\n@media (max-width: 960px) {\n .ds-grid {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .ds-grid__cell--centre,\n .ds-grid__cell--half,\n .ds-grid__cell--wider {\n grid-column: 1 / -1;\n grid-row: auto;\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: 0 var(--space-4);\n }\n .ds-nav__links {\n order: 3;\n width: 100%;\n padding-bottom: var(--space-2);\n overflow-x: auto;\n }\n .ds-footer__inner {\n grid-template-columns: 1fr 1fr;\n }\n}\n@media (max-width: 600px) {\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n grid-auto-rows: auto;\n gap: var(--space-3);\n }\n .ds-grid__cell--wide,\n .ds-grid__cell--half,\n .ds-grid__cell--wider {\n grid-column: 1 / -1;\n }\n .ds-grid__cell--tall {\n grid-row: auto;\n }\n .ds-grid__cell {\n padding: var(--space-5);\n }\n .ds-page__inner,\n .ds-nav__inner {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-view {\n padding: var(--space-5) 0 var(--space-8);\n }\n .ds-nav__price,\n .ds-table .ds-table__extra {\n display: none;\n }\n .ds-page-header {\n margin-bottom: var(--space-5);\n }\n .ds-page-header__title {\n font-size: var(--text-h2);\n letter-spacing: var(--heading-tracking);\n }\n .ds-page-header__text {\n font-size: var(--text-base);\n }\n .ds-page-header__copy {\n flex-basis: 100%;\n }\n .ds-grid__cell--split {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-form,\n .ds-panels {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stats {\n grid-template-columns: 1fr 1fr;\n gap: var(--space-5) 0;\n }\n .ds-stats .ds-stat:nth-child(odd) {\n border-left: 0;\n }\n .ds-stat__value {\n font-size: var(--text-h2);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-2) var(--space-3);\n }\n .ds-tabs {\n max-width: 100%;\n overflow-x: auto;\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n white-space: nowrap;\n }\n .ds-pagination,\n .ds-form__actions,\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-stage {\n padding: var(--space-5) var(--space-3);\n }\n .ds-footer__notes,\n .ds-footer__inner {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n}\n@media (max-width: 960px) {\n .ds-tooltip {\n position: static;\n }\n .ds-tooltip__tip {\n bottom: auto;\n left: var(--space-4);\n right: var(--space-4);\n width: auto;\n max-width: none;\n margin-top: var(--space-6);\n transform: none;\n }\n}\n\n/* narrow navigation: the links sit as one centred row under the brand and never scroll, so the drop-down\n can open; on a phone it takes the row's full width */\n@media (max-width: 960px) {\n .ds-nav__links {\n flex: 1 0 100%;\n width: 100%;\n justify-content: center;\n overflow-x: visible;\n }\n}\n@media (max-width: 600px) {\n .ds-nav__links {\n position: relative;\n }\n .ds-nav__links .ds-menu {\n position: static;\n }\n .ds-nav__links .ds-menu__list {\n left: 0;\n right: 0;\n min-width: 0;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin, product bento specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n From 149\n Buy\n
\n
\n
\n\n
\n
\n
\n
\n
\n New this spring\n
\n
\n
\n 10:08\n Thursday 14 May\n
\n
\n \n
\n
\n

chronoskin

\n

A desk clock with a paper face. It tells the time and nothing else.

\n
\n
\n
\n Order\n Compare sizes\n
\n

Ships from 2 June. Returns within 30 days.

\n
\n
\n\n
\n

Battery

\n

21daysOn one charge, with the face refreshed every minute.

\n
\n A clock on day five 76% left\n \n
\n
\n
\n \n

Reads in sunlight

\n

No glare, no backlight?The face reflects the light of the room, like paper.

\n
\n
\n

300ppiSharp as print

\n
\n
\n \n

USB-C

\n

Any charger you own

\n
\n
\n \n

Silent

\n

No tick, no fan, no chime

\n
\n
\n

Two sizes

\n

7.8inThe large face. The small one is 6.0 inches.

\n
\n
\n
\n

Four finishes

\n

Anodised aluminium, bead blasted by hand.

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

Night face

\n

Dims the ink after ten

\n \n
\n
\n \n

Splash proof

\n

Rated IP54

\n
\n\n
    \n
  • \n 412 g\n Weight, large\n
    • \n
  • \n 9.4 mm\n Thickness\n
    • \n
  • \n 0.3 W\n Power while charging\n
    • \n
  • \n 5 yrs\n Of updates, promised\n
    • \n
\n\n
\n
\n \n

In the box

\n

Everything it needs, and no plastic.

\n
\n
    \n
  • The clock, charged to 60 percent
    • \n
  • A one metre braided USB-C cable
    • \n
  • A felt foot for stone and glass desks
    • \n
  • A printed card with the two buttons explained
    • \n
\n
\n\n
\n
\n

A week on the desk

\n

Minutes of charging per day. Most days it needs none.

\n
\n
\n \n \n \n \n \n \n \n
\n
\n Mon to Sun\n Charged on Friday\n
\n
\n\n
\n
\n

From 149 for the small, 189 for the large

\n

Free delivery in fourteen countries. Engraving on the back costs nothing.

\n
\n
\n Order yours\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Compare
    3. \n
  3. Small and large
    4. \n
\n\n
\n
\n

Which chronoskin?

\n

The same clock in two sizes. The numbers that differ are below.

\n
\n
\n Order\n
\n
\n\n
\n \n 2 models\n
\n\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
MeasureUnitSmallLarge
Screen diagonalinches6.07.8
Resolutionpixels per inch300300
Batterydays per charge2821
Weightgrams268412
Thicknessmillimetres9.49.4
Pricewith delivery149189
\n
\n

Battery life measured with one refresh a minute at 21 degrees.

\n
\n\n
\n

In a sentence

\n
\n

Small

\n

For a bedside table or a shelf. Lasts a week longer.

\n 6.0 inches · 149\n
\n
\n

Large

\n

For a desk or a kitchen. Readable from across the room.

\n 7.8 inches · 189\n
\n
\n\n
\n

Longest between charges

\n

28daysThe small one, on one charge.

\n
\n
\n

Reading distance

\n

4mHow far away the large face still reads.

\n
\n
\n
\n

Decided?

\n

Both ship from 2 June.

\n
\n
\n Order\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Support
    3. \n
  3. Setting up
    4. \n
\n\n
\n
\n

Support

\n

Two buttons, one cable. Most answers fit on this page.

\n
\n
\n Track an order\n
\n
\n\n
\n \n\n
\n
\n

Setting up

\n

The clock arrives charged to 60 percent and already running. It sets itself from the time signal the first time it sees a window.

\n

The two buttons

\n

The left button changes the face. The right button, held for three seconds, opens the menu; the display shows SET while it is open.

\n

What the menu holds

\n
    \n
  • Time zone and the 12 or 24 hour face
    • \n
  • When the night face begins and ends
    • \n
  • How often the paper refreshes
    • \n
\n

Charging

\n

Any USB-C charger works. A full charge takes about two hours; see how long each size lasts or order a spare cable.

\n

Questions

\n
\n
\n Does it need wireless?\n

No. It reads the time signal by radio and keeps time by itself between readings.

\n
\n
\n Can the face be changed?\n

Yes, with the left button. Four faces come installed.

\n
\n
\n What if the battery wears out?\n

The workshop replaces it. The back opens with two screws.

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

Software updates

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

Downloads

\n

A link as it looks new, visited, under the pointer and pressed.

\n
\n

\n Printed guide\n Safety sheet\n Dimensions\n Spare parts\n

\n
\n\n
\n
\n

From a computer

\n

Plugged in, the clock answers on a serial port.

\n
\n
$ chronoskin status\n  battery  84%\n  face     night
\n
\n\n
\n
\n \n

No repairs on record

\n

If a clock of yours comes in for service, its progress shows here.

\n Register a clock\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Order
    3. \n
  3. Your clock
    4. \n
\n\n
\n
\n

Order

\n

Pick a size and a finish. You pay when it ships.

\n
\n
\n Compare sizes\n
\n
\n\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n Enter a full address, such as name@home.example.\n
\n
\n \n \n We deliver to fourteen countries; the list is under Support.\n
\n
\n \n
\n
\n
\n \n \n \n \n
\n
\n\n
\n

Your bag

\n
\n
chronoskin, large
189
\n
Finish
Chalk
\n
Engraving
Free
\n
Delivery
Free
\n
\n

189totalCharged when the parcel leaves.

\n
\n\n
\n
\n

In stock

\n

Counted this morning at the workshop.

\n
\n
    \n
  • Chalk Ready to ship
    • \n
  • Graphite Ready to ship
    • \n
  • Clay Two weeks
    • \n
  • Signal Sold out
    • \n
\n
\n Large\n Limited run\n 4\n
\n
\n\n
\n
\n

About this order

\n

Messages from the checkout appear here.

\n
\n
\n
\n Engraving adds two days\n

Your clock would leave on 4 June.

\n
\n
\n The order was not placed\n

The email address is incomplete. Correct it and try again.

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

Empty the bag?

\n \n
\n
\n

The large clock in Chalk and its engraving will be removed.

\n
\n
\n \n \n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bento-grids.shop.s06.p01.t01.u01\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"bento-grids\",\n \"years\": [\n 2022,\n 2026\n ]\n },\n \"archetype\": \"shop\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bg-6111\",\n \"short\": \"v1-bg-6111\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #111113;\n --color-canvas: #111113;\n --color-surface: #1d1c20;\n --color-surface-alt: #29292b;\n --color-surface-strong: #323238;\n --color-bar: #111113;\n --color-bar-text: #ffffff;\n --color-bar-alt: #1b1b1e;\n --color-bar-alt-text: #a9a9a9;\n --color-inverse: #ffffff;\n --color-inverse-text: #111113;\n --color-text: #e0e0e0;\n --color-text-muted: #a9a9a9;\n --color-heading: #ffffff;\n --color-heading-alt: #eeeeee;\n --color-link: #768cff;\n --color-link-quiet: #a9a9a9;\n --color-link-visited: #9292af;\n --color-link-hover: #ffffff;\n --color-link-active: #5871ff;\n --color-border: rgb(255 255 255 / 0.08);\n --color-border-strong: rgb(255 255 255 / 0.16);\n --color-border-muted: #2b292e;\n --color-accent: #5e69d1;\n --color-accent-text: #ffffff;\n --color-accent-alt: #3ecf8e;\n --color-fill-1: #182030;\n --color-fill-2: #283830;\n --color-fill-3: #201820;\n --color-fill-4: #2b292e;\n --color-button: #5e69d1;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #29292b;\n --color-button-secondary-text: #ffffff;\n --color-input: #111113;\n --color-input-text: #e0e0e0;\n --color-input-border: #505051;\n --color-disabled: #29292b;\n --color-disabled-text: #838286;\n --color-danger: #f24822;\n --color-danger-surface: #201818;\n --color-success: #3ecf8e;\n --color-warning: #f7be2b;\n --color-notice: #1a3045;\n --color-notice-text: #bae6fd;\n --color-focus: #768cff;\n --color-shadow: #000000;\n --color-overlay: rgb(17 17 19 / 0.8);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"Inter Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --font-heading: Inter, \"Inter Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --font-ui: Inter, \"Inter Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: \"Source Code Pro\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 14px;\n --text-large: 18px;\n --text-display: 60px;\n --text-h1: 40px;\n --text-h2: 30px;\n --text-h3: 20px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.13;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 600;\n --weight-display: 700;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 8px;\n --radius-panel: 12px;\n --radius-pill: 9999px;\n --radius-page: 24px;\n --shadow-panel: inset 0 1px 1px color-mix(in srgb, white 8%, transparent), 0 12px 12px color-mix(in srgb, var(--color-shadow) 12%, transparent);\n --shadow-control: 0 1px 2px color-mix(in srgb, var(--color-shadow) 16%, transparent);\n --shadow-control-hover: 0 2px 4px color-mix(in srgb, var(--color-shadow) 16%, transparent);\n --shadow-control-pressed: none;\n --shadow-dialog: inset 0 1px 2px color-mix(in srgb, white 12%, transparent), 0 20px 25px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar) 80%, transparent);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 95%, white), color-mix(in srgb, var(--color-surface) 88%, black));\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 85%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n --backdrop-blur: 0px;\n}\n" } }