{ "id": "v1-md-536b", "long_id": "v1.material-design.app.s05.p03.t06.u11", "name": "Material card feed, 2015", "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": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "A signed-in feed application in the paper-and-ink manner: one coloured app bar carries the brand, a search field and the views, a row of tabs continues it on the home screen, and the page under it is a pale desk of white cards. The home screen is a featured card with a floating action button on the seam of its picture, then a staggered grid of cards whose pictures are flat colour blocks with two drawn shapes; a detail screen opens with a tall coloured header that the first sheet overlaps. Social, travel, recipe and news applications built on the 2014 guidelines looked like this on the web from about 2015 to 2018.", "url": "https://chrono.skin/s/v1-md-536b", "preview_url": "https://chrono.skin/s/v1-md-536b/specimen.html", "files": { "STYLE.md": "# Material card feed, 2015\n\n## Summary\n\nA signed-in feed application in the paper-and-ink manner: one coloured app bar carries the brand, a search field and the views, a row of tabs continues it on the home screen, and the page under it is a pale desk of white cards. The home screen is a featured card with a floating action button on the seam of its picture, then a staggered grid of cards whose pictures are flat colour blocks with two drawn shapes; a detail screen opens with a tall coloured header that the first sheet overlaps. Social, travel, recipe and news applications built on the 2014 guidelines looked like this on the web from about 2015 to 2018.\n\n## Layout\n\n- The page is fluid: `--size-page` is `100%`; the app bar, the tab strip, the page header and the footer span the window. Designed at 1440px. Content is centred and capped at `--size-content` (1240px) with `--space-4` at the sides; running text is capped at `--size-measure` (640px).\n- Order on the home screen: `.ds-nav` (one row, `--size-bar` 64px: brand at the left, `.ds-nav__search` and the view links at the right), `.ds-appbar` (the same fill, no seam, holding `.ds-tabs--bar` and carrying the bar's shadow), then `.ds-main`: the `.ds-hero` featured card, a `.ds-toolbar` (section title, filter chips, one filter field), the `.ds-grid` and a centred `.ds-pagination`. Then `.ds-footer`. There is no drawer and no side column on the home screen.\n- `.ds-grid` is four columns (`.ds-grid__col`), `--space-3` (16px) apart, each a stack of cards `--space-3` apart. Cards differ in height because their pictures do (`.ds-grid__media`, `--tall`, `--short`, or no picture at all), which staggers the rows; the last card of every column stretches so all columns end on one line.\n- Everything is on an 8px grid. `--space-1` 4px (helper text, pagination gap, stat label to value), `--space-2` 8px (card action padding, between flat buttons, chip gaps), `--space-3` 16px (gap between cards of the grid, card text padding, button side padding), `--space-4` 24px (gap between sheets of an inner page, sheet side padding, bar side padding, top of the page), `--space-5` 32px (above the toolbar, padding of a text sheet and of the featured card), `--space-6` 48px (bottom of the page, side padding of the featured card text), `--space-7` 64px and `--space-8` 80px (spare steps).\n- Heights: bar and card head `--size-bar` 64px; tabs, table rows and side links `--size-row` 48px; avatars `--size-row-dense` 40px; buttons, fields and bar links `--size-control` 36px; floating button `--size-fab` 56px. Other sizes: `--size-brand` 32px, `--size-media` 160px (picture of a grid card; 240px tall, 96px short), `--size-header` 248px (featured picture and the tall page header), `--size-overlap` 56px, `--size-side` 320px (side column of an inner page), `--size-search` 240px, `--size-icon` 24px, `--size-check` 18px, `--size-badge` 22px, `--size-stripe` 4px, `--size-dialog` 440px, `--size-area` 120px.\n- Inner pages (one item, a compose screen, a personal collection) have no `.ds-hero` and no tab strip. Directly under `.ds-nav` comes `.ds-page-header` in the bar's fill: the `.ds-breadcrumb` on its first line and, at its foot, the page title with one line of description at the left and one raised white button at the right. On a detail page it is `--size-header` tall and decorated with two flat shapes; `.ds-page-header--compact` is the short, plain form for forms and lists. `.ds-main--overlap` pulls the content up by `--size-overlap`, so the first sheets lie over the header's lower edge. Below it `.ds-layout` has two columns: the main column and a side column of `--size-side` at the right, both stacks of sheets `--space-4` apart (`.ds-stack`). A detail page puts `.ds-stats`, the text sheet and the table sheet in the main column and the notes list, the `.ds-sidebar` card and small cards at the side. A compose page puts the form sheet with its buttons in a ruled strip at the bottom in the main column, notices and the dialog at the side. A collection page puts a sheet with `.ds-tabs` along its top edge in the main column. `.ds-layout--even` stretches both columns to one height.\n- Views: the specimen is one application with four views. `feed` is the home view: tab strip, featured card with the floating button, filter toolbar, the staggered grid and pagination. `route` is one walk: tall page header, figures, the description with its tags, the table of stages, and at the side the notes, more walks and links. `share` is the compose form with its actions, a saved notice, an error notice and the discard dialog. `saved` is the reader's saved walks, shown empty under its tabs, beside recently opened walks and a help card.\n- Below 900px the search field goes, the featured card stacks picture over text with the floating button on the picture's lower right edge, the grid has two columns, the side column drops under the main one and the page header stacks. Below 600px the bar wraps into a brand row and a full-width `.ds-nav__links` row that is centred when it fits and scrolls sideways when it does not (the current link 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 grid is one column, figures 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- `--font-body` and `--font-ui` are the system sans-serif stack (Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue); `--font-heading` is Roboto (openly licensed), then Noto Sans. `--font-mono` (Source Code Pro, Roboto Mono) is for code only.\n- Light text: `--text-base` 16px at `--weight-body` 300 on a 26px line (`--line-body` 1.6); `--text-ui` 14px (buttons, tabs, bar links, secondary row text, card text); `--text-small` 13px (meta, captions, table heads, field labels, footer); `--text-large` 18px (brand name, headline lead).\n- Small regular headings: `--text-display` 34px light (`--weight-display` 300) for the headline of the home strip only; `--text-h1` 24px (page title, figures), `--text-h2` 20px (sheet titles, list card names), `--text-h3` 16px medium (card titles), `--weight-heading` 400, `--line-heading` 1.3. `--weight-bold` and `--weight-ui` are 500. Nothing is heavier than 500 or lighter than 300.\n- `--ui-transform` is `uppercase` for buttons, tabs, bar links and small captions (`.ds-subhead`, `.ds-sidebar__title`). Headings are sentence case; no tracking. Links in running text are underlined and lose the underline on hover (`--link-decoration`, `--link-decoration-hover`); quiet links, titles and navigation are never underlined.\n- `--color-page` `#eceff1` is the desk; `--color-surface` white is every sheet; `--color-surface-alt` `#f6f6f6` the chosen and hovered list row, the current table row and side link; `--color-surface-strong` `#e0e0e0` chips, hovered table rows, inline code, the track of a progress line and the empty-state disc.\n- `--fill-bar` (deep orange `#fd5632`) with `--color-bar-text` white: the navigation bar; other links on it are the bar text at 70%. `--fill-bar-alt` (dark blue-grey `#263238`) with `--color-bar-alt-text`: the headline strip and the page header strip; secondary text on it is that colour at 87% or 70%. `--fill-inverse` with `--color-inverse-text`: the footer line.\n- `--color-button` deep orange with white text: raised primary button, brand tile, current page, checked checkbox, the progress line and a switch that is on. `--color-button-secondary` white with dark text: the second button, the active chip and the thumb of a switch that is off. `--color-accent` blue `#4285f4` with `--color-accent-text`: the floating button and count badges. `--color-link` blue `#1e88e5`, hover and visited navy `#0d47a1`; `--color-heading-alt` navy for small captions; `--color-accent-alt` navy marks \"new\".\n- `--color-fill-1` to `--color-fill-4` (deep orange, blue, grey, near-black) are the heads of list cards, the top lines of the figure cards and the avatars. 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, `--color-bar-alt-text` on the strip. Links, muted text and headings are used only on the desk and on white sheets.\n- `--color-text` `#212121`, headings black, `--color-text-muted` `#6b6b6b`. `--color-border` `#e0e0e0` divides the parts of a sheet, `--color-border-muted` `#eceff1` the rows of a list, `--color-border-strong` and `--color-input-border` grey `#999da8` are the line under a field and the track of a switch that is off.\n- `--color-notice` (navy) with white `--color-notice-text` is the information notice; the error notice is `--color-danger-surface` with a top line and text in `--color-danger` (`#e8345a`). `--color-success` teal and `--color-warning` orange are flat badge fills.\n- Surface: `--radius-control`, `--radius-panel` and `--radius-page` are 3px; `--radius-pill` 4px, so badges and chips are small rounded rectangles, not pills; discs are 50%. Sheets rest on `--shadow-panel`, one soft shadow (10px blur, 2px drop); raised buttons and the switch thumb on `--shadow-control` (5px blur); the floating button and a hovered card on `--shadow-control-hover`; the active chip is pressed in (`--shadow-control-pressed`, two inset lines); the side sheet, the notes sheet and the dialog float on `--shadow-dialog` (three layers up to 17px blur). All fills are flat; a hovered button lightens by 20% white; `--fill-input` is transparent, so a field is a bottom line only. `--border-width` 1px, `--border-width-strong` 3px for the lines under the current bar link and tab, the top line of figure cards and the focus and error line of a field; `--focus-ring` a 3px line of the focus colour at 50%; `--transition` 0.2s linear. `--backdrop-blur` is `0px` and applies to the bar.\n- One-off values built with `color-mix()`, `calc()` or `opacity` because the vocabulary has no token: 70% and 87% of the bar and strip text for secondary text, 70% of the inverse text in the footer, 50% of the button colour for the track of a switch that is on, a 20% grey wash behind a hovered flat or icon button, a 16% wash of the strip text behind a hovered flat button on the strip, a 12% danger wash, and line heights 1.25, 1.3, 1.4 and 1.43.\n\n- Soft paper: `--shadow-panel` is a wide, faint two-layer shadow (16px blur, 6px drop); `--shadow-control` a small soft pair (6px blur); `--shadow-control-hover` 14px blur; `--shadow-dialog` two layers up to 22px blur.\n- Round corners that grow with the box: `--radius-control` 8px, `--radius-panel` 12px, `--radius-page` 16px; `--radius-pill` is a full pill.\n- Flat fills; a hovered button lightens (15% white) and fields are filled with `--color-surface-alt` above their bottom line, with rounded top corners. `--border-width` 1px dividers, `--border-width-strong` 2px indicators; `--focus-ring` is a 4px halo of the focus colour at 30%; `--transition` 0.3s ease-out.\n\n## Components\n\n- `.ds-page` on ``: the desk, family, 14px/1.43 text.\n- `.ds-nav`: the 64px app bar. `.ds-brand` at its left, then at the right `.ds-nav__search` (a washed field with an icon) and `.ds-nav__links` > `.ds-nav__link`, uppercase links to the views; the current one (`is-current`) has full-strength text on a 16% wash.\n- `.ds-brand`: the application's mark and name, one link. `.ds-brand__mark` is a `--size-brand` 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 button and bar colours are close; `.ds-brand__name` is the name at `--text-large` in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-appbar`: the strip that continues the bar on the home screen and holds `.ds-tabs--bar`. `.ds-container` centres content at `--size-content`.\n- `.ds-hero`: the featured card, two halves. `.ds-hero__media` is a `.ds-media` picture; `.ds-hero__body` holds `.ds-hero__overline`, `.ds-hero__title` (40px light), `.ds-hero__lead` and a `.ds-buttons` row with the main action. `.ds-hero__fab` places the floating button on the seam between picture and text. One per home screen.\n- `.ds-media`: a picture drawn in CSS, one flat `--color-fill-*` block with a pale disc and a darker ridge. `--2`, `--3`, `--4` pick the fill and its text colour; `--shore` and `--wood` change the two shapes. Text set on it goes in a child element so it stays above the shapes.\n- `.ds-toolbar`: the row above the grid: `.ds-toolbar__title`, a `.ds-badges` group of filter chips and `.ds-toolbar__field`, a short text field at the right.\n- `.ds-grid`: the staggered grid. Four `.ds-grid__col`, each a stack of `.ds-grid__cell` cards. A card has an optional `.ds-grid__media` picture (with `.ds-media`; `--tall`, `--short`) carrying a caption, an optional `.ds-grid__title` with a `.ds-grid__link`, `.ds-grid__text`, a `.ds-grid__meta` line with a small avatar, and `.ds-grid__actions` (flat buttons at the left, `.ds-grid__count` at the right).\n- `.ds-page-header`: the head of an inner page in the bar's fill. `.ds-page-header__inner` holds the breadcrumb and `.ds-page-header__row`; in the row `.ds-page-header__body` has `.ds-page-header__title` and `.ds-page-header__text`, and `.ds-page-header__actions` one `.ds-button--secondary`. `--compact` is the short form without shapes.\n- `.ds-main`, `.ds-layout`, `.ds-stack`, `.ds-center`: the content column (`--overlap` on inner pages), its two-column grid (`--even` to equalise heights), a stack of sheets and a centred row.\n- `.ds-prose`: long-form text on a `.ds-panel--pad` sheet; 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 purple button, 36px tall, uppercase. `--secondary` is raised white, `--flat` has no fill or shadow and link-coloured text (inside cards, dialogs and empty states), `--fab` is the 56px accent disc holding one `.ds-icon`, `--icon` a round 36px icon button, `--danger` a raised button filled with `--color-danger` for a destructive action; `--flat` with `--danger` is its flat form. 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. `.ds-form__field` wraps a small `.ds-form__label` above a `.ds-form__control` (washed fill over a bottom line; `--area` for a textarea, wrapped in `.ds-form__select` for a select). `is-focus` thickens the line; `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 buttons inside a form.\n- `.ds-table`: 48px rows divided by hairlines with a small grey head; inside a `.ds-panel` it drops its own shadow. `.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`: rows of notes or items inside a `.ds-panel`. `.ds-list__item` holds a `.ds-list__avatar` disc (`--alt`, `--accent`, `--small`), `.ds-list__body` with `.ds-list__title` and `.ds-list__text`, and `.ds-list__meta` at the right.\n- `.ds-panel`: a white sheet. `.ds-panel__title` and `.ds-panel__body` for a small card, `.ds-panel__head` (64px, title left, one flat button right) above a table, `.ds-panel__actions` (`--end`) a ruled strip of buttons, `.ds-panel__label` a small caption inside a body; `--pad` gives a text or form sheet 32px padding.\n- `.ds-stat`: one figure. Four sit in a `.ds-stats` row, a single white sheet divided by vertical hairlines. `.ds-stat__label` is the small uppercase caption, shown above `.ds-stat__value`, the number in the heading font at 30px.\n- `.ds-tabs`: a hairline-ruled row of uppercase `.ds-tabs__tab` along the top of a sheet; `is-current` has a 2px line in `--color-link`. `--bar` is the form in `.ds-appbar`, in bar text colours with the line in `--color-bar-text`.\n- `.ds-badge`: accent count pill; `--new` cyan; `--chip` a 32px grey chip, `is-active` white and ringed when it is the chosen filter. Status labels `--success`, `--warning`, `--danger` are flat fills with one or two words in sentence case. Group with `.ds-badges`.\n- `.ds-sidebar`: a card in the side column of an inner page: `.ds-sidebar__title`, then `.ds-sidebar__list` of 48px `.ds-sidebar__link` rows, each with a `.ds-sidebar__swatch` picture tile and a `.ds-sidebar__count` at the right; `is-current` is link-coloured on a tint.\n- `.ds-notice`: a dark slab with a `.ds-notice__title`; `--error` is a white sheet outlined and lettered in the danger colour. Group with `.ds-notices`.\n- `.ds-pagination`: a row of round `.ds-pagination__link`; `is-current` is a filled disc, `is-disabled` grey; previous and next are chevron icons.\n- `.ds-breadcrumb`: 12px 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's text colour.\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`. Sits on `.ds-overlay`.\n- `.ds-empty`: centred `.ds-empty__mark` disc, `.ds-empty__title`, `.ds-empty__text` and one flat button, inside the sheet whose list is empty.\n- `.ds-footer`: the dark band: `.ds-footer__inner` with `.ds-footer__title` and a `.ds-footer__list` of `.ds-footer__link`, then `.ds-footer__legal`, a centred strip in the secondary bar fill.\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 `