@arraypress/covers 1.4.0 → 1.6.1

package/CHANGELOG.md

@@ -5,6 +5,55 @@ All notable changes to `@arraypress/covers` are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.6.1] — 2026-11-06
+
+### Added
+
+- **`image` `focus` points** (with sharp): `[x, y]` (0–1 in the photo) centres that point in the box, and `'subject'` centres a cut-out's head across (the alpha-weighted centre of the top 45% of its opaque rows), its top at the box's top. A cut-out moves freely sideways, the ground showing round it; an opaque photo keeps its box filled. Without sharp, `'subject'` falls back to `'top'` and a point to `'center'`.
+
+### Changed
+
+- **`dissolve-poster`**: the cut-out runs full bleed and is centred on its face (`focus: 'subject'`; `focus: [x, y]` overrides), so a cropped top runs off the poster instead of showing a flat cut. The fade starts lower so the eyes stay clean: from 0.5 without a title, and 0.24 above the merge with one.
+
+## [1.6.0] — 2026-11-06
+
+### Added
+
+- **`dissolve-poster`**, on the 400-wide grid (4:5, 1:1, 9:16): one flat strong ground (red `#e10a14` by default), the subject in the ink (a `cutout` or `photo` portrait, its tones mapped from the ink to the ground, or the mark large with no photo) dissolving into the ground through a growing diamond dot screen, tiny at the top of the fade and merging at its foot, a few seeded strays above. Small Swiss corner type (the name, a series or Vol. line, a credit, the year) and an optional big tight `title` along the foot sit over the dissolve; with a title the dots merge just above it. Options `ground`, `ink`, `dots` (default the ground), `direction`, `fadeStart`, `fadeEnd`, `cell`.
+- The `halftoneFade` effect from `@logomarks/image-effects` 0.4.0 on any layer, and in the schema.
+
+### Changed
+
+- Depends on `@logomarks/image-effects` `^0.4.0`.
+
+## [1.5.2] — 2026-11-06
+
+### Changed
+
+- **`fluted-poster`**: `subject: 'name'` now sets the name's initial huge behind the glass, filling the height between the year and the title (stretched taller on tall canvases), the way a single letter stays legible and glassy behind ribs; the full name stays in the title and corner type. `initial` overrides the letter (one or two characters). The whole name across the width is `subject: 'word'`. With no mark, the initial is drawn.
+- The gentle convex glass 1.5.1 gave the name is gone: every subject uses the `fluted` preset unless `preset` names another.
+
+## [1.5.1] — 2026-11-06
+
+### Changed
+
+- **`fluted-poster`** keeps the name readable: with `subject: 'name'` (or no mark) and no `preset`, the glass is gentler (12 convex ribs at refraction 0.15, little defocus, chroma 0.2), so the word steps at the rib edges but never doubles. A `preset` given is used as it is; the mark keeps the `fluted` preset. `preset` now defaults to `''` (the subject's default).
+
+## [1.5.0] — 2026-11-06
+
+Three more posters on the 400-wide grid, and the layers they stand on. Every published recipe renders as before (157 SVGs, flyers at 4:5 and as release covers, the release styles and the built-ins, byte-identical to 1.4.0).
+
+### Added
+
+- **Three posters**, drawn on a 400-wide grid as tall as the canvas, so they set at 4:5, 1:1, 9:16 and A-series portrait alike: `construction` (a construction sheet: the mark large over its own construction, read from its paths, a dashed grid, its box, a centre cross, the inscribed and circumscribed circles, the circles its curves are drawn on and the lines its straight edges lie on, in one thin accent; meta in the corners; dark or light by `ground` and `ink`), `fluted-poster` (the mark, or the name set huge, in white on black behind fluted glass, a soft light in one accent behind it, and vector Swiss type over it: the year stacked, the series, a two-line title with a glitched `||` of bars, credits and an edition line; `preset` picks the glass) and `series-card` (a numbered card for a run of posts: a flat soft colour, a two-line title, a large number and the mark solid or as contour lines).
+- **`construction` layer**: a mark over its construction guides (`markGuides`: circles fitted to its arcs and Béziers, lines along its straight edges, added up where several lie on one); `grid`, `size`, `circles`, `lines`, `color`, `gridColor`, `gridOpacity`, `markColor`, `over` (the guides shown faintly over the mark), `stroke`.
+- **`outline` layer**: a mark fitted by its real bounds and drawn as contour lines, its outline and `lines − 1` more `gap` apart (isolines of its signed distance field, from `@logomarks/core`'s raster fill and distance transform, measured exactly to its edges where the lines run, so parts merge as contours do and cusps stay sharp), out or `in`; `lines: 0` draws it solid.
+- The image effects of `@logomarks/image-effects` 0.2–0.3 on any layer, and in the schema: `fluted` (reeded glass; presets `fluted`, `reeded-deep`, `reeded-prism`, `reeded-soft`) and `print` (letterpress, riso and stamp finishes).
+
+### Changed
+
+- Depends on `@logomarks/image-effects` `^0.3.2`.
+
 ## [1.4.0] — 2026-11-06
 
 Three flyers that set on any canvas, and the layers they stand on. Every published recipe renders as before (185 SVGs, flyers at 4:5 and as release covers plus the built-ins, byte-identical to 1.3.1).

package/README.md

@@ -36,7 +36,7 @@ await writeFile('public/covers/introducing-covers.webp', webp);
 - [API](https://github.com/arraypress/covers/blob/main/docs/api.md): every export and cover option
 - [Layers](https://github.com/arraypress/covers/blob/main/docs/layers.md): mesh, grain, text, diagrams, riso inks, dithers, poster type and more
 - [Effects](https://github.com/arraypress/covers/blob/main/docs/effects.md): filters and pixel effects on any layer, masks, paints
-- [Recipes](https://github.com/arraypress/covers/blob/main/docs/recipes.md): seventeen built-ins, 87 flyers and release covers, your own
+- [Recipes](https://github.com/arraypress/covers/blob/main/docs/recipes.md): seventeen built-ins, 91 flyers and release covers, your own
 - [JSON recipes](https://github.com/arraypress/covers/blob/main/docs/json-recipes.md): a cover style as data, with no JavaScript
 - [Palettes](https://github.com/arraypress/covers/blob/main/docs/palettes.md): presets, one accent, a theme's tokens
 - [Formats, print and brand kits](https://github.com/arraypress/covers/blob/main/docs/formats.md): social sizes with safe zones, print with bleed, `kit`, `lint`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arraypress/covers",
-  "version": "1.4.0",
+  "version": "1.6.1",
   "description": "Covers, flyers, posters, release art, social formats and print stationery from one seed and a stack of layers: mesh gradients, grain, riso inks and halftones, knockout and justified type, torn paper, barcodes, safe zones and bleed, as SVG or WebP/PNG/AVIF/JPEG. Recipes are JSON. Runs in Node, browsers and Cloudflare Workers.",
   "type": "module",
   "main": "src/index.js",
@@ -86,7 +86,7 @@
   "dependencies": {
     "@arraypress/color-utils": "^1.3.0",
     "@logomarks/core": "^0.1.5",
-    "@logomarks/image-effects": "^0.1.1",
+    "@logomarks/image-effects": "^0.4.0",
     "harfbuzzjs": "^1.6.3"
   },
   "peerDependencies": {

package/recipes/flyers/construction.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "../../schema/recipe.schema.json",
+  "name": "construction",
+  "description": "Construction sheet: the mark large and centred over its own construction, read from its paths: a light dashed square grid behind (cells an eighth of the mark by default, centred on it), its bounding box, a centre cross, the circles inscribed in its box and round its outline, the circles its curves are drawn on (each centre marked) and the lines its straight edges lie on, run across the sheet, all in one thin accent (blue by default) and showing faintly over the mark. Small meta in the corners: a label and the name across the top, the grid's size and a ® (or any caption) along the foot. A dark ground by default; set ground and ink for a light one. Drawn on a 400-wide grid as tall as the canvas, so it sets at 4:5, 1:1, 9:16 and A-series portrait alike.",
+  "requires": ["mark"],
+  "params": {
+    "name": "Kestrel",
+    "meta": "Construction · v1.0",
+    "gridLabel": "",
+    "caption": "®",
+    "grid": 8,
+    "size": 0.58,
+    "ground": "#0b0b0c",
+    "ink": "#f2f1ec",
+    "accent": "#3b82f6"
+  },
+  "vars": {
+    "h": { "mul": [400, { "div": ["@height", "@width"] }] }
+  },
+  "layers": [
+    { "id": "ground", "type": "solid", "color": "{ground}" },
+    {
+      "id": "sheet",
+      "type": "group",
+      "viewBox": [0, 0, 400, "$h"],
+      "fit": "contain",
+      "layers": [
+        { "id": "construction", "type": "construction", "markup": "{mark}", "x": 16, "y": 40, "width": 368, "height": { "sub": ["$h", 80] }, "size": "{size}", "grid": "{grid}", "color": "{accent}", "markColor": "{ink}", "stroke": 0.55 },
+        { "id": "meta", "type": "text", "content": "{meta}", "when": "meta", "font": "Inter Tight", "weight": 500, "size": 7, "letterSpacing": 0, "x": 16, "y": 24, "maxWidth": 200, "maxLines": 1, "color": "{ink}" },
+        { "id": "name", "type": "text", "content": "{name}", "when": "name", "font": "Inter Tight", "weight": 600, "size": 7, "letterSpacing": 0, "x": 384, "y": 24, "align": "right", "maxWidth": 160, "maxLines": 1, "color": "{ink}" },
+        { "id": "gridLabel", "type": "text", "content": { "if": "gridLabel", "then": "{gridLabel}", "else": { "join": [["Grid ", "{grid}", " × ", "{grid}"], ""] } }, "when": { "any": ["gridLabel", "grid"] }, "font": "Inter Tight", "weight": 500, "size": 7, "letterSpacing": 0, "x": 16, "y": { "sub": ["$h", 18] }, "maxWidth": 200, "maxLines": 1, "color": "{ink}", "opacity": 0.6 },
+        { "id": "caption", "type": "text", "content": "{caption}", "when": "caption", "font": "Inter Tight", "weight": 500, "size": 9, "letterSpacing": 0, "x": 384, "y": { "sub": ["$h", 17] }, "align": "right", "maxWidth": 160, "maxLines": 1, "color": "{ink}" }
+      ]
+    }
+  ]
+}

package/recipes/flyers/dissolve-poster.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "../../schema/recipe.schema.json",
+  "name": "dissolve-poster",
+  "description": "Halftone dissolve poster: one flat strong ground (red by default), the subject in the ink over it (a portrait, cut out or plain, its tones mapped from the ink to the ground; or, with no photo, the mark large), dissolving into the ground through a growing dot screen (@logomarks/image-effects' halftoneFade): tiny dots at the top of the fade, growing and merging at its foot, a few strays above, in the ground colour unless dots names another. By default the dots begin at half the height and merge by 92%; with a title they merge just above it, so the title stands on clear ground (fadeStart and fadeEnd, 0–1, set them). A cut-out runs full bleed, centred across on its face (focus [x, y], 0–1 in the photo, overrides), so a cropped top runs off the poster. Over it, small Swiss type the dots never touch: the name and a Vol. line across the top, an optional big tight title along the foot, a credit and the year under it. Drawn on a 400-wide grid as tall as the canvas, so it sets at 4:5, 1:1 and 9:16 alike; the strays follow the seed.",
+  "params": {
+    "name": "Kestrel",
+    "series": "Vol. 07 — Dissolve",
+    "year": "2026",
+    "credit": "",
+    "title": "",
+    "ground": "#e10a14",
+    "ink": "#0a0a0a",
+    "dots": "",
+    "direction": "up",
+    "fadeStart": "",
+    "fadeEnd": "",
+    "cell": "2.2vmin",
+    "focus": ""
+  },
+  "vars": {
+    "h": { "mul": [400, { "div": ["@height", "@width"] }] },
+    "end": { "if": "fadeEnd", "then": "{fadeEnd}", "else": { "if": "title", "then": { "sub": [0.78, { "div": [40, "$h"] }] }, "else": 0.92 } },
+    "start": { "if": "fadeStart", "then": "{fadeStart}", "else": { "if": "title", "then": { "sub": ["$end", 0.24] }, "else": { "min": [0.5, { "sub": ["$end", 0.1] }] } } }
+  },
+  "layers": [
+    { "id": "ground", "type": "solid", "color": "{ground}" },
+    {
+      "id": "subject",
+      "type": "group",
+      "viewBox": [0, 0, 400, "$h"],
+      "fit": "contain",
+      "effects": [{ "kind": "halftoneFade", "color": { "if": "dots", "then": "{dots}", "else": "{ground}" }, "direction": "{direction}", "start": "$start", "end": "$end", "cell": "{cell}", "grid": "diamond", "shape": "dot", "jitter": 0.3 }],
+      "layers": [
+        { "id": "field", "type": "solid", "color": "{ground}" },
+        { "id": "cutout", "type": "image", "when": "cutout", "src": "{cutout}", "fit": "cover", "focus": { "if": "focus", "then": "{focus}", "else": "subject" }, "duotone": ["{ink}", "{ground}"] },
+        { "id": "photo", "type": "image", "when": { "all": ["photo", { "not": "cutout" }] }, "src": "{photo}", "fit": "cover", "focus": { "if": "focus", "then": "{focus}", "else": "center" }, "duotone": ["{ink}", "{ground}"] },
+        { "id": "mark", "type": "outline", "when": { "all": ["mark", { "not": "cutout" }, { "not": "photo" }] }, "markup": "{mark}", "lines": 0, "x": 40, "y": 60, "width": 320, "height": { "sub": ["$h", 120] }, "color": "{ink}" }
+      ]
+    },
+    {
+      "id": "type",
+      "type": "group",
+      "viewBox": [0, 0, 400, "$h"],
+      "fit": "contain",
+      "layers": [
+        { "id": "name", "type": "text", "content": "{name}", "when": "name", "font": "Inter Tight", "weight": 700, "size": 8, "letterSpacing": 0, "x": 16, "y": 24, "maxWidth": 180, "maxLines": 1, "color": "{ink}" },
+        { "id": "series", "type": "text", "content": "{series}", "when": "series", "font": "Inter Tight", "weight": 500, "size": 8, "letterSpacing": 0, "x": 384, "y": 24, "align": "right", "maxWidth": 180, "maxLines": 1, "color": "{ink}" },
+        {
+          "id": "title",
+          "type": "text",
+          "content": "{title}",
+          "when": "title",
+          "transform": "uppercase",
+          "font": "Inter Tight",
+          "weight": 800,
+          "size": 80,
+          "lineHeight": 0.86,
+          "letterSpacing": -0.05,
+          "fit": "width",
+          "maxWidth": 368,
+          "maxHeight": { "mul": ["$h", 0.22] },
+          "anchor": "bottom-left",
+          "margin": 0,
+          "offset": { "x": 16, "y": -34 },
+          "color": "{ink}"
+        },
+        { "id": "credit", "type": "text", "content": { "if": "credit", "then": "{credit}", "else": "Design — {name}" }, "font": "Inter Tight", "weight": 500, "size": 7, "letterSpacing": 0, "x": 16, "y": { "sub": ["$h", 16] }, "maxWidth": 200, "maxLines": 1, "color": "{ink}" },
+        { "id": "year", "type": "text", "content": "{year}", "when": "year", "font": "Inter Tight", "weight": 500, "size": 7, "letterSpacing": 0, "x": 384, "y": { "sub": ["$h", 16] }, "align": "right", "maxWidth": 100, "maxLines": 1, "color": "{ink}" }
+      ]
+    }
+  ]
+}

package/recipes/flyers/fluted-poster.json

@@ -0,0 +1,105 @@
+{
+  "$schema": "../../schema/recipe.schema.json",
+  "name": "fluted-poster",
+  "description": "Fluted glass poster: a subject in white on black, seen through reeded glass (@logomarks/image-effects' fluted effect, its fluted preset unless preset names another: reeded-deep, reeded-prism, reeded-soft): the mark (subject 'mark', the default), the name's initial set huge, filling the height between the year and the title (about two thirds of a 4:5 poster, three quarters of a 9:16 one, stretched taller there) (subject 'name', or with no mark; initial overrides it, one or two characters), or the whole name across the width (subject 'word'). A soft light in one accent colour sits behind it (none with accent \"\"). Over the glass, small Swiss type stays vector: the year stacked large top-left, the series top-right, a two-line title bottom-left with a glitched || ornament of plain bars right of it in the accent, credits and an edition line along the foot. The glass is rastered at the output size and embedded; the type is outlines. Drawn on a 400-wide grid as tall as the canvas, so it sets at 4:5, 1:1, 9:16 and A-series portrait alike; the ornament's glitch follows the seed.",
+  "params": {
+    "name": "Kestrel",
+    "subject": "mark",
+    "preset": "",
+    "initial": "",
+    "title": ["Through", "the glass"],
+    "year": "2026",
+    "series": "",
+    "credits": "",
+    "edition": "Posters / Series 03",
+    "accent": "#ff4d1a",
+    "ground": "#000000",
+    "ink": "#ffffff"
+  },
+  "vars": {
+    "h": { "mul": [400, { "div": ["@height", "@width"] }] },
+    "bar": { "if": "accent", "then": "{accent}", "else": "{ink}" },
+    "tall": { "min": [2, { "max": [1, { "div": ["$h", 380] }] }] },
+    "s1": { "range": [-3, 3] },
+    "s2": { "range": [-3, 3] },
+    "s3": { "range": [-3, 3] },
+    "cut": { "range": [0.3, 0.6] }
+  },
+  "layers": [
+    { "id": "ground", "type": "solid", "color": "{ground}" },
+    {
+      "id": "glass",
+      "type": "group",
+      "viewBox": [0, 0, 400, "$h"],
+      "fit": "contain",
+      "effects": [{ "kind": "fluted", "preset": { "if": "preset", "then": "{preset}", "else": "fluted" } }],
+      "layers": [
+        { "id": "light", "type": "radial", "when": "accent", "x": 0.5, "y": 0.47, "colors": ["{accent}", "{ground}"], "radius": "52vmin", "opacity": 0.75 },
+        { "id": "mark", "type": "outline", "when": { "all": ["mark", { "subject": "mark" }] }, "markup": "{mark}", "lines": 0, "x": 70, "y": { "sub": [{ "mul": ["$h", 0.47] }, 130] }, "width": 260, "height": 260, "color": "{ink}" },
+        {
+          "id": "initial",
+          "type": "group",
+          "when": { "any": [{ "subject": "name" }, { "all": [{ "not": "mark" }, { "subject": "mark" }] }] },
+          "transform": { "scale": [1, "$tall"], "origin": [200, { "div": [{ "sub": ["$h", 36] }, 2] }] },
+          "layers": [
+            { "id": "letter", "type": "text", "content": { "if": "initial", "then": { "slice": ["{initial}", 0, 2] }, "else": { "slice": ["{name}", 0, 1] } }, "transform": "uppercase", "font": "Inter Tight", "weight": 800, "size": 400, "lineHeight": 0.73, "letterSpacing": -0.04, "fit": "width", "maxWidth": 330, "maxHeight": { "div": [{ "sub": ["$h", 164] }, "$tall"] }, "anchor": "center", "margin": 0, "offset": { "x": 0, "y": -18 }, "color": "{ink}" }
+          ]
+        },
+        {
+          "id": "word",
+          "type": "group",
+          "when": { "subject": "word" },
+          "transform": { "scale": [1, "$tall"], "origin": [200, { "mul": ["$h", 0.47] }] },
+          "layers": [
+            { "id": "name", "type": "text", "content": "{name}", "transform": "uppercase", "font": "Inter Tight", "weight": 800, "size": 120, "lineHeight": 0.9, "letterSpacing": -0.05, "fit": "width", "maxWidth": 360, "maxHeight": { "div": [{ "mul": ["$h", 0.42] }, "$tall"] }, "anchor": "center", "margin": 0, "offset": { "x": 0, "y": { "mul": ["$h", -0.03] } }, "color": "{ink}" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "type",
+      "type": "group",
+      "viewBox": [0, 0, 400, "$h"],
+      "fit": "contain",
+      "layers": [
+        { "id": "year", "type": "text", "when": "year", "content": [{ "slice": ["{year}", 0, 2] }, { "slice": ["{year}", 2] }], "font": "Inter Tight", "weight": 700, "size": 26, "lineHeight": 0.86, "letterSpacing": -0.04, "x": 15, "y": 36, "color": "{ink}" },
+        { "id": "series", "type": "text", "content": { "if": "series", "then": "{series}", "else": "{name}\nGlass series" }, "font": "Inter Tight", "weight": 500, "size": 7, "lineHeight": 1.25, "letterSpacing": 0, "x": 384, "y": 24, "align": "right", "maxWidth": 140, "maxLines": 3, "color": "{ink}" },
+        {
+          "id": "title",
+          "type": "text",
+          "content": "{title}",
+          "when": "title",
+          "transform": "uppercase",
+          "font": "Inter Tight",
+          "weight": 700,
+          "size": 24,
+          "lineHeight": 0.92,
+          "letterSpacing": -0.035,
+          "fit": "shrink",
+          "maxWidth": 300,
+          "maxLines": 2,
+          "anchor": "bottom-left",
+          "margin": 0,
+          "offset": { "x": 15, "y": -46 },
+          "color": "{ink}"
+        },
+        {
+          "id": "ornament",
+          "type": "shape",
+          "fill": "$bar",
+          "items": [
+            { "kind": "rect", "x": 362, "y": { "sub": ["$h", 90] }, "width": 5, "height": { "mul": [44, "$cut"] } },
+            { "kind": "rect", "x": { "add": [362, "$s1"] }, "y": { "add": [{ "sub": ["$h", 90] }, { "mul": [44, "$cut"] }, 1.5] }, "width": 5, "height": 5 },
+            { "kind": "rect", "x": 362, "y": { "add": [{ "sub": ["$h", 90] }, { "mul": [44, "$cut"] }, 8] }, "width": 5, "height": { "sub": [36, { "mul": [44, "$cut"] }] } },
+            { "kind": "rect", "x": 375, "y": { "sub": ["$h", 90] }, "width": 5, "height": { "sub": [36, { "mul": [44, "$cut"] }] } },
+            { "kind": "rect", "x": { "add": [375, "$s2"] }, "y": { "add": [{ "sub": ["$h", 90] }, { "sub": [36, { "mul": [44, "$cut"] }] }, 1.5] }, "width": 5, "height": 5 },
+            { "kind": "rect", "x": { "add": [375, { "mul": ["$s3", 0.5] }] }, "y": { "add": [{ "sub": ["$h", 90] }, { "sub": [36, { "mul": [44, "$cut"] }] }, 8] }, "width": 5, "height": { "mul": [44, "$cut"] } }
+          ]
+        },
+        { "id": "credits", "type": "text", "content": { "if": "credits", "then": "{credits}", "else": "Design — {name}\nSet in Inter Tight" }, "font": "Inter Tight", "weight": 500, "size": 6.5, "lineHeight": 1.3, "letterSpacing": 0, "x": 16, "y": { "sub": ["$h", 27] }, "maxWidth": 180, "maxLines": 2, "color": "{ink}", "opacity": 0.72 },
+        { "id": "edition", "type": "text", "content": "{edition}", "when": "edition", "font": "Inter Tight", "weight": 500, "size": 6.5, "letterSpacing": 0, "x": 384, "y": { "sub": ["$h", 18.5] }, "align": "right", "maxWidth": 180, "maxLines": 1, "color": "{ink}", "opacity": 0.72 }
+      ]
+    },
+    { "id": "print", "type": "grain", "amount": 0.035, "size": 1.5 }
+  ]
+}

package/recipes/flyers/series-card.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "../../schema/recipe.schema.json",
+  "name": "series-card",
+  "description": "Numbered series card, for a run of posts: one flat soft colour, a two-line uppercase title top-left, a large number bottom-left (\"01\"), and the mark large in the space left, solid or as contour lines (its outline and three to five more drawn round it, gap apart, merging where its parts meet). Set number and ground per post and keep the rest, and ten of them read as one series across a palette. An optional label top-right. Drawn on a 400-wide grid as tall as the canvas, so it sets at 1:1, 4:5, 9:16 and A-series portrait alike.",
+  "params": {
+    "title": ["Everything", "is connected"],
+    "number": "01",
+    "label": "",
+    "style": "contour",
+    "lines": 4,
+    "gap": 0.055,
+    "ground": "#f3c9b8",
+    "ink": "#1c1b19"
+  },
+  "vars": {
+    "h": { "mul": [400, { "div": ["@height", "@width"] }] }
+  },
+  "layers": [
+    { "id": "ground", "type": "solid", "color": "{ground}" },
+    {
+      "id": "card",
+      "type": "group",
+      "viewBox": [0, 0, 400, "$h"],
+      "fit": "contain",
+      "layers": [
+        {
+          "id": "mark",
+          "type": "outline",
+          "when": "mark",
+          "markup": "{mark}",
+          "lines": { "if": { "style": "solid" }, "then": 0, "else": "{lines}" },
+          "gap": "{gap}",
+          "stroke": 1.15,
+          "x": 124,
+          "y": 84,
+          "width": 260,
+          "height": { "sub": ["$h", 100] },
+          "color": "{ink}"
+        },
+        {
+          "id": "title",
+          "type": "text",
+          "content": "{title}",
+          "when": "title",
+          "transform": "uppercase",
+          "font": "Inter Tight",
+          "weight": 700,
+          "size": 21,
+          "lineHeight": 0.95,
+          "letterSpacing": -0.025,
+          "fit": "shrink",
+          "maxWidth": 250,
+          "maxLines": 2,
+          "anchor": "top-left",
+          "margin": 0,
+          "offset": { "x": 18, "y": 20 },
+          "color": "{ink}"
+        },
+        { "id": "label", "type": "text", "content": "{label}", "when": "label", "font": "Inter Tight", "weight": 500, "size": 7, "letterSpacing": 0, "x": 382, "y": 27, "align": "right", "maxWidth": 110, "maxLines": 2, "color": "{ink}" },
+        {
+          "id": "number",
+          "type": "text",
+          "content": "{number}",
+          "when": "number",
+          "font": "Inter Tight",
+          "weight": 600,
+          "size": 92,
+          "lineHeight": 0.8,
+          "letterSpacing": -0.06,
+          "fit": "shrink",
+          "maxWidth": 104,
+          "maxLines": 1,
+          "anchor": "bottom-left",
+          "margin": 0,
+          "offset": { "x": 14, "y": -16 },
+          "color": "{ink}"
+        }
+      ]
+    }
+  ]
+}