{ "id": "v1-sg-2221", "long_id": "v1.saas-gradient.app.s02.p02.t02.u01", "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 }, "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-2221", "preview_url": "https://chrono.skin/s/v1-sg-2221/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 760px the rail becomes a white block across the top with the brand and one row of links, and the top bar keeps only search and initials; 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, the trial card in the rail and the progress bars. Only `.ds-button--inverse` and `.ds-button--ghost` stand on it; the search field on the band is a translucent pill in `--color-inverse-text`.\n- `--color-fill-1` to `--color-fill-4` colour the rail icons, the round icon tiles, avatars, sparklines and the two chart lines. A fill carries an icon or initials in `--color-inverse-text`, never running text.\n- `--color-page` is the work area, `--color-surface` (through `--fill-panel`) the cards and the rail, `--color-surface-alt` a hovered table row, the dialog foot and the empty state, `--color-surface-strong` the current rail link, the current sidebar row, the quiet badge and the progress track.\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` (`#576f7f`), meta `--color-text-muted`, headings and figures `--color-heading` (`#0e304b`); sidebar titles and h3 in prose are `--color-heading-alt`. The change under a figure is `--color-success` (`.ds-stat__up`) or `--color-danger` (`.ds-stat__down`).\n- `--color-button` (navy `#033156`, white text) is the action colour on cards, the current page number and the edge under the current tab. Links are `--color-link`, bold, underlined only on hover.\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 rounded sans (Varela Round, Arial Rounded MT Bold) for titles and figures, `--font-body` and `--font-ui` a plain humanist sans (Nunito, Open Sans, Helvetica Neue); `--font-mono` for code. `--text-base` 16px at `--line-body` 1.6; `--text-ui` 15px; `--text-small` 13px (labels, meta, badges); `--text-large` 20px (band text); `--text-h1` 38px (band titles, figures); `--text-h2` 27px; `--text-h3` 19px (card titles). `--text-display` 50px is not used in this layout: the greeting is `--text-h1`.\n- Headings and controls are bold (`--weight-heading`, `--weight-ui` 700). Nothing is uppercase.\n- Surface: pills for buttons, inputs, rail links and badges (`--radius-control`, `--radius-pill` 100px); cards `--radius-panel` 16px; `--radius-page` 28px on the dialog's backdrop. `--shadow-panel` is one very wide, soft, tinted shadow (60px blur); `--shadow-dialog` is deeper and also marks a hovered project card. `--border-width-strong` 3px is the edge under the current tab, the ring of an unticked checklist mark and the ring of the account's initials.\n- One-off values made with `calc()` and `color-mix()`: the translucent search field (`--color-inverse-text` at 16%, its edge at 30%), the ghost button border (55%), the account ring's wash (20%), tinted badges, the hairlines of the chart (a repeating gradient of `--color-border-muted` every 25%), the area under the first chart line (its own colour at 10% opacity). Progress widths are percentages.\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\n## Never\n\n- `block-gap <= 48px`: cards are 24px apart; nothing is further from its neighbour than 48px.\n- `font-weight <= 700`: headings and figures are bold, never black.\n- `font-size >= 13px`: labels, meta and badges are the smallest text.\n- `font-size <= 38px`: band titles and figures are the largest text.\n- `font-families <= 3`: a rounded heading face, a body sans and monospace for code.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `uppercase-text <= 0%`: navigation, buttons and labels are in sentence case.\n- `text-shadow = none`: text is flat, also on the gradient.\n- `animation = none`: nothing moves by itself; only hover states ease.\n- `border-width <= 2px`: borders are hairlines; 2px marks the chosen plan.\n- `border-radius <= 12px`: cards are 8px and the largest blocks 12px; only pills and circles are rounder.\n- `box-shadow-blur <= 100px`: shadows are wide and soft but end at 100px.\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-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-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--wide {\n width: 100%;\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 color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: 1;\n text-decoration: none;\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--25 { width: 25%; }\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: 760px) {\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", "specimen.html": "\n\n\n\n\nchronoskin: SaaS gradient dashboard specimen\n\n\n\n\n\n
\n \n \n chronoskin\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 Tomas Okafor\n TO\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

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.p02.t02.u01\",\n \"library\": \"2026.10.07-2111\",\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 },\n \"source\": \"https://chrono.skin/s/v1-sg-2221\",\n \"short\": \"v1-sg-2221\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f7f9fb;\n --color-canvas: #f7f9fb;\n --color-surface: #ffffff;\n --color-surface-alt: #f0f5f9;\n --color-surface-strong: #e1eaf1;\n --color-bar: #f0f5f9;\n --color-bar-text: #0e304b;\n --color-bar-alt: #033156;\n --color-bar-alt-text: #c3d4e3;\n --color-inverse: #2f93d6;\n --color-inverse-text: #ffffff;\n --color-text: #576f7f;\n --color-text-muted: #8ba7bd;\n --color-heading: #0e304b;\n --color-heading-alt: #1f8fa3;\n --color-link: #3276e8;\n --color-link-quiet: #56708a;\n --color-link-visited: #5a6fc4;\n --color-link-hover: #1f8fa3;\n --color-link-active: #033156;\n --color-border: #dbe5ee;\n --color-border-strong: #b9c8d8;\n --color-border-muted: #e9f0f5;\n --color-accent: #25a2b6;\n --color-accent-text: #ffffff;\n --color-accent-alt: #f2994a;\n --color-fill-1: #22a3b7;\n --color-fill-2: #4284fb;\n --color-fill-3: #f5a742;\n --color-fill-4: #7a68ee;\n --color-button: #033156;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #033156;\n --color-input: #ffffff;\n --color-input-text: #0e304b;\n --color-input-border: #b9c8d8;\n --color-disabled: #dfeaf1;\n --color-disabled-text: #9eacbf;\n --color-danger: #e04f5f;\n --color-danger-surface: #fdf1f2;\n --color-success: #49b882;\n --color-warning: #f2a93b;\n --color-notice: #e3f4f6;\n --color-notice-text: #12707f;\n --color-focus: #4284fb;\n --color-shadow: rgb(3 49 86 / 0.1);\n --color-overlay: rgb(3 49 86 / 0.55);\n}\n\n/* @part type */\n:root {\n --font-body: Nunito, \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif;\n --font-heading: \"Varela Round\", \"Arial Rounded MT Bold\", Nunito, \"Helvetica Neue\", sans-serif;\n --font-ui: Nunito, \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: \"Roboto Mono\", Monaco, Consolas, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 15px;\n --text-large: 20px;\n --text-display: 50px;\n --text-h1: 38px;\n --text-h2: 27px;\n --text-h3: 19px;\n --line-body: 1.6;\n --line-heading: 1.25;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\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: 100px;\n --radius-panel: 8px;\n --radius-pill: 100px;\n --radius-page: 12px;\n --shadow-panel: 0 15px 35px var(--color-shadow), 0 5px 15px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control: 0 4px 6px var(--color-shadow), 0 1px 3px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-control-hover: 0 7px 14px var(--color-shadow), 0 3px 6px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-control-pressed: 0 1px 2px var(--color-shadow);\n --shadow-dialog: 0 50px 100px -20px var(--color-shadow), 0 30px 60px -30px 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(135deg, var(--color-fill-1) 10%, var(--color-fill-2) 90%);\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) 92%, 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) 45%, transparent);\n --transition: all 0.15s ease;\n --backdrop-blur: 0px;\n}\n" } }