{ "id": "v1-md-413a", "long_id": "v1.material-design.docs.s04.p01.t03.u10", "name": "Material console dashboard, 2017", "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 signed-in console in the paper-and-ink manner: a dark navigation drawer runs the full height of the window at the left, a coloured app bar with a row of tabs spans the rest, and the page under it is a grey desk covered with white cards. The cards carry the work: a welcome card with a colour block, four figure cards with a square colour tile, a chart, a ruled activity list, guide cards with a round mark on the edge of their colour head, and one floating action button that rides the bottom right corner. Admin templates, developer consoles and the signed-in side of documentation sites built on material frameworks looked like this from about 2015 to 2018.", "url": "https://chrono.skin/s/v1-md-413a", "preview_url": "https://chrono.skin/s/v1-md-413a/specimen.html", "files": { "STYLE.md": "# Material console dashboard, 2017\n\n## Summary\n\nA signed-in console in the paper-and-ink manner: a dark navigation drawer runs the full height of the window at the left, a coloured app bar with a row of tabs spans the rest, and the page under it is a grey desk covered with white cards. The cards carry the work: a welcome card with a colour block, four figure cards with a square colour tile, a chart, a ruled activity list, guide cards with a round mark on the edge of their colour head, and one floating action button that rides the bottom right corner. Admin templates, developer consoles and the signed-in side of documentation sites built on material frameworks looked like this from about 2015 to 2018.\n\n## Layout\n\n- The page is fluid: `--size-page` is `100%`. Designed at 1440px. `.ds-app` is a two-column grid: the `.ds-sidebar` drawer (`--size-drawer`, 256px) and `.ds-body`, which takes the rest and holds the `.ds-nav` app bar, `.ds-main` and, at the foot, `.ds-footer`. Nothing is centred and there is no maximum content width: cards stretch with the window, as in an application.\n- The drawer starts at the very top of the window, beside the app bar, not under it. Its head (`.ds-sidebar__head`, `--size-bar` 64px tall) holds the `.ds-brand`; under it come the account block and the link groups. The app bar is two rows: a 64px row with the view title, a search field (`--size-search` 320px) and round tool buttons, then a `--size-row` (48px) row of tabs, the views of the project, whose current tab has a 2px line in `--color-bar-text` on the bar's bottom edge.\n- `.ds-main` is a vertical stack of rows with `--space-4` (24px) between them and `--space-4` of padding at the sides and top. Rows are either a full-width card, a four-up row (`.ds-stats`, `.ds-grid`) or a `.ds-row`, a 12-column grid: `.ds-row__wide` (8) with `.ds-row__narrow` (4), or `.ds-row__main` (7) with `.ds-row__side` (5). `.ds-stack` piles cards in one column of a row. A group of cards may be introduced by `.ds-subhead`, a small caption set on the desk.\n- Everything sits on a card; only `.ds-subhead`, the page header of an inner page and the footer line are set directly on the desk. Cards are separated by the 24px gutter and their shadow, never by rules on the desk.\n- Home page order: `.ds-hero` (welcome card), `.ds-stats`, chart card beside the activity list, `.ds-subhead` and `.ds-grid`, then text and secondary cards. `.ds-fab` is the last child of `.ds-main`: it is sticky, so the floating button stays 24px above the bottom right corner of the window while the view scrolls and comes to rest under the last row.\n- Spacing is on an 8px grid: `--space-1` 4px (helper text, pagination gap, tool buttons), `--space-2` 8px (between flat buttons, card action padding, icon to label in a button), `--space-3` 16px (figure card padding, guide card text padding, button side padding, paragraph gap), `--space-4` 24px (gutter between cards, card side padding, drawer and bar side padding, field gap), `--space-5` 32px (welcome card padding), `--space-6` 48px (bottom of the view, overlay padding), `--space-7` 64px (spare step).\n- Heights: drawer head, app bar row and card head `--size-bar` 64px; tabs, drawer links and table rows `--size-row` 48px; avatars, tool buttons and the round mark `--size-row-dense` 40px; buttons and fields `--size-control` 36px; floating button `--size-fab` 56px; two-line list rows 64px. Other sizes: `--size-brand` 28px (brand tile), `--size-tile` 64px (figure card tile), `--size-media` 88px (colour head of a guide card), `--size-art` 380px (colour block of the welcome card), `--size-chart` 232px, `--size-measure` 640px (running text), `--size-stripe` 4px (current drawer link), `--size-icon` 24px, `--size-check` 18px, `--size-badge` 22px, `--size-dialog` 440px, `--size-area` 96px.\n- Inner pages (a list of records, one record and its settings, alerts, a guide) keep the drawer and the app bar. There is no `.ds-hero`. `.ds-main` opens with `.ds-head`, set directly on the desk: the `.ds-breadcrumb`, then `.ds-page-header` (24px title, one grey line, raised buttons at the right). Under it a list page has its notices side by side (`.ds-notices--pair`) and one `.ds-panel` that holds `.ds-tabs` along its top edge, the `.ds-table` and a `.ds-panel__foot` with the row count and `.ds-pagination`. An edit page is a `.ds-row`: the form card (`.ds-row__wide`, fields two to a line in `.ds-form__row`, actions in a ruled strip at the bottom right) and a `.ds-stack` of secondary cards (`.ds-row__narrow`; `.ds-stack--fill` lets its last block take the remaining height). A guide page is a `.ds-row` with the text card (`.ds-row__main`) beside a stack of cards (`.ds-row__side`). On a separate application screen the bar of an inner page may drop the tab row and show a back arrow before the title. The `.ds-footer` line closes the body column.\n- Views: the specimen is one console with five views; the drawer links and the tab row of the app bar both lead to them and both mark the current one. `dashboard` is the home view: welcome card, figure cards, the chart beside recent activity, the guide cards and the floating button. `channels` is a list of records: page header, two notices, and the card with tabs, table and pagination. `channel` is one record: page header with its actions, the settings form, the key card and the pause dialog. `alerts` is the alerts screen, shown empty, beside a list of channels worth watching. `guide` is the quick start: the text card beside related links and two cards.\n- Below 900px the drawer shrinks to its head with the brand, above the body, and its links go; the menu button `.ds-nav__menu` (a `.ds-menu--start` in the bar) appears and opens a list with the same links, the tab row `.ds-nav__links` scrolls sideways with the current tab still marked `.is-current`, the search field hides, four-up rows become two-up and every `.ds-row` becomes one column. Below 600px four-up rows and form rows become one column, 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- `--color-bar` soft teal `#80cbc4` with dark `--color-bar-text` `#212121`: navigation bar and header band carry dark text, not white. `--color-bar-alt` and `--color-inverse` are blue-grey `#455a64` with white text (toolbar, footer).\n- Green is the colour of action: `--color-button`, `--color-link`, `--color-focus` and `--color-success` are `#46873b` with white button text; `--color-link-hover` stays `#46873b`, so hover is shown by elevation; `--color-link-active` is `#455a64`.\n- `--color-accent` mint `#64ffda` with `#212121` text: floating button, count badges. The 3px indicator under the current toolbar link and tab is `--color-link`, which reads on a white sheet under every palette. `--color-accent-alt` is blue-grey `#455a64`.\n- Page `#f3f3f3`, sheets white, `--color-surface-alt` `#fafafa`, `--color-surface-strong` `#e3e3e3`; borders `#dcdcdc`, inner dividers `#ebebec`. Text `#212121`, secondary `#757575`, section titles `#444444`.\n- Block fills: teal `#80cbc4`, mint `#64ffda`, light green `#6ab344` (all with dark text), blue-grey `#455a64` (white text). `--color-danger` `#c2185b`, `--color-warning` amber `#ffc400`, notice `#e3e3e3`.\n- One family, Roboto, for body, headings and UI; `--font-mono` for code only.\n- Dense text: `--text-base` 13px on a 24px line (`--line-body` 1.85), `--text-small` 12px, `--text-ui` 14px.\n- Small regular headings: `--text-display` 34px, `--text-h1` 24px, `--text-h2` 20px, `--text-h3` 15px at `--weight-bold` 500; `--text-large` 18px for the lead.\n- `--ui-transform` is `none`: buttons, navigation and tabs are sentence case at `--weight-ui` 500. No uppercase anywhere, no underlines, no tracking.\n- Raised paper: every sheet floats visibly. `--shadow-panel` is a three-layer shadow (10px blur, 4px drop); `--shadow-control` a deeper one (14px blur, 6px drop) on resting buttons; `--shadow-control-hover` drops 8px; `--shadow-control-pressed` falls back to two tight layers; `--shadow-dialog` is two layers, 14px blur with a 12px drop.\n- All corners are 2px, including `--radius-pill`: badges, chips and pagination cells are small rectangles, not pills.\n- Fills are flat; depth comes from shadow only. `--border-width` 1px, `--border-width-strong` 3px for indicators, stat rules and the focus and error line of a field. A hovered button darkens: `--fill-button-hover` is the button colour mixed with 12% black. `--fill-input` is transparent, so fields are a bottom line only; `--focus-ring` is a solid 3px line; `--transition` is a quick 0.15s ease-out.\n- In this layout the toolbar is a white sheet (`--fill-panel`) with `--color-text-muted` links and a `--color-heading` brand name; `--fill-bar` with `--color-bar-text` fills the hero and the inner page header instead. `--fill-inverse` with `--color-inverse-text` is the dark band and the footer. `--color-surface-strong` is the grey band and the table head, both with `--color-text`.\n- Text on fills follows fixed pairs: `--color-bar-text` on the hero, the page header, `--color-fill-1` and `--color-fill-3`; `--color-accent-text` on the accent, `--color-fill-2` and the warning badge; `--color-inverse-text` on `--color-fill-4`, the dark band and the footer; `--color-button-text` on the primary and danger buttons and on the new, success and danger badges. Links and muted text are used only on the page and on white sheets, never on a grey, coloured or dark band.\n- One-off values built with `color-mix()`, `calc()` or `opacity` because the vocabulary has no token: 87% and 70% of the bar text colour for the hero lead, the page header text and its breadcrumb; 14%, 22% and 40% washes of it for the hero shapes; 87% opacity for card text on a colour block; 87%, 70% and 40% of the inverse text in the dark band and footer; 66% of the quiet link colour for rail links; a 20% grey wash behind a hovered flat button; line heights 1.18, 1.2, 1.43, 1.6 and 1.85.\n\n- Tonal sheets: `--shadow-panel` is `none` and sheets have no outline; `--fill-page` is `--color-page` darkened with 14% black, so the page is always a step darker than the sheets on it, under a light palette and under a dark one, and a sheet is told from the page by its tone alone.\n- Buttons keep a tight lift: `--shadow-control` is a 2px-blur pair, `--shadow-control-hover` a 10px-blur pair; the dialog alone drops a 10px shadow.\n- `--radius-control` and `--radius-panel` are 2px; `--radius-page` is 0, so the largest containers and grid cards are square; `--radius-pill` is a full pill for badges, chips and pagination.\n- Flat fills; fields are filled with `--color-input` above their bottom line. `--border-width` 1px dividers, `--border-width-strong` 2px indicators, `--focus-ring` a 1px line; `--transition` is slow and soft, 0.4s.\n\n## Components\n\n- `.ds-page` on ``: desk fill, body family and size.\n- `.ds-app`, `.ds-body`, `.ds-main`: the frame described above. `.ds-row` with `.ds-row__wide`, `.ds-row__narrow`, `.ds-row__main`, `.ds-row__side` splits a row (`--stretch` makes its cards equally tall); `.ds-stack` piles cards (`--fill` stretches the last one); `.ds-subhead` captions a group; `.ds-head` groups breadcrumb and page header.\n- `.ds-brand`: the site's mark and name, one link in the drawer head. `.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-alt-text` at 70%, which keeps it apart from the drawer head under every palette, 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-alt-text` because the drawer head is filled with `--fill-bar-alt`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-sidebar`: the navigation drawer. `.ds-sidebar__head` holds the brand; `.ds-sidebar__account` an `.ds-sidebar__avatar` disc with `.ds-sidebar__who` (`.ds-sidebar__name`, `.ds-sidebar__role`); `.ds-sidebar__title` is a small uppercase group heading; `.ds-sidebar__list` a ruled group of 48px `.ds-sidebar__link` rows, each an `.ds-icon` and a label, optionally a badge with `.ds-sidebar__count`. States `is-hover`, `is-current`.\n- `.ds-nav`: the app bar. `.ds-nav__row` holds `.ds-nav__title` (the current project or section), `.ds-nav__search` with `.ds-nav__input`, and `.ds-nav__tools` of round `.ds-nav__tool` icon buttons (`.ds-nav__dot` marks unread alerts; `.ds-nav__menu` is the tool that opens the drawer on small windows: a `.ds-menu` listing the side navigation). `.ds-nav__links` > `.ds-nav__item` > `.ds-nav__link` is the tab row; `is-current` is full strength with a 2px `--color-bar-text` line. Leave the tab row out on inner pages.\n- `.ds-hero`: the welcome card of a home view. `.ds-hero__body` holds `.ds-hero__label` (overline), `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions` (one raised button, one flat); `.ds-hero__art` is the colour block with `.ds-hero__figure`, `.ds-hero__caption` and a `.ds-hero__spark` line drawing whose `.ds-hero__area` is the tinted area under the line.\n- `.ds-page-header`: the head of an inner page, on the desk. `.ds-page-header__body` with `.ds-page-header__title` and `.ds-page-header__text`; `.ds-page-header__actions` at the right, bottom-aligned.\n- `.ds-prose`: long-form text inside a card; styles h1 to h3, paragraphs, lists, `strong`, inline `code`, `pre` and links. `.ds-prose__lead` is the 18px 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 blue button, 36px, uppercase. `--secondary` raised white, `--flat` no fill or shadow and link-coloured text (inside cards, dialogs, banners), `--danger` filled with `--color-danger` for a destructive action, `--flat` with `--danger` its flat form, `--fab` the 56px accent disc holding one `.ds-icon`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`. `.ds-fab` is the sticky wrapper that places the view's one floating button.\n- `.ds-icon`: 24px stroked inline SVG in the current colour; `--small` is 18px.\n- `.ds-form`: fields inside a card. `.ds-form__row` puts two fields on a line; `.ds-form__field` wraps a small `.ds-form__label` above a `.ds-form__control`, which has only a bottom line (`--area` for a textarea, wrapped in `.ds-form__select` for a select). `is-focus` thickens the line in `--color-focus`; `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. The buttons go in the card's `.ds-panel__actions--end`.\n- `.ds-table`: sits inside a `.ds-panel` with no box of its own; 48px rows divided by hairlines, a small grey bold head, `.ds-table__num` for right-aligned figures, `.ds-table__name` for the bold first column, `.ds-table__extra` for cells a phone can do without, `tr.is-current` tinted.\n- `.ds-list`: ruled two-line rows inside a `.ds-panel`. `.ds-list__item` holds an `.ds-list__avatar` disc (`--alt`, `--accent`, `--dark` pick the fill), `.ds-list__body` with `.ds-list__title` and `.ds-list__text`, and `.ds-list__meta` at the right.\n- `.ds-panel`: the card. `.ds-panel__head` (64px) holds `.ds-panel__title`, or `.ds-panel__heading` with the title and a `.ds-panel__sub` line, and optional `.ds-panel__tools` of round `.ds-panel__tool` icon buttons. `.ds-panel__body` is the padded content (`--top` when there is no head; `.ds-panel__label` is a small uppercase caption inside it). `.ds-panel__actions` is a ruled strip of flat buttons (`--end` right-aligns a form's buttons); `.ds-panel__foot` a ruled strip for a row count and pagination.\n- `.ds-chart`: an inline SVG chart inside a card body, `--size-chart` tall. Bars paint in `--color-button`; wrap grid lines in `.ds-chart__grid` and a line series in `.ds-chart__line`. `.ds-chart__legend` lists `.ds-chart__key` items with a `.ds-chart__swatch` (`--line` for the line series).\n- `.ds-stat`: one figure card. Four sit in a `.ds-stats` row. `.ds-stat__main` holds the square `.ds-stat__tile` with an icon (`.ds-stat--2`, `--3`, `--4` pick the fill) and the right-aligned `.ds-stat__figure`: a small `.ds-stat__label` above the `.ds-stat__value` (24px, tabular figures). `.ds-stat__foot` is a ruled line of grey context under it.\n- `.ds-grid`: four guide cards. Each `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) has a flat `.ds-grid__media` head carrying a small uppercase kind label and the round white `.ds-grid__mark` that straddles its lower edge, then `.ds-grid__title`, `.ds-grid__text` and a ruled `.ds-grid__actions` strip.\n- `.ds-tabs`: a hairline-ruled row of uppercase `.ds-tabs__tab` along the top of a card; `is-current` is dark with a 2px line in `--color-link`. A tab may carry a count badge.\n- `.ds-badge`: amber count; `--new` pink, `--chip` a 32px grey chip. Status labels: `--success`, `--warning`, `--danger`, flat fills, one or two words in sentence case. Group with `.ds-badges`. `.ds-panel__key` puts such a group at the left of a `.ds-panel__foot` as the key to the status labels of the table above: the count and the three status labels.\n- `.ds-notice`: a banner sheet: an `.ds-icon`, `.ds-notice__body` with a `.ds-notice__title` and one line, and one flat button that takes the banner's text colour. `--error` uses the danger surface and danger text. Group with `.ds-notices` (`--pair` sets two side by side).\n- `.ds-pagination`: a row of `.ds-pagination__link` cells in a card foot; `is-current` is filled with the button colour, `is-disabled` is grey; previous and next are chevron icons.\n- `.ds-breadcrumb`: 12px grey trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`.\n- `.ds-dialog`: a white sheet with the deepest shadow, `.ds-dialog__title`, `.ds-dialog__body` and right-aligned flat buttons in `.ds-dialog__actions`. No title bar, 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, inside a `.ds-panel`.\n- `.ds-footer`: one quiet line at the foot of the body column, on the desk above a hairline: `.ds-footer__list` of `.ds-footer__link` at the left, `.ds-footer__legal` at the right. It is never a dark band; the drawer is the dark element.\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-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 `