{ "id": "v1-sg-6856", "long_id": "v1.saas-gradient.portal.s06.p08.t05.u06", "name": "SaaS gradient integrations directory", "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": "portal", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "This is the integrations directory of a start-up product of 2016 to 2021: a straight band of two-colour gradient carries the navigation, the claim, a small cloud of app marks drawn as initials on white tiles and three figures along its foot, and below it the catalogue stands in two columns, categories at the left and app tiles under a search field and filter chips at the right. An app's own page keeps a shorter band with its mark beside the title and shows the install dialog beside the description; a gradient card with a few lines of code invites developers. Most products with an API had such a marketplace by 2018.", "url": "https://chrono.skin/s/v1-sg-6856", "preview_url": "https://chrono.skin/s/v1-sg-6856/specimen.html", "files": { "STYLE.md": "# SaaS gradient integrations directory\n\n## Summary\n\nThis is the integrations directory of a start-up product of 2016 to 2021: a straight band of two-colour gradient carries the navigation, the claim, a small cloud of app marks drawn as initials on white tiles and three figures along its foot, and below it the catalogue stands in two columns, categories at the left and app tiles under a search field and filter chips at the right. An app's own page keeps a shorter band with its mark beside the title and shows the install dialog beside the description; a gradient card with a few lines of code invites developers. Most products with an API had such a marketplace by 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` (1160px) wide with `--space-5` side padding. The band and the footer run the full width of the window.\n- Navigation is one transparent row, `--size-nav` (70px) tall, lying on the gradient: the `.ds-brand`, a `.ds-nav__tag` naming the directory behind a hairline, then at the right three links (the current one with a `--border-width-strong` edge under it), the sign-in link and one small button. The hero or the page header is pulled up under it by a negative margin of the same height. The band's lower edge is straight.\n- The home view stacks: `.ds-hero`, in two columns (7 to 5): title, one paragraph and two buttons at the left, six `.ds-hero__app` tiles at the right, and `.ds-stat` along the foot of the band; then `.ds-main` with `.ds-cols--side` (1 to 4): the categories `.ds-sidebar` and a small card at the left; at the right a `.ds-toolbar` with the `.ds-tabs`, a second with the `.ds-search` field and the `.ds-chips`, the `.ds-grid` of six app tiles three across, a `.ds-gridfoot` with the count and the pagination, and the developers' `.ds-cta`. Things in a column are `--space-5` apart.\n- Inner pages have no hero. They open with `.ds-page-header`: the same band, shorter, holding the breadcrumb, a `.ds-page-header__row` (an app's large mark, if the page is about one app, beside the title and one line of text) and at most two buttons at the right. `.ds-main` follows: `.ds-cols` (2 to 1) for an app, with the tabs on the head of the first card; `--side` (1 to 4) with a `.ds-sidebar` at the left for the workspace's own lists; `--even` (7 to 5) for a form.\n- Views. The specimen is the app directory of a contacts and deals product, with four views. `home` is the directory. `app` is one app: its description under tabs and the table of what it syncs, beside the open install dialog, its details and labels, and related links. `installed` lists the workspace's apps in a table under two notices, with an empty list of private apps. `build` is the form that registers an app, with its buttons, beside the developer guides and a code sample.\n- Below 960px the hero, the columns and the code card stack, the categories wrap into rows and tiles 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 sign-in link and the one `.ds-button--inverse`; the menu lists every view and marks the one showing. `.ds-nav__tag` is hidden below 860px; below 640px `.ds-nav__signin` and the `.ds-nav__long` part of the button are hidden too, tiles are one column, the search field takes a full row and the figures stack their labels. 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), `--space-3` 12px (mark to name, button padding, toolbar gaps), `--space-4` 16px (hero tiles, list rows, between form rows), `--space-5` 24px (card padding, grid gap, page gutter, figures), `--space-6` 32px (column gap, top of the body, the code card), `--space-7` 52px (hero padding, footer), `--space-8` 84px (between the hero's columns, foot of a view).\n- Other sizes: `--size-mark` 32px, `--size-logo` 52px and `--size-logo-large` 76px (app marks), `--size-icon` 44px, `--size-control` 36px (pagination), `--size-search` 280px, `--size-dialog` 420px.\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\nThe conventions are the era's, as its first layout sets them out.\n\n- The gradient is `--fill-inverse` (from `--color-fill-1` to `--color-fill-2`); text on it is `--color-inverse-text`. It fills the side panel and the closing card of the last step. Only `.ds-button--inverse` and `.ds-button--ghost` stand on it. `--color-inverse` is the number in the ring of the current step.\n- `--color-fill-1` to `--color-fill-4` colour the icon tiles of the plans and the avatars. A fill carries an icon or initials in `--color-inverse-text`, never running text.\n- `--color-page` (through `--fill-page`) is the working column, `--color-surface` (through `--fill-panel`) the cards, `--color-surface-alt` the dialog foot, a hovered table row and the empty state, `--color-surface-strong` the current sidebar row, the quiet badge and inline code.\n- `--fill-bar` with `--color-bar-text` is the table head. `--fill-bar-alt` with `--color-bar-alt-text` is the footer line.\n- Text is `--color-text` (`#b4c0e4`), meta and the top line `--color-text-muted`, headings, figures and prices `--color-heading` (white); sidebar titles and h3 in prose are `--color-heading-alt` (yellow).\n- `--color-button` (yellow `#ffd23f`, midnight text) is the one action colour off the gradient: the primary button, the edge of the chosen plan, the edge under the current tab and the current page number. 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- Links are `--color-link`, medium weight, underlined only on hover. `--color-success` is the tick of a plan's points and the dot of the top line.\n- Badges and notices follow the era's rules: `--fill-accent` for the default badge, tints mixed into `--color-surface` for `--alt` and the status variants, `--color-notice` with `--color-notice-text`, the error notice in `--color-danger` on `--color-danger-surface`.\n- One sans for text and controls (`--font-body`, `--font-ui`: IBM Plex Sans, then the system face), a second for headings (`--font-heading`: Rubik); the references used commercial grotesques. `--font-mono` for code. `--text-base` 16px at `--line-body` 1.5; `--text-ui` 14px (controls, tables, card text); `--text-small` 13px (hints, meta, badges); `--text-large` 19px (leads, the quote); `--text-display` 52px (the first question); `--text-h1` 34px (step titles, figures, prices, the panel title); `--text-h2` 24px; `--text-h3` 17px (card titles).\n- Headings are heavy and tight: `--weight-heading` 600, `--weight-display` 700 with `--display-tracking` -1.5px. `--weight-ui` is 500. Nothing is uppercase.\n- Surface: `--radius-control` 8px, `--radius-panel` 12px (cards, the block of the current step), `--radius-pill` 6px (badges), `--radius-page` 20px (the quote, the closing card, the dialog's backdrop). `--shadow-panel` is a faint light edge at the top of a card over one deep, dark shadow; `--shadow-dialog` adds a hairline ring and also marks the chosen plan. `--fill-page` puts a glow of `--color-surface-alt` at the top of the page and `--fill-inverse` a highlight in the corner of the gradient. `--border-width-strong` 2px is the ring of a step, the edge of a plan card and the edge under the current tab.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: the washes on the gradient (`--color-inverse-text` at 10 to 24%, ring borders at 50%, the ghost border at 55%), tinted badges, the width of the working column (`--size-page` plus its padding). Opacity 0.8 to 0.9 dims secondary text on the gradient.\n\n## Components\n\n- `.ds-page`: on ``. Sets font, text colour and `--fill-page`.\n- `.ds-wrap`: the centred content column inside a band.\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 transparent row on the band. `.ds-nav__inner` centres it; `.ds-nav__tag` names the section; `.ds-nav__links` holds `.ds-nav__link`, the current one edged (`is-current`); `.ds-nav__actions` holds the sign-in link (`.ds-nav__signin`) and one `.ds-button--inverse ds-button--small`. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-logo`: an app's mark, two letters on `--color-fill-1` (`--2`, `--3`, `--4`, `--mix` for the gradient; `--round` for a circle; `--large` on an app's page; `--card` adds a rim and a shadow on the band).\n- `.ds-hero`: the band of the home view. `.ds-hero__inner` is two columns: the `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions` (one `--inverse`, one `--ghost` button), and `.ds-hero__art`, six `.ds-hero__app` tiles each a `.ds-logo` over `.ds-hero__line` bars (`--short`). One per site.\n- `.ds-stat`: the row of three figures along the foot of the band, parted by hairlines; each `.ds-stat__item` sets a `.ds-stat__figure` beside its `.ds-stat__label`.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: the same band, shorter. `.ds-page-header__inner` holds the breadcrumb, a `.ds-page-header__row` with an optional large mark, `.ds-page-header__title` and `.ds-page-header__text`, and `.ds-page-header__actions`.\n- `.ds-main`: the body of a view. `.ds-cols`: main and side column, 2 to 1; `--side` 1 to 4, `--even` 7 to 5. `.ds-stack` stacks things 24px apart.\n- `.ds-toolbar`: a row above the grid; `.ds-toolbar__count` is a small count in it.\n- `.ds-tabs`: a row of `.ds-tabs__tab` over a hairline; the current one (`is-current`) has an edge in `--color-button`. On an app's page it sits on the head of the first card, inside `.ds-panel__tabs`.\n- `.ds-search`: the search field: a `.ds-search__icon` laid over a `.ds-form__input`.\n- `.ds-chips`: filter chips, `.ds-chip` pills; a chosen one (`is-current`) is tinted and ticked.\n- `.ds-grid`: app tiles, three across. Each `.ds-grid__cell` is a link: `.ds-grid__head` (a `.ds-logo`, `.ds-grid__title`, `.ds-grid__kind`), `.ds-grid__text` and `.ds-grid__foot` with a badge and the installs. `is-hover` deepens the shadow. `.ds-gridfoot` under the grid holds the count and the pagination.\n- `.ds-cta`: the developers' card on the gradient: `.ds-cta__title`, `.ds-cta__text`, the two gradient buttons and a `.ds-code` block.\n- `.ds-code`: a few lines of code on a card: `.ds-code__line`, with `.ds-code__key` for the method and `.ds-code__ok` for a good status.\n- `.ds-facts`: pairs of `.ds-facts__term` and `.ds-facts__value` in `.ds-facts__row`, for an app's details.\n- `.ds-points`: ticked `.ds-points__item` lines, for what an app may do.\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 bold, softly rounded. 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 the card.\n- `.ds-list`: rows 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`: the categories: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` with an optional `.ds-sidebar__count`; the current row (`is-current`) is filled.\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`; `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`. It takes the colour of the band.\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`. The install dialog lists permissions as `.ds-points`.\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 marks that are icons, not initials.\n- `.ds-footer`: the closing band on `--fill-bar-alt`: `.ds-footer__cols` with the brand and a `.ds-footer__about` line, then columns of `.ds-footer__title` and `.ds-footer__list` (two across, `--one` for a single column) of `.ds-footer__link`; `.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- `.ds-avatar`: a person as initials on a round fill (`--1`, `--2`, `--4` change the fill); `.ds-who` sets it beside a name. Use it wherever a named person appears.\n\n## Never\n\n- `font-weight <= 700`: titles are bold, never black.\n- `font-size >= 13px`: hints, meta and badges are the smallest text.\n- `font-size <= 52px`: the first question is the largest text.\n- `font-families <= 3`: a heading face, a body sans and monospace for code.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `uppercase-text <= 0%`: steps, 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 app is another `.ds-grid__cell` with a `.ds-logo` of two letters on one of the fills; a new filter is a `.ds-chip`; a new list of the workspace is a view with the `.ds-sidebar` at the left and a table in a `.ds-panel` at the right. Anything that asks for consent is a `.ds-dialog` with its permissions as `.ds-points`. Text goes on cards, on the page and, in `--color-inverse-text`, on the gradient; the four fills take initials or an icon only, and only the `--inverse` and `--ghost` buttons stand on the gradient. 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-avatar: 32px;\n --size-page: 1160px;\n --size-nav: 70px;\n --size-nav-tall: 112px;\n --size-mark: 32px;\n --size-icon: 44px;\n --size-logo: 52px;\n --size-logo-large: 76px;\n --size-control: 36px;\n --size-dialog: 420px;\n --size-search: 280px;\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: 52px;\n --space-8: 84px;\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: integrations directory ---- */\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: one row lying on the straight gradient band */\n.ds-nav {\n position: relative;\n z-index: 2;\n height: var(--size-nav);\n color: var(--color-inverse-text);\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-5);\n height: 100%;\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__tag {\n padding-left: var(--space-4);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 40%, transparent);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n opacity: 0.85;\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n justify-content: flex-end;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n opacity: 0.85;\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.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(#app:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#installed:target) .ds-nav__links .ds-nav__link[href=\"#installed\"],\n.ds-page:has(#build:target) .ds-nav__links .ds-nav__link[href=\"#build\"] {\n border-bottom-color: var(--color-inverse-text);\n opacity: 1;\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding-left: var(--space-2);\n}\n\n/* logo: an app's mark drawn as initials on one of the fills */\n.ds-logo {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-logo);\n height: var(--size-logo);\n border-radius: var(--radius-panel);\n background: var(--color-fill-1);\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n}\n.ds-logo--2 { background: var(--color-fill-2); }\n.ds-logo--3 { background: var(--color-fill-3); }\n.ds-logo--4 { background: var(--color-fill-4); }\n.ds-logo--mix { background: var(--fill-inverse); }\n.ds-logo--round { border-radius: 50%; }\n.ds-logo--large {\n width: var(--size-logo-large);\n height: var(--size-logo-large);\n font-size: var(--text-h2);\n}\n.ds-logo--card {\n border: var(--border-width-strong) var(--border-style) var(--color-inverse-text);\n box-shadow: var(--shadow-dialog);\n}\n\n/* hero: the straight gradient band, pulled up under the nav */\n.ds-hero {\n margin-top: calc(var(--size-nav) * -1);\n padding-top: calc(var(--size-nav) + var(--space-7));\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-hero__inner {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n align-items: center;\n gap: var(--space-8);\n padding-bottom: var(--space-7);\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: 50ch;\n margin: var(--space-4) 0 0;\n font-size: var(--text-large);\n opacity: 0.9;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin-top: var(--space-6);\n}\n.ds-hero__art {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-hero__app {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-hero__app:nth-child(3n + 2) {\n transform: translateY(var(--space-5));\n}\n.ds-hero__line {\n display: block;\n width: 100%;\n height: var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n}\n.ds-hero__line--short {\n width: 60%;\n}\n\n/* stats: three figures along the foot of the band */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 28%, transparent);\n}\n.ds-stat__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-5) var(--space-5) var(--space-5) 0;\n}\n.ds-stat__item + .ds-stat__item {\n padding-left: var(--space-5);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 28%, transparent);\n}\n.ds-stat__figure {\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-stat__label {\n margin: 0;\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n opacity: 0.85;\n}\n\n/* page header: the same band, shorter, with the app's mark beside the title */\n.ds-page-header {\n margin-top: calc(var(--size-nav) * -1);\n padding: calc(var(--size-nav) + var(--space-5)) 0 var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\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-5);\n margin-top: var(--space-4);\n}\n.ds-page-header__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n max-width: 58ch;\n margin: var(--space-1) 0 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n opacity: 0.9;\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n gap: var(--space-3);\n}\n\n/* body of a view: the categories at the left, the work at the right */\n.ds-main {\n padding: var(--space-6) 0 var(--space-8);\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--side {\n grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);\n}\n.ds-cols--even {\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-panel--side {\n padding: var(--space-5);\n}\n\n/* toolbar: tabs with a count, then the search field and the filter chips */\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-4);\n}\n.ds-toolbar__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-toolbar .ds-tabs {\n flex: 1;\n}\n.ds-search {\n position: relative;\n flex: 0 1 var(--size-search);\n min-width: 0;\n}\n.ds-search__icon {\n position: absolute;\n top: 50%;\n left: var(--space-4);\n width: var(--space-4);\n height: var(--space-4);\n color: var(--color-text-muted);\n transform: translateY(-50%);\n}\n.ds-search .ds-form__input {\n padding-left: calc(var(--space-4) * 2 + var(--space-3));\n}\n.ds-chips {\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-1) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n background: var(--fill-panel);\n color: var(--color-link-quiet);\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 text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-chip:hover,\n.ds-chip.is-hover {\n border-color: var(--color-accent);\n color: var(--color-link-hover);\n}\n.ds-chip.is-current {\n border-color: var(--color-accent);\n background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));\n color: color-mix(in srgb, var(--color-accent) 55%, var(--color-heading));\n}\n.ds-chip.is-current::before {\n content: \"\\2713\";\n}\n\n/* grid: app tiles, three across */\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 padding: var(--space-5);\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 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__head {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-grid__title {\n display: block;\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__kind {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n flex: 1;\n margin: var(--space-4) 0;\n font-size: var(--text-ui);\n}\n.ds-grid__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding-top: var(--space-3);\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.ds-gridfoot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* developers: a gradient card with a few lines of code */\n.ds-cta {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n align-items: center;\n gap: var(--space-6);\n padding: 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}\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: var(--space-2) 0 var(--space-4);\n font-size: var(--text-ui);\n opacity: 0.9;\n}\n.ds-code {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n box-shadow: var(--shadow-dialog);\n overflow-x: auto;\n}\n.ds-code__line {\n display: block;\n white-space: pre;\n}\n.ds-code__key {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-code__ok {\n color: var(--color-success);\n font-weight: var(--weight-bold);\n}\n\n/* app detail pieces */\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.ds-panel__tabs {\n padding: 0 var(--space-5);\n}\n.ds-dialog__body .ds-points {\n margin-top: var(--space-3);\n}\n.ds-points {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-points__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n}\n.ds-points__item::before {\n content: \"\\2713\";\n color: var(--color-success);\n font-weight: var(--weight-bold);\n}\n\n/* footer: the brand and two columns of links */\n.ds-footer {\n padding: var(--space-7) 0 var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-ui);\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);\n gap: var(--space-6);\n}\n.ds-footer__about {\n max-width: 36ch;\n margin: var(--space-3) 0 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n opacity: 0.7;\n}\n.ds-footer__list {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__list--one {\n grid-template-columns: minmax(0, 1fr);\n}\n.ds-footer__link {\n color: inherit;\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__inner,\n .ds-cols,\n .ds-cols--side,\n .ds-cols--even,\n .ds-cta {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero__inner {\n gap: var(--space-6);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-sidebar__list {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n }\n .ds-footer__cols {\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: 0 var(--space-4);\n }\n .ds-nav__tag,\n .ds-nav__signin {\n display: none;\n }\n .ds-hero {\n margin-top: calc(var(--size-nav-tall) * -1);\n padding-top: calc(var(--size-nav-tall) + var(--space-5));\n }\n .ds-hero__inner {\n padding-bottom: var(--space-6);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__art {\n gap: var(--space-3);\n }\n .ds-hero__app {\n padding: var(--space-3);\n }\n .ds-stat__item {\n flex-direction: column;\n gap: 0;\n padding: var(--space-4) var(--space-2) var(--space-4) 0;\n }\n .ds-stat__item + .ds-stat__item {\n padding-left: var(--space-3);\n }\n .ds-stat__figure {\n font-size: var(--text-h2);\n }\n .ds-stat__label {\n font-size: var(--text-small);\n }\n .ds-page-header {\n margin-top: calc(var(--size-nav-tall) * -1);\n padding-top: calc(var(--size-nav-tall) + var(--space-4));\n padding-bottom: var(--space-5);\n }\n .ds-page-header__inner {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-page-header__row {\n gap: var(--space-4);\n }\n .ds-page-header__title {\n font-size: var(--text-h2);\n }\n .ds-main {\n padding: var(--space-5) 0 var(--space-7);\n }\n .ds-search {\n flex-basis: 100%;\n }\n .ds-grid,\n .ds-footer__cols {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-cta {\n padding: var(--space-5);\n }\n .ds-panel__tabs {\n padding: 0 var(--space-4);\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-meter__row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-meter__name {\n color: var(--color-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\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 line-height: 1;\n}\n.ds-avatar--2 { background: var(--color-fill-2); }\n.ds-avatar--4 { background: var(--color-fill-4); }\n.ds-who {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n white-space: nowrap;\n}\n.ds-progress__bar--50 { width: 50%; }\n.ds-meter--gap {\n margin-bottom: var(--space-4);\n}\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: block;\n padding: var(--space-2) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n opacity: 0.85;\n transition: var(--transition);\n}\n.ds-nav__links .ds-menu__button::after {\n margin-left: var(--space-1);\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: inherit;\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(#app:target) .ds-nav__menu .ds-menu__link[href=\"#app\"],\n.ds-page:has(#installed:target) .ds-nav__menu .ds-menu__link[href=\"#installed\"],\n.ds-page:has(#build:target) .ds-nav__menu .ds-menu__link[href=\"#build\"] {\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 row 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__tag {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .ds-nav__actions {\n flex: none;\n margin-left: auto;\n }\n}\n@media (max-width: 860px) {\n .ds-nav__tag {\n display: none;\n }\n}\n.ds-nav__links li:has(> .ds-menu) {\n align-items: center;\n}\n@media (max-width: 640px) {\n .ds-nav__inner {\n gap: var(--space-3);\n }\n .ds-nav__long {\n display: none;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: SaaS gradient integrations directory specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n Integrations\n \n
\n Sign in\n Open chronoskin\n
\n
\n Menu\n \n
\n
\n
\n\n
\n
\n
\n
\n
\n

Connect your customer list to everything else

\n

chronoskin keeps your contacts and deals. These apps bring in mail, calendars, forms and accounts, so nobody types a name twice.

\n
\n See the most installed app\n Build your own\n
\n
\n
\n Ca\n \n \n \n \n \n
\n
\n
\n

240

apps in 14 categories

\n

61,000

installs in the last 30 days

\n

3 min

to connect a typical app

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

Not here yet?

\n
\n

Tell us which tool you use. Requests decide what we build next.

\n Ask for an app\n
\n
\n
\n
\n
\n \n
\n
\n
\n \n \n
\n \n
\n
\n \n CaCalendar syncMail and calendar\n Meetings appear on the contact, and a new contact's first call lands in your calendar.\n Verified18,400 installs\n \n \n Mailbox linkMail and calendar\n Every message to or from a contact, filed on their page without a blind copy.\n Verified15,900 installs\n \n \n Web formsForms and surveys\n A form on your site that makes a contact and a deal the moment it is sent.\n By chronoskin12,700 installs\n \n \n Chat alertsChat and calls\n A line in your team's channel when a deal moves, is won or goes quiet for a week.\n Verified9,300 installs\n \n \n Accounts exportAccounts\n Won deals become draft invoices in your accounts package, with the customer filled in.\n Beta4,100 installs\n \n \n E-signatureDocuments\n Send a contract from the deal and watch it turn to signed without leaving the page.\n New2,600 installs\n \n
\n
\n Apps 1 to 6 of 42 that match\n \n
\n
\n
\n

Nothing fits? Build it in an afternoon

\n

One API for contacts, deals and notes, and a sandbox with sample customers.

\n
\n Read the developer guide\n Register an app\n
\n
\n 
POST /v1/contacts{ \"name\": \"Runa Holt\",  \"source\": \"web-form\" } 201 created in 84 ms
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Integrations
    2. \n
  2. Mail and calendar
    3. \n
  3. Calendar sync
    4. \n
\n
\n \n
\n

Calendar sync

\n

Meetings on the contact, first calls in your calendar.

\n
\n
\n
\n
\n Back to the directory\n Install\n
\n
\n
\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n

Your diary and your customer list, in step

\n

Connect a calendar once. From then on every meeting with a contact is on their page, and every call you book from chronoskin is in your diary.

\n

What it does

\n

The app reads the guests of each event and matches them to contacts by address. A match files the meeting under Activity; a guest it does not know is offered as a new contact.

\n

Set-up

\n
    \n
  • Choose which calendars to watch: private ones are never read.
    • \n
  • Pick a default length for calls booked from a deal.
    • \n
  • Decide whether declined meetings are filed or dropped.
    • \n
\n

For developers

\n

Events arrive on the calendar.event.matched hook, so your own app can react to a meeting as well.

\n
\n
\n
\n
\n

What it syncs

Every 5 minutes
\n
\n \n \n \n \n \n \n \n \n \n \n
RecordDirectionKept forDaily limit
Meetings with a contactCalendar to chronoskinAs long as the contact5,000
Calls booked from a dealchronoskin to calendarUntil cancelled500
Guests not yet knownCalendar to chronoskin30 days1,000
Free and busy timesBoth waysNot stored20,000
\n
\n
\n
\n
\n
\n
\n

Install Calendar sync?

\n
\n

For everyone in your workspace, the app will be able to:

\n
    \n
  • Read events on calendars you choose
    • \n
  • Add calls you book from a deal
    • \n
  • Create contacts from unknown guests
    • \n
\n
\n
\n Not now\n Install\n
\n
\n
\n
\n

Details

\n
\n
\n
Made by ?Apps we make are checked before every release.
chronoskin
\n
Installs
18,400
\n
Updated
3 March
\n
Plans
All, free included
\n
\n
\n By chronoskin\n Two-way sync\n Verified\n Shared calendars: beta\n Version 1 retires in June\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Integrations
    2. \n
  2. Your workspace
    3. \n
  3. Installed
    4. \n
\n
\n
\n

Installed apps

\n

Five apps are connected to the Holt and Daughters workspace.

\n
\n
\n
\n
\n Browse the directory\n
\n
\n
\n\n
\n
\n \n
\n
\n

Two updates are ready. They install tonight unless you choose a time.

\n

Accounts export has stopped. Its sign-in ran out on Monday. Connect it again to carry on.

\n
\n
\n

Connected

\n
\n \n \n \n \n \n \n \n \n \n \n \n
AppStatusInstalled byLast syncRecords
Calendar syncRunningRHRuna Holt2 minutes ago4,812
Mailbox linkRunningRHRuna Holt4 minutes ago31,240
Web formsUpdate readyEDEmil Daae1 hour ago926
Chat alertsUpdate readyEDEmil DaaeYesterday388
Accounts exportStoppedRHRuna HoltMonday112
\n
\n
\n 5 apps, 37,478 records kept in step\n Add another\n
\n
\n
\n \n

No private apps yet

\n

A private app is one you write for this workspace alone. It never appears in the directory.

\n Register a private app\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Integrations
    2. \n
  2. Developers
    3. \n
  3. Register an app
    4. \n
\n
\n
\n

Build on chronoskin

\n

Register an app, try it in the sandbox, then offer it to 61,000 workspaces.

\n
\n
\n
\n
\n API reference\n
\n
\n
\n\n
\n
\n
\n

Register an app

Draft
\n
\n
Listing2 of 4 steps
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n An address cannot contain a space.\n
\n
\n \n \n Ask for the least you need. Reviewers check this first.\n
\n
\n \n \n
\n \n
\n \n Cancel\n \n \n
\n
\n
\n
\n
\n
\n

Start with the guide

All docs
\n
\n \n
\n
\n 
GET /v1/contacts?seen=todayAuthorization: Bearer sandbox 200 12 contacts in 61 ms
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.saas-gradient.portal.s06.p08.t05.u06\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"saas-gradient\",\n \"years\": [\n 2016,\n 2021\n ]\n },\n \"archetype\": \"portal\",\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-6856\",\n \"short\": \"v1-sg-6856\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #fdf9f1;\n --color-canvas: #fdf9f1;\n --color-surface: #ffffff;\n --color-surface-alt: #faf3e6;\n --color-surface-strong: #f1e6d2;\n --color-bar: #faf3e6;\n --color-bar-text: #3a3350;\n --color-bar-alt: #1f2140;\n --color-bar-alt-text: #d8d4e6;\n --color-inverse: #ffb53d;\n --color-inverse-text: #1f2140;\n --color-text: #55506a;\n --color-text-muted: #948ea6;\n --color-heading: #1f2140;\n --color-heading-alt: #dd4f3c;\n --color-link: #2a5bd7;\n --color-link-quiet: #6a6480;\n --color-link-visited: #6f55b8;\n --color-link-hover: #dd4f3c;\n --color-link-active: #1b3f9c;\n --color-border: #efe6d6;\n --color-border-strong: #dccfb8;\n --color-border-muted: #f6efe2;\n --color-accent: #1f2140;\n --color-accent-text: #ffffff;\n --color-accent-alt: #12a594;\n --color-fill-1: #ffd24d;\n --color-fill-2: #ff9d3d;\n --color-fill-3: #7ed3c1;\n --color-fill-4: #ff9b93;\n --color-button: #2f5fe0;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #1f2140;\n --color-input: #ffffff;\n --color-input-text: #1f2140;\n --color-input-border: #dccfb8;\n --color-disabled: #f1ebdf;\n --color-disabled-text: #b3ab9c;\n --color-danger: #cf2f4a;\n --color-danger-surface: #fdeef0;\n --color-success: #1e9e6f;\n --color-warning: #e99a1c;\n --color-notice: #fff3d1;\n --color-notice-text: #7a5200;\n --color-focus: #2f5fe0;\n --color-shadow: rgb(120 84 20 / 0.14);\n --color-overlay: rgb(31 33 64 / 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: \"IBM Plex Sans\", -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --font-heading: Rubik, \"IBM Plex Sans\", -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --font-ui: \"IBM Plex Sans\", -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --font-mono: \"IBM Plex Mono\", \"SF Mono\", Menlo, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 14px;\n --text-large: 19px;\n --text-display: 52px;\n --text-h1: 34px;\n --text-h2: 24px;\n --text-h3: 17px;\n --line-body: 1.5;\n --line-heading: 1.15;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 600;\n --weight-display: 700;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: -0.3px;\n --display-tracking: -1.5px;\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" } }