{ "id": "v1-sg-4586", "long_id": "v1.saas-gradient.blog.s04.p05.t08.u06", "name": "SaaS gradient blog and customer stories", "era": { "slug": "saas-gradient", "code": "sg", "name": "SaaS gradient", "years": [ 2016, 2021 ], "description": "The start-up product page of 2016 to 2021: slanted or curved bands of purple-to-blue gradient, white rounded cards with soft wide shadows, friendly geometric sans, pill buttons and flat illustration blocks." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "This is the company blog of a start-up product of 2016 to 2021, where customer stories and posts are told as cards: a plain bar of navigation, then the featured story as one large card of two-colour gradient with a small drawn scene of white cards, and below it a grid of story cards, each under a block of one flat colour with a line icon. Inner pages are quiet: a band in the card colour with a small gradient tile beside the title, an author strip between two hairlines, a pull quote on the gradient and text in a comfortable column beside small cards. It was the usual way for payment, analytics and support products to show who used them around 2018.", "url": "https://chrono.skin/s/v1-sg-4586", "preview_url": "https://chrono.skin/s/v1-sg-4586/specimen.html", "files": { "STYLE.md": "# SaaS gradient blog and customer stories\n\n## Summary\n\nThis is the company blog of a start-up product of 2016 to 2021, where customer stories and posts are told as cards: a plain bar of navigation, then the featured story as one large card of two-colour gradient with a small drawn scene of white cards, and below it a grid of story cards, each under a block of one flat colour with a line icon. Inner pages are quiet: a band in the card colour with a small gradient tile beside the title, an author strip between two hairlines, a pull quote on the gradient and text in a comfortable column beside small cards. It was the usual way for payment, analytics and support products to show who used them around 2018.\n\n## Layout\n\n- The page is designed for a 1440px viewport and is not fluid: content sits in `.ds-wrap`, centred, at most `--size-page` (1120px) wide with `--space-5` side padding. The navigation bar, the page header and the footer run the full width of the window.\n- Navigation is a solid bar on `--fill-panel`, at least `--size-nav` (72px) tall, over a hairline: the `.ds-brand`, three links whose current one carries a `--border-width-strong` edge along the foot of the bar, then one quiet link and one small primary button at the right. Nothing of the navigation lies on the gradient.\n- The home view stacks inside `.ds-home`: `.ds-hero`, the featured story as a gradient card in two columns (6 to 5); `.ds-stat`, four figures set straight on the page; a `.ds-block__head` with the title at the left and `.ds-tabs` as filter chips at the right; `.ds-grid`, six story cards three across; and a `.ds-block` of `.ds-cols` (2 to 1, `--level`) with the latest posts in a card beside the newsletter `.ds-cta`. Blocks are `--space-7` apart.\n- Inner pages have no hero. They open with `.ds-page-header`: a band in the card colour over a hairline that holds the breadcrumb, then a `.ds-page-header__tile` (a square of gradient with an icon) beside the page title and one line of text, and at most one button at the right. `.ds-main` follows with `.ds-cols` (2 to 1) for an article, `--side` (1 to 3) for the archive with the `.ds-sidebar` at the left and the chips above the list, or `--even` (7 to 5) for a form.\n- Views. The specimen is the blog of a shared inbox product, with four views. `home` is the customer stories page. `story` is one story: author strip, pull quote, the text and a table of results, beside the customer's facts, the features used, a newsletter card, more by the author and related links. `archive` lists all posts under chips, with topics and writers at the left, the pagination in the foot of the card and an empty topic. `subscribe` is the newsletter form with its notices and buttons beside the last issue and the open unsubscribe dialog.\n- Below 960px the hero, the columns and the archive stack and cards stand two across; below 1040px `.ds-nav__links` is not shown and the menu `.ds-nav__menu` sits at the end of the bar after the brand, the quiet link and the small button, listing every view and marking the one showing; below 640px `.ds-nav__signin` is hidden too, the grid is one column, the gradient tile of the page header is dropped and a wide table scrolls inside `.ds-table__wrap`. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (label to field, chip padding), `--space-2` 8px (between chips and badges, kicker to title), `--space-3` 12px (avatar to name, button padding), `--space-4` 16px (list rows, author strip, drawn cards), `--space-5` 24px (card padding, grid gap, page gutter), `--space-6` 32px (column gap, page header padding), `--space-7` 48px (between blocks, hero padding), `--space-8` 80px (foot of a view).\n- Other sizes: `--size-mark` 34px, `--size-icon` 44px (one and a half times that for the icon of a card and the page header tile), `--size-art` 168px (height of a card's colour block), `--size-avatar` 40px, `--size-control` 38px (pagination), `--size-dialog` 460px.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThese are the conventions of the era; every layout and token set keeps them.\n\n- The gradient is `--fill-inverse`, made in the surface part from `--color-fill-1` and `--color-fill-2`. Text on it is always `--color-inverse-text`, which a palette may make light or dark; here the gradient is yellow to amber and the text ink. `--color-inverse` is the solid middle of the gradient: the text of the `--inverse` button.\n- On the gradient there are two buttons only: `.ds-button--inverse` (fill `--color-inverse-text`, text `--color-inverse`) and `.ds-button--ghost` (outline in `--color-inverse-text`). The primary button never stands on the gradient itself; in the hero it stands in the white sign-up card and in the white bar.\n- `--color-fill-1` to `--color-fill-4` are avatars, icon circles and, mixed at 24% into `--color-surface`, the tinted figures and the blocks above the speakers. A fill carries initials or an icon in `--color-inverse-text`, never running text; text on a tint is `--color-heading` and `--color-text`.\n- `--color-page` is the pale page, `--color-surface` the card and the white sections, `--color-surface-alt` the quiet inset (hovered row and link, dialog foot, empty state), `--color-surface-strong` the strongest neutral (current link of the bar, quiet badge, inline code, current sidebar row, progress track).\n- `--fill-bar` with `--color-bar-text` is the table head only. `--fill-bar-alt` with `--color-bar-alt-text` is the footer; nothing else stands on it.\n- Text is `--color-text`, meta `--color-text-muted`, headings and figures `--color-heading`; kickers, sidebar titles, times of the day and h3 in prose are `--color-heading-alt`. A tooltip is `--color-surface` text on `--color-heading`.\n- Links are `--color-link`, bold, underlined only on hover; quiet links and the links of the bar are `--color-link-quiet`.\n- `--fill-button` with `--color-button-text` is the one action colour: the primary button, the current chip, the current page number, the current dot of the carousel, the switch when on. The secondary button is `--color-button-secondary-text` on `--fill-button-secondary` with a `--color-border` edge. The destructive button is `--color-danger` with `--color-button-text`.\n- `--fill-accent` with `--color-accent-text` is the default badge. `--alt` and the status badges are tints: the colour mixed at 16 to 22% into `--color-surface`, with text mixed from the colour and `--color-heading`. `--color-success` is also the tick of a point.\n- `--color-notice` with `--color-notice-text` is the information notice; the error notice is `--color-danger` on `--color-danger-surface` with a faint edge.\n- Two families: `--font-heading` and `--font-ui` (Montserrat, Avenir Next) for headings, figures, buttons, labels and navigation, `--font-body` (Open Sans) for text; `--font-mono` for code. The references used commercial geometric faces. `--text-base` 16px at `--line-body` 1.62; `--text-ui` 14px (controls, tables, card text); `--text-small` 13px (meta, badges, labels); `--text-large` 20px (leads, the quote); `--text-display` 56px (hero title); `--text-h1` 38px (section and page titles, figures); `--text-h2` 26px; `--text-h3` 18px (card titles).\n- Headings are heavy: `--weight-heading` and `--weight-display` 800, `--weight-bold` and `--weight-ui` 700, with tight tracking. Nothing is uppercase.\n- Surface: buttons, inputs and badges are pills (`--radius-control`, `--radius-pill` 100px); cards are `--radius-panel` 18px; the bar and the call to action `--radius-page` 32px. `--border-width` is 2px in `--color-border-muted`, `--border-width-strong` 4px (the ring of a speaker's face). `--shadow-panel` is a solid lip of `--color-border` under the card and a wide soft shadow below; `--shadow-control` is a solid darker lip under buttons and fields that grows on hover; `--shadow-dialog` is the deepest and lies under the sign-up card.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: the ellipses that cut the gradient, washes on the gradient (`--color-inverse-text` at 14 to 18%, the ghost border at 55%), tinted badges, figures and blocks, the brand tile's edge, the error notice's edge, the footer rule. Opacity 0.85 to 0.9 dims secondary text on the gradient. The figures of the countdown are set at a line height of 1.1.\n\n## Components\n\n- `.ds-page`: on ``. Sets font, text colour and `--fill-page`.\n- `.ds-wrap`: the centred content column.\n- `.ds-brand`: the site's mark and name, first in the navigation and again in the footer. `.ds-brand__mark` is a tile dressed like the primary button holding the mark as inline SVG; `.ds-brand__name` is the name. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the solid bar. `.ds-nav__inner` centres it; `.ds-nav__links` holds `.ds-nav__link`, the current one edged (`is-current`); `.ds-nav__actions` holds a quiet link (`.ds-nav__signin`) and one small primary button. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the featured story, one gradient card per site. `.ds-hero__copy` holds `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (one `--inverse`, one `--ghost` button) and a `.ds-byline`. `.ds-hero__art` is a drawn scene: `.ds-hero__ring` circles (`--small`) and two or three `.ds-hero__card` (`--in`, `--out` to stagger them) holding an avatar, a `.ds-hero__grow` label with `.ds-hero__line` bars (`--short`), a badge, a `.ds-hero__figure` or a `.ds-hero__meter` with its `.ds-hero__meter-bar`.\n- `.ds-avatar`: a circle of initials on a fill (`--1`, `--2`, `--4`; `--plain` on the gradient).\n- `.ds-byline`: who wrote it: a `.ds-avatar`, `.ds-byline__name` and `.ds-byline__meta`. `--strip` is the author strip of an article, between two hairlines, with `.ds-byline__who` at the left and tags at the right.\n- `.ds-stat`: the row of four figures; each `.ds-stat__item` has a left edge in one of the fills, a `.ds-stat__figure` and a `.ds-stat__label`.\n- `.ds-home`, `.ds-main`: the body of the home view and of an inner view. `.ds-block` is a further block of the home view; `.ds-block__head` puts a `.ds-block__title` at the left and chips at the right.\n- `.ds-cols`: main and side column, 2 to 1; `--even` 7 to 5, `--side` 1 to 3, `--level` for equal height. `.ds-stack` stacks cards 24px apart.\n- `.ds-tabs`: filter chips: `.ds-tabs__tab` pills with a hairline, the current one (`is-current`) filled with `--fill-button`.\n- `.ds-grid`: story cards, three across. Each `.ds-grid__cell` is a link: `.ds-grid__art` (a block of one fill with a line icon; `--2`, `--3`, `--4`, `--mix` for the gradient) over `.ds-grid__body` with a `.ds-kicker`, `.ds-grid__title`, `.ds-grid__text` and a `.ds-byline`. `is-hover` deepens the shadow.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`. `.ds-page-header__inner` holds the breadcrumb, a `.ds-page-header__row` of the `.ds-page-header__tile`, `.ds-page-header__title` and `.ds-page-header__text`, and `.ds-page-header__actions` at the right.\n- `.ds-cover`: the pull quote of an article on the gradient: `.ds-cover__text` and `.ds-cover__by`.\n- `.ds-facts`: pairs of `.ds-facts__term` and `.ds-facts__value` in `.ds-facts__row`, for a customer's details.\n- `.ds-cta`: the newsletter card on the gradient: `.ds-cta__title`, `.ds-cta__text` and the two gradient buttons.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--more` appends an arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: 16px medium, nearly square. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse` and `--ghost` (on the gradient only), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: data table inside a card: a small bold head on `--fill-bar`, hairlines between rows; `is-hover` tints a row. `.ds-table__num` right-aligns numbers; `.ds-table__title` is a row's link. Wrap it in `.ds-table__wrap`; `.ds-table__foot` is the foot of a card for a count and the pagination.\n- `.ds-list`: posts parted by hairlines. `.ds-list__item` holds a `.ds-list__title` (alone or in a `.ds-list__head` with a badge at the right), an optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: the white card. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge or link above a hairline; `.ds-panel__body` is padded; `.ds-panel__text` is a small paragraph; `--side` pads a card that holds a sidebar block.\n- `.ds-badge`: pill tag on `--fill-accent`. `--alt` tinted, `--quiet` grey. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a block of links: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` with an optional `.ds-sidebar__count`; the current row (`is-current`) is grey.\n- `.ds-notice`: tinted message; `--error` in the danger colours. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` squares; `is-current` is filled with `--fill-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`, a card in `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, and `.ds-dialog__actions` right-aligned on `--color-surface-alt`.\n- `.ds-empty`: a centred message on `--color-surface-alt`: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-tile`: an icon tile on a fill (`--2`, `--3`, `--4`, `--round`), for small marks inside cards.\n- `.ds-footer`: the closing band on `--fill-bar-alt`: `.ds-footer__inner` with the brand and a `.ds-footer__about` line at the left and `.ds-footer__links` of `.ds-footer__link` at the right; `.ds-footer__legal` under a rule.\n- `.ds-menu`: a drop-down, a `
` whose `.ds-menu__button` is the summary and whose `.ds-menu__list` of `.ds-menu__link` opens as a small card under it. Use it for a group of links under one bar item and for the account.\n- `.ds-nav__menu`: the `.ds-menu` that replaces the bar's links on a phone. It lists every view, marks the one showing, and sits last in the bar after the brand and the one action that stays.\n- `.ds-switch`: an on or off setting drawn over a checkbox (`.ds-switch__input`, `.ds-switch__track`, then the label). Use it for a setting that takes effect at once, not for a choice sent with a form's other fields.\n- `.ds-tooltip`: a short hint on hover or focus; `.ds-tooltip--mark` is the small round question mark beside a label, `.ds-tooltip__text` the hint, `.ds-tooltip--start` opens it from the left edge. One sentence at most.\n- `.ds-progress`: a thin pill bar with `.ds-progress__bar` (`--20` to `--100` set the width). `.ds-meter` puts a name and a figure above it. Use it for steps done and for usage against a limit.\n\n## Never\n\n- `font-weight <= 800`: headings are heavy, nothing is black.\n- `font-size >= 13px`: meta, badges and labels are the smallest text.\n- `font-size <= 56px`: the hero title is the largest text.\n- `font-families <= 3`: a display sans, a text sans and monospace for code.\n- `line-height <= 1.7`: body text is set at 1.62.\n- `uppercase-text <= 0%`: navigation, buttons and labels are in sentence case.\n- `text-shadow = none`: text is flat, also on the gradient.\n- `animation = none`: nothing moves by itself; only hover states ease.\n- `border-width <= 2px`: borders are hairlines; 2px marks the current link and tab.\n- `border-radius <= 36px`: cards are 20px and the largest blocks 36px; only pills and circles are rounder.\n- `box-shadow-blur <= 90px`: shadows are low and soft but end at 90px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new kind of post is another `.ds-grid__cell` with its own fill and icon; a new part of an article is a card (`.ds-panel`) in the side column or a block in the text column; anything that lists posts is a `.ds-list` in a card with the pagination in a `.ds-table__foot`. Keep the gradient for the featured story, the pull quote, the newsletter card and the page header tile, with text in `--color-inverse-text` and only the `--inverse` and `--ghost` buttons on it; the four fills take an icon or initials only. Keep corners, shadows and borders on their tokens, spacing on the `--space-*` scale, and note any one-off `color-mix()` shade next to its rule.\n", "components.css": ":root {\n --size-menu: 190px;\n --size-tip: 220px;\n --size-page: 1120px;\n --size-nav: 72px;\n --size-mark: 34px;\n --size-icon: 44px;\n --size-control: 38px;\n --size-dialog: 460px;\n --size-art: 168px;\n --size-avatar: 40px;\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: 80px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n margin: 0;\n padding: 0;\n min-height: 100vh;\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/* brand: the mark on a tile dressed like the primary button */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: inherit;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n letter-spacing: var(--heading-tracking);\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-brand__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 35%, transparent);\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n max-width: 68ch;\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\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}\n.ds-prose p {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-top: var(--space-1);\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 border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n color: var(--color-text);\n font-size: var(--text-large);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--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 padding: 0;\n list-style: none;\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-3) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n cursor: pointer;\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 transform: translateY(calc(var(--space-1) * -0.25));\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: none;\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-border);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n border-color: color-mix(in srgb, var(--color-inverse-text) 55%, transparent);\n background: transparent;\n color: var(--color-inverse-text);\n box-shadow: none;\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n}\n.ds-button--small {\n padding: var(--space-2) var(--space-4);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled,\n.ds-button.is-disabled:hover {\n border-color: transparent;\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n box-shadow: none;\n text-shadow: none;\n transform: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(var(--space-8) + var(--space-6));\n border-radius: var(--radius-panel);\n line-height: var(--line-body);\n resize: vertical;\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}\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 font-weight: var(--weight-ui);\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 color: var(--color-text);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n width: var(--space-4);\n height: var(--space-4);\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-top: var(--space-2);\n}\n\n/* table */\n.ds-table__wrap {\n max-width: 100%;\n overflow-x: auto;\n}\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--text-ui);\n}\n.ds-table th {\n padding: var(--space-3) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: left;\n white-space: nowrap;\n}\n.ds-table td {\n padding: var(--space-3) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__title {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\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-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n border-bottom: 0;\n}\n.ds-list__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-list__title {\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 text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text);\n font-size: var(--text-ui);\n}\n.ds-list__meta {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: the white card with the soft wide shadow */\n.ds-panel {\n min-width: 0;\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-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-4) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__title {\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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n font-size: var(--text-ui);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.7;\n white-space: nowrap;\n vertical-align: middle;\n}\n.ds-badge--alt {\n background: color-mix(in srgb, var(--color-accent-alt) 18%, var(--color-surface));\n color: color-mix(in srgb, var(--color-accent-alt) 60%, var(--color-heading));\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));\n color: color-mix(in srgb, var(--color-success) 60%, var(--color-heading));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n color: color-mix(in srgb, var(--color-warning) 50%, var(--color-heading));\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n color: color-mix(in srgb, var(--color-danger) 70%, var(--color-heading));\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* sidebar block */\n.ds-sidebar {\n min-width: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover {\n color: var(--color-link-hover);\n}\n.ds-sidebar__item.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* notice */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice--error {\n border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);\n background: var(--color-danger-surface);\n color: var(--color-danger);\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-3);\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}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n box-shadow: var(--shadow-control);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\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 font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item {\n color: inherit;\n opacity: 0.8;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__item::after {\n content: \"/\";\n margin-left: var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-bold);\n}\n\n/* dialog: shown open in the page flow on its dimmed backdrop */\n.ds-dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-7) var(--space-4);\n border-radius: var(--radius-page);\n background: var(--color-overlay);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\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-5) var(--space-5) 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-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n position: relative;\n display: inline-block;\n flex: none;\n width: calc(var(--text-large) * 0.8);\n height: calc(var(--text-large) * 0.8);\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-dialog__close::before, .ds-dialog__close::after {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 100%;\n height: max(var(--border-width), calc(var(--text-large) * 0.12));\n background: currentColor;\n transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n transform: rotate(-45deg);\n}\n.ds-dialog__body {\n padding: var(--space-3) var(--space-5) var(--space-5);\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-3);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n background: var(--color-surface-alt);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-6) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-empty__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: 50%;\n background: var(--color-fill-3);\n color: var(--color-inverse-text);\n}\n.ds-empty__icon svg {\n width: 50%;\n height: 50%;\n}\n.ds-empty__title {\n margin: var(--space-1) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n max-width: 44ch;\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* tabs */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-5);\n margin: 0;\n padding: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n list-style: none;\n}\n.ds-tabs__tab {\n display: inline-block;\n padding: var(--space-3) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n margin-bottom: calc(var(--border-width) * -1);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n border-bottom-color: var(--color-button);\n color: var(--color-heading);\n}\n\n/* shared small pieces: an icon tile on one of the four fills, a sparkline */\n.ds-tile {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: var(--radius-panel);\n background: var(--color-fill-1);\n color: var(--color-inverse-text);\n}\n.ds-tile svg {\n width: 55%;\n height: 55%;\n}\n\n@media (max-width: 640px) {\n .ds-table th,\n .ds-table td {\n padding: var(--space-2) var(--space-3);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n}\n\n/* ---- layout: company blog and customer stories ---- */\n.ds-wrap {\n width: 100%;\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n\n/* nav: a solid bar in the card colour over a hairline; the gradient starts below it */\n.ds-nav {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-panel);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n display: flex;\n align-items: stretch;\n gap: var(--space-7);\n min-height: var(--size-nav);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav .ds-brand {\n align-self: center;\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n align-items: stretch;\n gap: var(--space-6);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__links li {\n display: flex;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n border-top: var(--border-width-strong) var(--border-style) transparent;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#story:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#archive:target) .ds-nav__links .ds-nav__link[href=\"#archive\"],\n.ds-page:has(#subscribe:target) .ds-nav__links .ds-nav__link[href=\"#subscribe\"] {\n border-bottom-color: var(--color-button);\n color: var(--color-heading);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n}\n.ds-nav__actions .ds-nav__link {\n border: 0;\n}\n\n/* avatar and byline: who wrote it and when */\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n border-radius: 50%;\n background: var(--color-fill-3);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-avatar--1 { background: var(--color-fill-1); }\n.ds-avatar--2 { background: var(--color-fill-2); }\n.ds-avatar--4 { background: var(--color-fill-4); }\n.ds-avatar--plain {\n background: color-mix(in srgb, var(--color-inverse-text) 24%, transparent);\n}\n.ds-byline {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-byline__name {\n display: block;\n margin-bottom: var(--space-1);\n font-weight: var(--weight-bold);\n}\n.ds-byline__meta {\n opacity: 0.8;\n}\n.ds-byline--strip {\n justify-content: space-between;\n flex-wrap: wrap;\n padding: var(--space-4) 0;\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 color: var(--color-text);\n}\n.ds-byline--strip .ds-byline__name {\n color: var(--color-heading);\n font-size: var(--text-ui);\n}\n.ds-byline__who {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* hero: the featured story, one large gradient card */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);\n align-items: stretch;\n margin-top: var(--space-6);\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-hero__copy {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n padding: var(--space-7);\n}\n.ds-hero__kicker {\n margin: 0 0 var(--space-4);\n padding: var(--space-1) var(--space-3);\n border-radius: var(--radius-pill);\n background: color-mix(in srgb, var(--color-inverse-text) 16%, transparent);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n max-width: 44ch;\n margin: var(--space-4) 0 0;\n font-size: var(--text-large);\n line-height: var(--line-body);\n opacity: 0.9;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: var(--space-6) 0;\n}\n.ds-hero .ds-byline {\n margin-top: auto;\n}\n.ds-hero__art {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: var(--space-4);\n min-width: 0;\n padding: var(--space-7) var(--space-7) var(--space-7) var(--space-5);\n}\n.ds-hero__ring {\n position: absolute;\n top: -18%;\n right: -14%;\n width: 70%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n}\n.ds-hero__ring--small {\n top: auto;\n right: auto;\n bottom: -10%;\n left: -6%;\n width: 34%;\n}\n.ds-hero__card {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n box-shadow: var(--shadow-dialog);\n}\n.ds-hero__card--in {\n margin-left: var(--space-7);\n}\n.ds-hero__card--out {\n margin-right: var(--space-7);\n}\n.ds-hero__grow {\n flex: 1;\n min-width: 0;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-hero__line {\n display: block;\n width: 80%;\n height: var(--space-2);\n margin-top: var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n}\n.ds-hero__line--short {\n width: 50%;\n}\n.ds-hero__figure {\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: 1;\n letter-spacing: var(--heading-tracking);\n}\n.ds-hero__meter {\n display: block;\n height: var(--space-2);\n margin-top: var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-hero__meter-bar {\n display: block;\n width: 86%;\n height: 100%;\n border-radius: var(--radius-pill);\n background: var(--fill-inverse);\n}\n\n/* stats: figures set straight on the page, parted by hairlines */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n margin: var(--space-7) 0;\n}\n.ds-stat__item {\n padding-left: var(--space-5);\n border-left: var(--border-width-strong) var(--border-style) var(--color-fill-1);\n}\n.ds-stat__item:nth-child(2) { border-left-color: var(--color-fill-2); }\n.ds-stat__item:nth-child(3) { border-left-color: var(--color-fill-3); }\n.ds-stat__item:nth-child(4) { border-left-color: var(--color-fill-4); }\n.ds-stat__figure {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-stat__label {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n\n/* blocks of a view */\n.ds-main {\n padding: var(--space-7) 0 var(--space-8);\n}\n.ds-home {\n padding-bottom: var(--space-8);\n}\n.ds-block {\n margin-top: var(--space-7);\n}\n.ds-block__head {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n margin-bottom: var(--space-5);\n}\n.ds-block__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 text-transform: var(--heading-transform);\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n align-items: start;\n gap: var(--space-6);\n}\n.ds-cols--even {\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n}\n.ds-cols--side {\n grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n}\n.ds-cols--level {\n align-items: stretch;\n}\n.ds-panel--side {\n padding: var(--space-5);\n}\n\n/* tabs: filter chips */\n.ds-tabs {\n gap: var(--space-2);\n border-bottom: 0;\n}\n.ds-tabs__tab {\n margin: 0;\n padding: var(--space-1) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--fill-panel);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-tabs__tab.is-current {\n border-color: transparent;\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n\n/* grid: story cards, three across, each under a block of one fill */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n text-decoration: none;\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n box-shadow: var(--shadow-dialog);\n}\n.ds-grid__art {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-art);\n background: var(--color-fill-1);\n color: var(--color-inverse-text);\n overflow: hidden;\n}\n.ds-grid__art--2 { background: var(--color-fill-2); }\n.ds-grid__art--3 { background: var(--color-fill-3); }\n.ds-grid__art--4 { background: var(--color-fill-4); }\n.ds-grid__art--mix { background: var(--fill-inverse); }\n.ds-grid__art::before,\n.ds-grid__art::after {\n content: \"\";\n position: absolute;\n aspect-ratio: 1;\n border-radius: 50%;\n background: color-mix(in srgb, var(--color-inverse-text) 16%, transparent);\n}\n.ds-grid__art::before {\n top: -40%;\n left: -8%;\n width: 46%;\n}\n.ds-grid__art::after {\n right: -6%;\n bottom: -50%;\n width: 38%;\n}\n.ds-grid__art svg {\n position: relative;\n width: calc(var(--size-icon) * 1.5);\n height: calc(var(--size-icon) * 1.5);\n}\n.ds-grid__body {\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: var(--space-5);\n}\n.ds-kicker {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__title {\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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n flex: 1;\n margin: var(--space-2) 0 var(--space-4);\n font-size: var(--text-ui);\n}\n\n/* page header: a quiet band in the card colour with a gradient tile */\n.ds-page-header {\n padding: var(--space-6) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-panel);\n}\n.ds-page-header__inner {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n}\n.ds-page-header__row {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin-top: var(--space-4);\n}\n.ds-page-header__tile {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-icon) * 1.5);\n height: calc(var(--size-icon) * 1.5);\n border-radius: var(--radius-panel);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n box-shadow: var(--shadow-control);\n}\n.ds-page-header__tile svg {\n width: 50%;\n height: 50%;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\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: 60ch;\n margin: var(--space-1) 0 0;\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n gap: var(--space-3);\n}\n.ds-page-header .ds-breadcrumb {\n color: var(--color-text-muted);\n}\n\n/* article pieces */\n.ds-cover {\n position: relative;\n margin: 0;\n padding: var(--space-7);\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n overflow: hidden;\n}\n.ds-cover::after {\n content: \"\";\n position: absolute;\n top: -30%;\n right: -8%;\n width: 36%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n}\n.ds-cover__text {\n position: relative;\n max-width: 30ch;\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-cover__by {\n position: relative;\n margin: var(--space-3) 0 0;\n font-size: var(--text-small);\n opacity: 0.85;\n}\n.ds-facts {\n margin: 0;\n font-size: var(--text-ui);\n}\n.ds-facts__row {\n display: flex;\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-facts__row:last-child {\n border-bottom: 0;\n}\n.ds-facts__term {\n color: var(--color-text-muted);\n}\n.ds-facts__value {\n margin: 0;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n\n/* call to action: the newsletter card on the gradient */\n.ds-cta {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-6) var(--space-5);\n border-radius: var(--radius-panel);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n box-shadow: var(--shadow-panel);\n}\n.ds-cta__title {\n margin: 0;\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}\n.ds-cta__text {\n margin: 0 0 var(--space-2);\n font-size: var(--text-ui);\n opacity: 0.9;\n}\n\n/* footer: one band, the brand at the left and a row of links at the right */\n.ds-footer {\n padding: var(--space-7) 0 var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-ui);\n}\n.ds-footer__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-5) var(--space-7);\n}\n.ds-footer__about {\n max-width: 40ch;\n margin: var(--space-3) 0 0;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-6);\n margin: var(--space-2) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: inherit;\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n opacity: 0.8;\n}\n.ds-footer__legal {\n margin: var(--space-6) 0 0;\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 22%, transparent);\n font-size: var(--text-small);\n opacity: 0.8;\n}\n\n@media (max-width: 960px) {\n .ds-hero,\n .ds-cols,\n .ds-cols--even,\n .ds-cols--side {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero__art {\n padding: 0 var(--space-7) var(--space-7);\n }\n .ds-grid,\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media (max-width: 640px) {\n .ds-wrap {\n padding: 0 var(--space-4);\n }\n .ds-nav__inner {\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n }\n .ds-nav__signin {\n display: none;\n }\n .ds-hero {\n margin-top: var(--space-4);\n }\n .ds-hero__copy {\n padding: var(--space-5);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__art {\n padding: 0 var(--space-5) var(--space-5);\n }\n .ds-hero__card--in {\n margin-left: var(--space-5);\n }\n .ds-hero__card--out {\n margin-right: var(--space-5);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stat {\n gap: var(--space-5) var(--space-4);\n margin: var(--space-6) 0;\n }\n .ds-stat__item {\n padding-left: var(--space-3);\n }\n .ds-stat__figure {\n font-size: var(--text-h2);\n }\n .ds-main {\n padding: var(--space-5) 0 var(--space-7);\n }\n .ds-page-header {\n padding: var(--space-5) 0;\n }\n .ds-page-header__inner {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-page-header__title {\n font-size: var(--text-h2);\n }\n .ds-page-header__tile {\n display: none;\n }\n .ds-cover {\n padding: var(--space-5);\n }\n .ds-byline--strip {\n gap: var(--space-3);\n }\n}\n\n/* components shared across the era: menu, switch, tooltip, accordion, progress, avatar */\n.ds-menu {\n position: relative;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-1) var(--space-3);\n border-radius: var(--radius-control);\n color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n list-style: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border: calc(var(--text-small) * 0.3) solid transparent;\n border-top: calc(var(--text-small) * 0.36) solid currentColor;\n border-bottom-width: 0;\n font-size: var(--text-small);\n vertical-align: calc(var(--text-small) * 0.14);\n}\n.ds-menu__button:focus-visible,\n.ds-menu__button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 5;\n min-width: var(--size-menu);\n margin: var(--space-2) 0 0;\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-dialog);\n list-style: none;\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n.ds-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.ds-switch__track {\n position: relative;\n flex: none;\n width: calc(var(--space-5) * 1.75);\n height: var(--space-5);\n border-radius: var(--radius-pill);\n background: var(--color-border-strong);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: calc(var(--space-1) / 2);\n left: calc(var(--space-1) / 2);\n width: calc(var(--space-5) - var(--space-1));\n height: calc(var(--space-5) - var(--space-1));\n border-radius: var(--radius-pill);\n background: var(--color-button-text);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n background: var(--fill-button);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n left: calc(var(--space-5) * 0.75 + var(--space-1) / 2);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: help;\n}\n.ds-tooltip--mark {\n width: calc(var(--space-4) + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n border-radius: 50%;\n background: var(--color-surface-strong);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-tooltip:focus-visible,\n.ds-tooltip.is-focus {\n outline: var(--focus-ring);\n}\n.ds-tooltip__text {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n display: none;\n width: max-content;\n max-width: var(--size-tip);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-panel);\n background: var(--color-heading);\n color: var(--color-surface);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n text-align: left;\n white-space: normal;\n box-shadow: var(--shadow-control);\n transform: translateX(-50%);\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus .ds-tooltip__text,\n.ds-tooltip.is-open .ds-tooltip__text {\n display: block;\n}\n.ds-progress {\n display: block;\n height: var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n border-radius: var(--radius-pill);\n background: var(--fill-inverse);\n}\n.ds-meter {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n font-size: var(--text-small);\n}\n.ds-meter + .ds-meter {\n margin-top: var(--space-4);\n}\n.ds-progress__bar--86 { width: 86%; }\n.ds-tooltip--mark {\n margin-left: var(--space-1);\n vertical-align: middle;\n}\n.ds-tooltip--start .ds-tooltip__text {\n left: 0;\n transform: none;\n}\n.ds-form__check > .ds-switch {\n flex: 1;\n min-width: 0;\n}\n.ds-nav__links .ds-menu__button {\n display: flex;\n align-items: center;\n border-top: var(--border-width-strong) var(--border-style) transparent;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-nav__links .ds-menu__list {\n right: auto;\n left: 0;\n}\n\n/* phone: the links fold into a menu behind a button; the brand and one action stay in the bar */\n.ds-nav__menu {\n display: none;\n}\n.ds-nav__menu > .ds-menu__button {\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__menu > .ds-menu__button::before {\n content: \"\";\n box-sizing: border-box;\n flex: none;\n width: var(--text-ui);\n height: calc(var(--text-ui) * 0.75);\n border-top: max(var(--border-width), calc(var(--text-ui) * 0.12)) solid currentColor;\n border-bottom: max(var(--border-width), calc(var(--text-ui) * 0.12)) solid currentColor;\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat;\n}\n.ds-nav__menu > .ds-menu__button::after {\n content: none;\n}\n.ds-nav__menu .ds-menu__link {\n border-left: var(--border-width-strong) var(--border-style) transparent;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__menu .ds-menu__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__menu .ds-menu__link[href=\"#home\"],\n.ds-page:has(#story:target) .ds-nav__menu .ds-menu__link[href=\"#story\"],\n.ds-page:has(#archive:target) .ds-nav__menu .ds-menu__link[href=\"#archive\"],\n.ds-page:has(#subscribe:target) .ds-nav__menu .ds-menu__link[href=\"#subscribe\"] {\n border-left-color: var(--color-accent);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n/* the full bar needs about 1000px with the widest type set, so it folds before that */\n@media (max-width: 1040px) {\n .ds-nav__menu {\n display: block;\n flex: none;\n }\n .ds-nav > .ds-nav__links,\n .ds-nav__inner > .ds-nav__links {\n display: none;\n }\n .ds-nav__inner {\n justify-content: space-between;\n gap: var(--space-4);\n }\n .ds-nav__actions {\n margin-left: auto;\n }\n}\n.ds-nav__links li:has(> .ds-menu) {\n align-items: center;\n}\n.ds-nav__menu {\n align-self: center;\n}\n@media (max-width: 640px) {\n .ds-nav__inner {\n gap: var(--space-3);\n }\n .ds-nav__menu > .ds-menu__button {\n padding: var(--space-2);\n font-size: var(--text-large);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: SaaS gradient blog and customer stories specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n About the product\n Subscribe\n
\n
\n \n \n
\n
\n
\n\n
\n
\n
\n
\n
\n

Customer story

\n

How a six-person shop answers 900 letters a week

\n

Fennel and Rye moved their support out of three private mailboxes and into one shared inbox. Replies now go out within the hour.

\n
\n Read the story\n All posts\n
\n
\n NA\n Nadia Aalto12 March, 7 minute read\n
\n
\n
\n \n \n
\n FR\n Where is my order?\n Waiting\n
\n
\n JO\n On its way, arriving Thursday\n Answered\n
\n
\n Answered within the hour\n 86%\n
\n
\n
\n\n
\n

2,400

teams share an inbox on chronoskin

\n

41 min

median time to a first reply

\n

96%

of letters closed without a hand-over

\n

58

stories told here since 2017

\n
\n\n
\n

Latest stories

\n \n
\n
\n \n \n \n Shops\n A shared inbox for a shop that never closes\n Three time zones, one queue and a rule that nobody answers the same letter twice.\n NANadia Aalto12 March\n \n \n \n \n \n Agencies\n Twelve clients, twelve voices, one team\n How a studio keeps each client's tone apart with saved replies and a style note per mailbox.\n TBTove Brandt27 February\n \n \n \n \n \n Software\n What a year of tagged letters taught a product team\n Tags turned a pile of complaints into a ranked list of what to build next.\n RIRafael Ibarra14 February\n \n \n \n \n \n Charities\n Forty volunteers and a helpline that answers\n Rotas, hand-over notes and a gentle nudge when a letter has waited a day.\n SOSunniva Okoro30 January\n \n \n \n \n \n Shops\n From two days to two hours before the winter rush\n A bicycle workshop rebuilt its queue in October and kept its weekends in December.\n NANadia Aalto16 January\n \n \n \n \n \n Agencies\n Hiring the fourth person without losing the thread\n A new colleague read six months of history in a week and answered alone in two.\n TBTove Brandt8 January\n \n \n
\n\n
\n
\n

From the blog

All posts
\n
\n \n
\n
\n
\n

One letter, every other Thursday

\n

The newest story and two posts worth your tea break. 14,000 readers, no tracking pixels.

\n Get the newsletter\n Read a past issue\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Customer stories
    3. \n
  3. Fennel and Rye
    4. \n
\n
\n \n
\n

How a six-person shop answers 900 letters a week

\n

A customer story from Fennel and Rye, bakers by post.

\n
\n
\n
\n
\n Get stories by email\n
\n
\n
\n\n
\n
\n
\n
\n \n NA\n Nadia AaltoWrites about small teams. 12 March, 7 minute read\n \n ShopsShared inbox\n
\n
\n

We stopped asking who had answered what. The inbox knows, so we can bake.

\n

Jonas Ostrem, co-owner

\n
\n
\n

Three mailboxes, one queue

\n

Fennel and Rye post sourdough kits to four thousand kitchens. Until last spring every question about them landed in one of three private mailboxes.

\n

Two people would answer the same letter, or nobody would. On Mondays the owners spent the morning forwarding mail to each other. The move to chronoskin took one afternoon and a pot of coffee.

\n

What they changed

\n

All three addresses now feed one shared inbox. A letter belongs to whoever opens it first, and everyone else sees a small answering mark beside it.

\n

Rules they wrote on day one

\n
    \n
  • Anything about a late parcel is tagged delivery and goes to the top.
    • \n
  • A letter that has waited four hours turns amber for the whole team.
    • \n
  • Recipes and praise are answered on Fridays, together, with cake.
    • \n
\n

What they left alone

\n

They kept their own wording. Saved replies hold the facts, such as the returns address, and each baker writes the greeting.

\n
\n
\n

Before and after

Six months in
\n
\n \n \n \n \n \n \n \n \n \n \n \n
MeasureBeforeAfterChange
Letters a week610900+48%
Median first reply ?Half of all letters were answered sooner than this.19 h52 min-95%
Answered twice by mistake341-97%
Hours on mail each week4631-33%
People answering36+3
\n
\n
\n
\n
\n
\n

At a glance

\n
\n
\n
Trade
Baking kits by post
\n
Team
6 people
\n
Customer since
April 2018
\n
Plan
Team
\n
\n
\n
\n
\n

What they use

\n
\n

The parts of chronoskin in this story, and how far along the shop is with each.

\n
\n Shared inbox\n Saved replies\n Rules: in use\n Reports: on trial\n Old mailboxes: closed\n
\n
\n
\n
\n

Stories like this one, by email

\n

One customer story and two posts, every other Thursday.

\n Get the newsletter\n
\n
\n

More from Nadia

\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Blog
    3. \n
  3. All posts
    4. \n
\n
\n \n
\n

The chronoskin blog

\n

Notes on answering customers well, and on building the tool we do it with.

\n
\n
\n
\n
\n Subscribe\n
\n
\n
\n\n
\n
\n
\n \n \n
\n
\n \n
\n
\n \n
\n
\n Posts 1 to 5 of 124\n \n
\n
\n
\n \n

Nothing under Events yet

\n

We have not written up a meet-up or a talk so far. The newsletter will say when we do.

\n Tell me when\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Blog
    3. \n
  3. Newsletter
    4. \n
\n
\n \n
\n

One letter, every other Thursday

\n

The newest customer story and two posts from the blog. Leave whenever you like.

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

Your subscription

Read a past issue
\n
\n
\n
\n

Nearly there. We send one message to confirm the address, then nothing until Thursday.

\n

Not subscribed yet. The address below needs another look.

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n This address has no ending, such as .com or .no.\n
\n
\n \n \n You can change this from the foot of any issue.\n
\n
\n \n \n
\n
\n
\n
\n \n Back to the blog\n \n \n
\n
\n
\n
\n
\n
\n

In the last issue

No. 61
\n
\n \n
\n
\n
\n
\n

Unsubscribe from everything?

\n

You will get no more stories, posts or release notes from chronoskin. Your address is deleted within a day.

\n
\n Stay subscribed\n Unsubscribe\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.saas-gradient.blog.s04.p05.t08.u06\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"saas-gradient\",\n \"years\": [\n 2016,\n 2021\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-sg-4586\",\n \"short\": \"v1-sg-4586\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #0b1430;\n --color-canvas: #0b1430;\n --color-surface: #141f45;\n --color-surface-alt: #1a2854;\n --color-surface-strong: #24346a;\n --color-bar: #1a2854;\n --color-bar-text: #c5d1f2;\n --color-bar-alt: #070d22;\n --color-bar-alt-text: #9aa9d4;\n --color-inverse: #2456e8;\n --color-inverse-text: #ffffff;\n --color-text: #b4c0e4;\n --color-text-muted: #7f8dba;\n --color-heading: #ffffff;\n --color-heading-alt: #ffd23f;\n --color-link: #6ea0ff;\n --color-link-quiet: #a5b3dc;\n --color-link-visited: #9c8cf5;\n --color-link-hover: #ffd23f;\n --color-link-active: #ffffff;\n --color-border: #2a3a70;\n --color-border-strong: #3d5096;\n --color-border-muted: #1f2d5c;\n --color-accent: #2f6bff;\n --color-accent-text: #ffffff;\n --color-accent-alt: #ffd23f;\n --color-fill-1: #3b7bff;\n --color-fill-2: #1c3fd1;\n --color-fill-3: #f0a81c;\n --color-fill-4: #ff5fa2;\n --color-button: #ffd23f;\n --color-button-text: #0b1430;\n --color-button-hover-text: #0b1430;\n --color-button-secondary: #1a2854;\n --color-button-secondary-text: #ffffff;\n --color-input: #0f1a3c;\n --color-input-text: #ffffff;\n --color-input-border: #3d5096;\n --color-disabled: #1f2d5c;\n --color-disabled-text: #6373a6;\n --color-danger: #ff6b7a;\n --color-danger-surface: #3a1a33;\n --color-success: #3ddc97;\n --color-warning: #ffb84d;\n --color-notice: #162e6e;\n --color-notice-text: #b9d0ff;\n --color-focus: #6ea0ff;\n --color-shadow: rgb(0 0 0 / 0.35);\n --color-overlay: rgb(4 8 24 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: \"Open Sans\", \"Segoe UI\", Tahoma, sans-serif;\n --font-heading: Montserrat, \"Avenir Next\", Avenir, \"Century Gothic\", sans-serif;\n --font-ui: Montserrat, \"Avenir Next\", Avenir, \"Century Gothic\", sans-serif;\n --font-mono: \"Roboto Mono\", Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 14px;\n --text-large: 20px;\n --text-display: 56px;\n --text-h1: 38px;\n --text-h2: 26px;\n --text-h3: 18px;\n --line-body: 1.62;\n --line-heading: 1.22;\n --line-display: 1.08;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 800;\n --weight-display: 800;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: -0.4px;\n --display-tracking: -1.6px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 12px;\n --radius-panel: 20px;\n --radius-pill: 100px;\n --radius-page: 36px;\n --shadow-panel: 0 24px 48px -24px var(--color-shadow);\n --shadow-control: 0 6px 14px -4px var(--color-shadow);\n --shadow-control-hover: 0 12px 22px -6px var(--color-shadow);\n --shadow-control-pressed: 0 1px 2px var(--color-shadow);\n --shadow-dialog: 0 60px 90px -40px var(--color-shadow), 0 0 0 1px var(--color-border-muted);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: linear-gradient(105deg, var(--color-fill-1), var(--color-fill-2));\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) 86%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid color-mix(in srgb, var(--color-focus) 60%, transparent);\n --transition: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out, opacity 0.25s ease-out, transform 0.25s ease-out;\n --backdrop-blur: 0px;\n}\n" } }