{ "id": "v1-sg-2333", "long_id": "v1.saas-gradient.app.s02.p03.t03.u03", "name": "SaaS gradient dashboard", "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": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "This is the signed-in side of a start-up product of 2016 to 2021: a white rail of navigation at the left, and beside it a band of two-colour gradient that carries the search field, the greeting and the page titles, with white rounded cards climbing onto it from the pale work area below. Figures stand in soft-shadowed cards with a round icon tile and a sparkline, charts are thin coloured lines, and an onboarding checklist with a gradient progress bar sits beside them. Buttons are pills and type is a rounded, friendly sans set bold for headings.", "url": "https://chrono.skin/s/v1-sg-2333", "preview_url": "https://chrono.skin/s/v1-sg-2333/specimen.html", "files": { "STYLE.md": "# SaaS gradient dashboard\n\n## Summary\n\nThis is the signed-in side of a start-up product of 2016 to 2021: a white rail of navigation at the left, and beside it a band of two-colour gradient that carries the search field, the greeting and the page titles, with white rounded cards climbing onto it from the pale work area below. Figures stand in soft-shadowed cards with a round icon tile and a sparkline, charts are thin coloured lines, and an onboarding checklist with a gradient progress bar sits beside them. Buttons are pills and type is a rounded, friendly sans set bold for headings.\n\n## Layout\n\n- The page is designed for a 1440px viewport. `.ds-page` is a grid of two columns: the rail (`.ds-nav`, `--size-rail` 252px) for the whole height, and beside it the top bar, the showing view and the footer line. The work area is centred in its column: `.ds-content` is at most `--size-page` (1140px) wide with `--space-6` side padding and stacks its children `--space-5` apart.\n- Navigation is the rail on `--fill-panel`: the `.ds-brand`, then groups of links under small group names, each link an icon in one of the four fills and a label with an optional count, the current one on a grey pill; a gradient card at the foot holds the trial notice. `.ds-topbar` is `--size-top` (72px) tall and transparent, lying on the gradient: the search pill at the left, two links and the account's initials at the right.\n- The gradient band is the `.ds-hero` on the home view and the `.ds-page-header` on every other. It is pulled up under the top bar by a negative margin and is tall enough for `.ds-content--lift` to rise `--space-8` onto it, so the first row of cards always overlaps the band. Its lower edge is straight.\n- The home view stacks: the band with the greeting and two buttons; `.ds-stat`, four figure cards; `.ds-cols` (2 to 1, `--level`), the chart card beside the setup checklist; a `.ds-section-title`; and `.ds-grid`, four project cards with progress bars.\n- Inner pages have no hero. The `.ds-page-header` band holds the breadcrumb, the page title, one line of text and at most one white button at the right. Below, a list page is one card with `.ds-tabs` on its head, the table and a `.ds-table__foot` with the pagination, then two level cards; other pages use `.ds-cols` (2 to 1), `--even`, or `--side` (1 to 3) with the `.ds-sidebar` in a card at the left.\n- Views. The specimen is a time tracker for a small studio with five views. `overview` is the home view. `projects` is the table of projects under tabs with pagination, the status key and an empty archive. `team` lists people beside the waiting invitations and the open remove dialog. `settings` is the workspace form with its notices and buttons beside the settings sections. `news` is one release note as running text beside earlier notes and related links.\n- Below 1100px cards stand two across and columns stack; below 900px the rail becomes a white block across the top: its groups, icons and card are not shown, the links `.ds-nav__links` are replaced by the menu `.ds-nav__menu` at the right of the brand, which lists every view and marks the one showing, and the top bar keeps only search and initials; below 640px the menu goes and the two `.ds-nav__links` lists become a dock fixed to the foot of the window (the first list 60% of the width, the second 40%, items in equal cells with the `.ds-nav__icon` above a small `.ds-nav__label`, the current one `is-current`); below 520px everything is one column. A wide table scrolls inside `.ds-table__wrap`; the page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (label to field, between rail links), `--space-2` 8px (rail link padding, between badges), `--space-3` 12px (table cell and button vertical padding, checklist rows), `--space-4` 16px (figure card padding, list rows, rail padding), `--space-5` 24px (between cards, card padding), `--space-6` 32px (work area side padding), `--space-7` 48px (around a dialog), `--space-8` 72px (how far cards rise onto the band).\n- Other sizes: `--size-mark` 30px, `--size-icon` 40px (icon tiles), `--size-avatar` 36px, `--size-control` 34px (pagination), `--size-chart` 220px, `--size-search` 300px, `--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 band and the `.ds-cta` card. Only `.ds-button--inverse` and `.ds-button--ghost` stand directly on it. The search field is a card on the band (`--fill-input`), so its button is the primary one.\n- `--color-fill-1` to `--color-fill-4` are the round icon tiles of the collections and the empty state's icon. A fill carries an icon in `--color-inverse-text`, never running text.\n- `--color-page` is the warm pale page, `--color-surface` (through `--fill-panel`) the cards, `--color-surface-alt` the dialog foot and the empty state, `--color-surface-strong` the strip of figures, 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.\n- Text is `--color-text` (`#46585c`), meta `--color-text-muted`, headings and figures `--color-heading` (`#17262b`); sidebar titles and h3 in prose are `--color-heading-alt`.\n- `--color-button` (violet `#5b4bd6`, white text) is the action colour on cards, the current page number and the edge under the current tab. Links are `--color-link`, bold, not underlined; only the often-asked links on the band are underlined, because colour cannot mark them there.\n- Badges, notices and the destructive button 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`, `--color-danger` with `--color-button-text`.\n- Two families: `--font-heading` is a geometric display sans (Poppins, Montserrat, Futura) for titles and figures, `--font-body` and `--font-ui` a humanist sans (Lato, Lucida Grande); `--font-mono` for code. `--text-base` 15px at `--line-body` 1.55; `--text-ui` 13px (controls, card text, navigation); `--text-small` 12px (meta, badges, labels); `--text-large` 18px (leads); `--text-display` 42px (the hero question); `--text-h1` 32px (page titles, figures, article title); `--text-h2` 23px; `--text-h3` 16px (card and list titles).\n- The hero and page titles are bold (`--weight-display` 700); other headings are medium (`--weight-heading` 500). Buttons, tabs and navigation links are uppercase and bold (`--ui-transform`, `--weight-ui` 700); nothing else is uppercase.\n- Surface: tight corners (`--radius-control` and `--radius-panel` 5px, `--radius-pill` 3px for badges, `--radius-page` 8px for collection cards, the strip and the call to action). `--shadow-panel` is a close 3px shadow under a wide 28px one; `--shadow-dialog` is deeper and also lifts the search field and a hovered collection card. The primary button has a faint top-to-bottom gradient of its own colour (`--fill-button`).\n- One-off values made with `calc()` and `color-mix()`: the curve (`ellipse(90% 100% at 50% 0%)`), the hairline before the navigation tag (`--color-inverse-text` at 40%), the ghost button border (55%), tinted badges, the error notice's edge (`--color-danger` at 35%). Opacity 0.75 to 0.9 dims secondary text on the gradient and in the footer.\n\n## Components\n\n- `.ds-page`: on ``. Sets font, text colour and `--fill-page` and makes the two-column grid; `.ds-nav`, `.ds-topbar`, the views and `.ds-footer` are its direct children.\n- `.ds-content`: the centred column of a view; `--lift` raises it onto the band.\n- `.ds-brand`: the site's mark and name, first in the rail. `.ds-brand__mark` is a 30px tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in bold. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the white rail. `.ds-nav__group` names a group; `.ds-nav__links` holds `.ds-nav__link` rows of a `.ds-nav__icon` (`--2`, `--3`, `--4` for the other fills), a `.ds-nav__label` and an optional `.ds-badge`; the current row is `is-current`. `.ds-nav__foot` is a gradient card with `.ds-nav__foot-title`, `.ds-nav__foot-text` and a small inverse button. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-topbar`: the transparent bar on the band: `.ds-topbar__search`, up to two `.ds-topbar__link` and a `.ds-avatar--plain`.\n- `.ds-avatar`: a circle of initials on a fill (`--1`, `--2`, `--4`; `--plain` is a ring for use on the gradient).\n- `.ds-hero`: the band of the home view. `.ds-hero__inner` holds the `.ds-hero__title` and `.ds-hero__lead` at the left and `.ds-hero__actions` (one `--inverse`, one `--ghost` button) at the right. One per site.\n- `.ds-page-header`: the band of an inner page, used instead of `.ds-hero`. `.ds-page-header__inner` holds the breadcrumb, `.ds-page-header__title` and `.ds-page-header__text` at the left and `.ds-page-header__actions` at the right.\n- `.ds-cols`: main and side column, 2 to 1; `--even` for halves, `--side` 1 to 3, `--level` to end the columns on one line. `.ds-stack` stacks cards; `.ds-panel--grow` fills a column.\n- `.ds-stat`: the row of four figure cards. Each `.ds-stat__item` has a `.ds-stat__head` (the `.ds-stat__label` over the `.ds-stat__figure`, and a round `.ds-tile`), a `.ds-stat__delta` line with `.ds-stat__up` or `.ds-stat__down`, and a `.ds-spark`.\n- `.ds-spark`: a sparkline, an inline SVG path stroked with `currentColor`; `--2`, `--3`, `--4` take the other fills.\n- `.ds-tile`: an icon tile on `--color-fill-1` (`--2`, `--3`, `--4`; `--round`).\n- `.ds-chart`: a line chart in a card: `.ds-chart__svg` over hairlines, its paths stroked with `currentColor`, a second line marked `.ds-chart__alt`; `.ds-chart__axis` labels the steps and `.ds-chart__legend` of `.ds-chart__key` (`--alt`) names the two series. No more than two lines.\n- `.ds-progress`: a track with a gradient `.ds-progress__bar` (`--25`, `--40`, `--60`, `--75`, `--90`; `--over` is full and in the danger colour).\n- `.ds-steps`: the onboarding checklist: `.ds-steps__item` rows of a round `.ds-steps__mark`, a `.ds-steps__text` and an optional link; `is-done` fills the mark with `--color-success` and strikes the text.\n- `.ds-grid`: four project cards. Each `.ds-grid__cell` is a link holding a `.ds-tile`, `.ds-grid__title`, `.ds-grid__text` and a `.ds-progress`. `.ds-section-title` is the heading above such a row.\n- `.ds-prose`: running text inside a card: 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 and row actions; `--more` appends an arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: pill button, 15px bold. 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, inside a card. `.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, edge to edge: 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 the row's link. Wrap it in `.ds-table__wrap`; `.ds-table__foot` is the card's last row, pagination at the left and a count at the right.\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 or link at the right) and `.ds-list__meta`. `.ds-list--people` puts a `.ds-avatar` before a `.ds-list__grow` block and a badge after it.\n- `.ds-panel`: the white card with the wide soft shadow. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge, link or legend above a hairline; `.ds-panel__body` is padded; `.ds-panel__text` is a small paragraph; `--side` is a slim card around a `.ds-sidebar`.\n- `.ds-tabs`: underlined tabs on the head of a card: `.ds-tabs__tab`, the current one (`is-current`) in the heading colour over a 3px edge in `--color-button`.\n- `.ds-badge`: pill tag, 13px bold, 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 a grey pill.\n- `.ds-notice`: tinted rounded message; `--error` in the danger colours. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` pills; `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 stands on the band, above the page title.\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`. Place it on the page, not on the band.\n- `.ds-empty`: a centred message on `--color-surface-alt`: `.ds-empty__icon` (a circle of `--color-fill-3`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button. It stands where a card would be.\n- `.ds-footer`: one line on `--fill-bar-alt` under the work area: `.ds-footer__name`, a short line, and `.ds-footer__links` of `.ds-footer__link` at the right.\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-topbar__account`: the account `.ds-menu` at the end of the top bar, the name and the avatar as its button.\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\n## Never\n\n- `block-gap <= 48px`: cards are 24px apart; nothing is further from its neighbour than 48px.\n- `font-weight <= 700`: titles are bold, never black.\n- `font-size >= 12px`: meta, badges and labels are the smallest text.\n- `font-size <= 42px`: the hero question is the largest text.\n- `font-families <= 3`: a display face, a body sans and monospace for code.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `uppercase-text <= 10%`: only buttons, tabs and navigation links are uppercase.\n- `underlined-links <= 10%`: only the often-asked links on the band are underlined.\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 tab and navigation link.\n- `border-radius <= 8px`: controls and cards are 5px and the largest blocks 8px; only circles are rounder.\n- `box-shadow-blur <= 64px`: shadows are soft and wide but end at 64px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Anything new in the work area is a `.ds-panel` with a `.ds-panel__head`, placed in `.ds-content` or in a column of `.ds-cols`, 24px from its neighbours; a new figure is another `.ds-stat__item` with its tile and sparkline, a new destination another `.ds-nav__link` with a 20px line icon in one of the fills. A new page opens with a `.ds-page-header` band and lifts its first card onto it. Text goes on cards and, in `--color-inverse-text`, on the gradient; fills take an icon or initials only. Put only `--inverse` and `--ghost` buttons on the gradient, and keep at most one primary button in a card. Spacing comes from the `--space-*` scale, and any one-off shade is a `color-mix()` of tokens noted next to the rule.\n", "components.css": ":root {\n --size-menu: 190px;\n --size-tip: 220px;\n --size-page: 1140px;\n --size-rail: 252px;\n --size-top: 72px;\n --size-mark: 30px;\n --size-icon: 40px;\n --size-control: 34px;\n --size-dialog: 420px;\n --size-chart: 220px;\n --size-avatar: 36px;\n --size-search: 300px;\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: 72px;\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--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n font-weight: var(--weight-body);\n text-decoration: var(--link-decoration-quiet);\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__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.ds-tile--2 { background: var(--color-fill-2); }\n.ds-tile--3 { background: var(--color-fill-3); }\n.ds-tile--4 { background: var(--color-fill-4); }\n.ds-tile--round { border-radius: 50%; }\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: logged-in dashboard ---- */\n.ds-page {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n grid-template-rows: auto 1fr auto;\n}\n.ds-view {\n grid-column: 2;\n grid-row: 2;\n min-width: 0;\n}\n.ds-content {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-6) var(--space-6);\n}\n.ds-content--lift {\n position: relative;\n z-index: 1;\n margin-top: calc(var(--space-8) * -1);\n}\n\n/* nav: the white rail at the left, for the whole height */\n.ds-nav {\n grid-column: 1;\n grid-row: 1 / span 3;\n position: relative;\n z-index: 3;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 0;\n padding: var(--space-5) var(--space-4);\n border-right: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--fill-panel);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n box-shadow: var(--shadow-panel);\n}\n.ds-nav .ds-brand {\n margin: 0 var(--space-3) var(--space-5);\n color: var(--color-heading);\n}\n.ds-nav__group {\n margin: var(--space-4) var(--space-3) var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-nav__links {\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-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\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__icon {\n flex: none;\n width: var(--space-5);\n height: var(--space-5);\n padding: var(--space-1);\n color: var(--color-fill-1);\n}\n.ds-nav__icon--2 { color: var(--color-fill-2); }\n.ds-nav__icon--3 { color: var(--color-fill-3); }\n.ds-nav__icon--4 { color: var(--color-fill-4); }\n.ds-nav__label {\n flex: 1;\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#overview:target) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#projects:target) .ds-nav__link[href=\"#projects\"],\n.ds-page:has(#team:target) .ds-nav__link[href=\"#team\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"],\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"] {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-nav__foot {\n margin-top: auto;\n padding: var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n}\n.ds-nav__foot-title {\n margin: 0 0 var(--space-1);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-nav__foot-text {\n margin: 0 0 var(--space-3);\n opacity: 0.9;\n}\n\n/* top bar: lies on the gradient band */\n.ds-topbar {\n grid-column: 2;\n grid-row: 1;\n position: relative;\n z-index: 2;\n display: flex;\n align-items: center;\n gap: var(--space-4);\n height: var(--size-top);\n padding: 0 var(--space-6);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-topbar__search {\n width: 100%;\n max-width: var(--size-search);\n margin: 0 auto 0 0;\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n border-radius: var(--radius-control);\n background: color-mix(in srgb, var(--color-inverse-text) 16%, transparent);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-topbar__search::placeholder {\n color: var(--color-inverse-text);\n opacity: 0.8;\n}\n.ds-topbar__link {\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.9;\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}\n.ds-avatar--2 { background: var(--color-fill-2); }\n.ds-avatar--4 { background: var(--color-fill-4); }\n.ds-avatar--1 { background: var(--color-fill-1); }\n.ds-avatar--plain {\n border: var(--border-width-strong) var(--border-style) var(--color-inverse-text);\n background: color-mix(in srgb, var(--color-inverse-text) 20%, transparent);\n}\n\n/* hero and page header: the gradient band, pulled up under the top bar */\n.ds-hero,\n.ds-page-header {\n margin-top: calc(var(--size-top) * -1);\n padding: calc(var(--size-top) + var(--space-5)) var(--space-6) calc(var(--space-8) + var(--space-6));\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-hero__inner,\n.ds-page-header__inner {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n max-width: calc(var(--size-page) - var(--space-6) * 2);\n margin: 0 auto;\n}\n.ds-hero__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-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead,\n.ds-page-header__text {\n max-width: 60ch;\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n opacity: 0.9;\n}\n.ds-hero__actions,\n.ds-page-header__actions {\n display: flex;\n flex: none;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n.ds-page-header__title {\n margin: var(--space-2) 0 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\n/* stats: four cards with a figure, a change and a sparkline, overlapping the band */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-stat__item {\n min-width: 0;\n padding: var(--space-4) 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 box-shadow: var(--shadow-panel);\n}\n.ds-stat__head {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-stat__label {\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\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__delta {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-stat__up {\n color: var(--color-success);\n font-weight: var(--weight-bold);\n}\n.ds-stat__down {\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-spark {\n display: block;\n width: 100%;\n height: var(--space-6);\n margin-top: var(--space-3);\n color: var(--color-fill-1);\n}\n.ds-spark--2 { color: var(--color-fill-2); }\n.ds-spark--3 { color: var(--color-fill-3); }\n.ds-spark--4 { color: var(--color-fill-4); }\n\n/* columns */\n.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n align-items: start;\n gap: var(--space-5);\n}\n.ds-cols--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\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-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-panel--grow {\n flex: 1;\n}\n.ds-panel--side {\n padding: var(--space-4);\n}\n\n/* chart: two lines over hairlines, drawn in SVG */\n.ds-chart {\n position: relative;\n height: var(--size-chart);\n background: repeating-linear-gradient(to bottom, var(--color-border-muted) 0, var(--color-border-muted) var(--border-width), transparent var(--border-width), transparent 25%);\n}\n.ds-chart__svg {\n display: block;\n width: 100%;\n height: 100%;\n color: var(--color-fill-1);\n}\n.ds-chart__alt {\n color: var(--color-fill-3);\n}\n.ds-chart__axis {\n display: flex;\n justify-content: space-between;\n margin: var(--space-2) 0 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-chart__legend {\n display: flex;\n gap: var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-chart__key::before {\n content: \"\";\n display: inline-block;\n width: var(--space-2);\n height: var(--space-2);\n margin-right: var(--space-1);\n border-radius: 50%;\n background: var(--color-fill-1);\n}\n.ds-chart__key--alt::before {\n background: var(--color-fill-3);\n}\n\n/* onboarding checklist and progress */\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-progress__bar--40 { width: 40%; }\n.ds-progress__bar--60 { width: 60%; }\n.ds-progress__bar--75 { width: 75%; }\n.ds-progress__bar--90 { width: 90%; }\n.ds-progress__bar--over {\n width: 100%;\n background: var(--color-danger);\n}\n.ds-steps {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-steps__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-steps__mark {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--space-5);\n height: var(--space-5);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n color: transparent;\n}\n.ds-steps__mark svg {\n width: 60%;\n height: 60%;\n}\n.ds-steps__item.is-done .ds-steps__mark {\n border-color: var(--color-success);\n background: var(--color-success);\n color: var(--color-surface);\n}\n.ds-steps__item.is-done .ds-steps__text {\n color: var(--color-text-muted);\n text-decoration: line-through;\n}\n.ds-steps__text {\n flex: 1;\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n\n/* grid: four project cards */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\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: inherit;\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__title {\n margin: var(--space-2) 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-grid__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-section-title {\n margin: var(--space-3) 0 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\n/* tabs sit on the head of a card */\n.ds-tabs {\n padding: 0 var(--space-5);\n}\n.ds-tabs__tab {\n padding: var(--space-4) 0;\n}\n\n/* people rows */\n.ds-list--people .ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-list__grow {\n flex: 1;\n min-width: 0;\n}\n\n/* footer: one quiet line under the work area */\n.ds-footer {\n grid-column: 2;\n grid-row: 3;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2) var(--space-5);\n padding: var(--space-4) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__name {\n font-weight: var(--weight-bold);\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-4);\n margin: 0 0 0 auto;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n}\n\n@media (max-width: 1100px) {\n .ds-stat,\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-cols,\n .ds-cols--even,\n .ds-cols--side {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n@media (max-width: 900px) {\n .ds-page {\n display: block;\n }\n .ds-nav {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-4);\n border-right: 0;\n }\n .ds-nav .ds-brand {\n width: 100%;\n margin: 0 0 var(--space-1);\n }\n .ds-nav__group,\n .ds-nav__foot,\n .ds-nav__icon {\n display: none;\n }\n .ds-nav__links {\n flex-direction: row;\n }\n .ds-nav__link .ds-badge {\n display: none;\n }\n .ds-nav__link {\n padding: var(--space-1) var(--space-3);\n }\n .ds-topbar {\n padding: 0 var(--space-4);\n }\n .ds-topbar__link {\n display: none;\n }\n .ds-hero,\n .ds-page-header {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-hero__inner,\n .ds-page-header__inner {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-content {\n padding: 0 var(--space-4) var(--space-5);\n }\n .ds-footer {\n padding: var(--space-4);\n }\n .ds-footer__links {\n margin-left: 0;\n }\n}\n@media (max-width: 520px) {\n .ds-stat,\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero__title,\n .ds-page-header__title {\n font-size: var(--text-h2);\n }\n .ds-tabs {\n padding: 0 var(--space-3);\n }\n .ds-panel__body {\n padding: var(--space-4);\n }\n .ds-list--people .ds-list__item {\n flex-wrap: wrap;\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__bar--40 { width: 40%; }\n.ds-progress__bar--60 { width: 60%; }\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-topbar__account {\n flex: none;\n}\n.ds-topbar__account > .ds-menu__button {\n gap: var(--space-2);\n padding: 0;\n color: inherit;\n}\n.ds-topbar__search {\n min-width: 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=\"#overview\"],\n.ds-page:has(#overview:target) .ds-nav__menu .ds-menu__link[href=\"#overview\"],\n.ds-page:has(#projects:target) .ds-nav__menu .ds-menu__link[href=\"#projects\"],\n.ds-page:has(#team:target) .ds-nav__menu .ds-menu__link[href=\"#team\"],\n.ds-page:has(#settings:target) .ds-nav__menu .ds-menu__link[href=\"#settings\"],\n.ds-page:has(#news:target) .ds-nav__menu .ds-menu__link[href=\"#news\"] {\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@media (max-width: 900px) {\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 .ds-brand {\n width: auto;\n margin: 0;\n }\n .ds-nav__menu {\n margin-left: auto;\n }\n}\n.ds-topbar__name {\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n\n/* phone: the sidebar's links become a dock of five equal cells along the bottom edge */\n@media (max-width: 640px) {\n .ds-page {\n padding-bottom: var(--space-8);\n }\n .ds-nav__menu {\n display: none;\n }\n .ds-nav > .ds-nav__links {\n position: fixed;\n bottom: 0;\n left: 0;\n z-index: 4;\n display: flex;\n flex-direction: row;\n gap: 0;\n width: 60%;\n padding: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-panel);\n }\n .ds-nav > .ds-nav__links ~ .ds-nav__links {\n left: 60%;\n width: 40%;\n }\n .ds-nav > .ds-nav__links > li {\n flex: 1 1 0;\n min-width: 0;\n }\n .ds-nav > .ds-nav__links .ds-nav__link {\n flex-direction: column;\n gap: 0;\n padding: var(--space-1) 0;\n font-size: var(--text-small);\n text-align: center;\n }\n .ds-nav > .ds-nav__links .ds-nav__icon {\n display: block;\n }\n .ds-nav > .ds-nav__links .ds-nav__label {\n flex: none;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: SaaS gradient dashboard specimen\n\n\n\n\n\n
\n \n \n chronoskin\n \n
\n Menu\n \n
\n

Track

\n \n

Workspace

\n \n
\n

9 days of trial left

\n

Keep your projects and reports by choosing a plan.

\n Choose a plan\n
\n
\n\n
\n \n What's new\n
\n Tomas OkaforTO\n \n
\n
\n\n
\n
\n
\n
\n

Good morning, Tomas

\n

The team tracked 164 hours this week, 12 more than last. Two projects are close to their budget.

\n
\n
\n Start a timer\n Add hours by hand\n
\n
\n
\n
\n
\n
\n

Hours this week

164

\n

+8% on last week

\n \n
\n
\n

Billable share ?Hours on client projects, out of all hours tracked.

81%

\n

+3 points on last week

\n \n
\n
\n

Unbilled hours

46.5

\n

+11 hours since Monday

\n \n
\n
\n

Active projects

14

\n

2 started this month

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

Hours by day

BillableInternal
\n
\n
\n \n \n \n \n \n
\n
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat
  • Sun
\n
\n
\n
\n

Finish setting up

3 of 5
\n
\n \n
    \n
  • Create the workspace
    • \n
  • Add a first project
    • \n
  • Track an hour
    • \n
  • Invite the teamInvite
    • \n
  • Set hourly ratesSet
    • \n
\n
\n
\n
\n\n

Close to budget

\n
\n \n \n

Harbour Bakery shop

\n

108 of 120 hours

\n \n \n \n \n

Tern Cycles identity

\n

45 of 60 hours

\n \n \n \n \n

Marrow Press catalogue

\n

32 of 80 hours

\n \n \n \n \n

Fieldnote app, phase 2

\n

212 of 200 hours

\n \n \n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Workspace
    2. \n
  2. Track
    3. \n
  3. Projects
    4. \n
\n

Projects

\n

Hours against budget for everything the team is working on.

\n
\n
\n New project\n
\n
\n
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
ProjectClientStatusHoursBudgetUnbilled
Shop redesignHarbour BakeryNear budget108.012012.5
IdentityTern CyclesOn track45.0608.0
Spring catalogueMarrow PressOn track32.58014.0
App, phase 2FieldnoteOver budget212.020012.0
Annual reportLindqvist StudioNot started0.0400.0
\n
\n
\n \n 1 to 5 of 14 projects\n
\n
\n
\n
\n

What the status means

\n
\n

A project changes status by itself as hours are tracked against its budget.

\n
\n Active\n On track\n Near budget, from 85%\n Over budget\n Not started\n
\n
\n
\n
\n \n

Nothing archived yet

\n

Finished projects move here with their hours, so old reports keep working.

\n Archive a project\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Workspace
    2. \n
  2. Track
    3. \n
  3. Team
    4. \n
\n

Team

\n

Four people track time here. Two invitations are waiting.

\n
\n
\n Invite someone\n
\n
\n
\n
\n
\n
\n

People

Roles and rates
\n
\n
    \n
  • \n TO\n
    Tomas Okafor

    Owner. 38.5 hours this week, last entry today

    \n Owner\n
    • \n
  • \n IL\n
    Ingrid Lindqvist

    Designer. 41.0 hours this week, last entry today

    \n Tracking now\n
    • \n
  • \n MP\n
    Maya Prentice

    Developer. 44.5 hours this week, last entry yesterday

    \n Over 40 hours\n
    • \n
  • \n DR\n
    Dana Reyes

    Contractor. 0 hours this week, last entry 23 days ago

    \n Remove\n
    • \n
\n
\n
\n
\n
\n

Waiting to join

\n
\n
    \n
  • Sam WhitlockSend again

    Invited 2 days ago as a designer

    • \n
  • Noor HaddadSend again

    Invited 6 days ago as a contractor

    • \n
\n
\n
\n
\n
\n

Remove Dana Reyes?

\n

Dana will lose access today. The 96 hours she tracked stay in your reports.

\n
\n Keep\n Remove\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Workspace
    2. \n
  2. Settings
    3. \n
  3. Workspace details
    4. \n
\n

Settings

\n

Names, rates and the working week for everyone in this workspace.

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

Workspace details

Trial
\n
\n
\n
\n

Rates are private. Only owners see what an hour costs.

\n

Not saved. The default rate needs a number.

\n
\n
\n
\n \n \n
\n
\n \n \n Write the rate in figures, for example 60.\n
\n
\n
\n
\n \n \n
\n
\n \n \n Applies to new entries only.\n
\n
\n
\n \n \n
\n
\n
\n \n Cancel\n \n Delete workspace\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Workspace
    2. \n
  2. What's new
    3. \n
  3. March
    4. \n
\n

What's new

\n

Changes to chronoskin, newest first.

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

Budgets that warn you in time

\n

A project now tells you when it is about to run out of hours, not after it has.

\n

How the warning works

\n

Set a budget in hours on any project. At 85% the project is marked Near budget and its owner gets one email; past 100% it is marked over budget.

\n

Changing the threshold

\n

The 85% mark suits most teams. To move it, open the project and set warn_at to a value between 50 and 95.

\n

Also in this release

\n
    \n
  • Timers survive a closed browser tab.
    • \n
  • Reports can be grouped by person, then by project.
    • \n
  • The weekly summary email arrives on Monday at 8, in your own time zone.
    • \n
\n
\n
\n
\n
\n
\n

Earlier

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

Read more

\n
\n \n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.saas-gradient.app.s02.p03.t03.u03\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"saas-gradient\",\n \"years\": [\n 2016,\n 2021\n ]\n },\n \"archetype\": \"app\",\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-2333\",\n \"short\": \"v1-sg-2333\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f8f5f3;\n --color-canvas: #f8f5f3;\n --color-surface: #ffffff;\n --color-surface-alt: #f3f0ee;\n --color-surface-strong: #eae4df;\n --color-bar: #f3f0ee;\n --color-bar-text: #46585c;\n --color-bar-alt: #17262b;\n --color-bar-alt-text: #c8d3d5;\n --color-inverse: #fb5a62;\n --color-inverse-text: #ffffff;\n --color-text: #46585c;\n --color-text-muted: #8d9a9c;\n --color-heading: #17262b;\n --color-heading-alt: #2f4347;\n --color-link: #f0336b;\n --color-link-quiet: #5b6c70;\n --color-link-visited: #b8517f;\n --color-link-hover: #f27a3e;\n --color-link-active: #c22f62;\n --color-border: #e6dfd9;\n --color-border-strong: #cbc2ba;\n --color-border-muted: #f1ebe6;\n --color-accent: #f27a3e;\n --color-accent-text: #ffffff;\n --color-accent-alt: #7b5fd3;\n --color-fill-1: #ff3d6e;\n --color-fill-2: #ff9440;\n --color-fill-3: #7b5fd3;\n --color-fill-4: #23b5a3;\n --color-button: #5b4bd6;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #17262b;\n --color-input: #ffffff;\n --color-input-text: #17262b;\n --color-input-border: #cbc2ba;\n --color-disabled: #efe8e3;\n --color-disabled-text: #a9a29c;\n --color-danger: #d6344a;\n --color-danger-surface: #fdf0f1;\n --color-success: #23a586;\n --color-warning: #eda02b;\n --color-notice: #fff1e6;\n --color-notice-text: #9a4a17;\n --color-focus: #5b4bd6;\n --color-shadow: rgb(23 38 43 / 0.1);\n --color-overlay: rgb(23 38 43 / 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: Lato, \"Lucida Grande\", \"Segoe UI\", sans-serif;\n --font-heading: Poppins, Montserrat, Futura, \"Century Gothic\", sans-serif;\n --font-ui: Lato, \"Lucida Grande\", \"Segoe UI\", sans-serif;\n --font-mono: \"Fira Mono\", \"Courier New\", monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 18px;\n --text-display: 42px;\n --text-h1: 32px;\n --text-h2: 23px;\n --text-h3: 16px;\n --line-body: 1.55;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 500;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: -0.2px;\n --display-tracking: -1px;\n --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: none;\n --link-decoration-hover: none;\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: 5px;\n --radius-panel: 5px;\n --radius-pill: 3px;\n --radius-page: 8px;\n --shadow-panel: 0 1px 3px var(--color-shadow), 0 10px 28px var(--color-shadow);\n --shadow-control: 0 1px 2px var(--color-shadow), 0 3px 8px var(--color-shadow);\n --shadow-control-hover: 0 2px 4px var(--color-shadow), 0 8px 18px var(--color-shadow);\n --shadow-control-pressed: inset 0 1px 3px var(--color-shadow);\n --shadow-dialog: 0 4px 10px var(--color-shadow), 0 24px 64px var(--color-shadow);\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(200deg, var(--color-fill-2), var(--color-fill-1) 85%);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button) 88%, white), var(--color-button));\n --fill-button-hover: linear-gradient(var(--color-button), var(--color-button));\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: box-shadow 0.12s ease-out, background-color 0.12s ease-out;\n --backdrop-blur: 0px;\n}\n" } }