{ "id": "v1-nm-8118", "long_id": "v1.neumorphism.shop.s08.p01.t01.u08", "name": "Neumorphism shop", "era": { "slug": "neumorphism", "code": "nm", "name": "Neumorphism", "years": [ 2019, 2021 ], "description": "Soft UI, 2019 to 2021: controls pressed out of, or into, a single pale surface by a pair of light and dark blurred shadows, with low contrast and very round corners." }, "archetype": "shop", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "Neumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, a light one towards the top left and a dark one towards the bottom right. Besides apps and control panels it was drawn for small shops of objects that suit it, clocks, speakers and lamps: a product standing on a raised plinth, cards with the picture in a well, round add keys. This pack is that shop on a mint surface with forest green keys and one gold accent, in the late, crisper form of the style: a hairline around every raised part, a tight shallow relief, serif headings over a humanist sans.", "url": "https://chrono.skin/s/v1-nm-8118", "preview_url": "https://chrono.skin/s/v1-nm-8118/specimen.html", "files": { "STYLE.md": "# Neumorphism shop\n\n## Summary\n\nNeumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, a light one towards the top left and a dark one towards the bottom right. Besides apps and control panels it was drawn for small shops of objects that suit it, clocks, speakers and lamps: a product standing on a raised plinth, cards with the picture in a well, round add keys. This pack is that shop on a mint surface with forest green keys and one gold accent, in the late, crisper form of the style: a hairline around every raised part, a tight shallow relief, serif headings over a humanist sans.\n\n## Layout\n\n- Content column: `--size-page` (1160px), centred in `.ds-page__inner`, with `--space-5` (24px) side padding. The page does not stretch beyond it.\n- Navigation: `.ds-nav` stands on the bare page in two tiers as wide as the column. `.ds-nav__top` has the search well at the left, the brand in the exact centre and the round keys (basket with its count, account) at the right. Under it `.ds-nav__list` is a centred row of section links between two 1px rules; the current link is pressed in, and the Clocks item is a `.ds-menu` that drops a list of departments.\n- Home page: `.ds-page__sections`, sections `--space-8` (72px) apart. The first is a `.ds-page__stack` at 32px gaps: the `.ds-hero` in two halves (text on the bare page at the left, the clock of the month on a raised plinth at the right), the `.ds-stat` well across the column and the `.ds-grid` of four departments. The next sections each start with a centred `.ds-page__title`: the `.ds-shelf` of four products, then a `.ds-page__row` (three to two) with the `.ds-list` of reviews beside a `.ds-panel` of rating bars.\n- Inner pages have no hero. `--space-6` (32px) under the navigation come the `.ds-breadcrumb` and, 12px below it, the `.ds-page-header`: title at `--text-h1` with one muted line at the left, one button at the right, on the bare page. The catalogue is `.ds-page__shop`: the `.ds-sidebar` of departments and filters, `--size-side` (248px), at the left, and a stack of `.ds-tabs`, a `.ds-shelf--three` and the pagination at the right. A product page is `.ds-page__row--even`: the `.ds-carousel` of pictures in one half, the buying panel and an accordion in the other. The basket is `.ds-page__row--aside`: the working column (steps, notices, table, buttons, dialog) and a `--size-aside` (368px) column with the order panel and the address form. A text page is `.ds-page__row`: prose in a panel beside an accordion and a small well. Keep the columns of a row about equally long.\n- Views. The specimen is one site with five views, each `
` inside `.ds-page__inner`; the navigation and the footer stand outside them and one view shows at a time. `home` is the shop front: hero, promises, departments, the most wanted clocks, reviews. `shop` is the catalogue: departments and filters, shape tabs, six products, pagination. `clock` is the product page: pictures, price and options, the facts in an accordion. `basket` is the basket: steps, notices, the table of items, its buttons and the dialog that removes an item, beside the order sum and the address form. `care` is the text page: care and returns as prose, questions and the empty state of returns. The navigation presses in the link of the current view, by one `:has()` rule per view next to `.ds-nav__link.is-current`.\n- Spacing scale: `--space-1` 4px (dot to text, menu gaps), `--space-2` 8px (label to control), `--space-3` 12px (icon to text, gaps between tab keys), `--space-4` 16px (card padding, gaps between buttons), `--space-5` 24px (panel padding, form field gap, gap between department wells), `--space-6` 32px (the gap between every pair of raised panels and cards), `--space-7` 48px (between the halves of the hero and of a product page), `--space-8` 72px (between the sections of the home page, above the footer).\n- Raised cards need room for their shadows: never place two closer than `--space-5`, and never put a raised panel inside another. Inside a card use wells, rules and round keys.\n- `--size-rule` (1px) is the weight of the rules between rows and around the navigation row; it is a layout token because the rules stay when a surface part sets `--border-width` to 0.\n- Below 900px the hero, every row and the catalogue stack (the filters come above the shelf, their links in a wrapping row), the shelf and the grid have two columns, and the navigation top wraps: brand at the left, keys at the right, the search well on a line of its own. Below 560px the side padding drops to `--space-4`, the hero title takes `--text-h1`, the stats and the grid stack, product cards tighten, form rows stack and table columns marked `.ds-table__opt` are hidden, so nothing scrolls sideways. On a phone (560px and below) `.ds-nav__list` is not shown; the round menu key `.ds-nav__fold` in `.ds-nav__tools` opens a full-width list of the views as `.ds-menu__link` rows, the open view pressed in.\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 for everything: `--font-body`, `--font-heading` and `--font-ui` are the same rounded humanist sans stack (Nunito Sans first, then Avenir Next and system sans). `--font-mono` is for code only. Some references used commercial geometric sans faces; this stack is the closest open one.\n- Sizes: `--text-base` 16px body, `--text-ui` 15px for buttons, inputs, navigation, table cells and notices, `--text-small` 13px for meta text, labels and badges, `--text-large` 20px for lead text and large buttons, `--text-h3` 18px, `--text-h2` 24px (also stat and tile figures), `--text-h1` 32px, `--text-display` 40px for the hero title only.\n- Weights: 400 body, 600 for headings, controls, labels and links (`--weight-heading`, `--weight-ui`, `--weight-bold`). Line height 1.6 for body, 1.3 for headings and controls.\n- Uppercase appears only on table head cells and `.ds-sidebar__heading`, written in the component; `--heading-transform` and `--ui-transform` are `none`.\n- One surface colour: `--color-page`, `--color-canvas`, `--color-surface`, `--color-bar`, `--color-button-secondary` and `--color-input` are the same grey (224 224 224). `--color-surface-alt` (232) is one step lighter, for grid tiles, hovered rows and the footer; `--color-surface-strong` (216) one step darker, for inline code, quiet and status badges and disabled controls.\n- The relief has two colours: `--color-shadow` (190 190 190) is the dark side and `--color-border-muted` (white) is the light side. Every shadow token is built from these two, so a palette changes the relief by changing them. `--color-border-muted` is not used for anything else.\n- Text is `--color-text` (navy 0 31 63) on the surface, `--color-text-muted` (48 72 96) for meta and lead text, `--color-heading-alt` for panel titles and form labels.\n- Each text token goes with its own fill and no other: `--color-bar-text` on `--fill-bar` (navigation, table head), `--color-bar-alt-text` on `--fill-bar-alt` (footer), `--color-inverse-text` on `--fill-inverse` (code block), `--color-accent-text` on `--fill-accent` (badge, current page), `--color-button-text` on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary` (secondary button, pagination keys, current tab), `--color-input-text` on `--fill-input` (controls, tab track, empty state, the hero well), `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface`.\n- Links in running text are `--color-link` (dark green) at weight 600 with no underline; underline appears on hover. Navigation, titles and table links are `--color-link-quiet` (navy).\n- `--color-accent` (green 59 132 60) is the one saturated colour: default badge, current page, checked checkbox and switch, slider thumb. `--color-accent-alt` (orange) only marks \"new\" as a dot. `--color-button` is navy, so the primary button is the darkest thing on the page.\n- `--color-fill-1` to `--color-fill-4` colour the round chips of the grid tiles and nothing else; no text is set on them.\n- Status colours appear as an 8px dot on a flat pill (`--color-success`, `--color-warning`, `--color-danger`); `--color-danger` is also the text of errors and of the destructive button.\n- One-off values with no token: circles use `border-radius: 50%`; the tab track takes `--radius-panel` around tabs of `--radius-control`; inline code uses half of `--radius-control`; placeholders are `--color-input-text` at opacity 0.55.\n\n## Components\n\n- `.ds-page`: on ``; paints the surface colour and sets the base type. `.ds-page__inner` is the width container, `.ds-page__sections` the home page's far-apart sections, `.ds-page__stack` a vertical stack, `.ds-page__row` two columns three to two, `.ds-page__row--even` two halves, `.ds-page__row--aside` a working column and a 368px column, `.ds-page__shop` the filter column and the shelf. `.ds-page__title` is a centred section heading on the bare page, with an optional `.ds-page__title-note` line. `.ds-view` is one screen of the specimen (see Layout); an application that gives each page its own document does not need it.\n- `.ds-brand`: the site's mark and name, centred in the top tier of the header, linking to the home page: `.ds-brand__mark` is a small raised key (`--size-brand`, 40px) dressed like the primary button (`--fill-button`, `--color-button-text`, the hairline from `--border-width`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG painted with `currentColor`; `.ds-brand__name` is the name in the heading font at `--text-h3`, in `--color-bar-text`. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo and keep the key.\n- `.ds-nav`: the two-tier header. `.ds-nav__top` holds `.ds-nav__search` (a sunk well that leads to the catalogue, with `.ds-nav__search-text`), the `.ds-brand` and `.ds-nav__tools` with round `.ds-nav__key` keys (a `.ds-badge` on a key is its count) and a `.ds-avatar`. `.ds-nav__list` is the ruled row of `.ds-nav__link` items; the current one is `is-current` and pressed in; `is-hover` raises a link.\n- `.ds-nav__fold`: below 560px the navigation; a `.ds-menu` whose round key opens a full-width list of the site's views as `.ds-menu__link` rows, the open one pressed in. Hidden above 560px, where `.ds-nav__list` shows the views.\n- `.ds-menu`: a drop-down under a navigation item. The `
  • ` carries `.ds-menu`; its `.ds-menu__list` is a raised sheet (208px) shown while the item is hovered or holds the focus, or with `is-open`. `.ds-menu__link` is one entry with an optional `.ds-menu__note` count; `is-hover` lightens it.\n- `.ds-hero`: the page introduction in two halves: `.ds-hero__text` on the bare page with `.ds-hero__eyebrow` (a badge and a muted line), `.ds-hero__title` at the display size, `.ds-hero__lead` and `.ds-hero__actions` (two large buttons); `.ds-hero__art` is a raised plinth with the radius of `--radius-page` holding a `.ds-clock--large` and a sunk `.ds-hero__tag` with the name and the `.ds-hero__price`. Use it once, on the home page.\n- `.ds-clock`: the shop's product picture, drawn without images: a raised case holding a sunk `.ds-clock__face` with the ticks and hands as inline SVG, and a `.ds-clock__cap` over the centre coloured by `.ds-clock--1` to `--4` from `--color-fill-*`. `.ds-clock--square` is the square case, `.ds-clock--large` (264px) the size for the hero and the carousel. An installing project replaces it with its own pictures in the same wells.\n- `.ds-page-header`: head of an inner page, used instead of the hero: `.ds-page-header__text` holds `.ds-page-header__title` and one line of `.ds-page-header__lead`; `.ds-page-header__actions` sits at the right with one button. No fill or shadow of its own. Put the breadcrumb directly above it.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`. `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a dark code block. Put prose inside a `.ds-panel`.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links in tables and titles. `.ds-link__sample` lays out a row of links.\n- `.ds-button`: primary, 40px high, raised by `--shadow-control`; `is-hover` lifts it, `is-active` sinks it. `.ds-button--secondary` is the same key in the surface colour. `.ds-button--danger` is the destructive action: a surface-coloured key with `--color-danger` text and hairline; use it once, last in a group or as the confirming button of a dialog. `.ds-button--large` (52px) for the hero and the buying panel, `.ds-button--block` for a full-width button. `disabled` or `is-disabled` is flat, with no shadow. `.ds-button__row` spaces a group; `.ds-button__row--after` sets it one step below what precedes it. One primary button per group.\n- `.ds-form`: vertical form inside a panel. `.ds-form__field` wraps a `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (inside `.ds-form__select-wrap` with a `.ds-form__chevron` icon), `.ds-form__range` (sunk track, raised accent thumb). `.ds-form__check` is a label row holding a `.ds-form__checkbox` (raised square, accent when checked). An invalid input takes `is-error`, which replaces its well with a 2px danger ring, and is followed by `.ds-form__error`; `.ds-form__hint` is help text; `.ds-form__actions` holds the buttons; `.ds-form__row` puts two fields side by side. Text controls are wells: they use `--shadow-control-pressed`.\n- `.ds-switch`: the on/off control, a `