{ "id": "v1-sg-8317", "long_id": "v1.saas-gradient.landing.s08.p03.t01.u07", "name": "SaaS gradient event page", "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": "landing", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "This is the event page of a start-up product of 2016 to 2021, made for a conference, a webinar or a launch: the gradient is one large curve that sweeps in from the top left, a white bar of navigation floats on it, and the claim, a countdown and the faces of those already coming stand beside a sign-up card that hangs over the curve's edge. Below come four tinted figures, the speakers as cards under blocks of flat colour, the day as a timed list, last year's praise as a slide on the gradient and the questions as an accordion. Products of the period ran such a page every spring, and the registration form was always in the first screen.", "url": "https://chrono.skin/s/v1-sg-8317", "preview_url": "https://chrono.skin/s/v1-sg-8317/specimen.html", "files": { "STYLE.md": "# SaaS gradient event page\n\n## Summary\n\nThis is the event page of a start-up product of 2016 to 2021, made for a conference, a webinar or a launch: the gradient is one large curve that sweeps in from the top left, a white bar of navigation floats on it, and the claim, a countdown and the faces of those already coming stand beside a sign-up card that hangs over the curve's edge. Below come four tinted figures, the speakers as cards under blocks of flat colour, the day as a timed list, last year's praise as a slide on the gradient and the questions as an accordion. Products of the period ran such a page every spring, and the registration form was always in the first screen.\n\n## Layout\n\n- The page is designed for a 1440px viewport and is not fluid: content sits in `.ds-wrap`, centred, at most `--size-page` (1120px) wide with `--space-5` side padding. The curve, the white sections and the footer run the full width of the window.\n- Navigation is a floating bar: `.ds-nav__inner` is a card on `--fill-panel` with `--radius-page` corners and the panel shadow, as wide as the content and `--space-4` below the top of the window. It holds the `.ds-brand`, three links (the current one on a grey pill), then at the right one `.ds-menu`, the date and one small primary button. The hero or the page header is pulled up under it by a negative margin, so the bar lies on the gradient.\n- The home view stacks: `.ds-hero`, in two columns (7 to 5): kicker, title, one paragraph, the `.ds-countdown` and the `.ds-hero__crowd` at the left, the `.ds-signup` card at the right. The gradient is drawn behind them by `::before` and cut to an ellipse centred near the top left, so it is deepest under the copy and gives way under the card. Then `.ds-section--first` with `.ds-about` (6 to 5): copy and ticked points beside `.ds-stat`, four tinted figures two by two, the right pair stepped down; a white section with the `.ds-grid` of four speakers; a section of `.ds-cols--half`, the day's list in a card beside the `.ds-carousel` and the accordion; and a white section with `.ds-cta`, a centred gradient card. Sections have `--space-7` above and below.\n- Inner pages have no hero. They open with `.ds-page-header`: the same curve, shallower, holding the breadcrumb, the page title, one line of text and at most one button at the right. `.ds-main` follows with `.ds-cols` (2 to 1) for a session, `--side` (1 to 3) with the `.ds-sidebar` at the left for the programme, or `--even` (7 to 5) for the form. On the programme a `.ds-toolbar` puts the `.ds-tabs`, here chips, at the left and a switch at the right, above the card with the table.\n- Views. The specimen is the page of a two-day online conference about teaching courses, with four views. `home` is the event page. `agenda` is the programme: tracks, the label key and an empty personal schedule at the left; the day chips, the time zone switch and the table of sessions with the pagination in its foot at the right. `session` is one talk as running text with later sessions under it, beside the speaker, her workshop's places, a notice and related links. `register` is the form with its notices and buttons beside what the ticket holds and the open dialog for giving up a place.\n- Below 960px the columns stack, the gradient ends above the foot of the sign-up card and speakers stand two across; below 640px the bar `.ds-nav__inner` wraps to two rows, the brand and `.ds-nav__actions` above and `.ds-nav__links` across the full width below, scrolling sideways, with the current link still on its grey pill, 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 and chips), `--space-3` 12px (button and cell vertical padding, between countdown tiles), `--space-4` 16px (between form rows, list row padding), `--space-5` 24px (card padding, grid gap, page gutter), `--space-6` 36px (under a section head, page top of inner pages), `--space-7` 60px (section padding, column gap of the hero), `--space-8` 100px (foot of the hero, end of the page).\n- Other sizes: `--size-nav` 64px, `--size-mark` 30px, `--size-icon` 44px, `--size-control` 36px (pagination), `--size-avatar` 36px, `--size-face` 76px (a speaker), `--size-menu` 200px, `--size-tip` 220px, `--size-dialog` 440px.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThese are the conventions of the era; every layout and token set keeps them.\n\n- The gradient is `--fill-inverse`, made in the surface part from `--color-fill-1` and `--color-fill-2`; only its angle and stops change between surface sets. Text on it is always `--color-inverse-text`, here white. `--color-inverse` is the solid middle of the gradient: the text of a white button on the band.\n- On the gradient there are two buttons only: `.ds-button--inverse` (fill `--color-inverse-text`, text `--color-inverse`) and `.ds-button--ghost` (outline in `--color-inverse-text`). The primary button never stands on the gradient, so `--color-button` may be any colour, close to the gradient or far from it.\n- `--color-fill-1` to `--color-fill-4` are saturated mid tones: icon tiles, avatars, sparklines, chart lines and illustration shapes. A fill carries an icon or initials in `--color-inverse-text`, never running text. Illustration blocks are a fill mixed at about 20% into `--color-surface`.\n- `--color-page` is the pale page, `--color-surface` the card, `--color-surface-alt` the quiet inset (dialog foot, hovered row, empty state), `--color-surface-strong` the strongest neutral (quiet badge, inline code, current sidebar row, progress track).\n- `--fill-bar` with `--color-bar-text` is the table head only. `--fill-bar-alt` with `--color-bar-alt-text` is the footer, which a palette may make pale or dark; nothing else stands on it.\n- Text is `--color-text` (`#525f7f`), meta `--color-text-muted`, headings and figures `--color-heading` (`#32325d`); kickers, sidebar titles and h3 in prose are `--color-heading-alt`.\n- Links are `--color-link`, medium weight, never underlined (`--link-decoration` none); quiet links are `--color-link-quiet`.\n- `--color-button` (coral `#ff5a6e`, white text) is the one action colour on cards: the primary button, the current pill of the switch, the current page number, the top edge of the chosen plan. The secondary button is `--color-button-secondary-text` on `--fill-button-secondary` with a `--color-border` edge. The destructive button is `--color-danger` with `--color-button-text`.\n- `--fill-accent` with `--color-accent-text` is the default badge. `--alt` and the status badges are tints: the colour mixed at 16 to 22% into `--color-surface`, with text mixed from the colour and `--color-heading`, so they work on any palette. `--color-success` is also the tick of a feature point.\n- `--color-notice` with `--color-notice-text` is the information notice; the error notice is `--color-danger` on `--color-danger-surface` with a faint edge.\n- One family for body, headings and controls (`--font-body`: Nunito Sans, Avenir Next; the references used commercial geometric sans faces), `--font-mono` for code. `--text-base` 17px at `--line-body` 1.65; `--text-ui` 15px (controls, tables, card text); `--text-small` 13px (meta, badges, labels, breadcrumb); `--text-large` 21px (leads); `--text-display` 46px (hero title, plan price); `--text-h1` 36px (section and page titles, figures); `--text-h2` 26px; `--text-h3` 18px (card titles).\n- Headings are medium, not bold: `--weight-heading` and `--weight-display` 500. `--weight-bold` and `--weight-ui` are 600. Nothing is uppercase.\n- Surface: buttons, inputs and badges are pills (`--radius-control`, `--radius-pill` 100px); cards are `--radius-panel` 8px; the largest containers `--radius-page` 12px. `--border-width` 1px in `--color-border-muted` is almost invisible: cards are set off by `--shadow-panel`, two wide soft layers in the tinted `--color-shadow`. `--shadow-control` is a small lift that grows on hover while the button rises by 1px; `--shadow-dialog` is the deepest and is also used under the drawn product screen. `--transition` is 0.15s.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: the slants (8vw and 4vw), the washes on the gradient (`--color-inverse-text` at 14 to 18%, the ghost border at 55%), tinted badges and illustration blocks, the brand tile's edge (`--color-button-text` at 35%), the error notice's edge (`--color-danger` at 35%), the footer rule (`--color-bar-alt-text` at 22%). Opacity 0.75 to 0.9 dims secondary text on the gradient.\n\n## Components\n\n- `.ds-page`: on ``. Sets font, text colour and `--fill-page`.\n- `.ds-wrap`: the centred content column.\n- `.ds-brand`: the site's mark and name, first in the bar and again in the footer. `.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 floating bar. `.ds-nav__inner` is the card; `.ds-nav__links` holds `.ds-nav__link`, the current one on a grey pill (`is-current`); `.ds-nav__actions` holds the menu, `.ds-nav__date` and one `.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-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 curve of the home view. `.ds-hero__inner` is two columns: `.ds-hero__copy` with `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead`, the countdown and `.ds-hero__crowd` (a `.ds-avatars` stack and a line), and the `.ds-signup` card. One per site.\n- `.ds-countdown`: the time left, a row of `.ds-countdown__item` tiles washed onto the gradient, each a `.ds-countdown__figure` over a `.ds-countdown__label`.\n- `.ds-signup`: the card in the hero: `.ds-signup__title`, two `.ds-form__field`s, one `--wide` primary button, a `.ds-meter` and `.ds-signup__note`.\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` (one `--inverse` button).\n- `.ds-section`: a full-width block of the home view; `--alt` white, `--first` closer to the hero. `.ds-section__head` holds a `.ds-section__kicker`, `.ds-section__title` and `.ds-section__lead`, left-aligned. `.ds-main` is the area under a page header.\n- `.ds-cols`: main and side column, 2 to 1; `--side` 1 to 3, `--even` 7 to 5, `--half` 1 to 1. `.ds-stack` stacks cards 24px apart.\n- `.ds-about`: copy beside the figures. `.ds-points` is a list of ticked `.ds-points__item`.\n- `.ds-stat`: the figures, four `.ds-stat__item` tiles two by two, each tinted with one of the fills and holding a `.ds-stat__figure` over a `.ds-stat__label`.\n- `.ds-grid`: four cards across. Each `.ds-grid__cell` has a `.ds-grid__top` (a tinted block, `--2`, `--3`, `--4`, with a `.ds-avatar--face` and a badge) and a `.ds-grid__body`: `.ds-grid__title`, `.ds-grid__meta`, `.ds-grid__text` and a link.\n- `.ds-slot`: on a `.ds-list__item`, puts a `.ds-slot__time` before the item.\n- `.ds-carousel`: a row of slides of which one shows: `.ds-carousel__track` scrolls and snaps, each `.ds-carousel__slide` fills it; `.ds-carousel__bar` holds a caption and the `.ds-carousel__dots`, the current `.ds-carousel__dot` (`is-current`) longer and in the action colour.\n- `.ds-quote`: a slide on the gradient: `.ds-quote__text` and `.ds-quote__by` with a washed `.ds-avatar` and `.ds-quote__name`.\n- `.ds-speaker`: a `.ds-avatar--face` beside `.ds-speaker__name` and `.ds-speaker__role`, at the head of a card.\n- `.ds-rows`: plain rows in a card, each `.ds-rows__item` a `.ds-rows__name` with a value or badge at the right.\n- `.ds-cta`: the closing call to action, a centred gradient card with `.ds-cta__title`, `.ds-cta__text` and the two gradient buttons.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--more` appends an arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: pill button, 14px bold, with a solid lip. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse` and `--ghost` (on the gradient only), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: data table inside a card: a small bold head on `--fill-bar`, rules between rows; `is-hover` tints a row. `.ds-table__num` right-aligns numbers; `.ds-table__title` is a row's link and `.ds-table__sub` a small line under it. 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 rules. `.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 with the lip and the soft shadow. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge, link or `.ds-panel__tools` above a rule; `.ds-panel__body` is padded; `.ds-panel__text` is a small paragraph.\n- `.ds-tabs`: here a row of chips: `.ds-tabs__tab` pills with an edge, the current one (`is-current`) filled with `--fill-button`. `.ds-toolbar` sets them at the left with a tool at the right.\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 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 questions people ask before they register.\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 `