{ "id": "v1-md-7124", "long_id": "v1.material-design.shop.s07.p01.t02.u04", "name": "Material storefront, 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": "shop", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "A small online shop in the paper-and-ink manner: a coloured app bar with a search field in its middle, a darker strip of departments under it, and a centred column of white cards on a warm pale page. The home page is a promotion card beside two solid colour tiles, then a shelf of six product cards with flat colour pictures, a price and a small button; inner pages are a filter card beside a ruled product list, a product sheet with a floating action button on the seam of its picture, a basket table beside an order summary and a check-out form under a stepper. Shops, app stores and catalogue sites built on material frameworks looked like this from about 2015 to 2018.", "url": "https://chrono.skin/s/v1-md-7124", "preview_url": "https://chrono.skin/s/v1-md-7124/specimen.html", "files": { "STYLE.md": "# Material storefront, 2017\n\n## Summary\n\nA small online shop in the paper-and-ink manner: a coloured app bar with a search field in its middle, a darker strip of departments under it, and a centred column of white cards on a warm pale page. The home page is a promotion card beside two solid colour tiles, then a shelf of six product cards with flat colour pictures, a price and a small button; inner pages are a filter card beside a ruled product list, a product sheet with a floating action button on the seam of its picture, a basket table beside an order summary and a check-out form under a stepper. Shops, app stores and catalogue 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%`; the bar, the department strip and the footer span the window. Designed at 1440px. Everything else is centred in `.ds-container`, capped at `--size-content` (1232px) with `--space-4` at the sides; running text is capped at `--size-measure` (640px).\n- Order on the home page: `.ds-nav`, which holds `.ds-nav__row` (`--size-bar` 64px: brand at the left, `.ds-nav__search` up to `--size-search` wide in the middle, three icon links at the right) and `.ds-strip` (the departments, `--size-row-dense` 40px, in `--fill-bar-alt`). Then `.ds-main`: `.ds-hero`, one or more `.ds-shelf` blocks, a `.ds-columns` row of three cards and the `.ds-snackbar`. Below 600px the snackbar is a square bar along the bottom edge of the window. Then `.ds-footer`. There is no drawer and no side column on the home page.\n- `.ds-hero` is a row of two parts, 3 to 1 and `--space-3` apart: `.ds-hero__card`, a sheet with the text at the left and a flat picture `--size-art` (400px) wide at the right, and `.ds-hero__side`, two `.ds-promo` tiles stacked. A `.ds-shelf` is a head (title and one grey line at the left, one flat button at the right) over a `.ds-grid` of six cards `--space-3` apart.\n- `.ds-main` is a vertical stack: blocks are `--space-5` (32px) apart on the home page and `--space-4` (24px) apart on inner pages (`.ds-main--inner`). Blocks are separated by the gap and their shadow, never by rules on the page.\n- Everything is on an 8px grid. `--space-1` 4px (label to field, meta gaps), `--space-2` 8px (between buttons, card action padding, picture padding), `--space-3` 16px (gap between cards of a shelf, card text padding, button side padding, list row padding), `--space-4` 24px (gap between sheets, sheet side padding, container side padding, field gap), `--space-5` 32px (between blocks of the home page, top of the footer), `--space-6` 48px (padding of the promotion card text, bottom of the page), `--space-7` 64px (line between two steps), `--space-8` 80px (spare step).\n- Heights: bar `--size-bar` 64px; tabs and table head `--size-row` 48px, table rows 56px; department links, side links and the search field `--size-row-dense` 40px; buttons `--size-control` 36px, small buttons 32px, fields 40px; floating button `--size-fab` 56px. Other sizes: `--size-brand` 32px, `--size-media` 152px (picture of a product card; the large pictures are twice that), `--size-thumb` 72px (list picture, empty-state disc), `--size-side` 264px (filter card), `--size-summary` 368px (summary column), `--size-meter` 8px, `--size-stripe` 4px, `--size-icon` 24px, `--size-icon-small` 16px, `--size-check` 18px, `--size-badge` 22px, `--size-dialog` 440px, `--size-area` 96px.\n- Inner pages (a department, a product, the basket, check-out, the account) have no `.ds-hero`. The bar and the strip stay. `.ds-main--inner` opens with `.ds-breadcrumb`, then `.ds-page-header` set directly on the page (title, one grey line, raised buttons at the right), then the working sheets. A department page is a `.ds-layout`: the `.ds-sidebar` filter card (`--size-side`) at the left and one `.ds-panel` at the right that holds `.ds-tabs` along its top edge, the `.ds-list` and `.ds-pagination` in a ruled strip at its foot. A product page has no page header: under the breadcrumb comes `.ds-product`, one sheet with the pictures at the left (5 parts) and the name, price and buy controls at the right (7 parts), then `.ds-columns--detail` (7 to 5): the description sheet with tabs and `.ds-prose`, and a `.ds-stack` of cards. Basket and check-out use `.ds-columns--aside`: the main sheet (table or form) and a column of `--size-summary` at the right with the order summary. Check-out puts `.ds-steps` between the page header and the columns. The account page is `.ds-stats`, then a sheet with tabs, then `.ds-columns--pair`.\n- Views: the specimen is one shop with six views. `shop` is the home view: promotion card and tiles, the shelf of new products, three cards and the snackbar. `browse` is a department: page header, filter card, and the sheet with tabs, the product list and pagination. `product` is one product: the product sheet with its floating button, the description, ratings, two reviews and related links. `basket` is the basket: two notices, the table with its stock labels and the order summary. `checkout` is the address step: page actions, the stepper, the form, the summary and the dialog that empties the basket. `orders` is the account's orders, shown empty under its tabs, with figures above and two cards below.\n- Below 1100px a shelf has three cards to a row and the two tiles move under the promotion card. Below 900px every pair of columns becomes one, the product sheet stacks picture over text with the floating button on the picture's lower right edge, and the page header stacks. Below 600px the bar splits into a row with the brand and icon-only links and a row with the search field, the promotion picture moves above its text, a shelf has two cards to a row, figures sit two by two, only the current step keeps its label, 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` deep pink `#c2185b` with white `--color-bar-text`: navigation bar and header band. `--color-bar-alt` indigo `#3f51b5` is the secondary toolbar; `--color-inverse` `#424242` with `#fafafa` text is the footer.\n- Indigo `#3f51b5` is the colour of action: `--color-button`, `--color-link`, `--color-heading-alt` (section and drawer titles). Hover darkens to `--color-link-hover` `#284888`; visited links are purple `#9c27b0`.\n- `--color-accent` cyan `#00bcd4` with dark `--color-accent-text` `#212121`: the floating button and count badges. Tab indicators do not use it: on the band the line is `--color-bar-text`, on a sheet `--color-link`, so it stays readable under every palette. `--color-accent-alt` and `--color-focus` are bright pink `#ff4081`.\n- Page `#fafafa`, sheets white, `--color-surface-alt` `#f5f5f5`, `--color-surface-strong` and `--color-border` `#dddddd`. Body text is `#424242`, headings `#212121`, secondary text `#757575`.\n- Block fills: pink `#e91e63`, orange `#ff9800` (dark text), indigo `#3f51b5`, slate `#37474f`. Status: `--color-danger` `#e91e63`, `--color-success` teal `#009688`, `--color-warning` `#ff9800`; the notice is pale orange `#ffe0b2` with `#212121` text.\n- `--font-heading` and `--font-ui` are the monospace stack (Roboto Mono, Menlo): headings, brand name, buttons, navigation, tabs, drawer. `--font-body` stays Roboto for running text.\n- Headings are uppercase (`--heading-transform`) at regular weight 400 and modest sizes: `--text-display` 40px, `--text-h1` 30px, `--text-h2` 20px, `--text-h3` 16px, `--line-heading` 1.4.\n- `--text-base` 16px on a 24px line; `--text-large` 18px; `--text-ui` 13px uppercase at `--weight-ui` 400; `--text-small` 12px. `--weight-bold` 500 is the heaviest weight.\n- Links in running text are underlined in every state (`--link-decoration`, `--link-decoration-hover`); quiet links, titles and navigation are not (`--link-decoration-quiet` `none`).\n- Sheets are flat and outlined: `--shadow-panel` is a 1px ring in `--color-border` with no blur; nothing rests above the page. `--fill-page` is the sheet colour (`--color-surface`), so page and sheets are one tone and only the outline separates them.\n- `--radius-control`, `--radius-panel` and `--radius-page` are 4px; `--radius-pill` is 16px, so badges and chips are pills and pagination cells are rounded squares.\n- Buttons rest flat with a 1px inner ring (`--shadow-control`), lift to a soft two-layer shadow on hover (`--shadow-control-hover`, 4px blur, also the floating button), and only the dialog floats (`--shadow-dialog`, three layers up to 14px blur). A hovered button lightens: `--fill-button-hover` is the button colour mixed with 10% white.\n- Text fields are filled: `--fill-input` is the text colour at 6% over the sheet, with the top corners at `--radius-control`, a side inset of twice that radius and the bottom line. `--focus-ring` is a 3px halo of the focus colour at 40%. `--transition` is 0.28s on the standard curve.\n- Every fill is one flat colour; `--border-width` 1px for dividers, `--border-width-strong` 2px for indicators and focused fields.\n- Text on fills follows fixed pairs: `--color-bar-text` on the band, on `--color-fill-1` and on `--color-fill-3`; `--color-accent-text` on the accent, on `--color-fill-2` and on the warning badge; `--color-inverse-text` on the footer and on `--color-fill-4`; `--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 page and on white sheets.\n- One-off values built with `color-mix()` or `calc()` because the vocabulary has no token: 70% and 87% of the bar text colour for band tabs, toolbar links and the hero lead, a 16% wash of it behind the current toolbar link, 66% of the quiet link colour for contents links, 70% of the inverse text in the footer, a 20% grey wash behind a hovered flat button, and line heights 1.18, 1.2, 1.43 and 1.6.\n\n## Components\n\n- `.ds-page` on ``: the page fill, family and 15px text. `.ds-container` centres content at `--size-content`.\n- `.ds-nav`: the app bar with the department strip. `.ds-nav__row` holds the brand, `.ds-nav__search` (an icon and a borderless `.ds-nav__field`) and `.ds-nav__links` > `.ds-nav__item` > `.ds-nav__link` (icon, `.ds-nav__label`, optionally a count badge); `is-current` has a `--border-width-strong` line in `--color-bar-text`. `.ds-strip` > `.ds-strip__list` > `.ds-strip__link` are the departments; `is-current` is bold.\n- `.ds-brand`: the site's mark and name at the left of the bar, one link. `.ds-brand__mark` is a `--size-brand` tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) with a hairline ring of the bar text at 70%; `.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-hero`: the promotion row. `.ds-hero__card` holds `.ds-hero__body` (`.ds-hero__label`, `.ds-hero__title`, `.ds-hero__lead`, a `.ds-buttons` row with one raised and one flat button) and `.ds-hero__art` with three `.ds-hero__shape` circles (`--2`, `--3`). `.ds-hero__side` holds two `.ds-promo` tiles (`--alt` for the dark one) with `.ds-promo__title`, `.ds-promo__text` and `.ds-promo__link`.\n- `.ds-shelf`: a titled row of products: `.ds-shelf__head` with `.ds-shelf__title`, `.ds-shelf__text` and a flat button, then a `.ds-grid`.\n- `.ds-page-header`: the head of an inner page, unboxed. `.ds-page-header__body` holds `.ds-page-header__title` and `.ds-page-header__text`; `.ds-page-header__actions` sits at the right.\n- `.ds-main`, `.ds-layout`, `.ds-columns` (three equal cards; `--detail` 7 to 5, `--aside` main plus summary column, `--pair` two equal), `.ds-stack` (cards piled `--space-4` apart) and `.ds-caption` (a small uppercase caption on the page).\n- `.ds-prose`: long-form text inside a padded sheet; styles h1 to h3, paragraphs, lists, `strong`, inline `code` and links. `.ds-prose__lead` is the opening paragraph.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` is text-coloured. `.ds-links` stacks several.\n- `.ds-button`: the primary button, 36px, uppercase. `--secondary` is white with a hairline, `--flat` has no fill (cards, dialogs, empty states), `--danger` is filled with `--color-danger` (with `--flat`, danger-coloured text), `--small` is the 32px form on product cards, `--wide` fills its column, `--fab` is the 56px 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 colour.\n- `.ds-form`: stacked fields; `.ds-form__row` puts two side by side. `.ds-form__field` wraps a `.ds-form__label` and a `.ds-form__control` (filled, bottom line only; `--area` for a textarea; inside `.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; `.ds-form__actions` right-aligns buttons; `.ds-form__inline` puts one field and one button on a line.\n- `.ds-table`: sits in a `.ds-panel`; 56px rows divided by hairlines, small uppercase head, `.ds-table__num` right-aligned numbers, `.ds-table__name` a bold item, `.ds-table__extra` cells a phone can do without, `tr.is-current` tinted.\n- `.ds-list`: ruled rows inside a `.ds-panel`. `.ds-list__item` holds `.ds-list__thumb` (a square picture; `--2`, `--3`, `--4` pick the fill, `--round` is a small avatar disc), `.ds-list__body` with `.ds-list__title`, `.ds-list__text` and optionally a `.ds-rating`, and `.ds-list__meta` at the right. `.ds-rating` is one `.ds-rating__star` and a figure; `.ds-price` is a price (`--large`, with `.ds-price__was` for the old price).\n- `.ds-panel`: a card with `.ds-panel__title`, `.ds-panel__body` and optional `.ds-panel__actions` (`--end` for raised buttons at the right); `--form` holds a form, `--pad` pads the sheet for prose and lets `.ds-tabs` run along its top edge. `.ds-summary` is the list of amounts in the summary card (`.ds-summary__label`, `.ds-summary__value`, `--total` for the last line).\n- `.ds-stat`: one figure card with a `--border-width-strong` line in `--color-button` along its foot; four sit in a `.ds-stats` row. `.ds-stat__label` is the small uppercase caption above `.ds-stat__value`.\n- `.ds-grid`: six product cards. Each `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) has `.ds-grid__media` (the picture, may hold a badge), `.ds-grid__body` with `.ds-grid__title`, `.ds-grid__text` and a rating, and `.ds-grid__foot` with the price and a small button.\n- `.ds-tabs`: a hairline-ruled row of uppercase `.ds-tabs__tab` along the top of a sheet; `is-current` is in `--color-link` with a line of the same colour.\n- `.ds-badge`: accent count pill; `--new` for new items; `--success`, `--warning`, `--danger` for stock and order status; `--chip` is a 32px choice chip, `is-current` when chosen. Group with `.ds-badges`.\n- `.ds-sidebar`: the filter card of a department page. `.ds-sidebar__title` is a small uppercase heading, `.ds-sidebar__list` a group of `.ds-sidebar__link` rows with a `.ds-sidebar__count`; `is-current` has a `--size-stripe` line at its left. `.ds-sidebar__checks` holds checkbox filters.\n- `.ds-notice`: tinted block with a left stripe and a `.ds-notice__title`; `--error` is a sheet with the stripe and text in the danger colour. `.ds-notices` puts two side by side.\n- `.ds-pagination`: a centred row of square `.ds-pagination__link` in a ruled strip at the foot of a sheet; `is-current` is filled, `is-disabled` grey.\n- `.ds-breadcrumb`: small grey trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`.\n- `.ds-product`: the product sheet. `.ds-product__gallery` holds `.ds-product__media` and `.ds-product__thumbs`; `.ds-product__fab` places the floating button on the seam; `.ds-product__body` holds `.ds-product__title`, `.ds-product__text`, chips, the price and `.ds-product__options`. `.ds-ratings` is the list of `.ds-ratings__row`, each with a `.ds-meter` and its `.ds-meter__bar` (`--2` to `--4` set the length).\n- `.ds-steps`: the check-out stepper, one sheet. `.ds-steps__step` holds a round `.ds-steps__mark` and a `.ds-steps__label`; `is-done` and `is-current` fill the mark.\n- `.ds-dialog`: a 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-snackbar`: a short message on the inverse fill that sticks to the lower left of the view, with one `.ds-snackbar__action`.\n- `.ds-empty`: centred `.ds-empty__mark` disc, `.ds-empty__title`, `.ds-empty__text` and one flat button, inside a sheet under its tabs.\n- `.ds-footer`: inverse band with `.ds-footer__cols` of `.ds-footer__col`, each with `.ds-footer__title` and `.ds-footer__text` or a `.ds-footer__list` of `.ds-footer__link`, and a ruled `.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-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 `