{ "id": "v1-sg-7328", "long_id": "v1.saas-gradient.docs.s07.p03.t02.u08", "name": "SaaS gradient developer portal", "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": "docs", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "This is the developer side of a start-up product of 2016 to 2021: a dark bar of navigation with a search field, a band of two-colour gradient whose lower edge rises to the left and carries the claim beside a request drawn as a code window, and a quickstart card that climbs onto the band. The reference is read in three columns, contents at the left, text and tables in the middle and the request and its reply in dark windows at the right, and the dashboard pages keep the same cards for keys, quotas and forms. Any product with an API had such a portal by 2018, friendly in the marketing colours and exact in the code.", "url": "https://chrono.skin/s/v1-sg-7328", "preview_url": "https://chrono.skin/s/v1-sg-7328/specimen.html", "files": { "STYLE.md": "# SaaS gradient developer portal\n\n## Summary\n\nThis is the developer side of a start-up product of 2016 to 2021: a dark bar of navigation with a search field, a band of two-colour gradient whose lower edge rises to the left and carries the claim beside a request drawn as a code window, and a quickstart card that climbs onto the band. The reference is read in three columns, contents at the left, text and tables in the middle and the request and its reply in dark windows at the right, and the dashboard pages keep the same cards for keys, quotas and forms. Any product with an API had such a portal by 2018, friendly in the marketing colours and exact in the code.\n\n## Layout\n\n- The page is designed for a 1440px viewport and is not fluid: content sits in `.ds-wrap`, centred, at most `--size-page` (1180px) wide with `--space-5` side padding. The bar, the band and the footer run the full width of the window.\n- Navigation is a solid bar on `--fill-bar-alt`, at least `--size-nav` (60px) tall, over a faint rule: the `.ds-brand`, a `.ds-nav__tag` naming the portal behind a hairline, four links (the current one on a translucent block), then at the right the `.ds-search` field, one `.ds-menu` and one small `.ds-button--bar`. Nothing of the navigation lies on the gradient.\n- The home view stacks: `.ds-hero`, in two columns (5 to 6): kicker, title, one paragraph, two buttons and an install line at the left, a `.ds-code` window with a `.ds-reply` card over its corner at the right; its lower edge is cut by `clip-path` so that it rises 5vw to the left. Then `.ds-main--home`: `.ds-quick`, one card that climbs onto the band, a tinted lead with the progress bar and three `.ds-steps` across; `.ds-stat`, four figures set on the page; a `.ds-block__head` and the `.ds-grid` of six resources three across; `.ds-cols` (2 to 1, `--level`) with the recent changes beside the status rows; and `.ds-cta`, a gradient card. Blocks are `--space-7` apart.\n- Inner pages have no hero. They open with `.ds-page-header`: the same gradient as a slim straight band holding the breadcrumb, the page title, one line of text and at most one button at the right. `.ds-main` follows. A reference page is `.ds-docs`, three columns: the `.ds-sidebar` lists (`--size-side`, 210px), the text column (the `.ds-endpoint` line, `.ds-prose`, the parameter table in a card, notices, the errors as an accordion, the pagination), and `.ds-docs__code` (`--size-code`, 400px), which stays in view while the text scrolls and holds the `.ds-tabs`, the code windows and the next links. Dashboard pages use `.ds-cols` (2 to 1); a list page uses `.ds-cols--side` with the sidebar at the left.\n- Views. The specimen is the developer portal of a parcel shipping API, with four views. `home` is the overview. `reference` is the page of one request. `keys` is the list of API keys with the test mode switch, the form that makes a key with its buttons, the month's quotas, the open revoke dialog and an empty list of webhooks. `changelog` lists the changes of a year with the versions and the label key at the left and the pagination in the foot of the card.\n- Below 1100px the code column moves under the text and the search field goes; below 960px the hero, the quickstart and the columns stack and cards stand two across; below 900px `.ds-nav__links` is not shown and the menu `.ds-nav__menu` takes its place at the right of the brand, while `.ds-nav__tag` and the search and menu in `.ds-nav__actions` are hidden; below 640px the menu goes again and the links return as one `.ds-nav__links` strip under the brand and button, scrolling sideways edge to edge and fading at the right (on the later views it starts from its far end, so that the current link is in sight), everything is one column and a wide table scrolls inside `.ds-table__wrap`. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (label to field, pagination gaps), `--space-2` 8px (icon to text, between badges), `--space-3` 12px (button and cell vertical padding), `--space-4` 16px (between form rows, code padding), `--space-5` 24px (card padding, grid gap, page gutter), `--space-6` 32px (column gap of the reference, page header padding), `--space-7` 48px (between blocks, hero top), `--space-8` 80px (hero foot, end of the page).\n- Other sizes: `--size-mark` 28px, `--size-icon` 40px (icon tiles), `--size-control` 34px (pagination), `--size-avatar` 28px (avatars, step numbers), `--size-search` 200px, `--size-menu` 190px, `--size-tip` 220px (widest tooltip), `--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`.\n- `.ds-wrap`: the centred content column.\n- `.ds-brand`: the site's mark and name, first in the bar and again in the footer. `.ds-brand__mark` is a 28px 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 bar. `.ds-nav__inner` centres it; `.ds-nav__tag` names the portal; `.ds-nav__links` holds `.ds-nav__link`, the current one on a translucent block (`is-current`); `.ds-nav__actions` holds the search, the menu and one `.ds-button--bar ds-button--small`. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-search`: the search field of the bar, an icon and a `.ds-search__input` in the bar's colours.\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, aligned to the right.\n- `.ds-hero`: the gradient band of the home view. `.ds-hero__inner` is two columns: `.ds-hero__copy` with `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (one `--inverse`, one `--ghost` button) and `.ds-hero__note` in monospace; and `.ds-hero__art` with a `.ds-code--deep` and a `.ds-reply`. One per site.\n- `.ds-code`: a code window: `.ds-code__bar` (optional `.ds-code__dot`s, `.ds-code__name`, a label or `.ds-code__copy`) over `.ds-code__body`, a `
` that scrolls sideways. Inside, `.ds-code__b` is bold, `.ds-code__s` a string or value, `.ds-code__c` a comment. `--deep` takes the dialog shadow.\n- `.ds-reply`: a small card of `.ds-reply__head` and `.ds-reply__row` pairs (`.ds-reply__value` at the right) laid over the corner of the hero's code window.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__inner` holds the breadcrumb, `.ds-page-header__title`, `.ds-page-header__text` and `.ds-page-header__actions`.\n- `.ds-main`: the area under the band; `--home` has no top padding. `.ds-block` is one block of it, `.ds-block__head` its `.ds-block__title` with a `.ds-block__text` at the right.\n- `.ds-cols`: main and side column, 2 to 1; `--level` makes them equally tall; `--side` puts a narrow column first. `.ds-stack` stacks cards 24px apart.\n- `.ds-quick`: the quickstart, a `.ds-panel` with `.ds-quick__lead` (title, `.ds-quick__note`, a progress bar) and `.ds-steps`, three `.ds-steps__item` each a `.ds-steps__num`, `.ds-steps__title`, `.ds-steps__text` and a link; `is-done` fills the number.\n- `.ds-stat`: the row of figures; each `.ds-stat__item` is a `.ds-stat__figure` over a `.ds-stat__label` behind a rule in one of the fills.\n- `.ds-grid`: three cards across. Each `.ds-grid__cell` is a `.ds-grid__head` (a `.ds-tile` and the `.ds-grid__title`), `.ds-grid__text` and a `.ds-path`.\n- `.ds-tile`: an icon tile on `--color-fill-1` (`--2`, `--3`, `--4`; `--round` for a circle).\n- `.ds-path`: a request path or a key prefix in monospace on a grey chip; `.ds-key` is the same without the chip, for tables and running text.\n- `.ds-rows`: plain rows in a card, a `.ds-rows__name` with a badge or figure at the right, `.ds-rows__item` each.\n- `.ds-cta`: the closing call to action, a gradient card with `.ds-cta__title`, `.ds-cta__text` and the two gradient buttons.\n- `.ds-docs`: the three columns of a reference page; `.ds-docs__code` is the third. `.ds-endpoint` is the line that names the request: a badge for the method, `.ds-endpoint__path` and an optional label.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--more` appends an arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: 14px medium, tight corners. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse` and `--ghost` (on the gradient only), `--bar` (on the bar only), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: data table inside a card: a small bold head on `--fill-bar`, hairlines between rows; `is-hover` tints a row. `.ds-table__num` right-aligns numbers; `.ds-table__title` is a row's link. Wrap it in `.ds-table__wrap`; `.ds-table__foot` is a last row for a count and the pagination.\n- `.ds-list`: rows parted by hairlines. `.ds-list__item` holds a `.ds-list__title` (alone or in a `.ds-list__head` with a badge at the right), an optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: the white card. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge, link or `.ds-panel__tools` above a hairline; `.ds-panel__body` is padded; `.ds-panel__text` is a small paragraph.\n- `.ds-tabs`: a row of `.ds-tabs__tab` over a hairline, the current one (`is-current`) underlined in `--color-button`. Here it chooses the language of the code windows.\n- `.ds-badge`: small tag, 12px semibold, 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 block.\n- `.ds-notice`: tinted message; `--error` in the danger colours. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` blocks; `is-current` is filled with `--fill-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`. It takes the colour of what it stands on.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`, a card in `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, and `.ds-dialog__actions` right-aligned on `--color-surface-alt`.\n- `.ds-empty`: a centred message on `--color-surface-alt`: `.ds-empty__icon` (a circle of `--color-fill-3`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-accordion`: sections that open and close: each `.ds-accordion__item` is a `
` with a `.ds-accordion__title` summary (a plus that turns to a minus) and a `.ds-accordion__body`. Used for the errors of a request.\n- `.ds-tooltip`: a hint shown on hover or focus of its trigger; `.ds-tooltip__text` is the hint, above the trigger. `--mark` draws the trigger as a small round question mark; `--end` aligns the hint to the trigger's right edge; `is-open` shows it.\n- `.ds-switch`: an on/off control, a `