{ "id": "v1-nm-61ba-dr", "long_id": "v1.neumorphism.landing.s06.p01.t11.u10.dr", "name": "Neumorphism landing", "era": { "slug": "neumorphism", "code": "nm", "name": "Neumorphism", "years": [ 2019, 2021 ], "description": "Soft UI, 2019 to 2021: controls pressed out of, or into, a single pale surface by a pair of light and dark blurred shadows, with low contrast and very round corners." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "density": "roomy", "summary": "Neumorphism, also called soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, a light one towards the top left and a dark one towards the bottom right. The style spread through kits and generators, and their own sites were its typical marketing page: a centred headline on the bare surface, the components themselves as the only illustration, wide gaps between sections. This pack is that page for a component kit, on a sea-glass grey with one teal accent, in a light grotesque with a very large thin headline, with domed keys, hollow fields and a showcase well pressed into the page.", "url": "https://chrono.skin/s/v1-nm-61ba-dr", "preview_url": "https://chrono.skin/s/v1-nm-61ba-dr/specimen.html", "files": { "STYLE.md": "# Neumorphism landing\n\n## Summary\n\nNeumorphism, also called soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, a light one towards the top left and a dark one towards the bottom right. The style spread through kits and generators, and their own sites were its typical marketing page: a centred headline on the bare surface, the components themselves as the only illustration, wide gaps between sections. This pack is that page for a component kit, on a sea-glass grey with one teal accent, in a light grotesque with a very large thin headline, with domed keys, hollow fields and a showcase well pressed into the page.\n\n## Layout\n\n- One centred column: `--size-page` (1080px) with `--space-5` (24px) side padding. Nothing but the footer is wider; the surface colour fills the rest of the viewport.\n- Navigation: `.ds-nav` is a bare row `--size-nav` (64px) high, 24px below the top edge: the brand at the left, the section links pushed to the right, one primary button at the far right. The current link is pressed into the page.\n- Home page: `.ds-page__sections`, a stack of sections `--space-9` (96px) apart. First `.ds-page__lead`, three blocks 48px apart: the centred `.ds-hero` (status badge, title at `--text-display`, lead, two large buttons), the `.ds-showcase` well across the full column with three raised `.ds-demo` samples in it, and the `.ds-stat` row of three figures on the bare page. Then sections that each start with a centred `.ds-section__head`: the features (`.ds-section__split`: the `.ds-grid` of four tiles, two a row, beside the tall `.ds-callout`, `--size-callout` 320px), and the releases (`.ds-page__row`, three to two: the `.ds-list` beside a `.ds-page__stack` of panels).\n- Inner pages have no hero. `--space-6` (32px) under the navigation come the `.ds-breadcrumb` and the `.ds-page-header` (title at `--text-h1` with one muted line at the left, an action at the right), on the bare page. Then, 32px apart in a `.ds-page__stack`: on the pricing page the centred `.ds-tabs` track, the `.ds-plans` row of three cards, and rows of two (`.ds-page__row`, and `.ds-page__row--even` for equal halves) for the comparison table, a dialog, an empty state and a panel of facts. A documentation page uses `.ds-page__docs`: the `.ds-sidebar` contents, `--size-side` (240px), flat on the page at the left, and the prose in one `.ds-panel` with the centred `.ds-pagination` under it at the right. A form page uses `.ds-page__row`: the form in a `.ds-panel` in the wide column, notices and small panels in the narrow one. Keep the columns of a row about equally long.\n- Views. The specimen is one site with four views, each `
` inside `.ds-page__inner`; the navigation row and the footer stand outside them and one view shows at a time. `home` is the landing page: hero, showcase, figures, the four ideas beside the callout, the release notes beside a customer's words. `pricing` is the plans page: the billing switch, three plans, the comparison table beside the dialog that leaves a plan, the empty state of an account without a licence beside the terms of payment. `docs` is a documentation page: contents, the theming text, the pages of the guide. `contact` is the form page: the message form, with notices and two small panels beside it. The navigation presses in the link of the current view, by one `:has()` rule per view next to `.ds-nav__link.is-current`.\n- Spacing scale: `--space-1` 4px (dot to text, tab track padding), `--space-2` 8px (label to control, between navigation links), `--space-3` 12px (icon to text, between pagination keys), `--space-4` 16px (between buttons, row padding, title to lead in the hero), `--space-5` 24px (panel, tile and sample padding, between form fields), `--space-6` 32px (between raised blocks, plan and callout padding), `--space-7` 48px (showcase padding, between the blocks of the page's lead, under a section head, footer padding), `--space-8` 64px (above the hero title), `--space-9` 96px (between sections and above the footer).\n- Other sizes: `--size-dial` 152px (the dial sample), `--size-key` 48px (round sample key), `--size-chip` 48px (feature disc, sample art well), `--size-dialog` 440px.\n- Raised blocks need room for their shadows: never closer than `--space-5`. The showcase is the one place where raised cards stand inside a well; nowhere does a raised panel sit inside another raised panel.\n- `--size-rule` (1px) is the weight of the rules between table and list rows, between the figures and inside a plan; it stays when a surface part sets `--border-width` to 0.\n- Below 900px every row stacks into one column (showcase, features and callout, plans, rows, the documentation page, where the contents become rows of links above the text), sections move to 64px apart, the navigation becomes two lines (brand and button, then the links spread across the width) and the footer puts its line above three columns of links. Below 560px the side padding drops to `--space-4`, the hero title and the plan prices take `--text-h1`, the feature tiles and the figures stack, form rows stack, and table columns marked `.ds-table__opt` are hidden so that the table never scrolls sideways. On a phone (560px and below) `.ds-nav__list` stays a row of `.ds-nav__link` items spread across the width under the brand and the button, the current one pressed in.\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 wide humanist family for everything: Oxygen, then Ubuntu and Verdana; `--font-mono` for code.\n- Small text, because the face is wide: `--text-base` and `--text-ui` 13px at `--line-body` 1.6, `--text-small` 11px, `--text-large` 15px, `--text-h3` 15px, `--text-h2` 19px, `--text-h1` 28px, `--text-display` 40px.\n- Two weights: `--weight-body` 400; `--weight-bold`, `--weight-heading`, `--weight-display` and `--weight-ui` 700. `--line-heading` 1.25, `--line-display` 1.15.\n- No uppercase and no tracking from tokens; links are marked by colour and underlined on hover only.\n\n- Fully soft and very round: `--border-width` is 0; `--radius-control` and `--radius-panel` 22px, so a 40px button is nearly a pill, `--radius-page` 32px, `--radius-pill` 40px. `--border-width-strong` (2px) is the focus and error ring.\n- Medium relief: `--shadow-control` 5px offset and 10px blur, `--shadow-panel` and `--shadow-control-hover` 9px and 18px, `--shadow-control-pressed` 4px and 8px inset, `--shadow-dialog` 16px and 36px with its light side at 35%.\n- Every fill is flat; `--fill-button-hover` mixes 12% of the light colour into the button colour. `--shadow-text` is `none`. Transitions run 0.2s.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``; paints the surface colour and sets the base type. `.ds-page__inner` is the width container, `.ds-page__sections` the home page's stack of sections, `.ds-page__lead` its first, tighter group, `.ds-page__stack` a vertical stack at 32px gaps, `.ds-page__row` two columns three to two (`--even` for halves), `.ds-page__docs` contents plus text, `.ds-page__icon` a 16px icon. `.ds-view` is one screen of the specimen (see Layout); an application that gives each page its own document does not need it.\n- `.ds-brand`: the site's mark and name, in the navigation row, linking to the home page: `.ds-brand__mark` is a small raised key (`--size-brand`, 36px) dressed like the primary button (`--fill-button`, `--color-button-text` for the mark, the hairline from `--border-width`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG painted with `currentColor`; `.ds-brand__name` is the name in the heading font at `--text-h3`, in `--color-bar-text`. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo and keep the key.\n- `.ds-nav`: the bare navigation row. `.ds-nav__inner` holds the `.ds-brand`, the `.ds-nav__list` of `.ds-nav__link` at the right and one primary `.ds-button`; the current link is `is-current` and pressed in; `is-hover` raises a link.\n- `.ds-hero`: the centred introduction of the home page: a status `.ds-badge`, `.ds-hero__title` at the display size (at most about 18 characters a line), `.ds-hero__lead`, `.ds-hero__actions` with one primary and one secondary large button. No fill or shadow of its own. Once, on the home view.\n- `.ds-showcase`: the era's showpiece, one large well pressed into the page (`--fill-input`, `--radius-page`) directly under the hero, holding three `.ds-demo` cards. A `.ds-demo` is a raised sample of the product: `.ds-demo__head` with a sunk `.ds-demo__art` well beside `.ds-demo__title` and `.ds-demo__meta`; `.ds-demo__keys`, a row of round `.ds-demo__key` (`--primary` for the one main key; `is-hover` lifts, `is-active` sinks); `.ds-demo__dial`, a raised disc with a sunk `.ds-demo__face` holding a `.ds-demo__figure` and `.ds-demo__caption`; `.ds-demo--centre` centres a card's content. Form controls (`.ds-form__range`, `.ds-form__check`) may stand in a demo card. Show the product itself here, never a picture.\n- `.ds-section__head`: the centred head of a home page section, `.ds-section__title` at `--text-h1` over one line of `.ds-section__lead`. `.ds-section__split` puts a block beside the `.ds-callout`.\n- `.ds-callout`: one tall block on `--fill-inverse`, the only dark thing on the home page: `.ds-callout__mark` (an icon at the top), `.ds-callout__title`, `.ds-callout__text` and one secondary button at the foot. At most one per page.\n- `.ds-page-header`: head of an inner page, used instead of the hero: `.ds-page-header__text` holds `.ds-page-header__title` and one line of `.ds-page-header__lead`; `.ds-page-header__actions` sits at the right with at most one primary button. No fill or shadow of its own. Put the breadcrumb directly above it.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`. `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a code block on the inverted fill. Put prose inside a `.ds-panel`.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links in tables and titles. `.ds-link__sample` lays out a row of links.\n- `.ds-button`: primary, 40px high, a domed teal key raised by `--shadow-control`; `is-hover` lifts it and flattens the fill, `is-active` sinks it. `.ds-button--secondary` is the same key in the surface colour. `.ds-button--danger` is the destructive action: a surface-coloured key with `--color-danger` text; use it once, last in a group or as the confirming button of a dialog. `.ds-button--large` (52px) for the hero. `disabled` or `is-disabled` is flat, with no shadow. `.ds-button__row` spaces a group. One primary button per group.\n- `.ds-form`: vertical form inside a panel. `.ds-form__field` wraps a `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (inside `.ds-form__select-wrap` with a `.ds-form__chevron` icon), `.ds-form__range` (sunk track, raised accent thumb). `.ds-form__check` is a label row holding a `.ds-form__checkbox` (raised square, accent when checked) or a `.ds-switch` (sunk pill, raised thumb; accent fill when on). An invalid input takes `is-error`, which replaces its well with a 2px danger ring, and is followed by `.ds-form__error`; `.ds-form__hint` is help text; `.ds-form__actions` holds the buttons; `.ds-form__row` puts two fields side by side. Text controls are wells: they use `--shadow-control-pressed`.\n- `.ds-table`: data table as one raised sheet: small uppercase head, rows divided by a 1px rule, no stripes. `.ds-table__num` right-aligns a numeric column, `.ds-table__meta` is muted text, `.ds-table__opt` marks a column that is dropped on a phone, `is-hover` on a row lightens it.\n- `.ds-list`: the release notes, one raised sheet with rules between rows. Each `.ds-list__item` holds a `.ds-list__version` (a sunk well with the version in the monospace face), a `.ds-list__body` (`.ds-list__title` and `.ds-list__meta`) and an optional badge at the right. `.ds-list__dot` is a status dot; `--off` turns it red, `--new` takes the second accent.\n- `.ds-panel`: the basic raised card. `.ds-panel__title` is the title line, `.ds-panel__body` the padded content. `.ds-panel__quote` with `.ds-panel__by` sets a customer's words at `--text-large`; `.ds-panel__facts` is a list of label and value rows, values right-aligned.\n- `.ds-plans`: the pricing row of three `.ds-plan` cards, centred on each other. A plan holds `.ds-plan__name` (with an optional badge), `.ds-plan__price` at the display size with a `.ds-plan__per` line under it, `.ds-plan__points` (a short list with accent dots, under a rule) and one button at the foot. `.ds-plan--lead` marks the recommended plan: taller, raised by `--shadow-dialog`, and the only one with a primary button.\n- `.ds-grid`: four feature tiles, two a row, each `.ds-grid__cell` a raised card; `--1` to `--4` pick the colour of its `.ds-grid__chip` (a raised disc) from `--color-fill-*`; `.ds-grid__title` and `.ds-grid__text` under it.\n- `.ds-stat`: the row of three summary figures on the bare page, divided by vertical rules; each `.ds-stat__item` is a single figure: `.ds-stat__value` (30px, the display weight) over a bold `.ds-stat__label` and a muted `.ds-stat__meta` line. Use it once, under the showcase.\n- `.ds-tabs`: a short sunk track, centred in its column, with `.ds-tabs__tab` segments; the one with `is-current` is raised out of the track. Use it for a switch between two or three states of the page under it (billing period), not for site navigation.\n- `.ds-badge`: small tag for counts and marks, filled with the accent. `.ds-badge--quiet` is a flat pill in `--color-surface-strong` with `--color-text`, for neutral counts. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: the same flat pill with a leading 8px dot in the status colour. Never colour the whole pill.\n- `.ds-sidebar`: the contents of the documentation, flat on the page in the left column: `.ds-sidebar__heading` (small uppercase), `.ds-sidebar__list`, `.ds-sidebar__link`, raised on `is-hover` and pressed in when `is-current`.\n- `.ds-notice`: information notice sunk into the surface, with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error` takes the danger surface and `--color-danger` text. `.ds-notice__stack` stacks several.\n- `.ds-pagination`: a centred row of raised 40px keys, `.ds-pagination__link`; the current page is `is-current`, without a shadow and filled with the accent.\n- `.ds-breadcrumb`: small muted trail above the page header, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a tinted sheet (`--color-overlay`) with a centred `.ds-dialog__box`, at most 440px wide, raised by `--shadow-dialog`: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions` right-aligned.\n- `.ds-empty`: empty state as a sunk well: a raised `.ds-empty__icon` disc, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-footer`: a full-width band in `--fill-bar-alt`: `.ds-footer__inner` is a grid of `.ds-footer__about` (with `.ds-footer__name`) and three columns, each a `.ds-footer__heading` over `.ds-footer__links` of `.ds-footer__link`.\n- `.ds-tooltip`: a hint on hover or focus. Wrap the trigger and follow it with `.ds-tooltip__tip` (`role=\"tooltip\"`), a small label in `--fill-inverse`; `--below` drops it under the trigger, `--end` lines it up with the trigger's right edge. Use it for an icon key or a short badge whose meaning needs a word; never force it open.\n- `.ds-avatar`: a person as initials on a raised disc (`.ds-avatar__pic`, `--size-avatar`, `--shadow-control`), with an optional `.ds-avatar__text` holding `.ds-avatar__name` and `.ds-avatar__meta`. Use it wherever a person is named.\n- `.ds-accordion`: one raised sheet of `
` sections; `.ds-accordion__head` is the summary with a round `.ds-accordion__chevron` that is pressed while open, `.ds-accordion__body` the answer. Use it for questions and grouped settings in a side column.\n- `.ds-progress`: a pressed track (`--size-track`, `--shadow-control-pressed`) with a `.ds-progress__bar` in the accent; `--20`, `--60` and `--90` set its length and `.ds-progress__legend` is the line of name and reading over it. Use it for a share of a whole.\n- `.ds-carousel`: a sunk well with one `.ds-carousel__slide` showing in a scroll-snap `.ds-carousel__track` and `.ds-carousel__dots` under it (the dots are marks, not links). A slide holds a `.ds-carousel__quote` and a `.ds-avatar`. Use it once, on the home page.\n\n## Never\n\n- `row-gap <= 10px`: rows of a table or list touch and are divided by a rule; sidebar links sit 4px apart.\n- `block-gap <= 120px`: sections sit 96px apart; nothing is further from its neighbour.\n- `content-width <= 1080px`: everything stays in the centred column.\n- `font-size <= 40px`: the hero title is the largest text.\n- `font-size >= 11px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: headings are bold, never black.\n- `font-families <= 2`: one sans and one monospace.\n- `line-height <= 1.65`: body text is set at 1.6.\n- `letter-spacing = 0`: no tracking on any text.\n- `underlined-links <= 10%`: underline is a hover state.\n- `border-width <= 2px`: nothing is outlined; 1px rules between rows and the 2px ring are the only lines.\n- `border-radius <= 32px`: controls and panels 22px, tiles and dialogs 32px.\n- `box-shadow-blur <= 36px`: panels blur 18px, the dialog and the hero disc 36px.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 5%`: every fill is one flat colour.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. A new part of the home page is a section of its own: a centred `.ds-section__head`, then one row of raised cards, 96px from its neighbours; do not put two rows of cards under one head. Decide for each thing whether it is raised or sunk: a container that holds content is raised and starts from `.ds-panel` (fill, radius and `--shadow-panel` together); something the user fills in or that shows a state is sunk and starts from `.ds-form__input` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`); something the user presses starts from `.ds-button--secondary`. Keep the fill equal to the surface behind it, since the shadows only read on the shared colour, never draw a shadow in a raw colour, and give nothing on the inverted fill a shadow. Use tokens only; for a size with no token use `calc()` over `--space-*` or `--size-*`. Keep each text token on the fill it belongs to, keep large text thin, and keep the accent to one element per group.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1080px;\n --size-side: 240px;\n --size-callout: 320px;\n --size-dialog: 440px;\n --size-nav: 64px;\n --size-control: 40px;\n --size-control-large: 52px;\n --size-key: 48px;\n --size-dial: 152px;\n --size-icon: 16px;\n --size-glyph: 22px;\n --size-dot: 8px;\n --size-chip: 48px;\n --size-thumb: 20px;\n --size-avatar: 36px;\n --size-track: 8px;\n --size-check: 20px;\n --size-rule: 1px;\n --size-brand: 36px;\n --space-1: 5px;\n --space-2: 10px;\n --space-3: 15px;\n --space-4: 20px;\n --space-5: 30px;\n --space-6: 40px;\n --space-7: 60px;\n --space-8: 80px;\n --space-9: 120px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n min-height: 100vh;\n background: var(--fill-page);\n background-color: var(--color-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n/* the home page: sections far apart, one below the other */\n.ds-page__sections {\n display: flex;\n flex-direction: column;\n gap: var(--space-9);\n}\n/* the top of the home page: hero, showcase and figures, closer together */\n.ds-page__lead {\n display: flex;\n flex-direction: column;\n gap: var(--space-7);\n}\n/* a vertical stack of blocks, one step apart */\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n}\n/* two columns, the left one wider */\n.ds-page__row {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__row--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n/* a documentation page: contents at the left, the text at the right */\n.ds-page__docs {\n display: grid;\n grid-template-columns: var(--size-side) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\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/* an inner view starts one step below the navigation row */\n.ds-view:not(.ds-view--home) {\n padding-top: var(--space-6);\n}\n\n/* brand: the mark on a small raised key in the primary button's dress, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-brand);\n height: var(--size-brand);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n width: var(--size-thumb);\n height: var(--size-thumb);\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n\n/* nav: a bare row on the page, links at the right, the current one pressed in */\n.ds-nav {\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-5) var(--space-5) 0;\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n min-height: var(--size-nav);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__list {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 0 auto;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n box-shadow: var(--shadow-control);\n}\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(#pricing:target) .ds-nav__link[href=\"#pricing\"],\n.ds-page:has(#docs:target) .ds-nav__link[href=\"#docs\"],\n.ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"] {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n\n/* hero: centred on the bare page */\n.ds-hero {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-8) 0 0;\n text-align: center;\n}\n.ds-hero__title {\n max-width: 18ch;\n margin: var(--space-5) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 52ch;\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* showcase: one large well pressed into the page, the kit's parts standing in it */\n.ds-showcase {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n align-items: stretch;\n padding: var(--space-7);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n/* demo: one raised sample standing in the showcase */\n.ds-demo {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: var(--space-5);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-demo--centre {\n align-items: center;\n text-align: center;\n}\n.ds-demo__head {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-demo__art {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-chip);\n height: var(--size-chip);\n background: var(--fill-input);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n.ds-demo__art svg {\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-demo__title {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-demo__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-demo__keys {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-5);\n margin-top: auto;\n}\n.ds-demo__key {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-key);\n height: var(--size-key);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n transition: var(--transition);\n}\n.ds-demo__key svg {\n width: var(--size-thumb);\n height: var(--size-thumb);\n}\n.ds-demo__key--primary {\n background: var(--fill-button);\n border-color: transparent;\n color: var(--color-button-text);\n}\n.ds-demo__key:hover,\n.ds-demo__key.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-demo__key:active,\n.ds-demo__key.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-demo__dial {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-dial);\n height: var(--size-dial);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control-hover);\n}\n.ds-demo__face {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 74%;\n height: 74%;\n background: var(--fill-input);\n border-radius: 50%;\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n.ds-demo__figure {\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 font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-demo__caption {\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n\n/* section head: a centred title and one line over a section of the home page */\n.ds-section__head {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: var(--space-7);\n text-align: center;\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-section__lead {\n max-width: 56ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n}\n/* features: the grid of tiles beside the tall callout */\n.ds-section__split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-callout);\n gap: var(--space-6);\n align-items: stretch;\n}\n\n/* callout: one tall block on the inverted fill */\n.ds-callout {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: var(--space-6);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n}\n.ds-callout__mark {\n width: var(--size-chip);\n height: var(--size-chip);\n margin-bottom: auto;\n opacity: 0.8;\n}\n/* on the inverted fill a key keeps its fill and loses the surface's shadow pair */\n.ds-callout .ds-button {\n box-shadow: none;\n}\n.ds-callout__title {\n margin: var(--space-6) 0 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}\n.ds-callout__text {\n margin: var(--space-3) 0 var(--space-5);\n font-size: var(--text-ui);\n opacity: 0.8;\n}\n\n/* page header (inner pages) */\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: var(--space-3) 0 var(--space-6);\n}\n.ds-page-header__text {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n max-width: 76ch;\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-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\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}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-4) var(--space-5);\n overflow: auto;\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\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}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: raised at rest, lifted on hover, sunk when pressed */\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 border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n border-color: var(--color-border);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-panel);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n cursor: default;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* form: every control is a well sunk into the surface */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n align-items: start;\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(2 * var(--size-control) + var(--space-4));\n padding: var(--space-3) var(--space-4);\n border-radius: min(var(--radius-control), var(--radius-panel));\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-input-text);\n opacity: 0.55;\n}\n.ds-form__select {\n padding-right: var(--space-7);\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-4);\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: calc(var(--size-icon) / -2);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n padding: var(--space-1);\n background: var(--fill-input);\n border-radius: min(calc(var(--radius-control) / 2), calc(var(--size-check) / 4));\n box-shadow: var(--shadow-control);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background: var(--fill-accent);\n background-clip: content-box;\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n/* the era's switch: a sunk pill with a raised thumb */\n.ds-switch {\n position: relative;\n flex: none;\n width: calc(2 * var(--size-thumb) + 2 * var(--space-1));\n height: calc(var(--size-thumb) + 2 * var(--space-1));\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background: var(--fill-input);\n border-radius: var(--size-thumb);\n box-shadow: var(--shadow-control-pressed);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::before {\n content: \"\";\n position: absolute;\n top: var(--space-1);\n left: var(--space-1);\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--fill-panel);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-switch:checked {\n background: var(--fill-accent);\n box-shadow: none;\n}\n.ds-switch:checked::before {\n left: calc(var(--size-thumb) + var(--space-1));\n}\n/* the era's slider: a sunk track with a raised round thumb */\n.ds-form__range {\n width: 100%;\n height: var(--size-thumb);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-form__range::-webkit-slider-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc((var(--size-track) - var(--size-thumb)) / 2);\n -webkit-appearance: none;\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-2);\n}\n\n/* table: one raised sheet, rows divided by a rule */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-4) var(--space-5);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n white-space: nowrap;\n}\n.ds-table th:first-child {\n border-top-left-radius: var(--radius-panel);\n}\n.ds-table th:last-child {\n border-top-right-radius: var(--radius-panel);\n}\n.ds-table td {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--radius-panel);\n}\n.ds-table tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__meta {\n color: var(--color-text-muted);\n}\n\n.ds-table .ds-table__num {\n white-space: nowrap;\n}\n\n/* list: release notes on one raised sheet, the version in a well at the left */\n.ds-list {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-4) 0;\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-list__version {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n min-width: calc(var(--size-chip) + var(--space-2));\n height: var(--size-control);\n padding: 0 var(--space-2);\n background: var(--fill-input);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: 1;\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-list__dot {\n display: inline-block;\n width: var(--size-dot);\n height: var(--size-dot);\n margin-right: var(--space-1);\n background: var(--color-success);\n border-radius: 50%;\n}\n.ds-list__dot--off {\n background: var(--color-danger);\n}\n.ds-list__dot--new {\n background: var(--color-accent-alt);\n}\n\n/* panel */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-3);\n}\n\n/* rows of a label and a value inside a panel */\n.ds-panel__facts {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n gap: var(--space-3) var(--space-5);\n margin: 0;\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-panel__facts dt {\n color: var(--color-text-muted);\n}\n.ds-panel__facts dd {\n margin: 0;\n color: var(--color-text);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-panel__quote {\n margin: 0;\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-panel__by {\n display: block;\n margin-top: var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n\n/* plans: the pricing row, three raised cards, the middle one lifted */\n.ds-plans {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n align-items: center;\n}\n.ds-plan {\n display: flex;\n flex-direction: column;\n padding: var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-plan--lead {\n padding-top: var(--space-7);\n padding-bottom: var(--space-7);\n border-color: var(--color-border-strong);\n box-shadow: var(--shadow-dialog);\n}\n.ds-plan__name {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-plan__price {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-plan__per {\n display: block;\n margin-top: var(--space-1);\n font-family: var(--font-body);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: 0;\n text-shadow: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-plan__points {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: var(--space-5) 0;\n padding: var(--space-5) 0 0;\n list-style: none;\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n font-size: var(--text-ui);\n}\n.ds-plan__points li {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n}\n.ds-plan__points li::before {\n content: \"\";\n flex: none;\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--fill-accent);\n border-radius: 50%;\n}\n.ds-plan .ds-button {\n margin-top: auto;\n}\n\n/* grid: four feature tiles, each a raised card with a coloured disc */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-6);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n padding: var(--space-5);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-grid__chip {\n width: var(--size-chip);\n height: var(--size-chip);\n margin-bottom: var(--space-4);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-grid__cell--1 .ds-grid__chip {\n background: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__chip {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__chip {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__chip {\n background: var(--color-fill-4);\n}\n.ds-grid__title {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n margin-top: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* stats: three figures on the bare page, divided by rules */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n margin: 0;\n text-align: center;\n}\n.ds-stat__item {\n padding: var(--space-2) var(--space-5);\n}\n.ds-stat__item + .ds-stat__item {\n border-left: var(--size-rule) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__value {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-stat__label {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-stat__meta {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* tabs: a short sunk track, centred, the current choice raised out of it */\n.ds-tabs {\n display: flex;\n align-self: center;\n gap: var(--space-1);\n width: fit-content;\n margin: 0 auto;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: calc(var(--radius-control) + var(--space-1));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n border-radius: var(--radius-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n white-space: nowrap;\n vertical-align: middle;\n}\n/* quiet and status badges: a flat pill one step darker than the surface; status adds a dot */\n.ds-badge--quiet,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* sidebar: the contents of the documentation, flat on the page */\n.ds-sidebar {\n padding: var(--space-2) 0;\n}\n.ds-sidebar__heading {\n margin: 0 var(--space-4) var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-5);\n}\n.ds-sidebar__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n box-shadow: var(--shadow-control);\n}\n.ds-sidebar__link.is-current {\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* notice: a message sunk into the surface */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* pagination: raised keys, the current one in the accent */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin: 0 var(--space-2);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-7) var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-dialog__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__body {\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* empty state: a sunk well with a raised icon disc */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin-bottom: var(--space-4);\n padding: var(--space-3);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__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}\n.ds-empty__text {\n max-width: 40ch;\n margin: var(--space-2) 0 var(--space-5);\n font-size: var(--text-ui);\n}\n\n/* footer: a full-width band, a line about the site and three columns of links */\n.ds-footer {\n margin-top: var(--space-9);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-7) var(--space-5);\n}\n.ds-footer__about {\n max-width: 36ch;\n}\n.ds-footer__name {\n display: block;\n margin-bottom: var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-footer__heading {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n opacity: 0.7;\n}\n.ds-footer__links {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n@media (max-width: 900px) {\n .ds-showcase,\n .ds-section__split,\n .ds-plans,\n .ds-page__row,\n .ds-page__row--even,\n .ds-page__docs {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page__sections {\n gap: var(--space-8);\n }\n .ds-plan--lead {\n padding-top: var(--space-6);\n padding-bottom: var(--space-6);\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: var(--space-3) var(--space-4);\n }\n .ds-nav__inner > .ds-button {\n margin-left: auto;\n }\n .ds-nav__list {\n order: 3;\n justify-content: space-between;\n width: 100%;\n margin: 0;\n }\n .ds-sidebar__list {\n flex-direction: row;\n flex-wrap: wrap;\n }\n .ds-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-4);\n }\n .ds-footer__inner {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .ds-footer__about {\n grid-column: 1 / -1;\n }\n}\n@media (max-width: 560px) {\n .ds-page__inner,\n .ds-nav {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-nav__list {\n gap: var(--space-1);\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n }\n .ds-hero {\n padding-top: var(--space-6);\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-hero__actions .ds-button {\n flex: 1 1 auto;\n }\n .ds-page__lead {\n gap: var(--space-6);\n }\n .ds-section__head {\n margin-bottom: var(--space-6);\n }\n .ds-showcase {\n gap: var(--space-5);\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-5);\n }\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stat__item {\n padding: var(--space-4) 0;\n }\n .ds-stat__item + .ds-stat__item {\n border-left: 0;\n border-top: var(--size-rule) var(--border-style) var(--color-border-strong);\n }\n .ds-plan__price {\n font-size: var(--text-h1);\n }\n .ds-plan,\n .ds-callout {\n padding: var(--space-5);\n }\n .ds-page__stack,\n .ds-page__row,\n .ds-plans {\n gap: var(--space-5);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-4);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-pagination {\n gap: var(--space-2);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-4);\n }\n .ds-dialog__box {\n padding: var(--space-5);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-footer__inner {\n gap: var(--space-5);\n padding: var(--space-6) var(--space-4);\n }\n}\n\n/* tooltip: a small inverted label by its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n padding: var(--space-1) var(--space-3);\n transform: translateX(-50%);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: min(var(--radius-control), var(--space-3));\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: none;\n white-space: nowrap;\n pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n\n/* avatar: initials on a raised disc, alone or beside a name */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n color: inherit;\n text-decoration: none;\n}\n.ds-avatar__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-avatar__text {\n min-width: 0;\n}\n.ds-avatar__name {\n display: block;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-avatar__meta {\n display: block;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.75;\n}\n\n/* accordion: one raised sheet of sections that open and close */\n.ds-accordion {\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\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-4) var(--space-5);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: calc(var(--size-icon) + var(--space-3));\n height: calc(var(--size-icon) + var(--space-3));\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: inherit;\n transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-accordion__chevron svg {\n width: var(--size-icon);\n height: var(--size-icon);\n transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron svg {\n transform: rotate(180deg);\n}\n.ds-accordion__body {\n padding: 0 var(--space-5) var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* progress: a pressed track with an accent bar */\n.ds-progress {\n display: block;\n height: var(--size-track);\n overflow: hidden;\n background-color: var(--color-input);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: var(--size-track);\n}\n.ds-progress--60 .ds-progress__bar {\n width: 60%;\n}\n.ds-progress__legend {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-panel__body > .ds-progress {\n margin-bottom: var(--space-4);\n}\n\n/* carousel: a well with one slide showing, dots under it */\n.ds-carousel {\n padding: var(--space-4) var(--space-4) var(--space-3);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n.ds-carousel__track {\n display: flex;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__slide {\n flex: 0 0 100%;\n min-width: 0;\n padding: var(--space-2);\n scroll-snap-align: start;\n}\n.ds-carousel__quote {\n margin: 0 0 var(--space-4);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-carousel__dots {\n display: flex;\n justify-content: center;\n gap: var(--space-2);\n margin-top: var(--space-2);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-surface-strong);\n border-radius: 50%;\n}\n.ds-carousel__dot.is-current {\n background: var(--fill-accent);\n}\n\n.ds-demo__progress {\n align-self: stretch;\n width: 100%;\n margin-top: var(--space-4);\n text-align: left;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: a soft interface kit\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n Get the kit\n
\n
\n\n
\n\n
\n
\n\n
\n\n
\n Version 2.4 is outReleased on 3 March\n

Interfaces you want to press

\n

A kit of 120 soft components for web apps: keys, dials, switches and cards cut from one surface and lit from the top left.

\n
\n Get the kit\n Read the docs\n
\n
\n\n
\n\n
\n
\n \n \n Low tide, side two\n Player card · 2:14 of 5:40\n \n
\n \n
\n \n \n \n
\n
\n\n
\n
\n
\n 64%\n Dial\n
\n
\n Turns in steps of two, from 0 to 100\n
\n
Progress 60%
\n
\n
\n
\n\n
\n Switches and checks\n \n \n \n
\n\n
\n\n
\n
\n
120
\n
Components
\n
from a key to a whole dashboard
\n
\n
\n
14 kB
\n
Of plain CSS
\n
no script needed to draw anything
\n
\n
\n
2
\n
Colours to choose
\n
a surface and an accent, the rest follows
\n
\n
\n\n
\n\n
\n
\n

One surface, four ideas

\n

Everything in the kit is the page itself, pushed out or pressed in.

\n
\n
\n
\n
\n \n Raised\n Cards and keys stand out of the page on a pair of shadows.\n
\n
\n \n Pressed\n Fields, tracks and wells sink in, with the same pair turned inside.\n
\n
\n \n Shaped\n A slow gradient makes a key domed or a field hollow.\n
\n
\n \n Readable\n Text and status colours keep their contrast on every surface.\n
\n
\n \n
\n
\n\n
\n
\n

Kept up to date

\n

A release every six weeks, and a year of them with every licence.

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

We rebuilt the settings of our app in a weekend, and nobody asked which library it was.

\n OBOdile BrandtProduct designer\n
\n
\n

Two colours in, and every key and well matched the brand by lunch.

\n TKTomas KellerEngineer\n
\n
\n

The contrast report caught what our own review had missed.

\n RSRosa SilvaFounder\n
\n
\n
\n
\n
\n

Free for students Solo

\n
\n Write to us from a school address and the Solo licence is yours for as long as you study. Ask for it\n
\n
\n
\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Product
    3. \n
  3. Pricing
    4. \n
\n\n
\n
\n

Pricing

\n

One payment for a licence, a year of releases included.

\n
\n
\n Ask about schools\n
\n
\n\n
\n\n \n\n
\n
\n

Solo

\n

49 once, one person

\n
    \n
  • All 120 components
    • \n
  • One project in production
    • \n
  • Releases for a year
    • \n
\n Buy Solo\n
\n
\n

Team Most chosen

\n

149 once, up to eight people

\n
    \n
  • All 120 components
    • \n
  • Any number of projects
    • \n
  • The design source files
    • \n
  • Answers within two working days
    • \n
\n Buy Team\n
\n
\n

Studio

\n

390 once, any number of people

\n
    \n
  • Everything in Team
    • \n
  • Use in work for clients
    • \n
  • One theme made for you
    • \n
\n Buy Studio\n
\n
\n\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
IncludedSoloTeamStudio
People18Any
Projects in production1AnyAny
Ready-made themes31212
Page templates41818
Months of releases121224
\n\n
\n
\n

Leave the Team plan?

\n
Seven people lose their access today. What you have built keeps working.
\n
\n \n \n
\n
\n
\n\n
\n\n
\n
\n \n

No licence on this account yet

\n

Licences and their invoices are listed here once you have bought one.

\n Buy Team\n
\n
\n

Paying

\n
\n
\n
Ways to pay
Card or bank transfer
\n
Invoice
Sent with the licence key
\n
Money back
Within 30 days
\n
Schools and students
Solo is free
\n
After the first year
Renew releases at half price
\n
\n
\n
\n
\n\n
\n\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Docs
    3. \n
  3. Theming
    4. \n
\n\n
\n
\n

Theming

\n

How two colours become every shadow in the kit.

\n
\n
\n Get the kit\n
\n
\n\n
\n\n
\n \n
\n

Version 2.4

\n
\n These pages describe the release of 3 March. Notes\n
\n
\n
\n\n
\n\n
\n
\n
\n

Two colours in, a whole kit out

\n

You choose the surface and the accent. The kit works out the light side and the dark side of every shadow from the surface.

\n

Set --surface and --accent on the root element. The dark side is the surface with 15% less light, the light side is white, and both are used at the same distance and blur.

\n

Choosing a surface

\n

A surface that is too pale leaves no room for the light side and one that is too deep hides the dark side. Stay in the middle.

\n

What works

\n
    \n
  • Greys and tinted greys between 85% and 92% lightness.
    • \n
  • One accent with enough contrast to carry white text.
    • \n
  • Text in a dark tone of the surface's own hue.
    • \n
\n

Checking the result

\n

Every component page has a contrast report. Read dark surfaces before you invert a theme, and see which plans include ready-made themes.

\n

\n Install\n Keys\n Fields\n Cards\n Release notes\n

\n
\n
\n
\n\n \n\n
\n\n
\n\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Product
    3. \n
  3. Contact
    4. \n
\n\n
\n
\n

Contact

\n

Two people answer every message, usually within a working day.

\n
\n
\n Look in the docs first\n
\n
\n\n
\n\n
\n

Write to us

\n
\n
\n
\n
\n \n \n
\n
\n \n \n Enter a complete email address.\n
\n
\n
\n \n \n \n \n \n
\n
\n \n \n A link to a page that shows the fault helps most.\n
\n \n
\n \n \n \n \n
\n
\n
\n
\n\n
\n
\n
\n \n
We are away on Friday. Messages sent then are answered on Monday.
\n
\n
\n \n
Your last message was not sent. The attachment was larger than 10 MB.
\n
\n
\n
\n
\n Where is my licence key? \n
Licence keys, invoices and the download are all on your account page.
\n
\n
\n A component looks wrong \n
Faults in a component are fastest through the tracker, with a link to a page that shows them.
\n
\n
\n Can I get an invoice? \n
Yes. It is sent with the licence key and can be printed again at any time.
\n
\n
\n
\n

Status All well

\n
\n Downloads and the theme builder are running. One fault is open: Dial in Safari\n
\n
\n
\n\n
\n\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.neumorphism.landing.s06.p01.t11.u10.dr\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"neumorphism\",\n \"years\": [\n 2019,\n 2021\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-nm-61ba-dr\",\n \"short\": \"v1-nm-61ba-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(224 224 224);\n --color-canvas: rgb(224 224 224);\n --color-surface: rgb(224 224 224);\n --color-surface-alt: rgb(232 232 232);\n --color-surface-strong: rgb(216 216 216);\n --color-bar: rgb(224 224 224);\n --color-bar-text: rgb(0 31 63);\n --color-bar-alt: rgb(232 232 232);\n --color-bar-alt-text: rgb(48 72 96);\n --color-inverse: rgb(0 31 63);\n --color-inverse-text: rgb(224 224 224);\n --color-text: rgb(0 31 63);\n --color-text-muted: rgb(48 72 96);\n --color-heading: rgb(0 31 63);\n --color-heading-alt: rgb(48 72 96);\n --color-link: rgb(24 99 75);\n --color-link-quiet: rgb(0 31 63);\n --color-link-visited: rgb(48 72 96);\n --color-link-hover: rgb(0 31 63);\n --color-link-active: rgb(59 132 60);\n --color-border: rgb(208 208 208);\n --color-border-strong: rgb(190 190 190);\n --color-border-muted: rgb(255 255 255);\n --color-accent: rgb(59 132 60);\n --color-accent-text: rgb(255 255 255);\n --color-accent-alt: rgb(214 84 0);\n --color-fill-1: rgb(0 31 63);\n --color-fill-2: rgb(59 132 60);\n --color-fill-3: rgb(214 84 0);\n --color-fill-4: rgb(48 72 96);\n --color-button: rgb(0 31 63);\n --color-button-text: rgb(224 224 224);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(224 224 224);\n --color-button-secondary-text: rgb(0 31 63);\n --color-input: rgb(224 224 224);\n --color-input-text: rgb(0 31 63);\n --color-input-border: rgb(208 208 208);\n --color-disabled: rgb(216 216 216);\n --color-disabled-text: rgb(48 72 96 / 0.55);\n --color-danger: rgb(169 30 44);\n --color-danger-surface: rgb(255 224 224);\n --color-success: rgb(59 132 60);\n --color-warning: rgb(214 84 0);\n --color-notice: rgb(232 232 232);\n --color-notice-text: rgb(0 31 63);\n --color-focus: rgb(0 31 63);\n --color-shadow: rgb(190 190 190);\n --color-overlay: rgb(0 31 63 / 0.25);\n}\n\n/* @part type */\n:root {\n --font-body: Oxygen, Ubuntu, Verdana, \"DejaVu Sans\", sans-serif;\n --font-heading: Oxygen, Ubuntu, Verdana, \"DejaVu Sans\", sans-serif;\n --font-ui: Oxygen, Ubuntu, Verdana, \"DejaVu Sans\", sans-serif;\n --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 13px;\n --text-large: 15px;\n --text-display: 40px;\n --text-h1: 28px;\n --text-h2: 19px;\n --text-h3: 15px;\n --line-body: 1.6;\n --line-heading: 1.25;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\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: 0;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 22px;\n --radius-panel: 22px;\n --radius-pill: 40px;\n --radius-page: 32px;\n --shadow-panel: 9px 9px 18px var(--color-shadow), -9px -9px 18px var(--color-border-muted);\n --shadow-control: 5px 5px 10px var(--color-shadow), -5px -5px 10px var(--color-border-muted);\n --shadow-control-hover: 9px 9px 18px var(--color-shadow), -9px -9px 18px var(--color-border-muted);\n --shadow-control-pressed: inset 4px 4px 8px var(--color-shadow), inset -4px -4px 8px var(--color-border-muted);\n --shadow-dialog: 16px 16px 36px var(--color-shadow), -16px -16px 36px color-mix(in srgb, var(--color-border-muted) 35%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 88%, var(--color-border-muted));\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;\n --backdrop-blur: 0px;\n}\n" } }