{ "id": "v1-dd-3333", "long_id": "v1.dev-dark.docs.s03.p03.t03.u03", "name": "Dark developer tools documentation", "era": { "slug": "dev-dark", "code": "dd", "name": "Dark developer tools", "years": [ 2019, 2026 ], "description": "Developer products of 2019 to 2026: a near-black page, hairline borders in translucent white, small precise sans type, subtle glows and gradients behind a hero, monospace details and one bright accent." }, "archetype": "docs", "mode": "pure", "viewport": { "width": 1440, "fluid": false }, "summary": "This is the documentation site of a developer product from 2019 to 2026: a dark page in three columns, with the tree of pages at the left, the text in the middle and the headings of the page along a rule at the right. Code blocks with a title strip, mono parameter names, method badges and status dots carry most of the content, and a split page puts a reference table beside its request and response. In this set the page is a warm charcoal, headings are a serif, corners are generous and the one accent is an orange that also glows behind the opening of the first page.", "url": "https://chrono.skin/s/v1-dd-3333", "preview_url": "https://chrono.skin/s/v1-dd-3333/specimen.html", "files": { "STYLE.md": "# Dark developer tools documentation\n\n## Summary\n\nThis is the documentation site of a developer product from 2019 to 2026: a dark page in three columns, with the tree of pages at the left, the text in the middle and the headings of the page along a rule at the right. Code blocks with a title strip, mono parameter names, method badges and status dots carry most of the content, and a split page puts a reference table beside its request and response. In this set the page is a warm charcoal, headings are a serif, corners are generous and the one accent is an orange that also glows behind the opening of the first page.\n\n## Layout\n\n- Designed for a 1440px viewport, not fluid beyond it. `.ds-page` is a grid: `.ds-nav`, the top bar (`--size-top` 56px, sticky, on `--fill-bar`), across both columns; below it `.ds-tree` (`--size-tree` 264px, sticky, on `--fill-bar-alt`) at the left and the showing view beside it, with the footer line under the view. `.ds-content` is centred, at most `--size-page` (1100px) wide, padded by `--space-6` and `--space-7`, and stacks its children `--space-6` (32px) apart.\n- Navigation is double. The top bar holds the brand with a mono `docs` tag, four section links (the current one underlined in `--color-accent-alt`), the search field with its key cap and one small button. The tree lists every page in groups under mono titles; the current page sits on a 12% wash.\n- `.ds-doc` is the page body: the main column and a `--size-toc` (208px) `.ds-doc__aside` that stays in view while the text scrolls. `.ds-doc--split` is two equal columns for a reference or console page, explanation at the left and code at the right.\n- The home view stacks: `.ds-hero` (label, title, lead and two large buttons at the left, a first request as a code block at the right, over the glow); `.ds-stat`, four figures between two rules; then `.ds-doc` with the `.ds-grid` of six guide cards, a panel of install commands and the `.ds-list` of updated pages, beside the \"on this page\" sidebar and the inverted `.ds-next` card.\n- Inner pages have no hero. `.ds-content` opens with `.ds-page-header`: breadcrumb, a `--text-h1` title (with a method badge on a reference page), one line at `--text-large`, one secondary button at the right, and a rule below. Tabs are an underlined row directly over the code block they switch (`.ds-tabbed`). A guide ends with its notices and the pagination.\n- Views. The specimen documents an e-mail API in four views. `overview` is the home view described above. `guide` is a how-to: tabbed code, prose, an information and an error notice, pagination, and the page's headings and related links at the right. `reference` is one endpoint: the parameter table and the label key at the left, request, response and the list of status codes at the right. `console` is a form that sends a test request, beside the empty response, the open dialog that revokes a key and the list of keys.\n- Spacing scale: `--space-1` 4px (tree link vertical padding, inside key caps), `--space-2` 8px (button vertical padding, gaps between buttons and badges), `--space-3` 12px (panel head and table cell vertical padding, between tabs and code), `--space-4` 16px (panel, card and code padding, between cards), `--space-5` 24px (between stacked blocks, tree padding), `--space-6` 32px (between the sections of a view, split columns), `--space-7` 48px (content side padding, the gap to the right column).\n- Other sizes: `--size-search` 280px, `--size-tile` 36px (the icon tile of a card), `--size-icon` 16px, `--size-mark` 24px, `--size-dot` 8px, `--size-glow` 380px, `--size-dialog` 440px.\n- Below 1180px the right column goes under the text and split pages stack. Below 860px the tree becomes one row of links under the bar that scrolls sideways, the section links take a second row of the bar, cards stack, and a wide table scrolls inside `.ds-table__wrap`.\n\n## Typography and colour roles\n\nThe conventions for which text sits on which fill are those of the era's first layout and are kept here.\n\n- `--color-text`, `--color-heading` and `--color-text-muted` on the page, on `--fill-panel`, `--color-surface-alt` (a hovered card, the dialog) and `--color-surface-strong` (key caps, inline code, quiet badges). `--color-bar-text` on `--fill-bar` (the top bar). `--color-bar-alt-text` on `--fill-bar-alt` (the tree, code heads, table heads, the footer), with `--color-heading` for the current page. `--color-input-text` on `--fill-input` (form controls, the search field and every code block). `--color-inverse-text` on `--fill-inverse`, used once per view, for `.ds-next`.\n- `--color-fill-1` to `--color-fill-4` never carry text: they tint the icon tile of a guide card (16% fill, 35% hairline, the icon in 75% of the fill mixed into `--color-heading`), and `--color-fill-1` is the hero glow.\n- `--color-accent-alt` is a line and text colour: the mono label of the hero, keywords in code, the underline of the current section and tab, the marker of the current heading in the sidebar, the first stat's rule.\n- In code, `.ds-code__k` is `--color-accent-alt`, `.ds-code__s` `--color-success`, `.ds-code__n` `--color-link`, `.ds-code__c` `--color-text-muted`. Status colours are a dot, text or a 12% tint, never a solid fill.\n- Type in this set: a grotesque for body and controls, a serif for headings at regular weight, a monospace for data. `--text-base` 16px at `--line-body` 1.65; `--text-ui` 14px (navigation, tree, buttons, forms, tables, code, card text); `--text-small` 13px (badges, mono labels, dates, footer); `--text-large` 18px (hero lead, page header line, prose lead). The hero title is 78% of `--text-display` (47px), because the text column is narrower than a landing page; `--text-h1` 40px page titles and prose h1; `--text-h2` 26px column heads, figures and prose h2; `--text-h3` 17px panel and card titles in `--weight-bold`.\n- Surface in this set: `--radius-control` 10px, `--radius-panel` 14px, `--radius-page` 20px (guide cards, the hero code block, the dialog), pills for badges. Panels and cards lie on `--fill-panel`, a faint top-lit gradient, under `--shadow-panel`; buttons are a short gradient with a lit top edge and glow in their own colour when hovered; the hero code block and the dialog cast `--shadow-dialog`. `--fill-page` adds a wide, very faint glow at the top of the page.\n- One-off values written with `calc()` and `color-mix()`: the hero title size, the hero glow (28% of `--color-fill-1`), tile tints, the wash behind the current tree link (12% of `--color-bar-alt-text`), status tints (12% and 32%), notice borders, key cap and inline code corners (half of `--radius-control`), mono label tracking. Section links are at `opacity` 0.66 until current. The empty state's outline is dashed.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, text colour and page fill and makes the grid; `.ds-nav`, `.ds-tree`, the views and `.ds-footer` are its direct children.\n- `.ds-content`, `.ds-doc` (`--split`), `.ds-doc__aside`, `.ds-stack`: the padded column of a view, the page body, its right column and a vertical stack. `.ds-panel--grow` fills spare height in a split page.\n- `.ds-brand`: the mark on a 24px tile dressed like the primary button, and the name. Placeholders for the installing project's own name and logo.\n- `.ds-nav`: the top bar: `.ds-nav__brand` (brand and a mono tag), `.ds-nav__links` of `.ds-nav__link` (`is-current`), `.ds-nav__actions` with `.ds-search` (`.ds-search__icon`, `.ds-search__text`, a `.ds-kbd`) and one small button.\n- `.ds-tree`: the page tree: `.ds-tree__title` over `.ds-tree__list` of `.ds-tree__link` (`is-current`; `--view` marks the links the specimen highlights by view). A link may end in a badge or a mono method.\n- `.ds-hero`: home view only: `.ds-hero__copy` with a `.ds-eyebrow`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions`; `.ds-hero__art` holds one `.ds-code`.\n- `.ds-page-header`: `.ds-page-header__copy` (breadcrumb, `.ds-page-header__title`, `.ds-page-header__text`) and `.ds-page-header__actions`.\n- `.ds-prose`: h1, h2, h3, p, lists, inline `code`, `strong`; `.ds-prose__lead`. It stands directly on the page, not in a panel.\n- `.ds-code`: the code block: `.ds-code__head` with an optional dot, `.ds-code__name` and a note or key cap; `.ds-code__body` (a `pre`) with the spans `__k`, `__s`, `__c`, `__n`.\n- `.ds-eyebrow`, `.ds-mono`, `.ds-kbd`, `.ds-dot` (`--success`, `--warning`, `--danger`, `--accent`, `--ring`), `.ds-avatar`: the small parts.\n- `.ds-link`: `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet`, `--more`. `.ds-linkrow`.\n- `.ds-button`: `--secondary`, `--danger`, `--inverse` (on `.ds-next` only), `--small`, `--large`; `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow`.\n- `.ds-form`: `.ds-form__row`, `.ds-form__field`, `.ds-form__label`, `.ds-form__input` (`--mono` for keys and addresses), `.ds-form__select`, `.ds-form__textarea` (`--mono`), `is-error` with `.ds-form__error`, `.ds-form__hint`, `.ds-form__check`, `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: the reference table in a panel: mono uppercase head, hairline rows, `.ds-table__name` for a mono parameter name, `.ds-table__num`, `.ds-table__state`. `.ds-table__wrap`, `.ds-table__foot`.\n- `.ds-list`: updated pages between rules: `.ds-list__item` is a `.ds-list__body` (`.ds-list__title`, `.ds-list__text`) and a mono `.ds-list__meta` date.\n- `.ds-panel`: `.ds-panel__head`, `.ds-panel__title`, `.ds-panel__body`, `.ds-panel__rows` of `.ds-panel__row` with `.ds-panel__key`.\n- `.ds-stat`: four `.ds-stat__item` between two rules, each a `.ds-stat__figure` over a mono `.ds-stat__label` behind a 2px left rule.\n- `.ds-grid`: guide cards, three across. `.ds-grid__cell` is a link: `.ds-grid__tile` (`--2`, `--3`, `--4`) with a 16px stroke icon, `.ds-grid__title`, `.ds-grid__text`. `.ds-colhead` with `.ds-colhead__title` names a section of the home view.\n- `.ds-tabs`: underlined `.ds-tabs__tab` row; `is-current`. `.ds-tabbed` joins it to the code block below.\n- `.ds-badge`: `--quiet`, `--outline`, `--new`, `--mono` (methods); status `--success`, `--warning`, `--danger`. `.ds-badgerow`.\n- `.ds-sidebar`: \"on this page\": a mono `.ds-sidebar__title` over `.ds-sidebar__list` along a rule; `.ds-sidebar__item` (`--sub` indented), current with `is-current`.\n- `.ds-next`: the inverted card: `.ds-next__title`, `.ds-next__text`, one `.ds-button--inverse`.\n- `.ds-notice`: `--error`, `.ds-notice__title`, `.ds-noticerow`.\n- `.ds-pagination`: previous, the numbered steps of a guide, next: `.ds-pagination__link`, `is-current`, `is-disabled`.\n- `.ds-breadcrumb`: `.ds-breadcrumb__item`, `.ds-breadcrumb__current`.\n- `.ds-dialog`: `.ds-dialog__box`, `.ds-dialog__head`, `.ds-dialog__title`, `.ds-dialog__close`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one small button, in a dashed box.\n- `.ds-footer`: one line on `--fill-bar-alt` under the view: the copyright and `.ds-footer__links` of `.ds-footer__link`.\n\n## Never\n\n- `block-gap <= 48px`: sections of a view are 32px apart, blocks inside them 24px.\n- `font-size >= 13px`: badges, mono labels and dates are the smallest text.\n- `font-size <= 47px`: the hero title is the largest text.\n- `font-weight <= 700`: serif headings are regular, small titles bold; nothing is black.\n- `font-families <= 3`: a sans-serif, a serif for headings and a monospace.\n- `line-height <= 1.7`: body text is set at 1.65.\n- `uppercase-text <= 5%`: only mono labels and table heads are uppercase.\n- `underlined-links <= 5%`: links are told apart by colour and underline on hover only.\n- `letter-spacing <= 1px`: only uppercase mono labels are tracked, by under 1px.\n- `border-width <= 2px`: rules are 1px; 2px marks the current section and the stat rules.\n- `border-radius <= 20px`: 10px on controls, 14px on panels, 20px on cards and the dialog; pills are shapes.\n- `box-shadow-blur <= 50px`: the dialog and the hero code block cast the widest shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills <= 8%`: gradients are the glow, the faint light on panels and the primary button; no box is filled with a strong gradient.\n- `animation = none`: nothing moves by itself.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new page is a link in `.ds-tree` and a view that opens with `.ds-page-header`; text goes straight on the page as `.ds-prose`, anything boxed is a `.ds-panel`, every example is a `.ds-code` with a head that names it, and names of parameters, methods, keys and codes are set in `--font-mono`. Keep to the era's conventions for which text sits on which fill, tint with the fills and the status colours instead of filling with them, and use one glow and one inverted card per view. Spacing comes from the `--space-*` scale, and any one-off shade is a `color-mix()` of tokens noted next to the rule.\n", "components.css": ":root {\n --size-page: 1100px;\n --size-tree: 264px;\n --size-toc: 208px;\n --size-top: 56px;\n --size-search: 280px;\n --size-mark: 24px;\n --size-dot: 8px;\n --size-icon: 16px;\n --size-tile: 36px;\n --size-dialog: 440px;\n --size-glow: 380px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n}\n\n/* shell: a bar across the top, the tree of pages at the left, the page beside it */\n.ds-page {\n display: grid;\n grid-template-columns: var(--size-tree) minmax(0, 1fr);\n grid-template-rows: auto 1fr auto;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\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 grid-column: 2;\n grid-row: 2;\n min-width: 0;\n}\n.ds-content {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-6) var(--space-7) var(--space-7);\n}\n.ds-doc {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-toc);\n gap: var(--space-7);\n align-items: start;\n}\n.ds-doc--split {\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: stretch;\n}\n.ds-doc__aside {\n position: sticky;\n top: calc(var(--size-top) + var(--space-5));\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-stack > .ds-panel--grow {\n flex: 1 0 auto;\n}\n\n/* nav: the top bar; brand and section links at the left, search and the dashboard at the right */\n.ds-nav {\n grid-column: 1 / -1;\n grid-row: 1;\n position: sticky;\n top: 0;\n z-index: 5;\n display: flex;\n align-items: center;\n gap: var(--space-5);\n min-width: 0;\n min-height: var(--size-top);\n padding: 0 var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__brand {\n display: flex;\n align-items: center;\n flex: 0 0 calc(var(--size-tree) - var(--space-5) - var(--space-5));\n gap: var(--space-2);\n}\n.ds-nav__links {\n display: flex;\n flex: 1 1 auto;\n align-self: stretch;\n gap: var(--space-5);\n min-width: 0;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n height: 100%;\n color: var(--color-bar-text);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n border-top: var(--border-width-strong) var(--border-style) transparent;\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n opacity: 0.66;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n opacity: 1;\n}\n.ds-nav__link.is-current {\n border-bottom-color: var(--color-accent-alt);\n opacity: 1;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#overview:target) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"],\n.ds-page:has(#reference:target) .ds-nav__link[href=\"#reference\"],\n.ds-page:has(#console:target) .ds-nav__link[href=\"#console\"] {\n border-bottom-color: var(--color-accent-alt);\n opacity: 1;\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n gap: var(--space-3);\n}\n.ds-search {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n width: var(--size-search);\n min-width: 0;\n padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);\n background: var(--fill-input);\n color: var(--color-text-muted);\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 line-height: var(--line-body);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-search:hover,\n.ds-search.is-hover {\n border-color: var(--color-border-strong);\n}\n.ds-search:focus-visible,\n.ds-search.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-search__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-search__text {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* tree: every page of the documentation, in groups, on the secondary bar */\n.ds-tree {\n grid-column: 1;\n grid-row: 2 / span 2;\n position: sticky;\n top: var(--size-top);\n align-self: start;\n min-width: 0;\n height: calc(100vh - var(--size-top));\n padding: var(--space-5) var(--space-3) var(--space-5) var(--space-5);\n overflow-y: auto;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tree__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n opacity: 0.75;\n}\n.ds-tree__list {\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n}\n.ds-tree__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n margin-left: calc(var(--space-3) * -1);\n padding: var(--space-1) var(--space-3);\n color: inherit;\n border-radius: var(--radius-control);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-tree__link:hover,\n.ds-tree__link.is-hover {\n color: var(--color-heading);\n}\n.ds-tree__link.is-current {\n background: color-mix(in srgb, var(--color-bar-alt-text) 12%, transparent);\n color: var(--color-heading);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-tree__link--view[href=\"#overview\"],\n.ds-page:has(#overview:target) .ds-tree__link--view[href=\"#overview\"],\n.ds-page:has(#guide:target) .ds-tree__link--view[href=\"#guide\"],\n.ds-page:has(#reference:target) .ds-tree__link--view[href=\"#reference\"],\n.ds-page:has(#console:target) .ds-tree__link--view[href=\"#console\"] {\n background: color-mix(in srgb, var(--color-bar-alt-text) 12%, transparent);\n color: var(--color-heading);\n}\n\n/* hero: the opening of the documentation; the claim at the left, a first request at the right */\n.ds-hero {\n position: relative;\n display: grid;\n grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);\n gap: var(--space-6);\n align-items: center;\n padding: var(--space-6) 0 var(--space-2);\n}\n.ds-hero::before {\n content: \"\";\n position: absolute;\n top: calc(var(--space-6) * -1);\n left: calc(var(--space-7) * -1);\n right: 0;\n height: var(--size-glow);\n background: radial-gradient(ellipse 38% 80% at 40% 0, color-mix(in srgb, var(--color-fill-1) 28%, transparent), transparent 72%);\n pointer-events: none;\n}\n.ds-hero__copy {\n position: relative;\n min-width: 0;\n}\n.ds-hero__title {\n margin: var(--space-3) 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: calc(var(--text-display) * 0.78);\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}\n.ds-hero__lead {\n max-width: 48ch;\n margin: 0 0 var(--space-5);\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 align-items: center;\n gap: var(--space-3);\n}\n.ds-hero__art {\n position: relative;\n min-width: 0;\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-hero__art .ds-code {\n border-color: var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n\n/* page header: breadcrumb, title and one line; the action at the right; a rule below */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n padding-bottom: var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-3) 0 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-page-header__text {\n max-width: 64ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* stats: figures side by side, each over a mono caption, parted by rules */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-5) 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n min-width: 0;\n padding-left: var(--space-4);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n border-left-color: var(--color-accent-alt);\n}\n.ds-stat__figure {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n\n/* grid: guide cards; an icon on a tile tinted with one of the fills, a title, a line */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: block;\n min-width: 0;\n padding: var(--space-4);\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 text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n background: var(--color-surface-alt);\n border-color: var(--color-border-strong);\n}\n.ds-grid__tile {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-tile);\n height: var(--size-tile);\n margin-bottom: var(--space-4);\n background: color-mix(in srgb, var(--color-fill-1) 16%, transparent);\n color: color-mix(in srgb, var(--color-fill-1) 75%, var(--color-heading));\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-fill-1) 35%, transparent);\n border-radius: var(--radius-control);\n}\n.ds-grid__tile--2 {\n background: color-mix(in srgb, var(--color-fill-2) 16%, transparent);\n color: color-mix(in srgb, var(--color-fill-2) 75%, var(--color-heading));\n border-color: color-mix(in srgb, var(--color-fill-2) 35%, transparent);\n}\n.ds-grid__tile--3 {\n background: color-mix(in srgb, var(--color-fill-3) 16%, transparent);\n color: color-mix(in srgb, var(--color-fill-3) 75%, var(--color-heading));\n border-color: color-mix(in srgb, var(--color-fill-3) 35%, transparent);\n}\n.ds-grid__tile--4 {\n background: color-mix(in srgb, var(--color-fill-4) 16%, transparent);\n color: color-mix(in srgb, var(--color-fill-4) 75%, var(--color-heading));\n border-color: color-mix(in srgb, var(--color-fill-4) 35%, transparent);\n}\n.ds-grid__tile svg {\n display: block;\n width: 50%;\n height: 50%;\n}\n.ds-grid__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-colhead {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-3) 0 calc(var(--space-2) * -1);\n}\n.ds-colhead:first-child {\n margin-top: 0;\n}\n.ds-colhead__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n\n/* list: pages that changed, a title and a line at the left, the date at the right */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\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 color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-list__meta {\n flex: 0 0 auto;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* tabs: an underlined row, here over a code block */\n.ds-tabs {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-2) 0;\n color: var(--color-text-muted);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\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 color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-heading);\n border-bottom-color: var(--color-accent-alt);\n}\n.ds-tabbed {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n min-width: 0;\n}\n\n/* sidebar: the headings of this page along a rule at the right */\n.ds-sidebar {\n font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__item {\n margin-left: calc(var(--border-width) * -1);\n padding: var(--space-1) 0 var(--space-1) var(--space-4);\n border-left: var(--border-width) var(--border-style) transparent;\n}\n.ds-sidebar__item--sub {\n padding-left: var(--space-6);\n}\n.ds-sidebar__item.is-current {\n color: var(--color-heading);\n border-left-color: var(--color-accent-alt);\n}\n\n/* next: the inverted card that closes a page */\n.ds-next {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-panel);\n}\n.ds-next__title {\n display: block;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-next__text {\n display: block;\n font-size: var(--text-ui);\n opacity: 0.72;\n}\n\n/* footer: one line under the page */\n.ds-footer {\n grid-column: 2;\n grid-row: 3;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2) var(--space-5);\n min-width: 0;\n padding: var(--space-4) var(--space-7);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n flex: 1 1 auto;\n justify-content: flex-end;\n gap: var(--space-2) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-heading);\n}\n\n/* brand: the mark on a tile dressed like the primary button, the name beside it */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n gap: var(--space-2);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* small parts used everywhere: the mono label, the key cap, the status dot, the avatar */\n.ds-eyebrow {\n display: block;\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n}\n.ds-eyebrow--accent {\n color: var(--color-accent-alt);\n}\n.ds-kbd {\n display: inline-block;\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-control) * 0.5);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n white-space: nowrap;\n}\n.ds-dot {\n display: inline-block;\n flex: 0 0 auto;\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-text-muted);\n border-radius: 50%;\n}\n.ds-dot--success {\n background: var(--color-success);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-success) 22%, transparent);\n}\n.ds-dot--warning {\n background: var(--color-warning);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-warning) 22%, transparent);\n}\n.ds-dot--danger {\n background: var(--color-danger);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-danger) 22%, transparent);\n}\n.ds-dot--accent {\n background: var(--color-accent-alt);\n}\n.ds-dot--ring {\n background: transparent;\n border: var(--border-width-strong) var(--border-style) var(--color-text-muted);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n}\n.ds-mono {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\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 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-text-muted);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: calc(var(--radius-control) * 0.5);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n\n/* code block: a title strip on the secondary bar, lines in the mono font on the input fill */\n.ds-code {\n min-width: 0;\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-code__head {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-code__name {\n flex: 1 1 auto;\n min-width: 0;\n}\n.ds-code__body {\n display: block;\n margin: 0;\n padding: var(--space-4);\n overflow-x: auto;\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n white-space: pre;\n}\n.ds-code__k {\n color: var(--color-accent-alt);\n}\n.ds-code__s {\n color: var(--color-success);\n}\n.ds-code__c {\n color: var(--color-text-muted);\n}\n.ds-code__n {\n color: var(--color-link);\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 outline-offset: var(--border-width-strong);\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--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--more::after {\n content: \" \\2192\";\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n font-size: var(--text-ui);\n}\n\n/* buttons */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-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: var(--line-heading);\n text-decoration: none;\n text-shadow: var(--shadow-text);\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 color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\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(--border-width-strong);\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 border-color: var(--color-text-muted);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 12%, transparent);\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) 22%, transparent);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-button--inverse {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n box-shadow: none;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 82%, var(--color-inverse));\n color: var(--color-inverse);\n box-shadow: none;\n}\n.ds-button--small {\n padding: var(--space-1) var(--space-3);\n}\n.ds-button--large {\n padding: var(--space-3) var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border-muted);\n box-shadow: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\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 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__input--mono,\n.ds-form__textarea--mono {\n font-family: var(--font-mono);\n}\n.ds-form__textarea {\n min-height: calc(var(--space-7) * 2);\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n}\n.ds-form__input:hover,\n.ds-form__select:hover,\n.ds-form__textarea:hover {\n border-color: var(--color-border-strong);\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n outline-offset: 0;\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* badge: a small label; the status variants are a tint of their colour with a hairline */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: var(--ui-transform);\n vertical-align: middle;\n white-space: nowrap;\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-color: var(--color-border);\n}\n.ds-badge--outline {\n background: transparent;\n color: var(--color-text-muted);\n border-color: var(--color-border-strong);\n}\n.ds-badge--new {\n background: color-mix(in srgb, var(--color-accent-alt) 12%, transparent);\n color: var(--color-accent-alt);\n border-color: color-mix(in srgb, var(--color-accent-alt) 32%, transparent);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 12%, transparent);\n color: var(--color-success);\n border-color: color-mix(in srgb, var(--color-success) 32%, transparent);\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 12%, transparent);\n color: var(--color-warning);\n border-color: color-mix(in srgb, var(--color-warning) 32%, transparent);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 12%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 32%, transparent);\n}\n.ds-badge--mono {\n font-family: var(--font-mono);\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n}\n\n/* table: hairline rows; the head is a strip of small mono labels on the secondary bar */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n color: var(--color-text);\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n text-align: left;\n vertical-align: middle;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table thead th {\n padding-top: var(--space-2);\n padding-bottom: var(--space-2);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: calc(var(--text-small) * 0.04);\n text-transform: uppercase;\n white-space: nowrap;\n}\n.ds-table tbody tr:last-child th,\n.ds-table tbody tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody th {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr:hover th,\n.ds-table tbody tr.is-hover td,\n.ds-table tbody tr.is-hover th {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-family: var(--font-mono);\n font-variant-numeric: tabular-nums;\n}\n.ds-table__state {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n white-space: nowrap;\n}\n.ds-table__wrap {\n overflow-x: auto;\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n\n/* panel: a hairline box on the surface fill */\n.ds-panel {\n min-width: 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}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__title {\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-bold);\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-4);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n.ds-panel > .ds-code {\n border: 0;\n border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\n}\n.ds-panel__rows {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-panel__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__row:last-child {\n border-bottom: 0;\n}\n.ds-panel__key {\n color: var(--color-text-muted);\n}\n\n/* notice */\n.ds-notice {\n margin: 0;\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) 22%, transparent);\n border-radius: var(--radius-panel);\n font-size: var(--text-ui);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__link {\n display: block;\n min-width: calc(var(--space-6) - var(--space-1));\n padding: var(--space-1) var(--space-2);\n color: var(--color-link-quiet);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n line-height: var(--line-heading);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n font-variant-numeric: tabular-nums;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-heading);\n border-color: var(--color-border);\n}\n.ds-pagination__link.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* dialog: a dimmed block with the box in its middle */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\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-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-4) 0;\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-dialog__close {\n color: var(--color-text-muted);\n text-decoration: none;\n}\n.ds-dialog__body {\n padding: var(--space-2) var(--space-4) var(--space-4);\n font-size: var(--text-ui);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n padding: var(--space-6) var(--space-4);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--space-6);\n height: var(--space-6);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: var(--space-2) 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n margin: 0 auto var(--space-4);\n max-width: 44ch;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-panel__body > .ds-linkrow {\n margin-top: var(--space-4);\n}\n.ds-panel__body > .ds-badgerow + p {\n margin-top: var(--space-3);\n}\n\n/* a parameter name in a reference table */\n.ds-table__name {\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-weight: var(--weight-body);\n}\n\n/* medium windows: the list of headings goes under the page, split pages stack */\n@media (max-width: 1180px) {\n .ds-doc,\n .ds-doc--split {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-doc__aside {\n position: static;\n }\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n\n/* narrow windows: the tree becomes one row of links under the bar */\n@media (max-width: 860px) {\n .ds-page {\n display: block;\n min-height: 0;\n }\n .ds-nav {\n flex-wrap: wrap;\n gap: 0 var(--space-3);\n padding: var(--space-2) var(--space-4) 0;\n }\n .ds-nav__brand {\n flex: 1 1 auto;\n }\n .ds-nav__links {\n order: 3;\n flex: 0 0 100%;\n gap: var(--space-4);\n overflow-x: auto;\n }\n .ds-nav__link {\n padding: var(--space-2) 0;\n }\n .ds-search {\n display: none;\n }\n .ds-tree {\n position: static;\n display: flex;\n gap: var(--space-5);\n height: auto;\n padding: var(--space-2) var(--space-4);\n overflow-x: auto;\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-tree__title {\n display: none;\n }\n .ds-tree__list {\n display: flex;\n gap: var(--space-2);\n margin: 0;\n }\n .ds-tree__link {\n margin-left: 0;\n white-space: nowrap;\n }\n .ds-tree__link .ds-badge {\n display: none;\n }\n .ds-content {\n gap: var(--space-5);\n padding: var(--space-5) var(--space-4) var(--space-6);\n }\n .ds-hero {\n padding-top: var(--space-2);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\n }\n .ds-hero__lead,\n .ds-page-header__text {\n font-size: var(--text-base);\n }\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-page-header__title,\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n .ds-tabs {\n overflow-x: auto;\n }\n .ds-table {\n min-width: 60ch;\n }\n .ds-form__row {\n flex-direction: column;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-footer {\n padding: var(--space-4);\n }\n .ds-footer__links {\n justify-content: flex-start;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: dark developer tools documentation specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n docs\n
\n \n
\n \n \n Search the docs\n Ctrl K\n \n Dashboard\n
\n
\n\n\n\n
\n
\n
\n
\n Documentation / v2\n

Send e-mail from your code

\n

chronoskin is one HTTP endpoint for transactional e-mail. These pages take you from an API key to a delivered message.

\n
\n Quickstart\n API reference\n
\n
\n
\n
\n
POST /v2/emails202 in 84 ms
\n
curl api.chronoskin.dev/v2/emails \\\n  -H \"Authorization: Bearer $KEY\" \\\n  -d from=\"hello@harbour.dev\" \\\n  -d to=\"ada@example.org\" \\\n  -d subject=\"Your receipt\"\n\n{ \"id\": \"em_41f9c2\", \"status\": \"queued\" }
\n
\n
\n
\n\n \n\n
\n
\n

Guides

All guides
\n
\n \n \n

Send an e-mail

\n

One request, with HTML, text or a template.

\n \n \n \n

Verify a domain

\n

Three DNS records so mail arrives as you.

\n \n \n \n

Templates

\n

Store a layout once, fill it per message.

\n \n \n \n

Webhooks

\n

Be told when a message is delivered or opened.

\n \n \n \n

Bounces

\n

What comes back, and what to stop sending.

\n \n \n \n

API reference

\n

Every endpoint, parameter and error code.

\n \n
\n\n
\n

Install a library

all at version 2.4
\n
\n
    \n
  • Node.jsnpm install chronoskin
    • \n
  • Pythonpip install chronoskin
    • \n
  • Gogo get chronoskin.dev/go/v2
    • \n
  • Rubygem install chronoskin
    • \n
\n
\n
\n\n

Recently updated

March 2025
\n
    \n
  • Templates New

    Variables, partials and a preview endpoint.

    12 Mar 2025
    • \n
  • Send e-mail

    The scheduled_at parameter accepts a time zone.

    4 Mar 2025
    • \n
  • Bounces and complaints

    A table of the codes each large provider returns.

    26 Feb 2025
    • \n
\n
\n\n
\n \n
\n No key yet?Make one in the console and send a test.\n Open the console\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Docs
    2. \n
  2. Guides
    3. \n
  3. Send an e-mail
    4. \n
\n

Send an e-mail

\n

From an API key to a message in an inbox, in about five minutes.

\n
\n
\n Try it in the console\n
\n
\n\n
\n
\n
\n \n
\n
send.jsCopy
\n
import { Chronoskin } from \"chronoskin\";\n\nconst mail = new Chronoskin(process.env.CHRONOSKIN_KEY);\n\nconst { id } = await mail.emails.send({\n  from: \"Harbour <hello@harbour.dev>\",\n  to: [\"ada@example.org\"],\n  subject: \"Your receipt\",\n  html: \"<p>Thanks for your order.</p>\",\n});  // em_41f9c2
\n
\n
\n\n
\n

Before you send

\n

You need an API key and a sender address on a domain you have verified.

\n

Until a domain is verified you can only send to your own address. That is enough to try everything on this page.

\n

What the call returns

\n
    \n
  • An id you can use to look the message up later
    • \n
  • The status queued, which becomes delivered or bounced
    • \n
  • Nothing else: delivery itself is reported by webhook
    • \n
\n

Sending to several people

\n

Pass up to 50 addresses in to. Each recipient gets a separate message and never sees the others.

\n
\n\n
\n

Keys are shown once. Store the key in an environment variable, never in the repository.

\n

403 domain_not_verified. The sender address is on a domain without valid DNS records.

\n
\n\n \n
\n\n
\n \n \n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Docs
    2. \n
  2. API reference
    3. \n
  3. Send e-mail
    4. \n
\n

Send e-mail POST

\n

Queues one message for each recipient and returns its id.

\n
\n
\n Run in the console\n
\n
\n\n
\n
\n
\n

Body parameters

application/json
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
NameTypeNeededMax
fromstringrequired320
tostring[]required50
subjectstringrequired998
htmlstringoptional5,000,000
scheduled_atdatetimeoptional30
tagsobject[]beta10
\n
\n
Max is characters, entries, or days ahead for scheduled_at.
\n
\n
\n

Labels used in this reference

\n
\n
\n v2\n GET\n POST\n beta\n required\n optional\n
\n

A parameter marked beta may change its name or type without a new API version.

\n
\n
\n
\n\n
\n
\n
RequestCopy
\n
POST /v2/emails\nAuthorization: Bearer ck_live_...\n\n{\n  \"from\": \"hello@harbour.dev\",\n  \"to\": [\"ada@example.org\"],\n  \"subject\": \"Your receipt\",\n  \"html\": \"<p>Thanks.</p>\"\n}
\n
\n
\n
Response, 20284 ms
\n
{\n  \"id\": \"em_41f9c2\",\n  \"status\": \"queued\"\n}
\n
\n
\n

Responses

\n
\n
    \n
  • 202 Queuedthe id is returned
    • \n
  • 429 Too many requestsretry after 1 s
    • \n
  • 403 Domain not verifiedcheck DNS
    • \n
  • 422 Invalid parametersee the message
    • \n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Docs
    2. \n
  2. API console
    3. \n
\n

API console

\n

Send a real request with a test key and read what comes back.

\n
\n
\n Read the reference\n
\n
\n\n
\n
\n
\n

Test keys never deliver. Messages are accepted, logged and dropped.

\n
\n
\n

Request

POST /v2/emails
\n
\n
\n \n
\n \n \n
\n \n \n \n
\n \n Copy as cURL\n \n Revoke key\n
\n
\n
\n
\n
\n\n
\n
\n

Response

waiting
\n
\n
\n \n

No requests yet

\n

Fill in the form and send. The status, headers and body appear here.

\n Follow the quickstart\n
\n
\n
\n
\n
\n
\n

Revoke this key?

\n ×\n
\n
\n

Requests signed with ck_test_9d2 start failing with 401 at once. A new key has a new value.

\n
\n
\n Keep the key\n Revoke key\n
\n
\n
\n
\n

Your keys

New key
\n
\n
    \n
  • ck_live_...a7c1used 2 minutes ago
    • \n
  • ck_test_...9d2never used
    • \n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.dev-dark.docs.s03.p03.t03.u03\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"dev-dark\",\n \"years\": [\n 2019,\n 2026\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-dd-3333\",\n \"short\": \"v1-dd-3333\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #151312;\n --color-canvas: #151312;\n --color-surface: #1c1a18;\n --color-surface-alt: #24211e;\n --color-surface-strong: #302c28;\n --color-bar: #151312;\n --color-bar-text: #e8e2da;\n --color-bar-alt: #1a1816;\n --color-bar-alt-text: #a39b90;\n --color-inverse: #f2ede6;\n --color-inverse-text: #151312;\n --color-text: #cfc8be;\n --color-text-muted: #91897e;\n --color-heading: #f6f1ea;\n --color-heading-alt: #e8e2da;\n --color-link: #ff8a4c;\n --color-link-quiet: #a39b90;\n --color-link-visited: #cf9373;\n --color-link-hover: #ffb38a;\n --color-link-active: #f35815;\n --color-border: rgb(255 240 220 / 0.1);\n --color-border-strong: rgb(255 240 220 / 0.2);\n --color-border-muted: rgb(255 240 220 / 0.06);\n --color-accent: #f35815;\n --color-accent-text: #170a03;\n --color-accent-alt: #ffd166;\n --color-fill-1: #f35815;\n --color-fill-2: #a05fcf;\n --color-fill-3: #ffd166;\n --color-fill-4: #6e665c;\n --color-button: #f35815;\n --color-button-text: #170a03;\n --color-button-hover-text: #170a03;\n --color-button-secondary: #24211e;\n --color-button-secondary-text: #f6f1ea;\n --color-input: #100e0d;\n --color-input-text: #f6f1ea;\n --color-input-border: rgb(255 240 220 / 0.14);\n --color-disabled: #24211e;\n --color-disabled-text: #6e665c;\n --color-danger: #f2557c;\n --color-danger-surface: #25141a;\n --color-success: #7ccf8a;\n --color-warning: #ffd166;\n --color-notice: #271c12;\n --color-notice-text: #ffcfa8;\n --color-focus: #ff8a4c;\n --color-shadow: rgb(0 0 0 / 0.45);\n --color-overlay: rgb(12 10 9 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: \"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: \"IBM Plex Serif\", \"Source Serif 4\", Georgia, \"Times New Roman\", serif;\n --font-ui: \"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: \"IBM Plex Mono\", \"SF Mono\", Monaco, Consolas, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 14px;\n --text-large: 18px;\n --text-display: 60px;\n --text-h1: 40px;\n --text-h2: 26px;\n --text-h3: 17px;\n --line-body: 1.65;\n --line-heading: 1.2;\n --line-display: 1.08;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: -0.2px;\n --display-tracking: -1px;\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: 10px;\n --radius-panel: 14px;\n --radius-pill: 9999px;\n --radius-page: 20px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 6%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 1px 3px var(--color-shadow);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 0 20px color-mix(in srgb, var(--color-button) 40%, transparent);\n --shadow-control-pressed: inset 0 2px 4px var(--color-shadow);\n --shadow-dialog: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), 0 24px 50px var(--color-shadow);\n --shadow-text: none;\n --fill-page: radial-gradient(ellipse 70% 480px at 50% 0, color-mix(in srgb, var(--color-fill-1) 9%, transparent), transparent) no-repeat, var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar) 55%, 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), var(--color-surface));\n --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 86%, white), var(--color-button));\n --fill-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 74%, white), color-mix(in srgb, var(--color-button) 92%, 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: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n --backdrop-blur: 0px;\n}\n" } }