{ "id": "v1-md-1bb2", "long_id": "v1.material-design.docs.s01.p11.t11.u02", "name": "Material paper docs, 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 documentation page built from flat sheets of \"paper\": a full-width blue-grey bar that runs into the page header, a white navigation drawer, and white cards that float on a `#fafafa` page with small, soft, two- or three-layer shadows. Text is one humanist grotesque (Roboto) at 16px on a 24px line, labels and buttons are 14px medium capitals, corners are 2px, and colour comes from one saturated primary (cyan), one accent (amber) and solid block fills instead of gradients or borders. The look was standard on developer documentation, component libraries and product sites that followed the 2014 paper-and-ink guidelines, until about 2018.", "url": "https://chrono.skin/s/v1-md-1bb2", "preview_url": "https://chrono.skin/s/v1-md-1bb2/specimen.html", "files": { "STYLE.md": "# Material paper docs, 2016\n\n## Summary\n\nA documentation page built from flat sheets of \"paper\": a full-width blue-grey bar that runs into the page header, a white navigation drawer, and white cards that float on a `#fafafa` page with small, soft, two- or three-layer shadows. Text is one humanist grotesque (Roboto) at 16px on a 24px line, labels and buttons are 14px medium capitals, corners are 2px, and colour comes from one saturated primary (cyan), one accent (amber) and solid block fills instead of gradients or borders. The look was standard on developer documentation, component libraries and product sites that followed the 2014 paper-and-ink guidelines, until about 2018.\n\n## Layout\n\n- The page is fluid: `--size-page` is `100%`; the bar, the header band and the footer span the window. Designed at 1440px. The drawer plus the content column are capped at `--size-content` (1160px); running text is capped at `--size-measure` (720px).\n- Order: `.ds-nav` (one bar, `--size-bar` 64px), `.ds-hero` (same colour as the bar, no seam between them, title aligned with the content column), then `.ds-layout`: a `.ds-sidebar` drawer on the left (`--size-sidebar` 200px, white, shadowed) and `.ds-main`, then `.ds-footer`.\n- Inside `.ds-main` the page is a stack of `.ds-section` blocks. Sections are separated by a `--border-width` rule in `--color-border` and `--space-6` of padding above and below the rule; they are not boxed. Only data (tables, lists, forms, cards) sits on white sheets.\n- Everything is on an 8px grid. `--space-1` 4px (text to helper text, pagination gap), `--space-2` 8px (gap between cards in a grid, between flat buttons, card action padding), `--space-3` 16px (button side padding, paragraph gap, list row padding, card text padding), `--space-4` 24px (panel and dialog padding, table cell side padding, bar side padding, field gap), `--space-5` 32px (heading top margin, footer column gap), `--space-6` 48px (section padding, drawer to content), `--space-7` 64px (bottom of the header band), `--space-8` 80px (bottom of the page).\n- Heights: bar `--size-bar` 64px; table rows and tabs `--size-row` 48px; drawer links and avatars `--size-row-dense` 40px; buttons and text fields `--size-control` 36px; floating action button `--size-fab` 56px; two-line list rows 72px (`--size-row` + `--space-4`).\n- Other sizes: `--size-icon` 24px, `--size-check` 18px, `--size-badge` 22px, `--size-stripe` 4px (left stripe of a notice), `--size-media` 136px (colour block of a grid card), `--size-dialog` 440px, `--size-area` 96px (textarea).\n- Inner pages (guide, reference, an edit screen, saved pages) have no `.ds-hero`. The `.ds-nav` bar stays and gains the sheet shadow the header band otherwise carries (`.ds-nav--inner` on a separate page; the specimen sets it for every view but the home view). Below it the same two columns remain: the `.ds-sidebar` drawer on the left and `.ds-main`. `.ds-main` opens with `.ds-breadcrumb`, then `.ds-page-header` directly on the page (34px title, one grey line, raised buttons at the right, `--space-3` above and `--space-4` below), then `.ds-tabs` immediately under it so the tab hairline is the header's rule. Under the tabs come the white sheets, `--space-4` apart: `.ds-stats`, then `.ds-table`. An edit screen puts `.ds-columns` under the page header: the form on a `.ds-panel--form` sheet on the left, a `.ds-stack` of secondary cards on the right. A guide page is `.ds-prose` in a `.ds-section`, with its notices, a \"see also\" row of links and the pagination below.\n- Views: the specimen is one site with five views. `overview` is the home view: header band, drawer, the grid of topic cards and the updates list beside a card and a notice. `guide` is a long-form guide page with prose, notices, related links and pagination. `reference` is a reference page: breadcrumb, page header, tabs, the stat sheet, the table and its status key. `edit` is the form for one table row, with the page actions in the page header and the confirmation dialog beside the form. `saved` is the reader's saved pages, shown empty, above a list of recently viewed pages.\n- Below 900px the drawer becomes one scrolling row of links above the content, the floating button moves up to sit inside the header band, `--space-3` above its bottom edge, so it does not cover the row of links, grids and the footer go to two columns, `.ds-columns` to one and the page header stacks. Below 600px the bar (`.ds-nav`) wraps into a brand row and a row of `.ds-nav__links` with tighter link padding, the account menu `.ds-menu--account` is pinned at the right of the brand row with its name (`.ds-menu__label`) hidden, the current link keeps `.is-current`, the tabs scroll sideways, cards and stats stack, and table cells marked `.ds-table__extra` are hidden so the table fits a phone.\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- One family, Roboto, then Segoe UI and Helvetica Neue; `--font-mono` for code only.\n- Large light headings over small text: `--text-display` 56px on `--line-display` 1.1, `--text-h1` 34px, `--text-h2` 26px, all at weight 300; `--text-h3` 18px at `--weight-bold` 500. `--line-heading` 1.3.\n- `--text-base` 15px on a 24px line (`--line-body` 1.6) at weight 400; `--text-large` 20px for the lead; `--text-small` and `--text-ui` are both 13px.\n- `--ui-transform` uppercase at `--weight-ui` 500 for buttons, tabs and navigation; no tracking.\n- Links have no underline at rest and gain one on hover (`--link-decoration-hover`); quiet links never do.\n\n- White page: `--color-page`, `--color-canvas` and `--color-surface` are all `#ffffff`; a sheet is told from the page by its shadow alone. `--color-surface-alt` `#f5f5f5`, `--color-surface-strong` `#e0e0e0`.\n- `--color-bar` coral `#ee6e73` with white text: the navigation bar and header band. `--color-bar-alt` is the lighter coral `#e57373`; `--color-inverse` blue-grey `#78909c` with white text is the footer and any inverted block.\n- Teal `#26a69a` is the colour of action: `--color-button` with white text and `--color-focus`. Links are light blue `#039be5`, hover `#2196f3`, active `#1867c0`; visited links keep the link colour.\n- `--color-accent` amber `#ffb731` with `#212121` text: floating button, indicators, count badges. `--color-accent-alt` is pink `#ff4081`.\n- Text and headings are black at 87%, secondary text `#616161`; `--color-heading-alt` is coral, so section and panel titles pick up the bar colour.\n- Block fills: coral `#ee6e73`, teal `#26a69a` and blue-grey `#78909c` carry white text, amber `#ffb731` carries `#212121`.\n- Dividers are black at 14% (`--color-border`) and `#eeeeee` (`--color-border-muted`). `--color-danger` red `#f44336`, `--color-success` deep teal `#009688`, `--color-warning` amber; the notice is `#f5f5f5` with dark text.\n\n## Components\n\n- `.ds-page` on ``: `#fafafa` page, family, 16px/1.5 text.\n- `.ds-nav`: the 64px bar. `.ds-brand` sits at its left; `.ds-nav__links` > `.ds-nav__item` > `.ds-nav__link` are uppercase 14px links at 70% white; `is-current` is full white with a 2px line in `--color-bar-text` on the bar's bottom edge. `.ds-nav__links--end` holds right-hand links. `.ds-nav--inner` adds the sheet shadow on pages without a header band.\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`) with a `--border-width` ring of `--color-bar-text` at 70%, which keeps it apart from the bar when a palette's button and bar colours are close, holding the mark as inline SVG in the current colour; `.ds-brand__name` is the name at `--text-large` in the heading font with `--weight-heading`, `--heading-tracking` and `--heading-transform`, in `--color-bar-text` because the bar is filled with `--fill-bar`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: header band in the bar colour. `.ds-hero__title` (56px), `.ds-hero__lead` (20px), one raised `.ds-button--secondary`, and optionally `.ds-hero__fab`, a floating button that straddles the band's bottom edge.\n- `.ds-page-header`: the head of an inner page, unboxed on the page. `.ds-page-header__body` holds `.ds-page-header__title` (34px regular, like the prose h1) and `.ds-page-header__text` (one 16px grey line); `.ds-page-header__actions` sits at the right, bottom-aligned, with one raised `.ds-button`. Never give it a fill or a rule; put `.ds-tabs` or the first sheet under it.\n- `.ds-layout`, `.ds-main`: drawer and content side by side. `.ds-section` is one ruled block of the content (`--first`, `--last`), `.ds-section__title` its 24px grey heading, `.ds-section__label` a small uppercase caption. `.ds-columns` puts two blocks side by side; `.ds-stack` piles several cards `--space-4` apart in one of the two columns, so a short column can be filled to the height of its neighbour.\n- `.ds-prose`: long-form text; styles h1 to h3, paragraphs, lists, `strong`, inline `code`, `pre` and links. `.ds-prose__lead` is the 20px opening paragraph.\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 cyan button, 36px tall, uppercase. `--secondary` is raised white, `--flat` has no fill or shadow and cyan text (use it inside cards, dialogs and empty states), `--fab` is the 56px amber disc holding one `.ds-icon`, `--danger` is a raised button filled with `--color-danger` and white text for a destructive action (delete, remove); `--flat` together with `--danger` is the flat form with danger-coloured text, for cards and dialogs. 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`: stacked fields on a white sheet. `.ds-form__field` wraps a small `.ds-form__label` above a `.ds-form__control`, which has no box, only a bottom line on `--fill-input` (transparent here), with its top corners at `--radius-control` and a side inset of twice that radius, so a surface set that fills its fields gets a rounded, inset field (`--area` for a textarea, wrapped in `.ds-form__select` for a select). `is-focus` thickens the line in cyan; `is-invalid` on the field plus `.ds-form__error` shows an error; `.ds-form__hint` is help text; `.ds-form__check` with `.ds-form__checkbox` is a checkbox; `.ds-form__actions` right-aligns the buttons.\n- `.ds-table`: a white shadowed sheet with 48px rows divided by hairlines; small grey medium-weight head; `.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`: a white sheet of two-line rows. `.ds-list__item` holds an optional `.ds-list__avatar` disc (`--alt`, `--accent`), `.ds-list__body` with `.ds-list__title` and `.ds-list__text`, and `.ds-list__meta` on the right.\n- `.ds-panel`: a card with `.ds-panel__title`, `.ds-panel__body` and optional `.ds-panel__actions` of flat buttons; `--form` holds a form.\n- `.ds-stat`: one summary figure. Three or more sit in a `.ds-stats` row, which is a single white shadowed sheet; the figures share it and are divided by vertical hairlines, not separate cards. `.ds-stat__value` is the number (34px regular, tabular figures) and `.ds-stat__label` the small grey medium-weight caption under it, in sentence case.\n- `.ds-grid`: four cards 8px apart. Each `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) has a solid `.ds-grid__media` block carrying the title, a `.ds-grid__text` and `.ds-grid__actions`.\n- `.ds-tabs`: a hairline-ruled row of uppercase `.ds-tabs__tab`; `is-current` is dark with a 2px line in `--color-link`.\n- `.ds-badge`: amber count pill; `--new` is pink, `--chip` is a 32px grey chip. Status labels are the same 22px pill with a flat fill: `--success` green with white text (stable, paid, online), `--warning` orange with dark text (draft, pending, due soon), `--danger` in the danger colour with white text (removed, failed, overdue). Use them in table cells and list meta; keep the label to one or two words in sentence case. Group with `.ds-badges`.\n- `.ds-sidebar`: the drawer. `.ds-sidebar__title` is a small uppercase heading, `.ds-sidebar__list` a group of 40px `.ds-sidebar__link` rows; `is-current` is cyan on a tint.\n- `.ds-notice`: tinted block with a 4px left stripe and a `.ds-notice__title`; `--error` is a white sheet with the stripe and text in the danger colour. Group with `.ds-notices`.\n- `.ds-pagination`: a row of round `.ds-pagination__link`; `is-current` is a filled cyan disc, `is-disabled` is grey; previous and next are chevron icons.\n- `.ds-breadcrumb`: 13px grey trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`.\n- `.ds-dialog`: a white 2px-cornered sheet with the deepest shadow, `.ds-dialog__title`, `.ds-dialog__body` and right-aligned flat buttons in `.ds-dialog__actions`. No title bar and no close cross. Sits 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 with no box.\n- `.ds-footer`: dark grey band, four `.ds-footer__col` each topped by a faint rule, with `.ds-footer__title`, `.ds-footer__list`, `.ds-footer__link` and a `.ds-footer__legal` 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 `