{ "id": "v1-dd-1111", "long_id": "v1.dev-dark.landing.s01.p01.t01.u01", "name": "Dark developer tools landing page", "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": "landing", "mode": "pure", "viewport": { "width": 1440, "fluid": false }, "summary": "This is the product page of a developer tool as it looked from 2019 to 2026: a near-black page, hairline borders in translucent white, small precise sans-serif type and one soft glow of colour behind the hero. The claim is centred over the glow, the product is shown as a window with a status list and a build log, and below it come customer names set as text, a ruled strip of figures and a grid of bordered cards that each hold a small line drawing. Monospace is used for every detail that a developer would read as data: commands, dates, ids, labels above sections and the heads of tables.", "url": "https://chrono.skin/s/v1-dd-1111", "preview_url": "https://chrono.skin/s/v1-dd-1111/specimen.html", "files": { "STYLE.md": "# Dark developer tools landing page\n\n## Summary\n\nThis is the product page of a developer tool as it looked from 2019 to 2026: a near-black page, hairline borders in translucent white, small precise sans-serif type and one soft glow of colour behind the hero. The claim is centred over the glow, the product is shown as a window with a status list and a build log, and below it come customer names set as text, a ruled strip of figures and a grid of bordered cards that each hold a small line drawing. Monospace is used for every detail that a developer would read as data: commands, dates, ids, labels above sections and the heads of tables.\n\n## Layout\n\n- The page is designed for a 1440px viewport and is not fluid: content sits in one centred column, `.ds-wrap`, at most `--size-page` (1200px) wide with `--space-5` (24px) of side padding. Running text is kept to `--size-narrow` (720px).\n- Navigation is `.ds-nav`, a bar `--size-top` (56px) tall that stays at the top of the window on the translucent `--fill-bar`, blurred by `--backdrop-blur`, with a hairline below. Brand at the left, four links after it, a secondary and a primary small button at the right. There is no sidebar on the home view.\n- The home view stacks, top to bottom: `.ds-hero` (announcement pill, title, lead, two large buttons, a mono command line, then `.ds-frame`, the product window); `.ds-logos`; `.ds-stat`, four figures in one ruled strip; a band with `.ds-section__head` and `.ds-grid` (three columns, the first card two columns wide); a band with `.ds-cols`, a code panel beside the dated `.ds-list`; and `.ds-cta`, the one inverted block. Bands are `.ds-band`, padded by `--space-8` (88px) and parted by a hairline in `--color-border-muted`.\n- Inner pages have no hero. They open with `.ds-page-header`: breadcrumb, a `--text-h1` title and one muted line at the left, at most two buttons at the right, over a small glow. Below it the work sits in `.ds-wrap`: a `.ds-stack` (24px apart) or `.ds-cols`. `.ds-cols` is two equal columns; `--wide` is 2 to 1 and `--side` is a main column beside a `--size-side` (300px) column. Tabs are a segmented control in a `.ds-toolbar` directly under the page header.\n- Views. The specimen is a deployment service with four views. `home` is the landing page described above. `pricing` has the tabs for the billing period, three `.ds-plan` cards, the comparison table beside the panel of the current plan with its buttons, and the open dialog that cancels the plan. `changelog` has two `.ds-entry` articles and the pagination in the main column; the releases sidebar, the label key, an empty state and a row of links at the right. `start` is the sign-up form under its notices, beside the steps, a terminal block and the limits of the free plan.\n- Spacing scale: `--space-1` 4px (inside pills and key caps, between pagination links), `--space-2` 8px (button vertical padding, between adjacent buttons and badges), `--space-3` 12px (panel head and table cell vertical padding), `--space-4` 16px (panel padding, between grid cards, between form rows), `--space-5` 24px (between stacked blocks, side padding, plan padding), `--space-6` 32px (between columns, around a dialog and an empty state), `--space-7` 48px (page header top, hero to frame, inverted block padding), `--space-8` 88px (band and hero padding, above the footer).\n- Other sizes: `--size-art` 168px (the drawing area of a card), `--size-glow` 560px (height of the hero glow), `--size-date` 120px (the date column of lists and entries), `--size-mark` 24px, `--size-dot` 8px, `--size-dialog` 440px.\n- Below 980px cards stand two across and every column pair stacks. Below 640px everything is one column, the links of the bar move to a second row that scrolls sideways, and a wide table scrolls inside `.ds-table__wrap`; the page itself never scrolls sideways.\n\n## Typography and colour roles\n\nThese are the conventions of the era. Every layout and every token set of dev-dark keeps to them.\n\n- Which text sits on which fill. `--color-text`, `--color-heading` and `--color-text-muted` sit on `--color-page`, `--color-canvas`, `--fill-panel`, `--color-surface-alt` and `--color-surface-strong`. `--color-bar-text` sits on `--fill-bar` (the top bar). `--color-bar-alt-text` sits on `--fill-bar-alt` (a side rail, the title strip of a code block, a table head, the footer); a heading on that fill may use `--color-heading`. `--color-inverse-text` sits on `--fill-inverse`, which is used for exactly one block per view. `--color-button-text` sits on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary`, `--color-accent-text` on `--fill-accent`, `--color-input-text` on `--fill-input` (form controls and code blocks), `--color-notice-text` on `--color-notice`.\n- `--color-fill-1` to `--color-fill-4` never carry text. They are glows and tints: mixed with `transparent` at 12% to 34% behind text in the ordinary text colours, and at full strength or mixed 72% into `--color-heading` only for drawings, bars, cells and icons. `--color-fill-1` is the palette's glow colour: the hero, the page header, the featured plan. A palette may make any fill light or dark.\n- `--color-accent-alt` is a text and line colour, not a fill: mono labels, keywords in code, the marker of the current item, the \"new\" badge. It must read on the page and on a panel.\n- `--color-success`, `--color-warning` and `--color-danger` are used as a dot, as text, or as a 12% tint with a 32% hairline and the colour itself as text. Nothing is ever filled solid with them, so they need no text colour of their own. The destructive button is built the same way.\n- Borders: `--color-border` on every box and bar, `--color-border-strong` on secondary buttons, the dialog, the product window and the dashed empty state, `--color-border-muted` between rows inside a box and between bands. All `--border-width`; `--border-width-strong` is the focus offset and the ring around a status dot.\n- Type. One sans family for body, headings and controls, with `--font-mono` for data. `--text-base` 15px at `--line-body` 1.6; `--text-ui` 13px for navigation, buttons, forms, tables and card text; `--text-small` 12px for badges, mono labels, dates and table heads; `--text-large` 17px for the hero lead. `--text-display` 56px is the hero title only; `--text-h1` 36px page titles, section statements, figures and prices; `--text-h2` 24px column heads; `--text-h3` 15px panel and card titles in `--weight-bold`. Headings are `--weight-heading` 500 with slight negative tracking.\n- Uppercase appears only on mono labels (`.ds-eyebrow`, table heads, sidebar and footer titles), tracked by 6% of the font size; `--ui-transform` applies to buttons, tabs and navigation.\n- Links are `--color-link` without underline and gain one on hover; quiet links in breadcrumbs, the sidebar and the footer are `--color-link-quiet` and turn `--color-heading`.\n- Surface. `--radius-control` 6px for buttons, inputs and the brand tile, `--radius-panel` 8px for panels, code blocks, notices and the empty state, `--radius-page` 12px for the product window, grid cards, plans, the dialog and the inverted block, `--radius-pill` for badges and the announcement pill. `--shadow-panel` is on panels and cards, `--shadow-control` on buttons and the brand tile, `--shadow-dialog` on the dialog and the product window. `--shadow-text` reaches navigation links and buttons.\n- One-off values written with `calc()` and `color-mix()` because the vocabulary has no token: the glows (a fill at 18% to 34% over transparent), the drawing colour (72% of a fill in `--color-heading`), the wash behind the current navigation link (`--color-bar-text` at 9%), status tints (12% and 32%), the hovered destructive button (22%), the hovered inverse button (82% of `--color-inverse-text` in `--color-inverse`), the notice border (22% and 40%), key cap and inline code corners (half of `--radius-control`), the segmented control's corner (`--radius-control` plus `--space-1`), mono label tracking. Navigation links are at `opacity` 0.66 until current, customer names at 0.82, the text of the inverted block at 0.7. The empty state's outline is dashed.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, text colour and `--fill-page`. `.ds-nav`, the views and `.ds-footer` are its direct children.\n- `.ds-wrap`, `.ds-band`, `.ds-stack`, `.ds-cols`: the centred column, a padded section with a rule above (`--tight`, `--flush`), a vertical stack, and the column pairs (`--wide`, `--side`). `.ds-panel--grow` in a stack takes up spare height.\n- `.ds-brand`: the site's mark and name. `.ds-brand__mark` is a 24px tile dressed like the primary button holding the mark as inline SVG; `.ds-brand__name` is the name. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the top bar. `.ds-nav__inner` holds the brand, `.ds-nav__links` of `.ds-nav__link` (current: `is-current`) and `.ds-nav__actions`. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current`.\n- `.ds-hero`: home view only. `.ds-hero__pill`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions`, `.ds-hero__cmd`, then `.ds-frame`. The glow is its `::before`.\n- `.ds-frame`: the product drawn as a window: `.ds-frame__bar` (lights, path, a status badge), `.ds-frame__body` with `.ds-frame__rows` of `.ds-frame__row` and the mono `.ds-frame__log`.\n- `.ds-logos`: `.ds-logos__row` of `.ds-logos__name` (`--mono`, `--light`, `--italic`) and a mono caption. Text only, never an image.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__inner` with `.ds-page-header__copy` (breadcrumb, `.ds-page-header__title`, `.ds-page-header__text`) and `.ds-page-header__actions`.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`; `.ds-prose__lead` for the first paragraph.\n- `.ds-code`: a code block on `--fill-input`: optional `.ds-code__head` with `.ds-code__name`, then `.ds-code__body` (a `pre`). Spans `.ds-code__k`, `__s`, `__c`, `__n` colour keywords, strings, comments and names.\n- `.ds-eyebrow`, `.ds-mono`, `.ds-kbd`, `.ds-dot`, `.ds-avatar`: the mono label (`--accent`), mono data text, a key cap, a status dot (`--success`, `--warning`, `--danger`, `--accent`, `--ring`) and an initials disc.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet`, `--more` (appends an arrow). `.ds-linkrow` lays links in a row.\n- `.ds-button`: 13px medium text, 6px corners. `--secondary` (translucent fill, strong hairline), `--danger` (tint, hairline and text in the danger colour), `--inverse` (on the inverted block only), `--small`, `--large`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces them 8px apart.\n- `.ds-form`: labels above fields. `.ds-form__row`, `.ds-form__field`, `.ds-form__label`, `.ds-form__input` (`--mono`), `.ds-form__select`, `.ds-form__textarea`, `is-error` plus `.ds-form__error`, `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: inside a panel, edge to edge: a mono uppercase head on `--fill-bar-alt`, hairline rows, `is-hover` rows on `--color-surface-alt`, `.ds-table__num` for right-aligned mono numbers, `.ds-table__state` for a dot with a word. Wrap in `.ds-table__wrap`; `.ds-table__foot` closes the panel.\n- `.ds-list`: dated rows: `.ds-list__item` is `.ds-list__meta` (mono date) beside a `.ds-list__title` link and `.ds-list__text`.\n- `.ds-panel`: hairline box on `--fill-panel`: `.ds-panel__head` with `.ds-panel__title`, `.ds-panel__body`; `.ds-panel__rows` of `.ds-panel__row` (`.ds-panel__key`) for facts. A `.ds-code` directly inside loses its own border.\n- `.ds-stat`: the row of figures. Each `.ds-stat__item` is a `.ds-stat__figure` over a mono `.ds-stat__label`, parted by vertical hairlines.\n- `.ds-section__head`: `.ds-eyebrow` and `.ds-section__title`, whose `strong` part is bright and the rest muted.\n- `.ds-grid`: feature cards. `.ds-grid__cell` (`--wide`) holds `.ds-grid__art` (`--2`, `--3`, `--4` for the other fills) with one inline SVG drawn in strokes, and `.ds-grid__body` with `.ds-grid__title` and `.ds-grid__text`.\n- `.ds-cta`: the inverted block: `.ds-cta__title`, `.ds-cta__text` and one `.ds-button--inverse`.\n- `.ds-tabs`: a segmented control of `.ds-tabs__tab`; the current one (`is-current`) is on `--color-surface-strong`. `.ds-toolbar` puts it in a row with a `.ds-toolbar__note`.\n- `.ds-plans`: three `.ds-plan` cards (`--featured` carries the glow): `.ds-plan__name`, `.ds-plan__price` with `.ds-plan__per`, `.ds-plan__text`, a button, `.ds-plan__items` of `.ds-plan__item`.\n- `.ds-entry`: a changelog entry: `.ds-entry__meta` (date and badge) beside a `.ds-prose`.\n- `.ds-badge`: small pill on `--fill-accent`. `--quiet`, `--outline`, `--new` (accent-alt tint), `--mono`. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a mono `.ds-sidebar__title` over `.ds-sidebar__list` along a rule; `.ds-sidebar__item`, current with `is-current`.\n- `.ds-steps`: numbered `.ds-steps__item` rows with a `.ds-steps__title`.\n- `.ds-notice`: message strip on `--color-notice`; `--error` in the danger colours. `.ds-notice__title`; `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link`; `is-current` on `--color-surface-strong`, `is-disabled` grey.\n- `.ds-breadcrumb`: `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a block in `--color-overlay` centring `.ds-dialog__box` with `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: a dashed box: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one small button.\n- `.ds-footer`: on `--fill-bar-alt`: `.ds-footer__inner` with `.ds-footer__brand` (`.ds-footer__about`) and three columns of `.ds-footer__title` and `.ds-footer__links` of `.ds-footer__link`; `.ds-footer__line` is the mono last line with `.ds-footer__status`.\n\n## Never\n\n- `block-gap <= 88px`: bands are 88px apart at most, blocks inside them 24px.\n- `font-size >= 12px`: badges, mono labels and dates are the smallest text.\n- `font-size <= 56px`: the hero title is the largest text.\n- `font-weight <= 600`: headings are medium, labels semibold; nothing is bold or black.\n- `font-families <= 2`: one sans-serif family and one monospace.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `uppercase-text <= 5%`: only mono labels are uppercase.\n- `underlined-links <= 5%`: links are told apart by colour and underline on hover only.\n- `letter-spacing <= 3px`: only the mono customer names are spaced out, by 2px.\n- `border-width <= 2px`: every rule and outline is a 1px hairline; 2px is the most any palette's emphasis takes.\n- `border-radius <= 12px`: 6px on controls, 8px on panels, 12px on the largest boxes; pills are shapes.\n- `box-shadow-blur <= 32px`: only the dialog and the product window cast a wide shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills <= 5%`: gradients are the glows behind the hero, the page header and the card drawings, never a filled box.\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 block on the page is a `.ds-panel` or a `.ds-grid__cell` with a 1px border in `--color-border`, placed in `.ds-wrap` inside a `.ds-band`; a new feature gets a card with one stroke drawing in the next fill colour; data a developer would copy is set in `--font-mono`. Keep to the conventions above for which text sits on which fill: never put text on a full-strength `--color-fill-*` or status colour, tint it instead. Use one glow per view, always from `--color-fill-1`, and one inverted block. 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: 1200px;\n --size-narrow: 720px;\n --size-top: 56px;\n --size-side: 300px;\n --size-mark: 24px;\n --size-dot: 8px;\n --size-dialog: 440px;\n --size-art: 168px;\n --size-glow: 560px;\n --size-date: 120px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 88px;\n}\n\n/* shell: one centred column under a bar that stays at the top of the window */\n.ds-page {\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\n.ds-wrap {\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-band {\n padding: var(--space-8) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-band--tight {\n padding: var(--space-7) 0;\n}\n.ds-band--flush {\n padding-top: var(--space-7);\n border-top: 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.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: stretch;\n}\n.ds-cols--side {\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n}\n.ds-cols--wide {\n grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n}\n\n/* nav: a translucent bar; brand at the left, links in the middle, sign-in at the right */\n.ds-nav {\n position: sticky;\n top: 0;\n z-index: 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__inner {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n max-width: var(--size-page);\n min-height: var(--size-top);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__links {\n display: flex;\n flex: 1 1 auto;\n gap: var(--space-1);\n min-width: 0;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n color: var(--color-bar-text);\n border-radius: var(--radius-control);\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 background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n opacity: 1;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#pricing:target) .ds-nav__link[href=\"#pricing\"],\n.ds-page:has(#changelog:target) .ds-nav__link[href=\"#changelog\"],\n.ds-page:has(#start:target) .ds-nav__link[href=\"#start\"] {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n opacity: 1;\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n gap: var(--space-2);\n}\n\n/* hero: centred claim over a glow in the first fill colour, then the product in a window */\n.ds-hero {\n position: relative;\n padding: var(--space-8) 0 var(--space-7);\n overflow: hidden;\n text-align: center;\n}\n.ds-hero::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: var(--size-glow);\n background: radial-gradient(ellipse 46% 78% at 50% 0, color-mix(in srgb, var(--color-fill-1) 34%, transparent), transparent 72%);\n pointer-events: none;\n}\n.ds-hero > .ds-wrap {\n position: relative;\n}\n.ds-hero__pill {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n margin-bottom: var(--space-5);\n padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-hero__pill:hover,\n.ds-hero__pill.is-hover {\n color: var(--color-heading);\n border-color: var(--color-text-muted);\n}\n.ds-hero__title {\n max-width: 18ch;\n margin: 0 auto var(--space-4);\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}\n.ds-hero__lead {\n max-width: 54ch;\n margin: 0 auto 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 justify-content: center;\n gap: var(--space-3);\n}\n.ds-hero__cmd {\n display: block;\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-hero__cmd b {\n color: var(--color-accent-alt);\n font-weight: var(--weight-body);\n}\n\n/* frame: the product drawn as a window; the largest shadow and the page radius show here */\n.ds-frame {\n margin-top: var(--space-7);\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 overflow: hidden;\n text-align: left;\n}\n.ds-frame__bar {\n display: flex;\n align-items: center;\n gap: var(--space-3);\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}\n.ds-frame__lights {\n display: flex;\n gap: var(--space-1);\n}\n.ds-frame__lights span {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-border-strong);\n border-radius: 50%;\n}\n.ds-frame__path {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-frame__body {\n display: grid;\n grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);\n}\n.ds-frame__rows {\n margin: 0;\n padding: var(--space-2) 0;\n list-style: none;\n border-right: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-ui);\n}\n.ds-frame__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n}\n.ds-frame__row.is-current {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n.ds-frame__name {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-frame__log {\n margin: 0;\n padding: var(--space-4);\n overflow: hidden;\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: 1.9;\n white-space: pre;\n}\n\n/* logos: customer names set as text, each in its own cut of the type set */\n.ds-logos {\n padding: var(--space-6) 0 var(--space-7);\n}\n.ds-logos__row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n color: var(--color-heading);\n}\n.ds-logos__name {\n font-family: var(--font-heading);\n font-size: calc(var(--text-h2) * 0.92);\n font-weight: var(--weight-bold);\n line-height: 1;\n letter-spacing: calc(var(--text-h2) * -0.03);\n opacity: 0.82;\n}\n.ds-logos__name--mono {\n font-family: var(--font-mono);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n letter-spacing: calc(var(--text-large) * 0.12);\n text-transform: uppercase;\n}\n.ds-logos__name--light {\n font-family: var(--font-body);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n}\n.ds-logos__name--italic {\n font-style: italic;\n}\n\n/* stats: figures in one ruled strip */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n margin: 0;\n padding: 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: var(--space-5) var(--space-5);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-stat__figure {\n display: block;\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 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/* section head: a mono label, then a two-tone statement */\n.ds-section__head {\n max-width: var(--size-narrow);\n margin: 0 0 var(--space-7);\n}\n.ds-section__title {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\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__title strong {\n color: var(--color-heading);\n font-weight: inherit;\n}\n\n/* grid: bordered feature cards; a drawing in the fill colour over a glow, the text below */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-grid__cell--wide {\n grid-column: span 2;\n}\n.ds-grid__art {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-art);\n background: radial-gradient(ellipse 70% 90% at 50% 110%, color-mix(in srgb, var(--color-fill-1) 26%, transparent), transparent 72%);\n color: color-mix(in srgb, var(--color-fill-1) 72%, var(--color-heading));\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-grid__art--2 {\n background: radial-gradient(ellipse 70% 90% at 50% 110%, color-mix(in srgb, var(--color-fill-2) 26%, transparent), transparent 72%);\n color: color-mix(in srgb, var(--color-fill-2) 72%, var(--color-heading));\n}\n.ds-grid__art--3 {\n background: radial-gradient(ellipse 70% 90% at 50% 110%, color-mix(in srgb, var(--color-fill-3) 26%, transparent), transparent 72%);\n color: color-mix(in srgb, var(--color-fill-3) 72%, var(--color-heading));\n}\n.ds-grid__art--4 {\n background: radial-gradient(ellipse 70% 90% at 50% 110%, color-mix(in srgb, var(--color-fill-4) 26%, transparent), transparent 72%);\n color: color-mix(in srgb, var(--color-fill-4) 72%, var(--color-heading));\n}\n.ds-grid__art svg {\n display: block;\n width: auto;\n max-width: 86%;\n height: 76%;\n}\n.ds-grid__body {\n padding: var(--space-4) var(--space-5) var(--space-5);\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\n/* list: dated rows under a rule */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-date) minmax(0, 1fr);\n gap: var(--space-4);\n padding: var(--space-4) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n border-top: 0;\n padding-top: 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: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-list__meta {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-colhead {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-5);\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/* call to action: the one inverted block */\n.ds-cta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-7);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n}\n.ds-cta__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-cta__text {\n margin: var(--space-2) 0 0;\n opacity: 0.7;\n}\n\n/* page header: breadcrumb, title and one line over a small glow; the action at the right */\n.ds-page-header {\n position: relative;\n padding: var(--space-7) 0 var(--space-6);\n overflow: hidden;\n}\n.ds-page-header::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background: radial-gradient(ellipse 40% 100% at 30% 0, color-mix(in srgb, var(--color-fill-1) 18%, transparent), transparent 70%);\n pointer-events: none;\n}\n.ds-page-header__inner {\n position: relative;\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\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: 62ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\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/* tabs: a segmented control */\n.ds-tabs {\n display: inline-flex;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-control) + var(--space-1));\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-1) var(--space-4);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\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 background: var(--color-surface-strong);\n color: var(--color-heading);\n border-color: var(--color-border);\n}\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-toolbar__note {\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* plans: three priced cards; the middle one carries the glow */\n.ds-plans {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-plan {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\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-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-plan--featured {\n background: radial-gradient(ellipse 90% 60% at 50% 0, color-mix(in srgb, var(--color-fill-1) 22%, transparent), transparent 75%), var(--color-surface);\n border-color: color-mix(in srgb, var(--color-fill-1) 55%, var(--color-border-strong));\n}\n.ds-plan__name {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0;\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}\n.ds-plan__name .ds-badge {\n line-height: var(--line-heading);\n}\n.ds-plan__price {\n display: block;\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 letter-spacing: var(--heading-tracking);\n}\n.ds-plan__per {\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 letter-spacing: 0;\n}\n.ds-plan__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-plan__items {\n flex: 1 0 auto;\n margin: 0;\n padding: var(--space-4) 0 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-ui);\n}\n.ds-plan__item {\n display: flex;\n gap: var(--space-2);\n padding: var(--space-1) 0;\n}\n.ds-plan__item::before {\n content: \"\\2713\";\n color: var(--color-success);\n}\n\n/* changelog entry: the date in a mono column, the text beside it */\n.ds-entry {\n display: grid;\n grid-template-columns: var(--size-date) minmax(0, 1fr);\n gap: var(--space-5);\n padding: 0 0 var(--space-6);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-entry__meta {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n padding-top: var(--space-2);\n}\n.ds-entry .ds-code {\n margin: 0 0 var(--space-4);\n}\n\n/* sidebar: a labelled list of links along a rule */\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 display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2);\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.is-current {\n color: var(--color-heading);\n border-left-color: var(--color-accent-alt);\n}\n\n/* steps: a numbered run of what happens next */\n.ds-steps {\n margin: 0;\n padding: 0;\n list-style: none;\n counter-reset: step;\n font-size: var(--text-ui);\n}\n.ds-steps__item {\n display: flex;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n counter-increment: step;\n}\n.ds-steps__item:last-child {\n border-bottom: 0;\n}\n.ds-steps__item::before {\n content: \"0\" counter(step);\n color: var(--color-accent-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: calc(var(--line-body) * 1.1);\n}\n.ds-steps__title {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n\n/* footer: link columns on the secondary bar, a mono line under them */\n.ds-footer {\n margin-top: var(--space-8);\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-ui);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-7) var(--space-5) var(--space-6);\n}\n.ds-footer__about {\n max-width: 34ch;\n margin: var(--space-3) 0 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\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.06);\n text-transform: uppercase;\n opacity: 0.7;\n}\n.ds-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n display: inline-block;\n padding: var(--space-1) 0;\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.ds-footer__line {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2) var(--space-4);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-footer__status {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n margin-left: auto;\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/* medium windows: two cards across, the side column goes under */\n@media (max-width: 980px) {\n .ds-grid,\n .ds-plans {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-cols,\n .ds-cols--side,\n .ds-cols--wide {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-footer__inner {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .ds-footer__brand {\n grid-column: 1 / -1;\n }\n}\n\n/* narrow windows: one column; the links of the bar move to a second row that scrolls sideways */\n@media (max-width: 640px) {\n .ds-wrap {\n padding: 0 var(--space-4);\n }\n .ds-band {\n padding: var(--space-7) 0;\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: 0 var(--space-3);\n padding: var(--space-2) var(--space-4) 0;\n }\n .ds-nav__actions {\n margin-left: auto;\n }\n .ds-nav__links {\n order: 3;\n flex: 0 0 100%;\n padding: var(--space-2) 0;\n overflow-x: auto;\n }\n .ds-hero {\n padding: var(--space-7) 0 var(--space-6);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-frame {\n margin-top: var(--space-6);\n }\n .ds-frame__body {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-frame__rows {\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-logos__row {\n justify-content: flex-start;\n }\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n border-bottom: 0;\n }\n .ds-stat__item,\n .ds-stat__item:first-child {\n padding: var(--space-4);\n border-left: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-stat__item:nth-child(even) {\n border-left: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-stat__figure {\n font-size: var(--text-h2);\n }\n .ds-section__head {\n margin-bottom: var(--space-6);\n }\n .ds-section__title,\n .ds-cta__title,\n .ds-page-header__title,\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n .ds-grid,\n .ds-plans {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid__cell--wide {\n grid-column: auto;\n }\n .ds-list__item,\n .ds-entry {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-2);\n }\n .ds-list__meta,\n .ds-entry__meta {\n flex-direction: row;\n align-items: center;\n }\n .ds-cta {\n padding: var(--space-5);\n }\n .ds-page-header {\n padding: var(--space-6) 0 var(--space-5);\n }\n .ds-page-header__inner {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-4);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-tabs {\n max-width: 100%;\n overflow-x: auto;\n }\n .ds-table {\n min-width: 58ch;\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 margin-top: var(--space-7);\n }\n .ds-footer__inner {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n padding: var(--space-6) var(--space-4) var(--space-5);\n }\n .ds-footer__line {\n padding: var(--space-4);\n }\n .ds-footer__status {\n margin-left: 0;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: dark developer tools landing specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n Log in\n Sign up\n
\n
\n
\n\n
\n
\n
\n New Instant rollbacks are out of beta →\n

Ship every branch the moment it is pushed

\n

chronoskin builds each commit, gives it its own address and puts it in front of your team in under a minute. Production is one more push.

\n
\n Start deploying\n See pricing\n
\n $ npx chronoskin deploy --prod\n\n
\n
\n \n harbour-api / deployments\n Production healthy\n
\n
\n
    \n
  • fix/retry-on-timeouta41f9c2now
    • \n
  • main7be02d14m
    • \n
  • feat/usage-exportc93a77126m
    • \n
  • chore/bump-runtime19d4e0b1h
    • \n
  • docs/webhooks52f8a363h
    • \n
  • spike/edge-cachee07b1151d
    • \n
\n
12:04:31  Cloning harbour-api at a41f9c2\n12:04:33  Restored build cache (212 MB)\n12:04:41  build   compiled 148 modules in 7.6 s\n12:04:44  test    312 passed, 0 failed\n12:04:52  deploy  fra1, iad1, syd1\n12:04:58  ready   fix-retry-on-timeout.chronoskin.app
\n
\n
\n
\n
\n\n
\n
\n
    \n
  • Northwind
    • \n
  • tidal/io
    • \n
  • Larkspur
    • \n
  • quanta
    • \n
  • OBERON
    • \n
  • Fieldnote
    • \n
  • hello.kiln
    • \n
\n Trusted by 4,200 teams that ship every day\n
\n
\n\n
\n \n
\n\n
\n
\n
\n Fig. 01 / the pipeline\n

One pipeline from push to production. Previews, checks, regions and rollbacks are the same few lines of configuration.

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

A preview for every branch

\n

Each push gets its own address with its own environment. Reviewers open a link, not a terminal.

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

Nineteen regions

\n

Name the regions in one line. Traffic goes to the nearest healthy one.

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

Checks that block

\n

Tests, type checks and your own scripts run before anything is promoted.

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

Logs and timings

\n

Every request, build step and cold start, kept for thirty days and searchable.

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

Rollback in one step

\n

Any earlier deployment is still there. Point production back at it in a second.

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

Configured in one file

Read the guide
\n
\n
\n

chronoskin.json

\n v3\n
\n
\n
{\n  \"build\":   \"npm run build\",\n  \"output\":  \"dist\",\n  \"regions\": [\"fra1\", \"iad1\", \"syd1\"],\n  \"checks\":  [\"npm test\", \"npm run types\"],\n  \"preview\": { \"branches\": \"*\", \"expires\": \"14d\" },\n  \"rollback\": { \"onErrorRate\": 0.02 }\n}
\n
\n
\n
\n
\n

Latest changes

Changelog
\n \n
\n
\n
\n
\n\n
\n
\n
\n

Your next push could already be live.

\n

Free for personal projects. No card, no sales call.

\n
\n Start deploying\n
\n
\n
\n\n
\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Pricing
    3. \n
  3. Plans
    4. \n
\n

Pay for what you deploy

\n

Every plan has previews, rollbacks and all regions. You pay for seats and build minutes, nothing else.

\n
\n
\n Talk to us\n Start free\n
\n
\n
\n
\n\n
\n
\n
\n \n Prices in US dollars, two months free when billed yearly.\n
\n\n
\n
\n

Hobby

\n
$0forever, one seat
\n

For side projects and trying things out.

\n Start free\n
    \n
  • 400 build minutes a month
    • \n
  • Previews for every branch
    • \n
  • 3 regions
    • \n
  • Logs kept for 1 day
    • \n
\n
\n
\n

Team Most teams

\n
$20per seat, per month
\n

For teams that ship to production every day.

\n Start a 14 day trial\n
    \n
  • 6,000 build minutes a month
    • \n
  • All 19 regions
    • \n
  • Instant rollbacks and blocking checks
    • \n
  • Logs kept for 30 days
    • \n
\n
\n
\n

Scale

\n
Customfrom 50 seats
\n

For companies with compliance and uptime terms.

\n Talk to us\n
    \n
  • Unmetered build minutes
    • \n
  • Single sign-on and audit log
    • \n
  • 99.99% uptime agreement
    • \n
  • A named engineer on call
    • \n
\n
\n
\n\n
\n
\n

What each plan includes

per month
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
LimitHobbyTeamScale
Build minutes4006,000unmetered
Concurrent builds11264
Bandwidth, GB1001,00010,000
Regions31919
Log retention, days130365
Preview lifetime, days71490
Team seats150unmetered
Extra build minutenone$0.004$0.002
\n
\n
Usage resets on the first of the month.Limits changed in February
\n
\n\n
\n
\n

Your plan

Team, 8 seats
\n
\n

Renews on 1 April 2025 for $1,600 a year. You have used 2,140 of 6,000 build minutes.

\n
\n Add seats\n Invoices\n \n Cancel plan\n
\n
\n
\n
\n
\n
\n

Cancel the Team plan?

\n ×\n
\n
\n

Your projects move to Hobby on 1 April. Deployments in 16 regions will be stopped.

\n
\n
\n Keep the plan\n Cancel plan\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Changelog
    3. \n
  3. 2025
    4. \n
\n

Changelog

\n

What shipped, in the order it shipped. New entries most weeks.

\n
\n
\n Subscribe by e-mail\n
\n
\n
\n
\n\n
\n
\n
\n
\n
12 Mar 2025New
\n
\n

Instant rollbacks

\n

Production can now point at any earlier deployment without a rebuild.

\n

Every deployment is kept as built. A rollback only moves the production address, so it takes about one second in every region.

\n

What changed

\n
    \n
  • A rollback button on every deployment that was once in production
    • \n
  • Automatic rollback when the error rate passes a limit you set
    • \n
  • The audit log records who rolled back, and from where
    • \n
\n

From the command line

\n

Run chronoskin rollback to go back one step, or pass a deployment id to pick one.

\n
\n
\n
\n
27 Feb 2025Faster
\n
\n

Build cache is shared across branches

\n

A new branch starts from the cache of the branch it was cut from. Cold builds are 40% faster on average.

\n
\n
terminalbefore / after
\n
# feat/usage-export, first build\nbuild  1m 04s   cache miss\nbuild     38s   cache from main
\n
\n

Nothing to switch on. To opt a branch out, set cache: false.

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

Labels

\n
\n
\n Release\n New\n Docs\n Faster\n Deprecated\n Breaking\n
\n
\n
\n
\n \n

No breaking changes in 2025

\n

Nothing you deployed last year needs editing to run today.

\n See 2024\n
\n

\n RSS feed\n Roadmap\n Status page\n Release notes\n

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Start
    3. \n
\n

Create your workspace

\n

Two minutes from here to your first deployment. Free while you try it.

\n
\n
\n Compare plans\n
\n
\n
\n
\n\n
\n
\n
\n
\n

You were invited by Imre Solvang. Joining adds you to the Northwind workspace.

\n

That workspace address is taken. Choose another one below.

\n
\n
\n

Workspace

step 1 of 2
\n
\n
\n
\n \n \n
\n \n \n \n \n
\n \n Cancel\n
\n
\n
\n
\n
\n\n
\n
\n

What happens next

\n
\n
    \n
  1. Connect a repositoryPick the branches that get previews.
    2. \n
  2. Push a commitThe first build takes about a minute.
    3. \n
  3. Open the previewShare its address with your team.
    4. \n
  4. Promote to productionOne command, or merge to main.
    5. \n
\n
\n
\n
\n
Prefer the terminal?zsh
\n
# install, sign in, deploy the folder you are in\n$ npm install --global chronoskin\n$ chronoskin login\n$ chronoskin deploy\nready  first-project.chronoskin.app
\n
\n
\n

On the free plan

All limits
\n
\n
    \n
  • Build minutes400 / month
    • \n
  • Regions3
    • \n
  • Previewsevery branch
    • \n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.dev-dark.landing.s01.p01.t01.u01\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"dev-dark\",\n \"years\": [\n 2019,\n 2026\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-dd-1111\",\n \"short\": \"v1-dd-1111\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #08090a;\n --color-canvas: #08090a;\n --color-surface: #0f1011;\n --color-surface-alt: #151617;\n --color-surface-strong: #1f2023;\n --color-bar: #08090a;\n --color-bar-text: #d0d6e0;\n --color-bar-alt: #0c0d0e;\n --color-bar-alt-text: #8a8f98;\n --color-inverse: #e5e5e6;\n --color-inverse-text: #08090a;\n --color-text: #d0d6e0;\n --color-text-muted: #8a8f98;\n --color-heading: #f7f8f8;\n --color-heading-alt: #e5e5e6;\n --color-link: #8c97ff;\n --color-link-quiet: #8a8f98;\n --color-link-visited: #a69fd8;\n --color-link-hover: #f7f8f8;\n --color-link-active: #5e6ad2;\n --color-border: rgb(255 255 255 / 0.08);\n --color-border-strong: rgb(255 255 255 / 0.16);\n --color-border-muted: rgb(255 255 255 / 0.05);\n --color-accent: #5e6ad2;\n --color-accent-text: #ffffff;\n --color-accent-alt: #e4f222;\n --color-fill-1: #5e6ad2;\n --color-fill-2: #52a8ff;\n --color-fill-3: #62c073;\n --color-fill-4: #8a8f98;\n --color-button: #e5e5e6;\n --color-button-text: #08090a;\n --color-button-hover-text: #08090a;\n --color-button-secondary: rgb(255 255 255 / 0.05);\n --color-button-secondary-text: #f7f8f8;\n --color-input: #0c0d0e;\n --color-input-text: #f7f8f8;\n --color-input-border: rgb(255 255 255 / 0.12);\n --color-disabled: #1f2023;\n --color-disabled-text: #62666d;\n --color-danger: #f34e52;\n --color-danger-surface: #1d1011;\n --color-success: #62c073;\n --color-warning: #ffd60a;\n --color-notice: #11132a;\n --color-notice-text: #c3c8ff;\n --color-focus: #8c97ff;\n --color-shadow: rgb(0 0 0 / 0.5);\n --color-overlay: rgb(0 0 0 / 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n --font-heading: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n --font-ui: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n --font-mono: \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 17px;\n --text-display: 56px;\n --text-h1: 36px;\n --text-h2: 24px;\n --text-h3: 15px;\n --line-body: 1.6;\n --line-heading: 1.25;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 500;\n --weight-display: 500;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: -0.3px;\n --display-tracking: -1.6px;\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: 6px;\n --radius-panel: 8px;\n --radius-pill: 9999px;\n --radius-page: 12px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);\n --shadow-control: 0 1px 2px var(--color-shadow);\n --shadow-control-hover: 0 0 0 3px color-mix(in srgb, white 8%, transparent);\n --shadow-control-pressed: inset 0 1px 2px var(--color-shadow);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, white 5%, transparent), 0 2px 32px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar) 78%, transparent);\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) 55%, 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.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n --backdrop-blur: 12px;\n}\n" } }