{ "id": "v1-sk-82bb", "long_id": "v1.skeuomorphism.blog.s08.p02.t11.u11", "name": "Skeuomorphism blog (kitchen notebook, paper slips on a table)", "era": { "slug": "skeuomorphism", "code": "sk", "name": "Skeuomorphism", "years": [ 2009, 2013 ], "description": "App-era product sites, 2009 to 2013: pages that imitate materials, with linen and paper textures, bevelled glossy keys, inset wells, stitched edges and engraved text." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1280, "fluid": false }, "summary": "A personal journal from the years when web pages imitated physical materials: no bar at all, only the site's mark and name centred on a table top, a ruled line of labels under them, and below that paper: a taped sheet for this week's entry, slips with a calendar leaf for the earlier ones, index cards down the side. It was a common dress for recipe, craft, travel and diary sites between about 2009 and 2013, when a blog wanted to look like the notebook it replaced. Text is a bookish serif at a comfortable size, and the richness is in the paper: punched holes, a red margin line, card dividers with coloured tabs, labels that look printed.", "url": "https://chrono.skin/s/v1-sk-82bb", "preview_url": "https://chrono.skin/s/v1-sk-82bb/specimen.html", "files": { "STYLE.md": "# Skeuomorphism blog (kitchen notebook, paper slips on a table)\n\n## Summary\n\nA personal journal from the years when web pages imitated physical materials: no bar at all, only the site's mark and name centred on a table top, a ruled line of labels under them, and below that paper: a taped sheet for this week's entry, slips with a calendar leaf for the earlier ones, index cards down the side. It was a common dress for recipe, craft, travel and diary sites between about 2009 and 2013, when a blog wanted to look like the notebook it replaced. Text is a bookish serif at a comfortable size, and the richness is in the paper: punched holes, a red margin line, card dividers with coloured tabs, labels that look printed.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 880px (`.ds-page__wrap` and `.ds-nav__inner`). Only the page texture and the footer board run the full window width.\n- The header (`.ds-nav`) is not a bar: the brand centred on the page texture `--space-6` from the top, one italic `.ds-nav__tagline`, then `.ds-nav__items`, a centred line of labels between two scored rules. The footer is a dark board across the window. Both are written once.\n- Order of the home view (`notebook`): the `.ds-hero` sheet across the column; the `.ds-stats` line of figures on the page texture; `.ds-page__columns`, with `.ds-page__aside` (`--size-aside`, 220px) on the left holding the `.ds-search` field and three `.ds-sidebar` cards, and `.ds-page__main` (630px) on the right, `--size-gutter` (30px) apart, holding a `.ds-page__title`, the `.ds-list` of entry slips and the `.ds-pagination` centred under them; then a second `.ds-page__title` and the `.ds-grid` of four divider cards across the column. The side column and the slips end near each other; keep three slips to three cards.\n- Inner pages drop the hero, the figures and the side column. In their place: `.ds-page__trail` (the breadcrumb on the page texture) and one `.ds-page__sheet`, a punched sheet with a margin line, as wide as the column. The sheet opens with `.ds-page-header` (title and one italic line left, one or two keys right, a double rule under it) and continues in `.ds-section` parts, later ones with `.ds-section--ruled`. A section may be split by `.ds-section__split` into `.ds-section__main` and a `--size-side` (240px) `.ds-section__side` of stacked panels on the right. Tabs stand at the top of the section they sort.\n- Views. The specimen is a four-screen site, one `.ds-view` showing at a time. `notebook` is the home view: this week's recipe, the figures, the latest three entries with the side cards, the recipe box. `recipe` is one entry: the table of ingredients, the method as running text, two panels beside them, and the empty card where readers' notes would be. `index` is the recipe index: divider tabs, the table of recipes with its testing labels, a count and the key to the labels. `send` is the form for sending a recipe, with its notices and keys, two panels beside it, and under it the dialog that the destructive key opens. The labels lead to `notebook`, `index` and `send`; `recipe` is reached from any title and keeps Recipe index marked.\n- Spacing scale: `--space-1` 4px (inside labels, between lines of a card), `--space-2` 7px (cell padding, between keys), `--space-3` 10px (card padding, under titles), `--space-4` 15px (between slips and cards, key side padding), `--space-5` 20px (sheet padding, between side cards), `--space-6` 30px (above the masthead and the hero, the sheet's right padding), `--space-7` 44px (above the footer).\n- Control sizes: `--size-pill` 22px (pagination keys, small keys, a divider tab), `--size-control` 30px (keys, fields, labels of the header), `--size-control-large` 42px (the hero key and the brand tile). `--size-leaf` (56px) is the calendar leaf, `--size-plate` (300px) and `--size-dish` (170px) the photograph in the hero. `--size-hair` (1px) is the offset of every highlight.\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 plain sans for everything: `--font-body`, `--font-heading` and `--font-ui` are Helvetica, then Arial, Lucida Grande and Verdana; `--font-mono` Monaco.\n- Text is small and dense, pale on the dark ground: `--text-base` 11px at `--line-body` 1.42; `--text-small` 10px; `--text-ui` 11px at `--weight-ui` 700; `--text-large` 14px for the lead and the large key.\n- Headings are bold: `--weight-heading` and `--weight-display` 700. `--text-h3` 14px, `--text-h2` 18px, `--text-h1` 22px, `--text-display` 30px at `--line-display` 1.1.\n- Links are not underlined until hovered (`--link-decoration: none`, `--link-decoration-hover: underline`). No uppercase and no tracking from this part.\n\n- Felt and wood. `--fill-page` is felt: a 6px fleck of dark and light fibres and a pool of light from the top centre. `--fill-inverse` is the same fleck and light over ebony. `--fill-bar` and `--fill-bar-alt` are planks: uneven horizontal grain lines over a top-lit gradient of the bar colour.\n- Keys are polished brass: `--fill-button` runs from 45% lighter at the top through the plain colour to 22% darker, with a bright inner top edge and a soft 0 3px 7px shadow (`--shadow-control`), so they sit padded above the felt. Pressed keys take a 5px inset shade.\n- Sheets are padded cushions lying on the table: `--shadow-panel` is a dark 1px ring and a soft 0 6px 14px at 50%; `--shadow-dialog` a ring and 0 10px 20px. `--fill-panel` is flat felt.\n- Corners are large and soft: `--radius-control` 10px, `--radius-panel` 16px, `--radius-page` 20px, `--radius-pill` 16px. `--fill-accent` is a chip with a highlight across its top.\n- `--shadow-text` is a soft dark shadow one pixel below light text (0 1px 1px at 60%). `--fill-input` shades the top 6px of a well. `--transition` is none.\n\n## Components\n\n- `.ds-page`: on ``; paints the table top. `.ds-page__wrap` is the 880px column; `.ds-page__columns` with `.ds-page__aside` (left) and `.ds-page__main`; `.ds-page__title` a heading on the table top (`--spaced` when it follows a block); `.ds-page__trail` the breadcrumb's place; `.ds-page__sheet` the punched sheet of an inner page. `.ds-section` is one part of a sheet (`--ruled` after another), with `.ds-section__title`, `.ds-section__split` into `.ds-section__main` and `.ds-section__side`, and `.ds-section__foot` (a `.ds-section__note` left, labels right).\n- `.ds-view`: one screen of the site, a `
` with an id; only the one named in the address shows, and `.ds-view--home` when none is named. Always a plain block.\n- `.ds-nav`: the masthead. `.ds-nav__inner` centres the brand, the `.ds-nav__tagline` and `.ds-nav__items`, a line of `.ds-nav__item` labels. The current one is a small stitched label: `is-current`, or in the specimen one selector per view. `is-hover` lays a pale patch under a label.\n- `.ds-brand`: the mark and name, centred at the top. `.ds-brand__mark` is a 42px tile dressed as the primary key; `.ds-brand__name` the name in the heading font, always bold. Both are placeholders for the installing project's own name and logo.\n- `.ds-hero`: this week's entry, once, at the top of the home view: a sheet held by a strip of tape. `.ds-hero__plate` is the photograph (`.ds-hero__cloth`, `.ds-hero__dish`, `.ds-hero__soup`, all drawn); `.ds-hero__copy` holds `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (the one `.ds-button--large` and at most one link) and `.ds-hero__note`.\n- `.ds-page-header`: the head of a sheet in place of the hero: `.ds-page-header__copy` with `.ds-page-header__title` and one `.ds-page-header__text`; `.ds-page-header__actions` with at most two keys, the primary last.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, lists, `code`, links.\n- `.ds-link`: text link, underlined; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for breadcrumb and meta links. `.ds-links` is a wrapping row.\n- `.ds-button`: an enamelled label. `.ds-button--secondary`; `.ds-button--danger` for a destructive action, set apart with `.ds-buttons__end`; `.ds-button--large` for the hero; `.ds-button--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-button__icon` is a 16px glyph. `.ds-buttons` is a row.\n- `.ds-form`: `.ds-form__row` with a `.ds-form__label` column and a `.ds-form__field`. `.ds-form__input` (`--short` for a number) and `.ds-form__textarea` are fields with a line to write on, `.ds-form__select` a secondary key. `is-error` with `.ds-form__error`; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` under a rule. `.ds-search` is one field and one key at the head of the side column.\n- `.ds-table`: framed, ruled table. `.ds-table__head` cells are the stitched band; `.ds-table__row` with `is-first` and `is-alt`; `.ds-table__cell`, `.ds-table__cell--name`, `is-numeric`.\n- `.ds-list`: the entries, each `.ds-list__item` its own slip: a `.ds-list__date` calendar leaf (`.ds-list__month`, `.ds-list__day`) and a `.ds-list__body` with `.ds-list__title`, `.ds-list__meta`, `.ds-list__text` and a `.ds-list__foot` (labels left, one link right). Slips lie `--space-4` apart.\n- `.ds-panel`: an index card with a `.ds-panel__title` strip and `.ds-panel__body`; `.ds-panel__text`, or `.ds-panel__rows` of `.ds-panel__row` (`is-first`) with `.ds-panel__key` and `.ds-panel__value`.\n- `.ds-stat`: one figure: `.ds-stat__value` over a `.ds-stat__label`, centred. Three to five sit in the `.ds-stats` line between two scored rules on the table top; `is-first` on the first.\n- `.ds-grid`: four `.ds-grid__cell` divider cards across the column (`--2`, `--3`, `--4` for the other fills and tab positions). Each has a `.ds-grid__tab` standing on its upper edge, a `.ds-grid__title`, a `.ds-grid__text` and a `.ds-grid__more` link.\n- `.ds-tabs`: card dividers standing on a rule: `.ds-tabs__tab`; the `is-current` one is paper coloured, a little taller, and joins the sheet below.\n- `.ds-badge`: a small printed label. `.ds-badge--count` is a number on a sunk patch; `.ds-badge--success` (tested), `.ds-badge--warning` (still testing) and `.ds-badge--danger` (withdrawn) are the testing labels. `.ds-badges` is a row.\n- `.ds-sidebar`: an index card in the side column: `.ds-sidebar__title` strip, optional `.ds-sidebar__text`, and a `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows (`is-first`), each a link and an optional `.ds-sidebar__meta`.\n- `.ds-notice`: a note stuck on the sheet; `.ds-notice__title` for the bold lead-in; `.ds-notice--error`. `.ds-notices` wraps several.\n- `.ds-pagination`: small keys centred under the entries, `.ds-pagination__link`; `is-current` is pressed, `is-disabled` is flat.\n- `.ds-breadcrumb`: on the table top above a sheet, of quiet links, `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-dialog`: a card with a red upper edge: `.ds-dialog__title` strip with `.ds-dialog__close`, `.ds-dialog__body` with `.ds-dialog__heading` and `.ds-dialog__text`, `.ds-dialog__actions` with the confirming key last. `.ds-dialog__backdrop` is the dimmed area behind it.\n- `.ds-empty`: a blank card with a dashed edge: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary key.\n- `.ds-footer`: the dark board: centred `.ds-footer__links` of `.ds-footer__link` and an italic `.ds-footer__note`.\n- `.ds-switch`: glossy sliding ON/OFF switch over a checkbox (`.ds-switch__track`, inset, with a raised knob), set as rows of a `.ds-switches` list (`.ds-switches__row`, `.ds-switches__name`). Here: the Promise row of the send form.\n- `.ds-progress`: inset `` bar with a glossy fill and a `.ds-progress__label` line. Here: the Photograph row of the send form.\n- `.ds-tooltip`: `?` key with a dark glossy bubble and arrow (`.ds-tooltip__trigger`, `.ds-tooltip__bubble`) shown on hover or focus. Here: on the Promise label.\n- `.ds-avatar`: framed photo with an inner shadow (`.ds-avatar__photo`, `.ds-avatar__glyph`), used in a `.ds-testimonial` (`.ds-testimonial__text`, `.ds-testimonial__who`). Here: a reader's box in the notebook side column.\n- `.ds-menu`: popover list with an arrow, hanging from a toolbar button (`
`, `.ds-menu__button`, `.ds-menu__list`, `.ds-menu__item`). Here: the header toolbar of a recipe.\n\n## Never\n\n- `content-width <= 900px`: everything stays inside the 880px column.\n- `row-gap <= 20px`: slips lie 15px apart; table rows touch.\n- `font-size <= 30px`: the hero headline is the largest text.\n- `font-size >= 10px`: meta text is the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 2`: Helvetica and a monospace.\n- `line-height <= 1.45`: body text is set at 1.42.\n- `underlined-links <= 10%`: links are gilt, not underlined, until hovered.\n- `letter-spacing <= 1px`: nothing is tracked wider than small capital titles.\n- `border-radius <= 20px`: the largest containers are 20px; nothing is rounder than the first structure's large key.\n- `border-width <= 1px`: every edge is a hairline.\n- `box-shadow-blur <= 20px`: the dialog's 20px shadow is the widest.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new thing on the table is paper: `--fill-panel`, a 1px border in `--color-border-strong`, `--radius-panel` and `--shadow-panel`; if it has a title, a `--fill-bar-alt` strip. Something that must stand out is a label: a small `--fill-accent`, status or `--fill-bar` patch with text in the label font. A long inner page is another `.ds-page__sheet` with sections; do not put a bar across the window, do not round corners beyond a key's, and do not add soft floating shadows, new font families or new colours.\n", "components.css": ":root {\n --size-page: 880px;\n --size-aside: 220px;\n --size-side: 240px;\n --size-gutter: 30px;\n --size-plate: 300px;\n --size-dish: 170px;\n --size-leaf: 56px;\n --size-pill: 22px;\n --size-control: 30px;\n --size-control-large: 42px;\n --size-icon: 16px;\n --size-label: 120px;\n --size-dialog: 380px;\n --size-hair: 1px;\n --space-1: 4px;\n --space-2: 7px;\n --space-3: 10px;\n --space-4: 15px;\n --space-5: 20px;\n --space-6: 30px;\n --space-7: 44px;\n}\n\n/* shell: a table top, a centred masthead, paper lying on it */\n.ds-page {\n min-width: var(--size-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 { box-sizing: border-box; }\n.ds-page__wrap {\n width: var(--size-page);\n margin: 0 auto;\n padding: 0 0 var(--space-7);\n}\n.ds-page__columns {\n display: flex;\n align-items: flex-start;\n gap: var(--size-gutter);\n}\n.ds-page__aside {\n flex: 0 0 var(--size-aside);\n width: var(--size-aside);\n}\n.ds-page__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page__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-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n text-transform: var(--heading-transform);\n}\n.ds-page__title--spaced { margin-top: var(--space-6); }\n.ds-page__trail {\n margin: var(--space-5) 0 var(--space-3);\n padding: 0 var(--space-1);\n}\n.ds-page__sheet {\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n background:\n radial-gradient(circle at var(--space-4) 12%, var(--color-page) 0, var(--color-page) calc(var(--space-2) - var(--size-hair)), color-mix(in srgb, var(--color-shadow) 35%, var(--color-page)) var(--space-2), transparent calc(var(--space-2) + var(--size-hair))),\n radial-gradient(circle at var(--space-4) 50%, var(--color-page) 0, var(--color-page) calc(var(--space-2) - var(--size-hair)), color-mix(in srgb, var(--color-shadow) 35%, var(--color-page)) var(--space-2), transparent calc(var(--space-2) + var(--size-hair))),\n radial-gradient(circle at var(--space-4) 88%, var(--color-page) 0, var(--color-page) calc(var(--space-2) - var(--size-hair)), color-mix(in srgb, var(--color-shadow) 35%, var(--color-page)) var(--space-2), transparent calc(var(--space-2) + var(--size-hair))),\n linear-gradient(90deg, transparent 0, transparent calc(var(--space-6) + var(--space-1)), color-mix(in srgb, var(--color-danger) 40%, transparent) calc(var(--space-6) + var(--space-1)), color-mix(in srgb, var(--color-danger) 40%, transparent) calc(var(--space-6) + var(--space-1) + var(--size-hair)), transparent calc(var(--space-6) + var(--space-1) + var(--size-hair))),\n var(--color-canvas);\n box-shadow: var(--shadow-panel);\n}\n.ds-section { padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-6) + var(--space-5)); }\n.ds-section--ruled { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-section__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-section__split {\n display: flex;\n align-items: flex-start;\n gap: var(--size-gutter);\n}\n.ds-section__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-section__side {\n display: flex;\n flex: 0 0 var(--size-side);\n flex-direction: column;\n gap: var(--space-4);\n width: var(--size-side);\n}\n.ds-section__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n margin: var(--space-4) 0 0;\n}\n.ds-section__note {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\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/* nav: no bar; the mark and name centred on the table, a ruled line of labels under them */\n.ds-nav { padding: var(--space-6) 0 0; }\n.ds-nav__inner {\n width: var(--size-page);\n margin: 0 auto;\n text-align: center;\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-control-large);\n height: var(--size-control-large);\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-style: italic;\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n.ds-nav__items {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 55%, transparent), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 55%, transparent);\n list-style: none;\n}\n.ds-nav__item {\n display: block;\n height: var(--size-control);\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: calc(var(--size-control) - var(--border-width) - var(--border-width));\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__item:hover,\n.ds-nav__item.is-hover { background: color-mix(in srgb, var(--color-canvas) 55%, transparent); }\n.ds-nav__item.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__item[href=\"#notebook\"],\n.ds-page:has(#notebook:target) .ds-nav__item[href=\"#notebook\"],\n.ds-page:has(#index:target) .ds-nav__item[href=\"#index\"],\n.ds-page:has(#recipe:target) .ds-nav__item[href=\"#index\"],\n.ds-page:has(#send:target) .ds-nav__item[href=\"#send\"] {\n border-color: color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: var(--shadow-control);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__item:focus-visible,\n.ds-nav__item.is-focus { outline: var(--focus-ring); }\n\n/* hero: this week's recipe, a taped sheet with a photograph of the dish */\n.ds-hero {\n position: relative;\n display: flex;\n align-items: stretch;\n gap: var(--space-6);\n margin: var(--space-6) 0 0;\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n background: var(--fill-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-hero::before {\n content: \"\";\n position: absolute;\n top: calc(var(--space-3) * -1);\n left: calc(50% - var(--space-7));\n width: calc(var(--space-7) + var(--space-7));\n height: var(--space-5);\n background: color-mix(in srgb, var(--color-accent-alt) 50%, transparent);\n box-shadow: 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 25%, transparent);\n transform: rotate(-2deg);\n}\n.ds-hero__plate {\n display: flex;\n flex: 0 0 var(--size-plate);\n width: var(--size-plate);\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--color-surface);\n box-shadow: 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 30%, transparent);\n}\n.ds-hero__cloth {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n justify-content: center;\n padding: var(--space-5) 0;\n background-color: var(--color-fill-2);\n background-image:\n repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-inverse-text) 24%, transparent) 0, color-mix(in srgb, var(--color-inverse-text) 24%, transparent) var(--space-3), transparent var(--space-3), transparent var(--space-5)),\n repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-inverse-text) 24%, transparent) 0, color-mix(in srgb, var(--color-inverse-text) 24%, transparent) var(--space-3), transparent var(--space-3), transparent var(--space-5));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-hero__dish {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-dish);\n height: var(--size-dish);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 80%, var(--color-shadow));\n border-radius: 50%;\n background: var(--color-inverse-text);\n box-shadow: 0 var(--space-1) var(--space-2) color-mix(in srgb, var(--color-shadow) 55%, transparent);\n}\n.ds-hero__soup {\n width: 62%;\n height: 62%;\n border-radius: 50%;\n background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-inverse-text)) 0, var(--color-accent-alt) 60%, color-mix(in srgb, var(--color-accent-alt) 80%, var(--color-shadow)) 100%);\n box-shadow: inset 0 var(--space-1) var(--space-2) color-mix(in srgb, var(--color-shadow) 40%, transparent), 0 0 0 var(--space-3) color-mix(in srgb, var(--color-shadow) 5%, transparent);\n}\n.ds-hero__copy {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n justify-content: center;\n min-width: 0;\n}\n.ds-hero__kicker {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n letter-spacing: var(--size-hair);\n text-transform: uppercase;\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 text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-hero__note {\n margin: var(--space-4) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* page header: the head of a sheet, title and one line left, keys right */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-6) var(--space-4) calc(var(--space-6) + var(--space-5));\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: 0 var(--border-width-strong) 0 calc(var(--size-hair) * -1) var(--color-border);\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-style: italic;\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 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 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { color: var(--color-heading-alt); font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-prose p { margin: 0 0 var(--space-3); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-3);\n padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-1); }\n.ds-prose strong { color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n.ds-prose a:hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-prose code {\n padding: 0 var(--space-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-4);\n margin: 0;\n}\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 { color: var(--color-link-visited); }\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 { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n\n/* buttons: enamelled labels */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n.ds-buttons__end { margin-left: auto; }\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\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 box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: linear-gradient(var(--color-button), var(--color-button));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button--secondary {\n border-color: color-mix(in srgb, var(--color-button-secondary) 65%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: color-mix(in srgb, var(--color-button-secondary) 50%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: linear-gradient(var(--color-button-secondary), var(--color-button-secondary)); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 60%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 78%, var(--color-accent-text)) 0, var(--color-danger) 60%, color-mix(in srgb, var(--color-danger) 88%, var(--color-shadow)) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 68%, var(--color-accent-text)) 0, color-mix(in srgb, var(--color-danger) 92%, var(--color-accent-text)) 60%, var(--color-danger) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: linear-gradient(var(--color-danger), var(--color-danger)); }\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-large);\n}\n.ds-button--small {\n height: var(--size-pill);\n padding: 0 var(--space-3);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border-strong);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: default;\n}\n.ds-button__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n\n/* form: label column, fields ruled like a line to write on */\n.ds-form { margin: 0; }\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n flex: 0 0 var(--size-label);\n padding-top: var(--space-1);\n color: var(--color-heading-alt);\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}\n.ds-form__field {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n display: block;\n width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n box-shadow: inset 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 14%, transparent);\n color: var(--color-input-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-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select {\n width: auto;\n border-color: color-mix(in srgb, var(--color-button-secondary) 65%, var(--color-shadow));\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form__textarea {\n height: calc(var(--size-control) * 4);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder { color: var(--color-disabled-text); opacity: 1; }\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-text);\n}\n.ds-form__input--short { width: calc(var(--size-label) - var(--space-5)); }\n.ds-form__error {\n margin: var(--space-1) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-style: italic;\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n margin: var(--space-4) 0 0;\n padding: var(--space-4) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* search: one field and a small key, at the head of the side column */\n.ds-search {\n display: flex;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n}\n\n/* table: a ruled sheet under a stitched head */\n.ds-table {\n width: 100%;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-collapse: separate;\n border-spacing: 0;\n border-radius: var(--radius-panel);\n}\n.ds-table__head {\n padding: var(--space-3) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table__row.is-first .ds-table__cell { border-top: 0; }\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__cell--name { color: var(--color-heading); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n\n/* list: entries, each its own slip of paper with a calendar leaf */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-list__date {\n flex: 0 0 var(--size-leaf);\n width: var(--size-leaf);\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--color-surface);\n box-shadow: 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 30%, transparent);\n text-align: center;\n}\n.ds-list__month {\n display: block;\n padding: var(--space-1) 0;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-shadow: var(--shadow-text);\n text-transform: uppercase;\n}\n.ds-list__day {\n display: block;\n padding: var(--space-1) 0;\n color: var(--color-heading);\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}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\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-decoration: var(--link-decoration-quiet);\n text-transform: var(--heading-transform);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover { color: var(--color-link-hover); }\n.ds-list__meta {\n display: block;\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-list__text { margin: var(--space-2) 0 0; }\n.ds-list__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-3) 0 0;\n}\n\n/* badge: a small printed label */\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-badge {\n display: inline-block;\n flex: 0 0 auto;\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n box-shadow: 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 35%, transparent);\n color: var(--color-accent-text);\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 white-space: nowrap;\n}\n.ds-badge--count {\n background: var(--color-surface-strong);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-badge--success { background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success) 82%, var(--color-accent-text)) 0, var(--color-success) 100%); }\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning) 78%, var(--color-accent-text)) 0, var(--color-warning) 100%);\n color: color-mix(in srgb, var(--color-shadow) 78%, var(--color-warning));\n text-shadow: none;\n}\n.ds-badge--danger { background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 82%, var(--color-accent-text)) 0, var(--color-danger) 100%); }\n\n/* panel: an index card with a title strip */\n.ds-panel {\n margin: 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n color: var(--color-heading-alt);\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-transform: var(--ui-transform);\n}\n.ds-panel__body { padding: var(--space-3); }\n.ds-panel__text { margin: 0 0 var(--space-2); }\n.ds-panel__rows { margin: 0; }\n.ds-panel__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);\n}\n.ds-panel__row.is-first { border-top: 0; }\n.ds-panel__key {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-panel__value {\n margin: 0;\n color: var(--color-heading);\n text-align: right;\n}\n\n/* stats: a line of figures on the table top, between two scored rules */\n.ds-stats {\n display: flex;\n margin: var(--space-5) 0 var(--space-6);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 55%, transparent), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 55%, transparent);\n list-style: none;\n}\n.ds-stat {\n flex: 1 1 0;\n min-width: 0;\n padding: 0 var(--space-3);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n box-shadow: inset var(--size-hair) 0 0 color-mix(in srgb, var(--color-canvas) 55%, transparent);\n text-align: center;\n}\n.ds-stat.is-first {\n border-left: 0;\n box-shadow: none;\n}\n.ds-stat__value {\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 text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n\n/* grid: four divider cards, each with a coloured tab standing on its upper edge */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n margin: var(--size-pill) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n position: relative;\n padding: var(--space-3) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-top: var(--border-width-strong) var(--border-style) var(--color-fill-1);\n border-radius: 0 var(--radius-panel) var(--radius-panel) var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__tab {\n position: absolute;\n bottom: 100%;\n left: calc(var(--border-width) * -1);\n height: var(--size-pill);\n padding: 0 var(--space-3);\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n background: var(--color-fill-1);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--size-pill);\n text-shadow: var(--shadow-text);\n}\n.ds-grid__cell--2 { border-top-color: var(--color-fill-2); }\n.ds-grid__cell--2 .ds-grid__tab { left: 25%; background: var(--color-fill-2); }\n.ds-grid__cell--3 { border-top-color: var(--color-fill-3); }\n.ds-grid__cell--3 .ds-grid__tab { left: 50%; background: var(--color-fill-3); }\n.ds-grid__cell--4 { border-top-color: var(--color-fill-4); }\n.ds-grid__cell--4 .ds-grid__tab { right: calc(var(--border-width) * -1); left: auto; background: var(--color-fill-4); }\n.ds-grid__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-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-grid__more {\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__more:hover,\n.ds-grid__more.is-hover { color: var(--color-link-hover); text-decoration: underline; }\n\n/* tabs: card dividers standing on the rule above the table */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0 0 var(--space-4);\n padding: 0 var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n margin: 0 0 calc(var(--border-width) * -1);\n padding: var(--space-1) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\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-decoration: none;\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { color: var(--color-link-hover); }\n.ds-tabs__tab.is-current {\n padding-top: var(--space-2);\n border-bottom-color: var(--color-canvas);\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n\n/* sidebar: an index card in the side column */\n.ds-sidebar {\n margin: 0 0 var(--space-5);\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n color: var(--color-heading-alt);\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-transform: var(--ui-transform);\n}\n.ds-sidebar__text {\n margin: 0;\n padding: var(--space-3) var(--space-3) 0;\n font-size: var(--text-small);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-1) var(--space-3) var(--space-2);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__item.is-first { border-top: 0; }\n.ds-sidebar__meta {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* notice: a note stuck on the sheet */\n.ds-notices { margin: 0 0 var(--space-4); }\n.ds-notice {\n margin: 0 0 var(--space-2);\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice) 75%, var(--color-notice-text));\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n box-shadow: 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 20%, transparent);\n color: var(--color-notice-text);\n}\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-color: color-mix(in srgb, var(--color-danger-surface) 60%, var(--color-danger));\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* pagination: small keys under the entries */\n.ds-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-1);\n margin: var(--space-5) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: block;\n min-width: var(--size-pill);\n height: var(--size-pill);\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 65%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: calc(var(--size-pill) - var(--border-width) - var(--border-width));\n text-align: center;\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-pagination__link.is-current {\n border-color: color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n background: color-mix(in srgb, var(--color-bar) 85%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-pagination__link.is-disabled {\n border-color: var(--color-border-strong);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb: on the table top above a sheet */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n.ds-breadcrumb__sep { color: var(--color-text-muted); }\n.ds-breadcrumb__current {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n\n/* dialog: a card laid over a dimmed part of the sheet */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-5) var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-top: var(--border-width-strong) var(--border-style) var(--color-danger);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\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-transform: var(--ui-transform);\n}\n.ds-dialog__close {\n position: relative;\n display: inline-block;\n flex: none;\n width: calc(var(--text-ui) * 0.75);\n height: calc(var(--text-ui) * 0.75);\n color: var(--color-bar-alt-text);\n}\n.ds-dialog__close::before, .ds-dialog__close::after {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 100%;\n height: max(var(--border-width), calc(var(--text-ui) * 0.12));\n background: currentColor;\n transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n transform: rotate(-45deg);\n}\n.ds-dialog__body { padding: var(--space-4) var(--space-3); }\n.ds-dialog__heading {\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-bold);\n line-height: var(--line-heading);\n}\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-alt);\n}\n\n/* empty state: a blank card with a cut-out edge */\n.ds-empty {\n padding: var(--space-5) var(--space-5);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin: 0 0 var(--space-1);\n color: var(--color-text-muted);\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-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-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* footer: a dark board across the foot of the window */\n.ds-footer {\n padding: var(--space-5) 0 var(--space-6);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 60%, var(--color-shadow));\n background: var(--fill-inverse);\n box-shadow: inset 0 var(--space-1) var(--space-2) color-mix(in srgb, var(--color-shadow) 40%, transparent);\n color: color-mix(in srgb, var(--color-inverse-text) 75%, transparent);\n font-size: var(--text-small);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-footer__links {\n display: flex;\n justify-content: center;\n gap: var(--space-5);\n margin: 0 0 var(--space-2);\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { text-decoration: underline; }\n.ds-footer__note { margin: 0; font-style: italic; }\n\n/* Period components: switch, progress, tooltip, carousel, avatar, accordion, menu. Tokens only. */\n.ds-switch { display: inline-flex; flex: none; align-items: center; cursor: pointer; }\n.ds-switch input { position: absolute; opacity: 0; width: var(--size-hair); height: var(--size-hair); }\n.ds-switch__track { position: relative; display: block; flex: none; width: calc(var(--size-control) * 2); height: var(--size-pill); background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); }\n.ds-switch__track::before { content: \"OFF\"; position: absolute; top: 0; right: var(--space-2); line-height: var(--size-pill); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-text-muted); }\n.ds-switch__track::after { content: \"\"; position: absolute; top: var(--size-hair); left: var(--size-hair); width: var(--size-control); height: var(--size-icon); background: var(--fill-button-secondary); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-switch input:checked + .ds-switch__track { background: var(--fill-button); border-color: var(--color-button); }\n.ds-switch input:checked + .ds-switch__track::before { content: \"ON\"; left: var(--space-3); right: auto; color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-switch input:checked + .ds-switch__track::after { left: calc(var(--size-control) + var(--space-1)); }\n.ds-switch input:focus-visible + .ds-switch__track { outline: var(--focus-ring); }\n.ds-switches { width: 100%; max-width: calc(var(--size-control) * 11); margin: var(--space-2) 0; padding: 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }\n.ds-switches__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: calc(var(--size-control) + var(--space-2)); padding: var(--space-1) var(--space-3); }\n.ds-switches__row + .ds-switches__row { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-switches__name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); color: var(--color-text); }\n\n.ds-progress { display: block; width: 100%; max-width: calc(var(--size-control) * 10); height: var(--size-icon); margin: var(--space-2) 0 var(--space-1); padding: 0; appearance: none; -webkit-appearance: none; background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); overflow: hidden; }\n.ds-progress::-webkit-progress-bar { background: var(--fill-input); box-shadow: var(--shadow-control-pressed); }\n.ds-progress::-webkit-progress-value { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress::-moz-progress-bar { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress__label { display: block; margin: 0; font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); color: var(--color-text-muted); }\n\n.ds-tooltip { position: relative; display: inline-flex; flex: none; align-items: center; margin-left: var(--space-1); vertical-align: middle; }\n.ds-tooltip__trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon); height: var(--size-icon); padding: 0; background: var(--fill-button-secondary); color: var(--color-button-secondary-text); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1; cursor: help; }\n.ds-tooltip__bubble { position: absolute; left: 50%; bottom: calc(100% + var(--space-3)); z-index: 5; width: max-content; max-width: calc(var(--size-control) * 8); padding: var(--space-2) var(--space-3); transform: translateX(-50%); visibility: hidden; opacity: 0; background: var(--fill-inverse); color: var(--color-inverse-text); border-radius: var(--radius-control); box-shadow: var(--shadow-control), var(--shadow-dialog); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); line-height: var(--line-body); letter-spacing: 0; text-align: left; text-transform: none; text-shadow: var(--shadow-text); white-space: normal; }\n.ds-tooltip__bubble::after { content: \"\"; position: absolute; left: 50%; top: 100%; width: var(--space-3); height: var(--space-3); margin: calc(var(--space-3) / -2) 0 0 calc(var(--space-3) / -2); transform: rotate(45deg); background: var(--color-inverse); }\n.ds-tooltip:hover .ds-tooltip__bubble, .ds-tooltip:focus-within .ds-tooltip__bubble { visibility: visible; opacity: 1; }\n\n.ds-avatar { display: block; flex: none; width: calc(var(--size-control) + var(--space-4)); height: calc(var(--size-control) + var(--space-4)); padding: var(--space-1); background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-panel); }\n.ds-avatar__photo { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--fill-bar); color: var(--color-bar-text); }\n.ds-avatar__photo::after { content: \"\"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: var(--shadow-control-pressed); }\n.ds-avatar__glyph { display: block; width: 100%; height: 100%; fill: currentColor; }\n.ds-testimonial { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); padding: 0; border: 0; background: none; }\n.ds-testimonial__text { margin: 0; min-width: 0; font-family: var(--font-body); font-size: var(--text-small); font-style: italic; line-height: var(--line-body); color: var(--color-text); }\n.ds-testimonial__who { display: block; margin-top: var(--space-1); font-style: normal; color: var(--color-text-muted); }\n\n.ds-menu { position: relative; display: inline-block; flex: none; }\n.ds-menu__button { display: inline-flex; align-items: center; height: var(--size-control); padding: 0 var(--space-3); background: var(--fill-button-secondary); color: var(--color-button-secondary-text); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-control); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-ui); cursor: pointer; list-style: none; }\n.ds-menu__button::-webkit-details-marker { display: none; }\n.ds-menu__button::after { content: \"\"; flex: none; width: 0; height: 0; border: calc(var(--text-ui) * 0.3) solid transparent; border-top: calc(var(--text-ui) * 0.36) solid currentColor; border-bottom-width: 0; margin-left: var(--space-2); }\n.ds-menu__button:hover { box-shadow: var(--shadow-control-hover); }\n.ds-menu[open] > .ds-menu__button { box-shadow: var(--shadow-control-pressed); }\n.ds-menu__list { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 6; min-width: calc(var(--size-control) * 6); margin: 0; padding: var(--space-1) 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-dialog); text-align: left; }\n.ds-menu__list::before { content: \"\"; position: absolute; right: var(--space-4); bottom: 100%; width: var(--space-3); height: var(--space-3); margin-bottom: calc(var(--space-3) / -2 + var(--size-hair)); transform: rotate(45deg); background: var(--color-surface); border-top: var(--border-width) var(--border-style) var(--color-border-strong); border-left: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-menu__item { position: relative; display: block; padding: var(--space-2) var(--space-4); color: var(--color-text); font-family: var(--font-ui); font-size: var(--text-ui); text-decoration: none; white-space: nowrap; }\n.ds-menu__item:hover, .ds-menu__item:focus { background: var(--fill-button); color: var(--color-button-text); text-shadow: var(--shadow-text); }\n", "specimen.html": "\n\n\n\nchronoskin, skeuomorphism kitchen notebook specimen\n\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n

A kitchen notebook: one recipe a week, cooked twice before it is written down.

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

This week in the notebook

\n

Saffron broth with white beans

\n

A pot for a cold evening: beans soaked overnight, a pinch of saffron, and bread to wipe the bowl.

\n
\n Read the recipe\n or browse all 214\n
\n

Serves four. Fifty minutes at the stove, a night for the beans.

\n
\n
\n\n
    \n
  • 214recipes written down
    • \n
  • 428trial runs at the stove
    • \n
  • 37sent in by readers
    • \n
  • 9years of Sundays
    • \n
\n\n
\n\n \n\n
\n

Latest pages

\n
    \n
  • \n Feb16\n
    \n Saffron broth with white beans\n Soups and broths, 50 minutes, serves four\n

    The beans want a night in cold water and no salt until the end. Everything else happens in one pot while the bread warms.

    \n
    \n NewTested twice\n Read the recipe\n
    \n
    \n
    • \n
  • \n Feb9\n
    \n Blood orange marmalade, small batch\n Preserves, 1 hour 40 minutes, three jars\n

    Three jars is the right amount: enough to give one away, not so much that the pan boils over while you answer the door.

    \n
    \n Tested twice\n Read the recipe\n
    \n
    \n
    • \n
  • \n Feb2\n
    \n Rye loaf with caraway\n Bakes, 3 hours with rising, one loaf\n

    A dense, sour loaf that keeps for a week. The second trial came out flat, so the amount of water is still being argued over.

    \n
    \n Still testing\n Read the recipe\n
    \n
    \n
    • \n
\n \n
\n\n
\n\n

The recipe box

\n
    \n
  • \n Soups\n

    Soups and broths

    \n

    Stocks, clear broths and the thick ones that are nearly stew.

    \n 41 recipes\n
    • \n
  • \n Mains\n

    Mains

    \n

    One pot, one tray or one pan, and what to put beside it.

    \n 86 recipes\n
    • \n
  • \n Bakes\n

    Bakes

    \n

    Bread first, then the cakes that travel well in a tin.

    \n 52 recipes\n
    • \n
  • \n Preserves\n

    Preserves

    \n

    Jams, pickles and bottled things for the back of the shelf.

    \n 35 recipes\n
    • \n
\n\n
\n\n
\n\n
\n
    \n
  1. Notebook
    2. \n
  2. /
    3. \n
  3. Soups and broths
    4. \n
  4. /
    5. \n
  5. Saffron broth with white beans
    6. \n
\n
\n\n
\n
\n
\n

Saffron broth with white beans

\n

Written down on 16 February, after two trials and one burnt pan.

\n
\n
\n
More
\n Print\n Keep in my box\n
\n
\n\n
\n
\n
\n

What you need

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
IngredientAmountUnitNote
Dried white beans300gramssoaked overnight
Leeks2wholewhite parts, sliced
Saffron0.2gramsa generous pinch
Vegetable stock1.5litresunsalted
Olive oil3spoonsand more to finish
\n\n
\n

Method

\n

Warm the oil in a heavy pot and let the leeks soften without colour. This takes ten minutes and is not to be hurried.

\n
    \n
  1. Crumble the saffron into a cup of hot stock and leave it to stand.
    2. \n
  2. Add the drained beans and the rest of the stock, and simmer until the beans give.
    3. \n
  3. Stir in the saffron and its stock, salt at the very end, and rest for five minutes.
    4. \n
\n

Keeping

\n

Better the next day. It keeps three days in the cold; on the label write broth 16-02 so that it is found again. More in the notes on keeping.

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

At a glance

\n
\n
\n
Course
Soups
\n
At the stove
50 minutes
\n
Serves
four
\n
Trials
Tested twice
\n
\n
\n
\n
\n

Goes with

\n
\n

Something to wipe the bowl, and something sharp afterwards.

\n

\n Rye loaf with caraway\n Blood orange marmalade\n All soups and broths\n Send your own version\n

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

Notes from other kitchens

\n
\n \n

No notes yet

\n

Nobody has written back about this recipe. Cook it, then say what you changed.

\n Write the first note\n
\n
\n
\n\n
\n\n
\n\n
\n
    \n
  1. Notebook
    2. \n
  2. /
    3. \n
  3. Recipe index
    4. \n
  4. /
    5. \n
  5. All courses
    6. \n
\n
\n\n
\n
\n
\n

Recipe index

\n

Everything in the notebook, newest first, with how far its testing has come.

\n
\n
\n Send a recipe\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
RecipeCourseWrittenMinutesServesTesting
Saffron broth with white beansSoups16 February504Tested twice
Blood orange marmalade, small batchPreserves9 February10012Tested twice
Rye loaf with carawayBakes2 February1808Still testing
Celeriac baked in saltMains26 January1404Tested twice
Leek and potato pieMains19 January756Tested twice
Quick pickled red onionsPreserves12 January1510Withdrawn
Barley soup with smoked paprikaSoups5 January656Tested twice
\n
\n Showing 1 to 7 of 214. Next seven\n
\n New\n 214\n Tested twice\n Still testing\n Withdrawn\n
\n
\n
\n
\n\n
\n\n
\n\n
\n
    \n
  1. Notebook
    2. \n
  2. /
    3. \n
  3. Recipe index
    4. \n
  4. /
    5. \n
  5. Send a recipe
    6. \n
\n
\n\n
\n
\n
\n

Send a recipe

\n

Write it as you would on a card for a neighbour. It is cooked here before it is printed.

\n
\n
\n See what is in the box\n
\n
\n\n
\n
\n

Draft kept. Your card was saved a minute ago and will be here when you come back.

\n

Not sent. The time at the stove is missing. Fill it in below and send again.

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

Give the time in minutes, as a number.

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

Amounts first, then the method in the order you do it.

\n
\n
\n
\n PromiseOnly recipes cooked at least twice are printed.\n
\n \n
  • Print my name on the card
  • Tell me when it is printed
\n
\n
\n
\n Photograph\n
\n 62%

plum-cake.jpg: 62% sent

\n
\n
\n
\n
\n \n Keep as draft\n \n Throw away\n
\n
\n
\n
\n
\n
\n

Before you send

\n
\n

Weights in grams, spoons level, oven temperatures for an oven without a fan.

\n

Say what can be left out, and what cannot.

\n See a finished page\n
\n
\n
\n

Your cards

\n
\n
\n
Sent
3
\n
Printed
2
\n
Drafts
1
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n

Throw away

\n
\n

Throw this card away?

\n

The draft of Plum cake on a tray is removed. Cards you have already sent stay in the box.

\n
\n
\n Keep the draft\n Throw it away\n
\n
\n
\n
\n
\n\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.skeuomorphism.blog.s08.p02.t11.u11\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"skeuomorphism\",\n \"years\": [\n 2009,\n 2013\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-sk-82bb\",\n \"short\": \"v1-sk-82bb\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f4f4f4;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f8f8f8;\n --color-surface-strong: #e7e8e8;\n --color-bar: #6bb130;\n --color-bar-text: #ffffff;\n --color-bar-alt: #c8c8c8;\n --color-bar-alt-text: #484848;\n --color-inverse: #426377;\n --color-inverse-text: #ffffff;\n --color-text: #5a5a5a;\n --color-text-muted: #8e8e8e;\n --color-heading: #484848;\n --color-heading-alt: #438519;\n --color-link: #5f9e2b;\n --color-link-quiet: #8e8e8e;\n --color-link-visited: #568099;\n --color-link-hover: #438519;\n --color-link-active: #63a32c;\n --color-border: #e0e0e0;\n --color-border-strong: #c2c2c2;\n --color-border-muted: #f0f0f0;\n --color-accent: #5b9aa9;\n --color-accent-text: #ffffff;\n --color-accent-alt: #c5cb00;\n --color-fill-1: #6bb130;\n --color-fill-2: #5d7f98;\n --color-fill-3: #438519;\n --color-fill-4: #7e7d7e;\n --color-button: #5d7f98;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #dddddd;\n --color-button-secondary-text: #5a5a5a;\n --color-input: #ffffff;\n --color-input-text: #484848;\n --color-input-border: #a8a8a8;\n --color-disabled: #e7e8e8;\n --color-disabled-text: #a4a7ab;\n --color-danger: #591205;\n --color-danger-surface: #f8f8f8;\n --color-success: #5f9e2b;\n --color-warning: #deed00;\n --color-notice: #e4dd90;\n --color-notice-text: #4c4f47;\n --color-focus: #4dbdcb;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.3);\n}\n\n/* @part type */\n:root {\n --font-body: Helvetica, Arial, \"Lucida Grande\", Verdana, sans-serif;\n --font-heading: Helvetica, Arial, \"Lucida Grande\", Verdana, sans-serif;\n --font-ui: Helvetica, Arial, \"Lucida Grande\", Verdana, sans-serif;\n --font-mono: Monaco, \"Lucida Console\", \"Courier New\", monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 14px;\n --text-display: 30px;\n --text-h1: 22px;\n --text-h2: 18px;\n --text-h3: 14px;\n --line-body: 1.42;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\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: 1px;\n --border-style: solid;\n --radius-control: 10px;\n --radius-panel: 16px;\n --radius-pill: 16px;\n --radius-page: 20px;\n --shadow-panel: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 22%, transparent), 0 6px 14px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 40%, transparent), 0 3px 7px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 60%, transparent), 0 4px 9px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control-pressed: inset 0 2px 5px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 45%, transparent), 0 10px 20px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-text: 0 1px 1px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h1v1H0zM3 1h1v1H3zM5 3h1v1H5zM1 4h1v1H1zM4 5h1v1H4z' fill='black' fill-opacity='.14'/%3E%3Cpath d='M2 0h1v1H2zM5 1h1v1H5zM1 2h1v1H1zM3 3h1v1H3zM0 5h1v1H0z' fill='white' fill-opacity='.06'/%3E%3C/svg%3E\"), radial-gradient(ellipse 65% 100% at 50% 0, color-mix(in srgb, white 20%, transparent) 0, transparent 100%) 0 0 / 100% 640px no-repeat, var(--color-page);\n --fill-bar: repeating-linear-gradient(0deg, color-mix(in srgb, black 10%, transparent) 0, transparent 2px, color-mix(in srgb, white 5%, transparent) 3px, transparent 5px, color-mix(in srgb, black 7%, transparent) 7px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 22%) 0, var(--color-bar) 45%, color-mix(in srgb, var(--color-bar), black 26%) 100%);\n --fill-bar-alt: repeating-linear-gradient(0deg, color-mix(in srgb, black 8%, transparent) 0, transparent 2px, color-mix(in srgb, white 7%, transparent) 4px, transparent 6px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 20%) 0, var(--color-bar-alt) 50%, color-mix(in srgb, var(--color-bar-alt), black 18%) 100%);\n --fill-inverse: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h1v1H0zM3 1h1v1H3zM5 3h1v1H5zM1 4h1v1H1zM4 5h1v1H4z' fill='black' fill-opacity='.16'/%3E%3Cpath d='M2 0h1v1H2zM5 1h1v1H5zM1 2h1v1H1zM3 3h1v1H3zM0 5h1v1H0z' fill='white' fill-opacity='.06'/%3E%3C/svg%3E\"), radial-gradient(ellipse 60% 130% at 50% 0, color-mix(in srgb, white 18%, transparent) 0, transparent 100%), var(--color-inverse);\n --fill-accent: radial-gradient(ellipse 80% 60% at 50% 0, color-mix(in srgb, white 35%, transparent) 0, transparent 100%), var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 45%) 0, color-mix(in srgb, var(--color-button), white 10%) 35%, var(--color-button) 70%, color-mix(in srgb, var(--color-button), black 22%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 58%) 0, color-mix(in srgb, var(--color-button), white 22%) 35%, color-mix(in srgb, var(--color-button), white 8%) 70%, color-mix(in srgb, var(--color-button), black 12%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 22%) 0, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 20%) 100%);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 30%) 0, var(--color-input) 6px);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }