{ "id": "v1-md-3353", "long_id": "v1.material-design.docs.s03.p03.t05.u03", "name": "Material product landing, 2016", "era": { "slug": "material-design", "code": "md", "name": "Material Design", "years": [ 2014, 2018 ], "description": "Paper and ink, 2014 to 2018: flat sheets that cast soft shadows, a coloured app bar, uppercase medium-weight buttons, two-pixel corners and one bright accent for the floating action." }, "archetype": "docs", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "A developer landing page in the paper-and-ink manner: a white toolbar with the links at the right, a full-width hero block in the primary colour with a floating action button on its lower edge, and below it a sequence of full-width bands with centred headings. The first band is a mosaic of solid colour-block cards of unequal size; later bands alternate between the page colour, a grey band of white cards and a dark band. Platform, product and developer-hub home pages built on the 2014 guidelines used this skeleton until about 2018.", "url": "https://chrono.skin/s/v1-md-3353", "preview_url": "https://chrono.skin/s/v1-md-3353/specimen.html", "files": { "STYLE.md": "# Material product landing, 2016\n\n## Summary\n\nA developer landing page in the paper-and-ink manner: a white toolbar with the links at the right, a full-width hero block in the primary colour with a floating action button on its lower edge, and below it a sequence of full-width bands with centred headings. The first band is a mosaic of solid colour-block cards of unequal size; later bands alternate between the page colour, a grey band of white cards and a dark band. Platform, product and developer-hub home pages built on the 2014 guidelines used this skeleton until about 2018.\n\n## Layout\n\n- The page is fluid: `--size-page` is `100%`; toolbar, hero, bands and footer span the window. Designed at 1440px. Content inside every band is centred in `.ds-container`, capped at `--size-content` (1200px) with `--space-5` side padding; running text is capped at `--size-measure` (600px).\n- Order on the home page: `.ds-nav` (a white sheet, `--size-bar` 64px, brand left, links right, current link marked by a `--border-width-strong` (3px) line in `--color-link`), `.ds-hero` (title, lead and button at the left, a composition of flat shapes `--size-art` wide at the right, `.ds-hero__fab` straddling the bottom edge), then `.ds-section` bands, then `.ds-footer`. There is no drawer and no sidebar on the home page.\n- A `.ds-section` has `--space-7` (72px) of padding above and below and usually opens with a centred `.ds-intro`. Bands are separated by a change of fill, never by a rule: plain (page colour), `--strong` (grey, holds white cards only) and `--inverse` (dark, holds one left-aligned `.ds-intro--start` and a button). `--tight` removes the top padding when two plain bands follow each other.\n- The mosaic `.ds-grid` has four columns and rows of `--size-tile` (168px), `--space-2` (8px) apart. One `--feature` cell spans two columns and two rows, one `--wide` cell spans two columns, the rest are single. Text sits directly on the fill.\n- `.ds-columns` splits a band in two (`--split` 7:5 for text beside a ruled list, `--cards` 1:2 for cards). `.ds-stack` piles blocks `--space-4` apart. `.ds-columns--even` stretches both columns of a split band to one height: the cards of its `.ds-stack` share the height of the neighbouring column equally, so both columns end on the same line.\n- Spacing: `--space-1` 4px, `--space-2` 8px (mosaic gap, between flat buttons), `--space-3` 16px (button padding, list row padding, table cell padding), `--space-4` 24px (card padding, gap between cards and stacked blocks), `--space-5` 40px (container side padding, gap between main column and rail, form column gap), `--space-6` 56px (under a centred intro, top of the footer), `--space-7` 72px (band padding, hero top, gap in a split band), `--space-8` 104px (hero bottom, bottom of an inner page).\n- Heights: toolbar `--size-bar` 64px; tabs and table rows `--size-row` 48px; table head and rail links `--size-row-dense` 40px; buttons and fields `--size-control` 36px; floating button `--size-fab` 56px. Other sizes: `--size-sidebar` 280px, `--size-stripe` 4px, `--size-icon` 24px, `--size-check` 18px, `--size-badge` 22px, `--size-dialog` 440px, `--size-area` 96px.\n- Inner pages (a guide, reference, a record and its table, settings, the console) have no `.ds-hero`. Under the same white `.ds-nav` comes `.ds-page-header`, a compact full-width strip in the primary colour: the `.ds-breadcrumb` on its first line, then the title and one line of description at the left and one white raised button at the right. Directly under it `.ds-tabs` is a full-width white strip with a shadow, when the page has tabs. Then `.ds-layout` in a container: the main column at the left (`.ds-stats` unboxed on the page, the `.ds-table` sheet and its status key, or a form card with fields in two columns, `--space-4` apart) and a right rail of `--size-sidebar` holding the `.ds-sidebar` card and secondary cards. The rail is always on the right and only on inner pages. A guide page uses `.ds-section--inner` with `.ds-columns--split` instead: the `.ds-prose` text at the left, notices and cards stacked at the right.\n- Views: the specimen is one site with five views. `develop` is the home view: hero, the mosaic of guides, the list of latest changes beside two cards, and the dark band that leads to the console. `guide` is a guide page: page header strip, prose beside notices and a card of related links. `reference` is a reference page: page header strip, tabs, stats, the table and its status key, with the section rail at the right. `driver` is the settings form for one table row, with all its actions at the foot of the form and the reset dialog and a destructive card in the rail. `console` is the stations list, shown empty, beside two help cards.\n- Below 900px every grid becomes one column, the mosaic and the footer two, the hero shapes are dropped and the page header stacks. Below 600px the toolbar wraps into a brand row and a full-width `.ds-nav__links` row whose items share the width and centre their links (the current one keeps `.is-current`), the account menu `.ds-menu--account` is pinned at the right of the brand row with its name (`.ds-menu__label`) hidden, the mosaic becomes one column, stats sit two by two, and table cells marked `.ds-table__extra` are hidden.\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\n- Two families: `--font-heading` is a slab serif (Roboto Slab, openly licensed, then Rockwell and Georgia) for the brand name, card titles, page titles and figures; `--font-body` and `--font-ui` are Roboto for everything else. `--font-mono` is for code only.\n- Dense application text: `--text-base` 14px on a 20px line (`--line-body` 1.43); `--text-ui` 13px (buttons, tabs, bar links, card text); `--text-small` 12px (captions, meta, table heads, field labels, footer); `--text-large` 20px (featured lead, brand name, prose lead).\n- Headings: `--text-display` 40px light (`--weight-display` 300) for the featured title only; `--text-h1` 30px, `--text-h2` 24px and `--text-h3` 16px are bold (`--weight-heading` and `--weight-bold` 700) on `--line-heading` 1.25. `--weight-ui` is 500. Nothing is heavier than 700 or lighter than 300.\n- `--ui-transform` is `uppercase` for buttons, tabs, bar links and small captions (`.ds-hero__overline`, `.ds-stat__label`, `.ds-sidebar__title`, `.ds-panel__label`). Headings are sentence case. No tracking. Links have no underline at rest and gain one on hover (`--link-decoration-hover`); quiet links never do.\n- `--color-page` `#f5f5f5` is the desk; `--color-surface` white is every card and sheet; `--color-surface-alt` `#fafafa` the current table row, current side link and code block; `--color-surface-strong` `#e0e0e0` chips, hovered rows, inline code and the empty-state disc.\n- `--fill-bar` (purple `#9c27b0`) with `--color-bar-text` white: the app bar, the tab strip and the page header. Secondary text on it is `--color-bar-text` at 70% or 87%; the search field and the current view link are a 16% wash of it. `--fill-bar-alt` (deep purple `#7820a0`) with `--color-bar-alt-text`: the legal strip under the footer. `--fill-inverse` (`#212121`) with `--color-inverse-text`: the footer.\n- `--color-button` purple with white text: raised primary button, brand tile, current page, checked checkbox. `--color-button-secondary` white with purple text: the second button and the active filter chip. `--color-accent` pink `#ff4081` with `--color-accent-text`: the floating button and count badges. `--color-link` is deep pink `#c2185b`, brightening to `#ff4081` on hover; visited links are purple. `--color-accent-alt` cyan `#00bcd4` marks \"new\".\n- `--color-fill-1` to `--color-fill-4` (purple, pink, light purple, near-black) are the picture blocks of cards (`.ds-media`), the list avatars and the side swatches. Fixed text pairs: `--color-bar-text` on fill 1 and fill 3, `--color-accent-text` on fill 2, the accent and the warning badge, `--color-inverse-text` on fill 4 and the footer, `--color-button-text` on the primary and danger buttons and on the new, success and danger badges. Links, muted text and headings are used only on the desk and on white sheets.\n- `--color-text` and `--color-heading` are black at 87%, `--color-text-muted` black at 54%; `--color-heading-alt` deep purple is the toolbar title and side titles. `--color-border` black at 12% for dividers, `--color-border-muted` `#eeeeee` inside lists, `--color-input-border` black at 54% under a field.\n- `--color-notice` (`#212121`) with white `--color-notice-text` is the information notice, a dark slab like a snackbar; the error notice is `--color-danger-surface` with a `--color-danger` (`#bd4147`) outline and text. `--color-success` teal and `--color-warning` orange are flat badge fills.\n- Surface: `--radius-control`, `--radius-panel` and `--radius-page` are 2px; `--radius-pill` 16px rounds badges, chips and pagination cells fully; discs are 50%. Cards rest on `--shadow-panel` (three tight layers, 5px blur); raised buttons on `--shadow-control` (6px blur); the floating button and a hovered button on `--shadow-control-hover` (10px blur); the active chip shows `--shadow-control-pressed` (a 1px inner ring); the featured card and the dialog float on `--shadow-dialog` (three layers up to 22px blur). All fills are flat; a hovered button darkens by 8% black; `--fill-input` is a 4% wash of the text colour above the field's bottom line. `--border-width` 1px, `--border-width-strong` 2px for tab indicators and the focus and error line; `--focus-ring` a 2px line of the focus colour at 60%; `--transition` 0.25s on the standard curve. `--backdrop-blur` is `0px` and applies to the app bar.\n- One-off values built with `color-mix()`, `calc()` or `opacity` because the vocabulary has no token: 70% and 87% of the bar text for secondary text on the bar, 16% of it for the search field and current link, 22% and 12% of it for the header shapes, 30% opacity and 20% of `--color-shadow` for the two shapes of a picture, 70% of the inverse text in the footer, a 20% grey wash behind a hovered flat button, a 12% danger wash, and line heights 1.2, 1.25, 1.3, 1.43 and 1.5.\n\n## Components\n\n- `.ds-page` on ``: page fill, body family and size.\n- `.ds-nav`: the white toolbar. `.ds-brand` at the left; `.ds-nav__links` > `.ds-nav__item` > `.ds-nav__link` at the right; `is-current` has the 3px `--color-link` line on the toolbar's bottom edge.\n- `.ds-brand`: the site's mark and name at the left of the toolbar, one link. `.ds-brand__mark` is a `--size-brand` (28px) tile dressed like the primary raised button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`, no border, as buttons in this style have none) holding the mark as inline SVG in the current colour; `.ds-brand__name` is the name at `--text-h2` in the heading font with `--weight-heading`, `--heading-tracking` and `--heading-transform`, in `--color-heading` because the toolbar is a white sheet (`--fill-panel`). The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: full-width block in the primary colour. `.ds-hero__inner` (with `.ds-container`) places the text column (`.ds-hero__title`, `.ds-hero__lead`, one raised `.ds-button--secondary`) beside `.ds-hero__art`, a group of flat `.ds-hero__shape` rectangles (`--2`, `--3`) and one accent disc (`--disc`). `.ds-hero__fab` positions the floating button on the bottom edge.\n- `.ds-container`: centres content at the page width inside any full-width block. `.ds-section` is a band (`--strong`, `--inverse`, `--tight`). `.ds-intro` is its heading: `.ds-intro__title`, `.ds-intro__text`, optional `.ds-intro__actions`; centred by default, `--start` left-aligned. `.ds-columns` (`--split`, `--cards`), `.ds-stack`, `.ds-center` and `.ds-label` (a column heading) arrange what is inside. `.ds-layout` is the inner page's main column plus right rail.\n- `.ds-page-header`: the coloured strip at the head of an inner page. `.ds-page-header__row` holds `.ds-page-header__body` (`.ds-page-header__title`, `.ds-page-header__text`) and `.ds-page-header__actions` with one `.ds-button--secondary`.\n- `.ds-breadcrumb`: small trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`. Inside the page header it takes the bar text colour.\n- `.ds-tabs`: a full-width white strip under the page header; `.ds-tabs__list` aligns the `.ds-tabs__tab` items with the container; `is-current` has a 3px line in `--color-link`.\n- `.ds-prose`: long-form text; styles h1 to h3, paragraphs, lists, `strong`, inline `code`, `pre` and links. `.ds-prose__lead` is the opening paragraph. It sits directly on the page, not on a sheet.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` is text-coloured. `.ds-links` lays several out in a row.\n- `.ds-button`: raised primary button. `--secondary` is the white raised button (use it on the hero and the page header), `--flat` has no fill (inside cards, dialogs, empty states), `--danger` is the destructive form (with `--flat`: danger-coloured text), `--fab` the accent disc with one `.ds-icon`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-icon`: 24px stroked inline SVG in the current text colour.\n- `.ds-form`: fields in two columns on a card. `.ds-form__field` wraps `.ds-form__label` and a `.ds-form__control` with only a bottom line (`--area` for a textarea, inside `.ds-form__select` for a select); `--full` spans both columns; `is-focus`, `is-invalid` with `.ds-form__error`, `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, and `.ds-form__actions` right-aligned across both columns.\n- `.ds-table`: a white shadowed sheet; the head row is a 40px grey strip with dark text, body rows are 48px with hairlines. `.ds-table__num` right-aligns numbers, `.ds-table__name` sets a code name, `.ds-table__extra` marks cells a phone can do without, `tr.is-current` is tinted.\n- `.ds-list`: an unboxed list on the page: rows divided by full-width hairlines, no sheet and no avatars. `.ds-list__item` holds `.ds-list__body` with a link-coloured `.ds-list__title` and `.ds-list__text`, and `.ds-list__meta` at the right.\n- `.ds-panel`: a white card with `.ds-panel__title`, `.ds-panel__body` and optional ruled `.ds-panel__actions`; `--pad` gives the body normal text colour for controls or a form. Use it on the grey band and in the rail.\n- `.ds-stat`: one summary figure, unboxed on the page: a 3px rule above, `.ds-stat__value`, `.ds-stat__label`. Three or more sit in a `.ds-stats` row, `--space-4` apart.\n- `.ds-grid`: the mosaic. Each `.ds-grid__cell` is a link filled with a block colour (`--2`, `--3`, `--4`), sized by `--feature` or `--wide`, holding `.ds-grid__title`, `.ds-grid__text` and a `.ds-grid__more` label pinned to the bottom.\n- `.ds-badge`: accent count tag; `--new`, `--chip`, and the status fills `--success`, `--warning`, `--danger`. Group with `.ds-badges`.\n- `.ds-sidebar`: the right-rail card of an inner page: `.ds-sidebar__title` headings and `.ds-sidebar__list` groups of 40px `.ds-sidebar__link` rows; `is-current` is link-coloured on a tint.\n- `.ds-notice`: tinted block with a 4px left stripe and `.ds-notice__title`; `--error` is a white sheet in the danger colour. `.ds-notices` stacks them.\n- `.ds-pagination`: `.ds-pagination__link` cells, `is-current` filled, `is-disabled` grey, centred under the list it pages.\n- `.ds-dialog`: sheet with the deepest shadow, `.ds-dialog__title`, `.ds-dialog__body`, right-aligned flat buttons in `.ds-dialog__actions`; shown on `.ds-overlay`.\n- `.ds-empty`: centred `.ds-empty__mark` disc, `.ds-empty__title`, `.ds-empty__text` and one flat button, directly on the page.\n- `.ds-footer`: dark band. `.ds-footer__cols` puts `.ds-footer__brand` with `.ds-footer__text` in a wide first column and three link columns (`.ds-footer__title`, `.ds-footer__list`, `.ds-footer__link`) beside it; `.ds-footer__legal` is a ruled last line.\n- `.ds-menu`: a `
` whose `.ds-menu__button` (the ``: an icon, or the account's `.ds-avatar`) opens `.ds-menu__list`, a white sheet with the dialog shadow holding 48px `.ds-menu__link` rows. Use it for the account menu and the overflow (three dots) at the end of the bar; `--start` hangs the sheet from the left, for the menu button that carries the navigation on a phone.\n- `.ds-menu--account`: the account menu in the bar; its `.ds-menu__label` shows the name beside the avatar and is hidden on a phone, where only the avatar is left.\n- `.ds-avatar`: a person as a `--size-control` disc in the accent fill with one initial; use it in the bar as the account button.\n- `.ds-tooltip`: on an icon-only button, with a `.ds-tooltip__text` child naming it; the small dark label shows on hover and focus (`is-open` statically). It sits below; `--left`, `--right` and `--above` move it. Use it on the floating button and bar icons, never on a button that already has a text label.\n- `.ds-switch`: an on-off setting that takes effect at once: a `` or `