{ "id": "v1-bs-7771", "long_id": "v1.bootstrap-era.portal.s07.p07.t07.u01", "name": "Framework default theme market", "era": { "slug": "bootstrap-era", "code": "bs", "name": "Framework default", "years": [ 2011, 2014 ], "description": "The framework look of 2011 to 2014: a dark or white bar across the top, a big grey hero block, rows of three columns, wells and bordered panels, blue primary and coloured status buttons, Helvetica at 14px." }, "archetype": "portal", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "The framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit and left close to its defaults, with a bar across the top, wells, bordered panels with tinted heading strips, thumbnails and coloured buttons and labels. This pack is the gallery or marketplace of those years, the kind of site that sold themes, snippets and templates for the toolkit itself, in an aubergine theme of the kind the theme galleries offered: a deep plum bar with a short gradient, a berry primary colour, a rounded humanist sans-serif and buttons that stand on a darker bottom edge. Directories, showcases and small markets were built this way by the hundred.", "url": "https://chrono.skin/s/v1-bs-7771", "preview_url": "https://chrono.skin/s/v1-bs-7771/specimen.html", "files": { "STYLE.md": "# Framework default theme market\n\n## Summary\n\nThe framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit and left close to its defaults, with a bar across the top, wells, bordered panels with tinted heading strips, thumbnails and coloured buttons and labels. This pack is the gallery or marketplace of those years, the kind of site that sold themes, snippets and templates for the toolkit itself, in an aubergine theme of the kind the theme galleries offered: a deep plum bar with a short gradient, a berry primary colour, a rounded humanist sans-serif and buttons that stand on a darker bottom edge. Directories, showcases and small markets were built this way by the hundred.\n\n## Layout\n\n- Fixed width: one centred `.ds-container` of `--size-page` (1100px) on a 1280px viewport. The top bar, the category strip and the footer span the window; everything else is in the container.\n- Two tiers of navigation. The top bar is `--size-nav` (54px) tall and scrolls away with the page: brand, then the search field joined to its button (`--size-search`, 360px), then the site links pushed to the right, each a small rounded plate when current. Under it the category strip `.ds-subnav`, `--size-subnav` (40px) tall on `--fill-bar-alt`: a bold label, the category links, and one line of text at the right.\n- Home page, top to bottom inside `.ds-main`: the featured block (`.ds-hero`), copy at the left and a drawn browser window at the right; the `.ds-stat` row of four counter boxes; the `.ds-shelf` heading with its sorting buttons; the `.ds-grid` of item cards, four across and two rows deep; then a row of three: two list panels and a well. Blocks are `--space-4` to `--space-5` apart.\n- Inner pages have no featured block. They start with the `.ds-breadcrumb` strip, then `.ds-page-header` (title, one grey line, actions at the right, a rule under it). A category page continues with a `--size-sidebar` (230px) column at the left holding the `.ds-sidebar` list group, and at the right `.ds-tabs` directly over the media list and its pagination. An item page puts the large preview, the tabs and the description in a wide column and stacked panels (price, details, reviews) in a narrower column at the right. A page that is one table or one form uses the full width, or a wide column beside a column of panels.\n- Views. The specimen is a market for site themes with five views. `home` is the front page described above. `browse` is one category: the list group, tabs, six media rows with prices, pagination and an empty box for saved themes. `theme` is one item: preview, tabs, description, the buying panel, a details panel and reviews. `purchases` is the buyer's table of downloads under two alerts, with the status legend and the open confirmation modal. `sell` is the upload form in a panel beside three side blocks.\n- Responsive: below 980px the links of the top bar fold into the menu button at its right (`.ds-menu--nav`) and the category strip scrolls sideways in its own box, without its note; below 760px the search field takes its own row under the brand, every row of columns stacks with the list group after the list, the featured block puts its picture under the copy, the counter boxes and item cards go two across, a media row puts its price under its text, the footer columns go two across, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does. The fold is a `
` whose `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`); it opens the list of every view as a full row under the bar, and the current view's item has the same darker plate as a current bar link. The search field takes its own row under the brand below 760px.\n- Spacing scale: `--space-1` 5px (inside labels, between a label and its field), `--space-2` 10px (between adjacent controls, cell padding, row padding in the list group), `--space-3` 15px (panel padding, the page gutter, media row padding), `--space-4` 20px (between stacked blocks, well padding, the card gutter), `--space-5` 30px (the gutter between columns, between sections), `--space-6` 40px (featured block padding, above the footer), `--space-7` 60px (the tall block of a drawn preview). Controls are padded by `--space-control-y` (6px) and `--space-control-x` (12px).\n- Other sizes: `--size-tile` 120px (the colour tile of a card), `--size-thumb` 96px (the thumbnail of a media row), `--size-icon` 40px, `--size-mark` 28px, `--size-dialog` 540px.\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: Ubuntu, then Trebuchet MS, Lucida Grande and Tahoma (`--font-body`, `--font-heading`, `--font-ui`). `--font-mono` (Ubuntu Mono, Consolas) is for code only.\n- Body is `--text-base` 14px at `--line-body` 1.5 in `--color-text` #3d3539. Headings are medium (`--weight-heading` 500): `--text-h1` 33px, `--text-h2` 25px, `--text-h3` 18px. `--text-display` 46px light (`--weight-display` 300) with `--display-tracking` -0.5px is the featured title only. `--text-large` 19px is lead text and large buttons; `--text-small` 12px is meta, counts and labels. Buttons and navigation are medium (`--weight-ui` 500) at 14px.\n- Surfaces: white page; `--color-surface-alt` #f7f3f5 for wells, stripes, card price strips and the breadcrumb; `--color-surface-strong` #ece5e9 for the featured block and heading strips. Borders are 1px `--color-border` #ded5d9; `--border-width-strong` (3px) only under a table head.\n- The bar is aubergine (`--color-bar` #4c1d3d, lighter at the top through `--fill-bar`) with pale `--color-bar-text`. Berry `--color-link` #a3246f is for links; `--color-button` and `--color-accent` #b02a78 fill the primary button, the current list row, the current page and the plain label.\n- `--color-fill-1` to `--color-fill-4` (berry, orange, green, indigo) are the card tiles, the media thumbnails and the blocks of a drawn preview.\n- Depth: buttons and the brand tile carry `--shadow-control`, a darker line inside the bottom edge; inputs and wells carry `--shadow-control-pressed`, a faint line inside the top edge; panels, cards and counter boxes carry `--shadow-panel`, a one-pixel hard line under the box. Only the drawn preview and the modal cast a soft shadow (`--shadow-dialog`). There is no text shadow.\n\n- Text on fills, the convention every layout and token set of this era keeps:\n - on `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt` and `--color-surface-strong`: body text `--color-text`, headings `--color-heading`, small titles (panel strip, list group heading, h3) `--color-heading-alt`, meta `--color-text-muted`, links `--color-link`;\n - on the top bar (`--fill-bar`): `--color-bar-text` only, for the name and the links. Hover and current items get a plate of `--color-bar-text` mixed into transparent at 9% and 18%, never a second colour. The search field in the bar is an ordinary input and button with their own tokens;\n - on the category strip (`--fill-bar-alt`): `--color-bar-alt-text`; its links inherit that colour and get a plate of it at 14% on hover, and the one link in the note at the right is underlined;\n - on `--fill-inverse` (the footer): `--color-inverse-text`, with `opacity` for the quieter text; links there are underlined;\n - on `--color-fill-1` to `--color-fill-4`, `--fill-accent`, `--color-accent-alt`, `--color-success`, `--color-warning` and `--color-danger` used as a fill (tiles, thumbnails, labels, status buttons, the current list row): `--color-accent-text`;\n - on `--fill-button`: `--color-button-text`; on `--fill-button-secondary`: `--color-button-secondary-text`;\n - on `--color-notice`: `--color-notice-text`; on `--color-danger-surface`: `--color-danger`;\n - the grey count label is `--color-text-muted` with `--color-canvas` text.\n- Status colours: `--color-success`, `--color-warning`, `--color-danger` and `--color-accent-alt` (the blue \"info\") fill buttons and labels; mixed at 20% into `--color-surface` they tint the heading strip of a contextual panel, whose text stays `--color-heading`.\n- The status buttons reuse `--fill-button` with `background-color` set to their own colour, so a token set must not bake an opaque gradient into `--fill-button` or `--fill-button-hover`.\n- Links are never underlined at rest and underline on hover; the footer links and the note in the category strip are the exceptions.\n- One-off shades made with `color-mix()` because the vocabulary has no token: the bar's bottom edge (`--color-bar-text` at 22% over `--color-bar`), bar plates (9% and 18%), category strip plates (14%), the hovered secondary button, contextual panel strips (20%) and their borders (45%), notice borders (25%), the rule above the footer's last line (`--color-inverse-text` at 18%). One-off sizes made with `calc()`: the thumbnail height (0.7 of its width) and the tall block of the large preview (1.5 tiles).\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, the text colour and `--fill-page`.\n- `.ds-container`: the centred column, `--size-page` wide plus a `--space-3` gutter each side; `.ds-main` adds `--space-5` above its first block. `.ds-row` lays `.ds-col` columns side by side with a `--space-5` gutter; `.ds-col--wide` takes two shares, `.ds-col--side` is `--size-sidebar` wide, `.ds-col--stack` stacks blocks `--space-4` apart and `.ds-grow` on its last block makes the columns end on one line (with `.ds-row--level`). `.ds-row--flush` drops the bottom margin. `.ds-col__text` is a paragraph in a column or a well. `.ds-title` is a section heading (`--small` for h3 size) with a muted `.ds-title__small` after it; `.ds-lead` is a paragraph at `--text-large`; `.ds-muted` greys a phrase; `.ds-spaced` puts `--space-4` under a block; `.ds-rule` is a faint horizontal rule.\n- `.ds-well`: the inset grey box for an aside or a call to action. `.ds-code` is a block of code; `.ds-figure` is a placeholder picture with its size written on it.\n- `.ds-brand`: the site's mark and name, first in the top bar. `.ds-brand__mark` is a `--size-mark` tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-shadow` border, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font at `--text-h3` in `--color-bar-text`. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the top bar on `--fill-bar` with a 1px bottom edge; it is not fixed. `.ds-nav__inner` is the container width and `--size-nav` tall; it holds the `.ds-brand`, the `.ds-nav__search` form (a `.ds-form__input` joined to a `.ds-button`) and `.ds-nav__links` at the right with `.ds-nav__link` plates (current: `is-current`). In the specimen the current item is marked by the view that is showing, with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-subnav`: the category strip under the bar. `.ds-subnav__inner` holds a bold `.ds-subnav__label`, `.ds-subnav__links` of `.ds-subnav__link` (current: `is-current`) and a `.ds-subnav__note` at the right. Use it for the second level of a catalogue; leave it out on a site with one level.\n- `.ds-hero`: the featured block on the home page: `--color-surface-strong`, a border, `--radius-page`, `--space-6` padding. `.ds-hero__copy` holds `.ds-hero__title` (46px light), `.ds-hero__lead`, `.ds-hero__actions` with one large primary and one large secondary button, and a small grey `.ds-hero__note`; `.ds-hero__art` at the right holds a `.ds-shot`. One per site.\n- `.ds-shot`: a preview drawn as a small browser window, used where a screenshot would go: `.ds-shot__bar` with three `.ds-shot__dot`, and `.ds-shot__body`, a three-column grid of `.ds-shot__block` (grey; `--wide` spans the row on `--color-fill-1`; `--2`, `--3`, `--4` take the other fills). `--large` is the big preview of an item page. Replace it with a real picture.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__copy` with `.ds-page-header__title` and one grey `.ds-page-header__text` line, `.ds-page-header__actions` at the right, and a faint rule under it all. Place it directly after the breadcrumb.\n- `.ds-prose`: running text: h1, h2, h3 (in `--color-heading-alt`), p, lists, `strong`, and inline `code` in `--color-danger` on a faint grey chip. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` is grey for meta. `.ds-linkrow` lays links in a row.\n- `.ds-button`: the primary button on `--fill-button` with `--radius-control` and the darker bottom edge. Variants: `--secondary` (the pale default button; the usual choice), `--danger`, `--success`, `--warning`, `--info`, `--large` (featured block), `--small` (table rows, sorting, media rows), `--block` (full width). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons; `.ds-buttongroup` joins small buttons into one strip, for sorting and for the actions of a table row.\n- `.ds-form`: vertical form. `.ds-form__row` puts fields side by side; `.ds-form__field` wraps a bold `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the field and the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`. `.ds-form__actions` is the grey strip that closes a form inside a panel; `--flush` removes the gap when the form wraps a panel body and its action strip.\n- `.ds-table`: striped data table: a rule above every row, odd rows on `--color-surface-alt`, a `--border-width-strong` rule under the bold head. `--bordered` adds the outer box. `.ds-table__num` right-aligns numbers; `.ds-table__actions` is the right-aligned cell for a `.ds-buttongroup`. Wrap it in `.ds-table__wrap`; `.ds-table__foot` is the row under it with a legend at the left and a total at the right.\n- `.ds-list`: rows divided by faint rules. `.ds-list__item` holds a bold link `.ds-list__title`, `.ds-list__text` and small grey `.ds-list__meta`. `.ds-list__item--media` is the catalogue row: a `.ds-list__thumb` colour block with an icon (`--2`, `--3`, `--4` for the other fills), `.ds-list__body`, and `.ds-list__aside` at the right with a `.ds-list__price` over a small button.\n- `.ds-panel`: bordered box with `--radius-panel` and `--shadow-panel`: a tinted `.ds-panel__title` strip (a label may float right in it), `.ds-panel__body`, optional grey `.ds-panel__foot`. `.ds-panel__figure` is a large figure (a price). Contextual variants: `--primary`, `--success`, `--warning`, `--danger`, `--info`. `.ds-panels` sets three panels side by side. `.ds-facts` inside a panel body is a list of `.ds-facts__row`, each a grey `.ds-facts__name` and a value at the right.\n- `.ds-stat`: the row of counter boxes. `.ds-stat` is the row, four across; each `.ds-stat__item` is a bordered box with the `.ds-stat__figure` in a grey cell at the left and the `.ds-stat__label` beside it.\n- `.ds-shelf`: a section heading (`.ds-title`) with a `.ds-buttongroup` of sorting buttons at the right and a faint rule under both. It stands directly above a `.ds-grid`.\n- `.ds-grid`: item cards, four across. Each `.ds-grid__cell` is a bordered box: a `.ds-grid__tile` (`--color-fill-1`; `--2`, `--3`, `--4`) with a `.ds-grid__icon` and optionally a `.ds-grid__flag` label in its corner, a `.ds-grid__caption` with a linked `.ds-grid__title` and grey `.ds-grid__text`, and a `.ds-grid__foot` strip with `.ds-grid__price` at the left and `.ds-grid__sales` at the right.\n- `.ds-tabs`: boxed tabs standing on a rule. `.ds-tabs__tab` is a link; `is-current` has a border on three sides and `--color-canvas` behind it. A count label may follow the text.\n- `.ds-badge`: the small bold label on `--fill-accent` with `--radius-pill`. Variants: `--info`, `--success`, `--warning`, `--danger`, all with `--color-accent-text`; `--quiet` is the grey count. `.ds-badgerow` for several.\n- `.ds-sidebar`: a list group: a bordered box of rows divided by faint rules. `.ds-sidebar__title` is a heading strip like a panel's; each `.ds-sidebar__list` holds `.ds-sidebar__link` rows; `is-current` is filled with `--fill-accent`. `.ds-sidebar__count` is a small number at the right of a row.\n- `.ds-notice`: the alert: a tinted box with a 1px border of the same hue; `--error` uses `--color-danger-surface` and `--color-danger`. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: joined bordered boxes of `.ds-pagination__link`; `is-current` is filled with `--fill-accent`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a grey rounded strip of `.ds-breadcrumb__item` separated by slashes; the last item is `.ds-breadcrumb__current`.\n- `.ds-dialog`: the modal, shown open: a `--color-overlay` backdrop block centring `.ds-dialog__box` with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, and a grey `.ds-dialog__actions` strip with the buttons at the right, the confirming one last.\n- `.ds-empty`: a centred message in a well: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one `.ds-button--secondary`. It stands where a list would be.\n- `.ds-footer`: a full-width block on `--fill-inverse`. `.ds-footer__inner` is a grid of four columns: `.ds-footer__about` (a `.ds-footer__title` and a `.ds-footer__text`) and three columns each with a `.ds-footer__title` over `.ds-footer__links` of underlined `.ds-footer__link`. `.ds-footer__base` is the small centred line under a faint rule.\n\n- `.ds-menu`: a drop-down under a navigation item. The list item carries `.ds-menu`, its link `.ds-nav__link.ds-menu__toggle` (which adds the small caret), and the list `.ds-menu__list` of `.ds-menu__item` links with `.ds-menu__divider` rules between groups; `.ds-menu--end` hangs the list from the right edge of its item. It opens on hover and on keyboard focus (`.is-open` shows it statically) as a sheet on `--fill-panel` hanging from the bar, with the accent fill on the hovered item. `.ds-menu--nav` is the same component as the bar's fold: a `
` whose `.ds-menu__toggle` is the bordered button with three `.ds-menu__bars`; below 980px the row of links is hidden and this button opens them as a stack inside the bar, in the bar's own colours.\n- `.ds-menu--nav`: the phone navigation. A `
` placed in the bar after the links; hidden above 980px, where `.ds-nav__links` shows. Its `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`), and the list opens in the flow as a full row under the bar, one `.ds-menu__item` per view (a divider and the call to action may follow), the current one on a darker plate.\n- `.ds-accordion`: stacked groups for questions and settings that open one at a time. Each group is a `
` with a `.ds-accordion__head` summary (the panel title strip with a small triangle) and a `.ds-accordion__body`. Give the groups one `name` so that opening one closes the others.\n- `.ds-tooltip`: a hint on hover or focus. The trigger carries `.ds-tooltip` and `tabindex=\"0\"` and holds a `.ds-tooltip__tip`: a small bubble in `--color-inverse` with `--color-inverse-text` and an arrow, above the trigger. `.ds-tooltip--start` aligns the bubble with the trigger's left edge and `.ds-tooltip--end` with its right edge (use them near the edges of a column, so that the bubble stays inside a narrow window), `.ds-tooltip--plain` drops the underline for a badge or button, `.is-open` shows it statically.\n- `.ds-carousel`: a block on the inverse fill with one `.ds-carousel__slide` showing, round `.ds-carousel__arrow` labels at the sides (`--prev`, `--next`) and `.ds-carousel__dots` below. It works without script: one hidden radio button `.ds-carousel__pick` per slide comes first, and the arrows and each `.ds-carousel__dot` are labels for them. Up to three slides; a slide holds a `.ds-carousel__title`, a `.ds-carousel__text` and, for a quotation, a `.ds-carousel__by` line.\n- `.ds-switch`: the sliding on and off control of the period, drawn over a checkbox: a label holding `.ds-switch__input`, the `.ds-switch__track` (it writes ON on the primary button fill or OFF on the disabled fill beside a pale handle) and the `.ds-switch__label`. Use it for a setting that takes effect at once; keep `.ds-form__check` for a box that is sent with a form.\n- `.ds-progress`: a sunken track holding a `.ds-progress__bar` in the primary button fill. The bar's length is one of `--20`, `--40`, `--60`, `--80`, `--100`; `--success`, `--warning` and `--danger` recolour it; `.ds-progress--small` is the thin form inside a panel or a row. `.ds-progress__label` is the line of small text above it.\n- `.ds-avatar`: a person's or account's initial on a `--color-fill-1` square with `--color-accent-text` (`--2` to `--4` take the other fills, `--small` is the size of the mark, `--round` a circle). `.ds-person` sets one beside a `.ds-person__body` of name and meta text.\n\n## Never\n\n- `content-width <= 1100px`: content stays in the fixed centred container.\n- `font-families <= 2`: one sans-serif family, plus monospace for code.\n- `font-size >= 12px`: meta text, counts and labels are the smallest.\n- `font-size <= 46px`: the featured title is the largest text.\n- `font-weight <= 700`: headings are medium; bold is the heaviest.\n- `uppercase-text = 0%`: navigation, buttons and headings are in sentence case.\n- `underlined-links <= 25%`: links are underlined only on hover, in the footer and in the note of the category strip.\n- `border-width <= 2px`: borders are 1px; 2px only under a table head.\n- `border-radius <= 6px`: controls and boxes have 4px corners, the hero and the modal 6px.\n- `box-shadow-blur <= 7px`: shadows are short and faint; nothing floats.\n- `transition = none`: nothing animates.\n- `animation = none`: nothing moves on its own.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new box is a `.ds-panel` (border, heading strip, body), a `.ds-well` or a list group like `.ds-sidebar`; a new catalogue entry is a `.ds-grid__cell` or a `.ds-list__item--media`; a new action is a `.ds-button`, pale `--secondary` unless it is the one main action of the view; a new status is one of the four status colours with `--color-accent-text` on it. Lay new content out in a `.ds-row` of `.ds-col` columns. Controls take `--radius-control`, boxes `--radius-panel`, labels `--radius-pill`, the featured block and the dialog `--radius-page`. Spacing comes from the `--space-*` scale; any one-off shade is a `color-mix()` of tokens, noted next to the rule. Keep to the text-on-fill convention above, so that the component still reads with another palette of the era.\n", "components.css": ":root {\n --size-page: 1100px;\n --size-nav: 54px;\n --size-subnav: 40px;\n --size-mark: 28px;\n --size-search: 360px;\n --size-sidebar: 230px;\n --size-tile: 120px;\n --size-thumb: 96px;\n --size-icon: 40px;\n --size-dialog: 540px;\n --space-control-y: 6px;\n --space-control-x: 12px;\n --space-1: 5px;\n --space-2: 10px;\n --space-3: 15px;\n --space-4: 20px;\n --space-5: 30px;\n --space-6: 40px;\n --space-7: 60px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* container, rows and columns: the fixed centred column and its equal columns */\n.ds-container {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n margin: 0 auto;\n padding: 0 var(--space-3);\n}\n.ds-row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n margin-bottom: var(--space-5);\n}\n.ds-row--level {\n align-items: stretch;\n}\n.ds-row--flush {\n margin-bottom: 0;\n}\n.ds-col {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-col--wide {\n flex: 2 1 0;\n}\n.ds-col--side {\n flex: 0 0 var(--size-sidebar);\n}\n.ds-col--stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-col--stack > .ds-grow {\n flex: 1 0 auto;\n}\n.ds-col__text {\n margin: 0 0 var(--space-3);\n}\n.ds-rule {\n height: 0;\n margin: var(--space-5) 0;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-title--small {\n font-size: var(--text-h3);\n}\n.ds-title__small {\n color: var(--color-text-muted);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n}\n.ds-lead {\n margin: 0 0 var(--space-4);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-muted {\n color: var(--color-text-muted);\n}\n\n/* well: an inset grey box */\n.ds-well {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-well > :last-child {\n margin-bottom: 0;\n}\n\n/* code block */\n.ds-code {\n display: block;\n margin: 0 0 var(--space-3);\n padding: var(--space-2) var(--space-3);\n overflow-x: auto;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n white-space: pre;\n}\n\n/* placeholder picture: a grey block with its size written on it */\n.ds-figure {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--size-tile);\n padding: var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-align: center;\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n margin-top: var(--space-4);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n margin-top: var(--space-4);\n color: var(--color-heading-alt);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: 0 0 var(--space-2);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-2);\n padding-left: var(--space-4);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n color: var(--color-danger);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-4);\n margin: 0;\n}\n\n/* buttons: the primary fill, a pale default, and four status colours */\n.ds-button {\n display: inline-block;\n margin: 0;\n padding: var(--space-control-y) var(--space-control-x);\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-shadow);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-align: center;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n vertical-align: middle;\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover,\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: linear-gradient(color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)), color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)));\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: var(--fill-button);\n background-color: var(--color-danger);\n color: var(--color-accent-text);\n}\n.ds-button--success {\n background: var(--fill-button);\n background-color: var(--color-success);\n color: var(--color-accent-text);\n}\n.ds-button--info {\n background: var(--fill-button);\n background-color: var(--color-accent-alt);\n color: var(--color-accent-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover,\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-danger);\n color: var(--color-accent-text);\n}\n.ds-button--success:hover,\n.ds-button--success.is-hover,\n.ds-button--success:active,\n.ds-button--success.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-success);\n color: var(--color-accent-text);\n}\n.ds-button--warning:hover,\n.ds-button--warning.is-hover,\n.ds-button--warning:active,\n.ds-button--warning.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-button--info:hover,\n.ds-button--info.is-hover,\n.ds-button--info:active,\n.ds-button--info.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-accent-alt);\n color: var(--color-accent-text);\n}\n.ds-button--large {\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-page);\n font-size: var(--text-large);\n}\n.ds-button--small {\n padding: calc(var(--space-control-y) / 3) var(--space-2);\n font-size: var(--text-small);\n}\n.ds-button--block {\n display: block;\n width: 100%;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-buttongroup {\n display: inline-flex;\n vertical-align: middle;\n}\n.ds-buttongroup > .ds-button {\n border-radius: 0;\n}\n.ds-buttongroup > .ds-button + .ds-button {\n margin-left: calc(var(--border-width) * -1);\n}\n.ds-buttongroup > .ds-button:first-child {\n border-top-left-radius: var(--radius-control);\n border-bottom-left-radius: var(--radius-control);\n}\n.ds-buttongroup > .ds-button:last-child {\n border-top-right-radius: var(--radius-control);\n border-bottom-right-radius: var(--radius-control);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form--flush {\n gap: 0;\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-3);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-control-y) var(--space-control-x);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__field.is-error .ds-form__label {\n color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-top: var(--space-1);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n}\n\n/* table: striped rows, a rule above every row, a strong rule under the head */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-surface);\n color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-2);\n text-align: left;\n vertical-align: middle;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table thead th {\n color: var(--color-heading);\n border-top: 0;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n font-weight: var(--weight-bold);\n vertical-align: bottom;\n}\n.ds-table tbody th {\n font-weight: var(--weight-body);\n}\n.ds-table tbody tr:nth-child(odd) td,\n.ds-table tbody tr:nth-child(odd) th {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__actions {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table__wrap {\n overflow-x: auto;\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-top: var(--space-3);\n}\n\n/* list: media rows divided by faint rules */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__text {\n display: block;\n margin: 0;\n}\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: a bordered box with a tinted heading strip */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-panel__title .ds-badge {\n float: right;\n}\n.ds-panel__body {\n padding: var(--space-3);\n}\n.ds-panel__body > p {\n margin: 0 0 var(--space-2);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n.ds-panel__foot {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\n font-size: var(--text-small);\n}\n.ds-panel__figure {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-panel--primary {\n border-color: var(--color-button);\n}\n.ds-panel--primary > .ds-panel__title {\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border-bottom-color: var(--color-button);\n text-shadow: var(--shadow-text);\n}\n.ds-panel--info {\n border-color: color-mix(in srgb, var(--color-accent-alt) 45%, var(--color-border));\n}\n.ds-panel--info > .ds-panel__title {\n background: color-mix(in srgb, var(--color-accent-alt) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-accent-alt) 45%, var(--color-border));\n}\n.ds-panel.ds-grow {\n display: flex;\n flex-direction: column;\n}\n.ds-panel.ds-grow > .ds-panel__body {\n flex: 1 0 auto;\n}\n.ds-panels {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-5);\n margin-bottom: var(--space-5);\n}\n\n/* tabs: boxed tabs standing on a rule */\n.ds-tabs {\n display: flex;\n gap: var(--border-width-strong);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-2) var(--space-3);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-surface-strong);\n border-color: var(--color-surface-strong) var(--color-surface-strong) var(--color-border);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-canvas);\n color: var(--color-text);\n border-color: var(--color-border) var(--color-border) var(--color-canvas);\n}\n.ds-tabs__tab .ds-badge {\n margin-left: var(--space-1);\n}\n\n/* badge: the small label; status colours and a count */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-1);\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--quiet {\n background: var(--color-text-muted);\n color: var(--color-canvas);\n text-shadow: none;\n}\n.ds-badge--info {\n background: var(--color-accent-alt);\n}\n.ds-badge--success {\n background: var(--color-success);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n}\n\n/* notice: the tinted alert box */\n.ds-notice {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 25%, var(--color-notice));\n border-radius: var(--radius-panel);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-danger-surface));\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin-bottom: var(--space-4);\n}\n\n/* pagination: joined boxes */\n.ds-pagination {\n display: inline-flex;\n margin: 0;\n padding: 0;\n list-style: none;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__link {\n display: block;\n margin-left: calc(var(--border-width) * -1);\n padding: var(--space-control-y) var(--space-control-x);\n background: var(--color-surface);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-pagination > li:first-child .ds-pagination__link {\n margin-left: 0;\n border-radius: var(--radius-control) 0 0 var(--radius-control);\n}\n.ds-pagination > li:last-child .ds-pagination__link {\n border-radius: 0 var(--radius-control) var(--radius-control) 0;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n position: relative;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-accent);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb: a grey strip with slashes */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0 0 var(--space-4);\n padding: var(--space-2) var(--space-3);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border-radius: var(--radius-panel);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-1);\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-text-muted);\n}\n\n/* dialog: the modal, shown open on its backdrop */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-5) var(--space-3);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-dialog__close {\n color: var(--color-text-muted);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-h3) * 0.6);\n height: calc(var(--text-h3) * 0.6);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n rotate: 45deg;\n vertical-align: middle;\n}\n.ds-dialog__body {\n padding: var(--space-3);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-1);\n padding: var(--space-3);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 calc(var(--radius-page) - var(--border-width)) calc(var(--radius-page) - var(--border-width));\n}\n\n/* empty state: a well with a message and one button */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* spacing helper: a block that is followed by another */\n.ds-page .ds-spaced {\n margin-bottom: var(--space-4);\n}\n\n/* page header: title with a rule under it */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\n padding-bottom: var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n gap: var(--space-2);\n}\n\n/* nav: the top bar with the search field in the middle; it scrolls away with the page */\n.ds-nav {\n background-color: var(--color-bar);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, var(--color-bar));\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: 0 var(--space-3);\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-shadow);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__search {\n display: flex;\n flex: 0 1 var(--size-search);\n min-width: 0;\n margin: 0;\n}\n.ds-nav__search .ds-form__input {\n flex: 1 1 0;\n min-width: 0;\n border-radius: var(--radius-control) 0 0 var(--radius-control);\n}\n.ds-nav__search .ds-button {\n margin-left: calc(var(--border-width) * -1);\n border-radius: 0 var(--radius-control) var(--radius-control) 0;\n}\n.ds-nav__links {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0 0 0 auto;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) var(--space-2);\n color: var(--color-bar-text);\n border-radius: var(--radius-control);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:not(:has(.ds-view:target)) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#browse:target) .ds-nav__link[href=\"#browse\"],\n.ds-page:has(#browse:target) .ds-menu--nav .ds-menu__item[href=\"#browse\"],\n.ds-page:has(#theme:target) .ds-nav__link[href=\"#browse\"],\n.ds-page:has(#theme:target) .ds-menu--nav .ds-menu__item[href=\"#browse\"],\n.ds-page:has(#purchases:target) .ds-nav__link[href=\"#purchases\"],\n.ds-page:has(#purchases:target) .ds-menu--nav .ds-menu__item[href=\"#purchases\"],\n.ds-page:has(#sell:target) .ds-nav__link[href=\"#sell\"],\n.ds-page:has(#sell:target) .ds-menu--nav .ds-menu__item[href=\"#sell\"] {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* subnav: the category strip under the top bar */\n.ds-subnav {\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-subnav__inner {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n min-height: var(--size-subnav);\n margin: 0 auto;\n padding: 0 var(--space-3);\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-subnav__label {\n font-weight: var(--weight-bold);\n white-space: nowrap;\n}\n.ds-subnav__links {\n display: flex;\n flex: 1 1 0;\n min-width: 0;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-subnav__link {\n display: block;\n padding: calc(var(--space-1) / 2) var(--space-2);\n color: inherit;\n border-radius: var(--radius-control);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-subnav__link:hover,\n.ds-subnav__link.is-hover,\n.ds-subnav__link.is-current {\n background: color-mix(in srgb, var(--color-bar-alt-text) 14%, transparent);\n}\n.ds-subnav__note {\n white-space: nowrap;\n}\n.ds-subnav__note a {\n color: inherit;\n text-decoration: underline;\n}\n\n/* main: the centred column under the two bars */\n.ds-main {\n padding-top: var(--space-5);\n}\n\n/* hero: the featured item, copy at the left and a drawn preview at the right */\n.ds-hero {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n margin-bottom: var(--space-4);\n padding: var(--space-6);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-hero__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__art {\n flex: 0 0 42%;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-4);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-hero__note {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* shot: a preview drawn as a small browser window */\n.ds-shot {\n overflow: hidden;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-shot__bar {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-1) var(--space-2);\n background: var(--color-surface-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-shot__dot {\n width: var(--space-2);\n height: var(--space-2);\n background: var(--color-border-strong);\n border-radius: 50%;\n}\n.ds-shot__body {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: var(--space-2);\n padding: var(--space-2);\n}\n.ds-shot__block {\n min-height: var(--space-6);\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-panel) / 2);\n}\n.ds-shot__block--wide {\n grid-column: 1 / -1;\n min-height: var(--space-7);\n background: var(--color-fill-1);\n}\n.ds-shot__block--2 {\n background: var(--color-fill-2);\n}\n.ds-shot__block--3 {\n background: var(--color-fill-3);\n}\n.ds-shot__block--4 {\n background: var(--color-fill-4);\n}\n.ds-shot--large .ds-shot__block {\n min-height: var(--space-7);\n}\n.ds-shot--large .ds-shot__block--wide {\n min-height: calc(var(--size-tile) * 1.5);\n}\n\n/* stats: counter boxes, the figure in a grey cell beside its label */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n display: flex;\n align-items: stretch;\n min-width: 0;\n overflow: hidden;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__figure {\n display: block;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n min-height: calc(var(--text-h3) * var(--line-heading) + var(--space-2) * 2);\n align-content: center;\n text-align: start;\n text-box: trim-both cap alphabetic;\n}\n.ds-stat__label {\n display: flex;\n align-items: center;\n padding: var(--space-2) var(--space-3);\n color: var(--color-text-muted);\n line-height: var(--line-heading);\n}\n\n/* shelf: a section heading with its sorting buttons on one line */\n.ds-shelf {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2) var(--space-4);\n margin-bottom: var(--space-4);\n padding-bottom: var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-shelf > .ds-title {\n margin: 0;\n}\n\n/* grid: item cards, a colour tile over a caption and a price strip */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__tile {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-tile);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n}\n.ds-grid__tile--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__tile--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__tile--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-grid__flag {\n position: absolute;\n top: var(--space-2);\n right: var(--space-2);\n}\n.ds-grid__caption {\n flex: 1 0 auto;\n padding: var(--space-2) var(--space-3);\n}\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-grid__title a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-grid__title a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-grid__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\n}\n.ds-grid__price {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-grid__sales {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* media rows: a list item with a thumbnail at the left and a price at the right */\n.ds-list__item--media {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n}\n.ds-list__thumb {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 var(--size-thumb);\n height: calc(var(--size-thumb) * 0.7);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: var(--radius-control);\n}\n.ds-list__thumb--2 {\n background: var(--color-fill-2);\n}\n.ds-list__thumb--3 {\n background: var(--color-fill-3);\n}\n.ds-list__thumb--4 {\n background: var(--color-fill-4);\n}\n.ds-list__thumb svg {\n width: calc(var(--size-icon) * 0.8);\n height: calc(var(--size-icon) * 0.8);\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__aside {\n flex: 0 0 auto;\n text-align: right;\n}\n.ds-list__price {\n display: block;\n margin-bottom: var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n\n/* definition rows inside a panel: a name at the left, a value at the right */\n.ds-facts {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-facts__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-facts__row:first-child {\n border-top: 0;\n}\n.ds-facts__name {\n color: var(--color-text-muted);\n}\n\n/* sidebar: a list group, rows divided by rules under a heading strip */\n.ds-sidebar {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-sidebar__title:first-child {\n border-top: 0;\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__list > li + li {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-sidebar__link.is-current {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: var(--shadow-text);\n}\n.ds-sidebar__count {\n float: right;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-sidebar__link.is-current .ds-sidebar__count {\n color: inherit;\n}\n\n/* footer: an inverted block with link columns */\n.ds-footer {\n margin-top: var(--space-6);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-footer__inner {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n margin: 0 auto;\n padding: var(--space-5) var(--space-3);\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: var(--space-5);\n}\n.ds-footer__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-footer__text {\n margin: 0;\n max-width: 44ch;\n opacity: 0.75;\n}\n.ds-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: inherit;\n opacity: 0.75;\n text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n opacity: 1;\n text-decoration: none;\n}\n.ds-footer__base {\n margin: 0;\n padding: var(--space-3);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 18%, transparent);\n font-size: var(--text-small);\n text-align: center;\n opacity: 0.75;\n}\n\n/* menu: a drop-down under a navigation item, open on hover or keyboard focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border-left: var(--space-1) solid transparent;\n border-right: var(--space-1) solid transparent;\n border-top: var(--space-1) solid currentColor;\n vertical-align: calc(var(--space-1) / 2);\n margin-left: var(--space-1);\n opacity: 0.7;\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n min-width: calc(var(--size-icon) * 4);\n margin: 0;\n padding: var(--space-1) 0;\n list-style: none;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:has(:focus-visible) > .ds-menu__list,\n.ds-menu.is-open > .ds-menu__list {\n display: block;\n}\n.ds-menu__item {\n display: block;\n padding: var(--space-1) var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover,\n.ds-menu__item:focus-visible {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-menu--end > .ds-menu__list {\n right: 0;\n left: auto;\n}\n.ds-menu__divider {\n height: 0;\n margin: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* menu in the bar: on a narrow window the links fold away behind a button with three bars */\n.ds-menu--nav {\n display: none;\n position: static;\n}\n.ds-menu--nav > .ds-menu__toggle {\n position: absolute;\n top: var(--space-1);\n right: var(--space-3);\n display: flex;\n align-items: center;\n justify-content: center;\n height: calc(var(--size-nav) - var(--space-2));\n padding: 0 var(--space-2);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 35%, transparent);\n border-radius: var(--radius-control);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu--nav > .ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu--nav > .ds-menu__toggle::after {\n content: none;\n}\n.ds-menu--nav > .ds-menu__toggle:hover,\n.ds-menu--nav[open] > .ds-menu__toggle {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n}\n.ds-menu--nav > .ds-menu__toggle:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu__bars {\n display: block;\n width: var(--space-4);\n height: calc(var(--space-2) + var(--border-width-strong) * 2);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu__bars::before {\n content: \"\";\n display: block;\n margin-top: calc((var(--space-2) - var(--border-width-strong)) / 2);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu--nav > .ds-menu__list {\n display: block;\n position: static;\n min-width: 0;\n padding: var(--space-1) 0 var(--space-2);\n background: transparent;\n border: 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n border-radius: 0;\n box-shadow: none;\n}\n.ds-menu--nav .ds-menu__item {\n padding: var(--space-2) var(--space-3);\n color: var(--color-bar-text);\n font-weight: var(--weight-ui);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: normal;\n}\n.ds-menu--nav .ds-menu__item:hover,\n.ds-menu--nav .ds-menu__item.is-hover,\n.ds-menu--nav .ds-menu__item:focus-visible {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n color: var(--color-bar-text);\n}\n.ds-menu--nav .ds-menu__divider {\n border-top-color: color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n}\n\n/* accordion: stacked groups, each a heading that opens its body */\n.ds-accordion {\n margin: 0 0 var(--space-4);\n}\n.ds-accordion__item {\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-accordion__item + .ds-accordion__item {\n margin-top: var(--space-1);\n}\n.ds-accordion__head {\n display: block;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-radius: calc(var(--radius-panel) - var(--border-width));\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::before {\n content: \"\";\n display: inline-block;\n width: 0;\n height: 0;\n margin-right: calc(var(--space-3) - var(--space-1) * 1.2);\n border-top: var(--space-1) solid transparent;\n border-bottom: var(--space-1) solid transparent;\n border-left: calc(var(--space-1) * 1.2) solid currentColor;\n color: var(--color-text-muted);\n}\n.ds-accordion__item[open] > .ds-accordion__head {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n}\n.ds-accordion__item[open] > .ds-accordion__head::before {\n rotate: 90deg;\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n text-decoration: underline;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n padding: var(--space-3);\n}\n.ds-accordion__body > p {\n margin: 0 0 var(--space-2);\n}\n.ds-accordion__body > :last-child {\n margin-bottom: 0;\n}\n\n/* tooltip: a small inverted bubble above its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n cursor: help;\n}\n.ds-tooltip--plain {\n border-bottom: 0;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 30;\n width: max-content;\n max-width: var(--size-sidebar);\n padding: var(--space-1) var(--space-2);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-align: center;\n text-shadow: none;\n text-transform: none;\n white-space: normal;\n transform: translateX(-50%);\n}\n.ds-tooltip__tip::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n width: var(--space-2);\n height: var(--space-2);\n margin: calc(var(--space-1) * -1) 0 0 calc(var(--space-1) * -1);\n background: var(--color-inverse);\n transform: rotate(45deg);\n}\n.ds-tooltip--start > .ds-tooltip__tip {\n left: 0;\n transform: none;\n}\n.ds-tooltip--start > .ds-tooltip__tip::after {\n left: var(--space-4);\n}\n.ds-tooltip--end > .ds-tooltip__tip {\n right: 0;\n left: auto;\n transform: none;\n}\n.ds-tooltip--end > .ds-tooltip__tip::after {\n right: var(--space-4);\n left: auto;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip,\n.ds-tooltip.is-open > .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n}\n\n/* carousel: one slide showing on an inverted block, arrows at the sides, dots below; radio buttons keep the place */\n.ds-carousel {\n position: relative;\n margin: 0 0 var(--space-5);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n}\n.ds-carousel__pick {\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n opacity: 0;\n pointer-events: none;\n}\n.ds-carousel__slide {\n display: none;\n min-height: calc(var(--size-icon) * 4);\n padding: var(--space-5) calc(var(--size-icon) + var(--space-5)) var(--space-6);\n}\n.ds-carousel__pick:nth-of-type(1):checked ~ .ds-carousel__slide:nth-of-type(1),\n.ds-carousel__pick:nth-of-type(2):checked ~ .ds-carousel__slide:nth-of-type(2),\n.ds-carousel__pick:nth-of-type(3):checked ~ .ds-carousel__slide:nth-of-type(3) {\n display: block;\n}\n.ds-carousel__title {\n margin: 0 0 var(--space-2);\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-carousel__text {\n margin: 0 0 var(--space-3);\n max-width: 64ch;\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-carousel__by {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n font-size: var(--text-base);\n}\n.ds-carousel__arrow {\n position: absolute;\n top: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n color: var(--color-inverse-text);\n border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 60%, transparent);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: 1;\n cursor: pointer;\n transform: translateY(-50%);\n transition: var(--transition);\n}\n.ds-carousel__arrow::before {\n content: \"\";\n flex: none;\n width: calc(var(--text-h3) * 0.4);\n height: calc(var(--text-h3) * 0.4);\n border-left: calc(var(--space-2) / 4) solid currentColor;\n border-bottom: calc(var(--space-2) / 4) solid currentColor;\n rotate: 45deg;\n translate: 25% 0;\n}\n.ds-carousel__arrow--next::before {\n rotate: -135deg;\n translate: -25% 0;\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n}\n.ds-carousel__arrow--prev {\n left: var(--space-3);\n}\n.ds-carousel__arrow--next {\n right: var(--space-3);\n}\n.ds-carousel__dots {\n position: absolute;\n right: 0;\n bottom: var(--space-3);\n left: 0;\n display: flex;\n justify-content: center;\n gap: var(--space-1);\n}\n.ds-carousel__dot {\n width: var(--space-2);\n height: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-inverse-text);\n border-radius: 50%;\n cursor: pointer;\n}\n.ds-carousel__pick:nth-of-type(1):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(1),\n.ds-carousel__pick:nth-of-type(2):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(2),\n.ds-carousel__pick:nth-of-type(3):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(3) {\n background: var(--color-inverse-text);\n}\n.ds-carousel__pick:focus-visible ~ .ds-carousel__dots {\n outline: var(--focus-ring);\n}\n\n/* switch: the sliding on and off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-2);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n opacity: 0;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-7) + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n transition: var(--transition);\n}\n.ds-switch__track::before {\n content: \"OFF\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 50%;\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 50%;\n background: var(--fill-button-secondary);\n border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: calc(var(--radius-control) - var(--border-width)) 0 0 calc(var(--radius-control) - var(--border-width));\n box-shadow: var(--shadow-control);\n}\n.ds-switch__input:checked + .ds-switch__track {\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-switch__input:checked + .ds-switch__track::before {\n content: \"ON\";\n right: auto;\n left: 0;\n text-shadow: var(--shadow-text);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n right: 0;\n left: auto;\n border-right: 0;\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 calc(var(--radius-control) - var(--border-width)) calc(var(--radius-control) - var(--border-width)) 0;\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n}\n.ds-switch__input:disabled + .ds-switch__track {\n opacity: 0.6;\n}\n.ds-switch__label {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* progress: a sunken track with a filled bar; the bar's length is one of five steps */\n.ds-progress {\n height: var(--space-4);\n margin: 0 0 var(--space-3);\n background: var(--color-surface-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n overflow: hidden;\n}\n.ds-progress__bar {\n width: 50%;\n height: 100%;\n background-color: var(--color-button);\n background: var(--fill-button);\n}\n.ds-progress__bar--60 {\n width: 60%;\n}\n.ds-progress--small {\n height: var(--space-2);\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0 0 var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* avatar: a person's initial on a colour square */\n.ds-avatar {\n display: inline-block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: var(--radius-control);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-shadow: none;\n vertical-align: middle;\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-avatar--2 {\n background: var(--color-fill-2);\n}\n.ds-avatar--3 {\n background: var(--color-fill-3);\n}\n.ds-avatar--4 {\n background: var(--color-fill-4);\n}\n.ds-avatar--small {\n width: var(--size-mark);\n height: var(--size-mark);\n font-size: var(--text-small);\n}\n.ds-person {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-person__body {\n flex: 1 1 0;\n min-width: 0;\n}\n\n.ds-person > .ds-person__body > .ds-list__title {\n display: block;\n}\n\n/* medium windows: the links of the bar fold into the menu button */\n@media (max-width: 980px) {\n .ds-nav {\n position: static;\n }\n .ds-nav__inner {\n position: relative;\n flex-wrap: wrap;\n gap: 0 var(--space-2);\n }\n .ds-nav__links {\n display: none;\n }\n .ds-brand {\n min-height: var(--size-nav);\n }\n .ds-menu--nav {\n display: block;\n flex: 0 0 100%;\n order: 9;\n }\n .ds-nav__search {\n margin-right: calc(var(--space-6) + var(--space-3));\n }\n .ds-subnav__inner {\n overflow-x: auto;\n }\n .ds-subnav__note {\n display: none;\n }\n}\n\n/* narrow windows: the search field takes its own row, columns stack */\n@media (max-width: 760px) {\n .ds-nav__inner {\n padding-bottom: var(--space-2);\n }\n .ds-nav__search {\n margin-right: 0;\n }\n .ds-carousel__slide {\n padding: var(--space-4) var(--space-4) calc(var(--size-icon) + var(--space-5));\n }\n .ds-carousel__arrow {\n top: auto;\n bottom: var(--space-2);\n transform: none;\n }\n .ds-nav__search {\n order: 3;\n flex: 0 0 100%;\n }\n .ds-main {\n padding-top: var(--space-3);\n }\n .ds-row {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n }\n .ds-col,\n .ds-col--wide,\n .ds-col--side {\n flex: 0 0 auto;\n }\n .ds-col--side {\n order: 2;\n }\n .ds-hero {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n padding: var(--space-4);\n }\n .ds-hero__copy,\n .ds-hero__art {\n flex: 0 0 auto;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n line-height: var(--line-heading);\n letter-spacing: 0;\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-stat {\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-2);\n }\n .ds-stat__item {\n flex-direction: column;\n }\n .ds-stat__figure {\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-3);\n }\n .ds-grid__foot {\n flex-wrap: wrap;\n }\n .ds-panels {\n grid-template-columns: 1fr;\n gap: var(--space-4);\n }\n .ds-list__item--media {\n flex-wrap: wrap;\n }\n .ds-list__thumb {\n flex-basis: var(--size-icon);\n height: var(--size-icon);\n }\n .ds-list__aside {\n flex: 0 0 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: left;\n }\n .ds-list__price {\n margin: 0;\n }\n .ds-tabs {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .ds-table {\n min-width: 60ch;\n }\n .ds-form__row {\n flex-direction: column;\n }\n .ds-dialog {\n padding: var(--space-4) var(--space-2);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-pagination {\n flex-wrap: wrap;\n }\n .ds-footer__inner {\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n }\n .ds-footer__about {\n grid-column: 1 / -1;\n }\n}\n\n/* medium windows and phones: the category strip scrolls sideways; its far edge fades to show there is more */\n@media (max-width: 980px) {\n .ds-subnav__inner {\n scrollbar-width: none;\n -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--space-5)), transparent);\n mask-image: linear-gradient(to right, black calc(100% - var(--space-5)), transparent);\n }\n .ds-subnav__links {\n flex: 0 0 auto;\n padding-right: var(--space-5);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: framework default theme market specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n
\n \n Search\n
\n \n
\n \n \n
\n
\n
\n\n\n
\n\n
\n
\n
\n

Themes for the framework you already use.

\n

chronoskin is a market for ready-made site themes: admin panels, landing pages, shops and blogs, each built on the same grid and components, each from an independent designer.

\n
\n Browse all themes\n Sell your own\n
\n

From $4. One payment, updates included, live preview before you buy.

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
    \n
  • 412themes on sale
    • \n
  • 96,300copies sold
    • \n
  • 138designers selling
    • \n
  • 14new this week
    • \n
\n\n
\n

Popular this week page 1 of 52

\n
\n Popular\n Newest\n Bestselling\n Price\n
\n
\n
\n
\n
New
\n
\n

Back office, light

\n

Admin and dashboards

\n
\n
$18434 sold
\n
\n
\n
\n
\n

One page product launch

\n

Landing pages

\n
\n
$124,038 sold
\n
\n
\n
\n
\n

Small firm, five pages

\n

Business

\n
\n
$161,649 sold
\n
\n
\n
Sale
\n
\n

Photographer's portfolio

\n

Portfolios

\n
\n
$8218 sold
\n
\n
\n
\n
\n

Magazine with a sidebar

\n

Blogs and magazines

\n
\n
$1398 sold
\n
\n
\n
\n
\n

Back office, dark

\n

Admin and dashboards

\n
\n
$182,584 sold
\n
\n
\n
\n
\n

Corner shop with a basket

\n

Shops

\n
\n
$14412 sold
\n
\n
\n
New
\n
\n

Coming soon page

\n

Landing pages

\n
\n
$415 sold
\n
\n
\n\n
\n \n \n \n
\n

Theme of the week: Back office, light

\n

Forty screens for a small back office, in six colour schemes. Reviewed and updated this month.

\n See the theme »\n \n \n
\n
\n

New: landing pages that fit one screen

\n

Fourteen themes for a product launch, each with a sign-up form and a pricing table.

\n Browse landing pages »\n \n \n
\n
\n

Designers keep 70% of every sale

\n

Upload a theme, name your price, and a person reviews it within three working days.

\n Submit a theme »\n \n \n
\n
\n \n \n \n
\n
\n\n
\n
\n
\n

Just released

\n
\n \n
\n
\n
\n
\n
\n

Top designers this month

\n
\n \n
\n
\n
\n
\n
\n

Sell what you have built

\n

Upload a theme, set a price and keep 70% of every sale. We review each upload within three working days.

\n Submit a theme\n
\n
\n
\n
\n\n
\n
    \n
  1. Themes
    2. \n
  2. Browse
    3. \n
  3. Admin and dashboards
    4. \n
\n
\n
\n

Admin and dashboards

\n

64 themes for back offices, control panels and reports.

\n
\n
\n Sell in this category\n
\n
\n\n
\n
\n \n
\n \n

No saved themes

\n

Themes you mark with a heart are kept here while you compare.

\n Sign in to save\n
\n
\n
\n \n
    \n
  • \n \n
    \n Back office, light New\n

    Forty screens for a small back office: tables, forms, a calendar, charts and a sign-in page, in six colour schemes.

    \n by Ilse Brandt, released 2 days ago, 434 sold, 4.8 of 5 from 37 reviews\n
    \n
    $18Details
    \n
    • \n
  • \n \n
    \n Back office, dark\n

    The same forty screens on charcoal, with a collapsing side menu and a print style sheet for reports.

    \n by Ilse Brandt, released 8 months ago, 2,584 sold, 4.6 of 5 from 212 reviews\n
    \n
    $18Details
    \n
    • \n
  • \n \n
    \n Reports and charts\n

    A dashboard built around figures: summary boxes, line and bar charts drawn in the page, and export buttons.

    \n by Teo Marsh, released 3 months ago, 728 sold, 4.4 of 5 from 58 reviews\n
    \n
    $25Details
    \n
    • \n
  • \n \n
    \n Plain control panel\n

    Close to the framework defaults on purpose: a top bar, a side list and tidy tables. Easy to restyle.

    \n by Nadia Okoro, released 1 year ago, 2,728 sold, 4.5 of 5 from 190 reviews\n
    \n
    $12Details
    \n
    • \n
  • \n \n
    \n Help desk Sale\n

    A ticket queue, a conversation view and a small knowledge base, with canned replies and labels.

    \n by Teo Marsh, released 5 months ago, 311 sold, 4.2 of 5 from 26 reviews\n
    \n
    $9Details
    \n
    • \n
  • \n \n
    \n Stock room\n

    Product lists with pictures, stock levels with warning colours, and a delivery note that prints on one page.

    \n by Nadia Okoro, released 7 months ago, 1,293 sold, 4.7 of 5 from 104 reviews\n
    \n
    $14Details
    \n
    • \n
\n \n
\n
\n
\n\n
\n
    \n
  1. Themes
    2. \n
  2. Admin and dashboards
    3. \n
  3. Back office, light
    4. \n
\n
\n
\n

Back office, light

\n

Forty screens for a small back office, by Ilse Brandt.

\n
\n
\n Live preview\n Buy for $18\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n

What is in the package

\n

Everything a small back office needs on day one, built on the framework's own grid.

\n

The theme restyles the standard components and adds a few of its own. No markup is changed, so a page written for the plain framework takes the theme by swapping one style sheet.

\n

Screens

\n
    \n
  • Dashboard with summary boxes and two charts
    • \n
  • Tables with sorting, filters and bulk actions
    • \n
  • Forms, a calendar, an inbox and a sign-in page
    • \n
\n

Installing it

\n

Unpack the archive and link css/theme.min.css after the framework's own file. The six colour schemes are separate files in css/schemes/.

\n
\n

Before you buy

\n
\n
\n Which version of the framework does it need?\n

Version 3. A build for version 2 is in the same archive, in its own folder.

\n
\n
\n May I use it for a client?\n

Yes, for one finished site per licence. A second client needs a second licence.

\n
\n
\n Do I get updates?\n

For as long as the theme is sold here. You are told by email and download them from Purchases.

\n
\n
\n

\n More from this designer:\n Back office, dark\n Sign-in pages\n Invoice templates\n All nine themes\n Back to the category\n

\n
\n
\n
\n

Single licenceOne finished site, for yourself or for one client. New

\n
\n $18\n

One site, yours or a client's. Updates for as long as the theme is sold.

\n Buy for $18\n
\n
Multiple sites: $54. Extended: $450.
\n
\n
\n

Details

\n
\n
    \n
  • Released12 March 2014
    • \n
  • Version1.0.2
    • \n
  • FrameworkVersion 3
    • \n
  • LayoutResponsive
    • \n
  • Copies sold434
    • \n
  • Rating4.8 of 5
    • \n
\n
\n
\n
\n

Latest reviews

\n
\n
    \n
  • Dropped it onto our stock system in an afternoon.5 of 5, R Rafael Soto, yesterday
    • \n
  • Clean tables. The calendar needed some work on a phone.4 of 5, M Mina Petrov, 6 days ago
    • \n
  • Good value, and the designer answers questions.5 of 5, O Owen Hale, 9 days ago
    • \n
\n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Themes
    2. \n
  2. Purchases
    3. \n
\n
\n
\n

Purchases

\n

Everything you have bought, ready to download again.

\n
\n
\n Browse themes\n
\n
\n\n
\n

Update ready. Version 1.0.2 of Back office, light fixes the calendar on small screens. Download it below.

\n

Payment failed. Your card was declined for Coming soon page. Nothing was charged.

\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n
ThemeLicenceBoughtStatusPaidActions
Back office, lightSingle14 March 2014Update ready$18.00DownloadInvoice
One page product launchMultiple2 February 2014Paid$36.00DownloadInvoice
Coming soon pageSingle28 January 2014Declined$0.00Pay again
Photographer's portfolioSingle9 December 2013Refund asked$8.00DownloadInvoice
Plain control panelSingle30 October 2013Paid$12.00DownloadInvoice
\n
\n
\n
\n Status:\n Featured\n Update ready\n Paid\n Refund asked\n Declined\n 5\n
\n Five purchases, $74.00 in all.\n
\n\n
\n
\n
\n

Withdraw the refund request?

\n \n
\n
\n

You asked for $8.00 back for Photographer's portfolio. If you withdraw the request, the licence stays yours and the download stays open.

\n
\n
\n Keep the request\n Withdraw it\n
\n
\n
\n
\n\n
\n
    \n
  1. Themes
    2. \n
  2. Sell
    3. \n
\n
\n
\n

Submit a theme

\n

Tell us what it is, attach the archive and name your price.

\n
\n
\n See what sells\n
\n
\n\n
\n
\n

Step 2 of 3: about the themeNext: the archive

\n
\n
\n

About the theme

\n
\n
\n
\n \n \n
\n
\n \n \n
\n \n \n \n
\n
\n \n Save as a draft\n Delete the draft\n \n
\n
\n
\n
\n
\n
\n

How review works

\n
\n

A person opens every page of the preview at three window sizes and reads the code. You hear back within three working days.

\n The review checklist\n
\n
\n
\n

What you earn

\n
\n
    \n
  • Your share70%
    • \n
  • Paid outMonthly
    • \n
  • Lowest payout$50
    • \n
\n
\n
\n
\n

First upload?

\n

Read how three designers prepared their themes and what the reviewers sent back.

\n Read the guide\n
\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bootstrap-era.portal.s07.p07.t07.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bootstrap-era\",\n \"years\": [\n 2011,\n 2014\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bs-7771\",\n \"short\": \"v1-bs-7771\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f7f3f5;\n --color-surface-strong: #ece5e9;\n --color-bar: #4c1d3d;\n --color-bar-text: #f0e0e9;\n --color-bar-alt: #f1e9ed;\n --color-bar-alt-text: #6b4a5e;\n --color-inverse: #33172b;\n --color-inverse-text: #ffffff;\n --color-text: #3d3539;\n --color-text-muted: #8f8389;\n --color-heading: #2a1f26;\n --color-heading-alt: #7a2a5f;\n --color-link: #a3246f;\n --color-link-quiet: #8f8389;\n --color-link-visited: #7a2a5f;\n --color-link-hover: #6f1549;\n --color-link-active: #540f37;\n --color-border: #ded5d9;\n --color-border-strong: #c5b8bf;\n --color-border-muted: #ebe4e7;\n --color-accent: #b02a78;\n --color-accent-text: #ffffff;\n --color-accent-alt: #3a8fc4;\n --color-fill-1: #b02a78;\n --color-fill-2: #e2622b;\n --color-fill-3: #5a8f3c;\n --color-fill-4: #4b4e8f;\n --color-button: #b02a78;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #3d3539;\n --color-input: #ffffff;\n --color-input-text: #3d3539;\n --color-input-border: #c5b8bf;\n --color-disabled: #ece5e9;\n --color-disabled-text: #a99fa4;\n --color-danger: #cf3a2a;\n --color-danger-surface: #fbe5e1;\n --color-success: #4e9a3a;\n --color-warning: #e8891c;\n --color-notice: #f6e9f1;\n --color-notice-text: #8a2161;\n --color-focus: #d58ab7;\n --color-shadow: rgb(60 20 45 / 0.18);\n --color-overlay: rgb(40 15 32 / 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", Tahoma, sans-serif;\n --font-heading: Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", Tahoma, sans-serif;\n --font-ui: Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", Tahoma, sans-serif;\n --font-mono: \"Ubuntu Mono\", Consolas, \"Lucida Console\", monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 19px;\n --text-display: 46px;\n --text-h1: 33px;\n --text-h2: 25px;\n --text-h3: 18px;\n --line-body: 1.5;\n --line-heading: 1.22;\n --line-display: 1.12;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 500;\n --weight-display: 300;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -0.5px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 4px;\n --radius-panel: 4px;\n --radius-pill: 3px;\n --radius-page: 6px;\n --shadow-panel: 0 1px 2px var(--color-shadow);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 25%, transparent), 0 1px 2px var(--color-shadow);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 25%, transparent), 0 1px 3px var(--color-shadow);\n --shadow-control-pressed: inset 0 2px 4px var(--color-shadow);\n --shadow-dialog: 0 3px 7px var(--color-shadow);\n --shadow-text: 0 -1px 0 var(--color-shadow);\n --fill-page: var(--color-page);\n --fill-bar: linear-gradient(color-mix(in srgb, var(--color-bar), white 8%), color-mix(in srgb, var(--color-bar), black 40%));\n --fill-bar-alt: linear-gradient(color-mix(in srgb, var(--color-bar-alt), white 70%), var(--color-bar-alt));\n --fill-inverse: linear-gradient(color-mix(in srgb, var(--color-inverse), white 10%), var(--color-inverse));\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(color-mix(in srgb, white 22%, transparent), color-mix(in srgb, black 14%, transparent)), var(--color-button);\n --fill-button-hover: linear-gradient(color-mix(in srgb, black 14%, transparent), color-mix(in srgb, black 14%, transparent)), var(--color-button);\n --fill-button-secondary: linear-gradient(color-mix(in srgb, var(--color-button-secondary), white 80%), color-mix(in srgb, var(--color-button-secondary), black 6%));\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }