Fishies 0.8.25

README.md

@@ -37,7 +37,7 @@ import '@fishies/ui/kit.css'      // the components
 import { Button, Panel, configureIcons } from '@fishies/ui'
 
 // The icons ship in this package under icons/. Serve that folder, or point at a CDN copy:
-configureIcons({ url: icon => `https://cdn.jsdelivr.net/npm/@fishies/ui@0.8.24/icons/${icon.name}.png` })
+configureIcons({ url: icon => `https://cdn.jsdelivr.net/npm/@fishies/ui@0.8.25/icons/${icon.name}.png` })
 
 export function Shop() {
   return <Panel title="Shop" icon="shop">
@@ -62,4 +62,4 @@ stylesheet that does, and every component animates with them; leave them out and
 | `icons/` | the painted icon set, one PNG per name, each twice its largest display size |
 | `handbook/` | the Fishies Handbook as Markdown |
 
-Version 0.8.24: the minor version follows the Fishies release it was taken from; a patch is a fix to the kit itself.
+Version 0.8.25: the minor version follows the Fishies release it was taken from; a patch is a fix to the kit itself.

handbook/README.md

@@ -92,6 +92,91 @@ Six hues that tell kinds apart (an app tile, a chip, a chart line) and two that
 | `--fx-cream` | `#f3dfb2` | Cream: the shaded side of a pearl knob, warm sand. |
 | `--fx-plum` | `#36203f` | Plum: the landing’s deep warm shadow under cream. |
 
+### Paper
+
+The warm card the game writes on when a room opens a sheet over its painting: paper, three weights of brown ink, and the tan edge that gives it a foot.
+
+| Token | Value | Use |
+| --- | --- | --- |
+| `--fx-paper` | `#fbf1da` | The card itself: a room sheet, a close button, a small mark. |
+| `--fx-paper-white` | `#fffaf0` | A field written into: the lightest paper. |
+| `--fx-paper-lift` | `#fff8e6` | Paper lit from above: a card button under the pointer. |
+| `--fx-paper-well` | `#e9d6ad` | A pressed-in place on paper: a button, a mark, a tile. |
+| `--fx-paper-hover` | `#f1e2c0` | A well under the pointer. |
+| `--fx-paper-edge` | `#b98d55` | The tan foot under a card or button, and its hairlines. |
+| `--fx-paper-rim` | `#f6d987` | The pale gold ring round a tag standing off a card. |
+| `--fx-paper-ink` | `#3b2414` | Brown ink: titles and values on paper. |
+| `--fx-paper-ink-2` | `#6b4a2e` | Sentences on paper. |
+| `--fx-paper-ink-3` | `#8a6a4a` | Captions and labels on paper. |
+| `--fx-paper-tag` | `#c0392b` | A red tag on a shelf: a count, a warning. |
+| `--fx-paper-ready` | `#5c8a3a` | A green tag: ready, on offer. |
+| `--fx-paper-gold` | `linear-gradient(#ffe08a, #f2b23c)` | A gold button or chip on paper: the chosen kind, the way forward. |
+| `--fx-paper-gold-edge` | `#a86f12` | The foot under that gold. |
+| `--fx-paper-gold-ring` | `#f2b23c` | The ring round a chosen tag or an own listing. |
+| `--fx-paper-alarm` | `#8a2c17` | A warning in ink on paper: held back, refused. |
+| `--fx-paper-teal` | `#2d9682` | The band of recent sales over a price slider. |
+| `--fx-focus-glow` | `#ffe08a` | The pale gold of a focus ring or a lit hover on a painted room. |
+
+### Wood
+
+The stall’s own timber: the plaques and buttons that stand on the counter beside paper and gold.
+
+| Token | Value | Use |
+| --- | --- | --- |
+| `--fx-wood-face` | `linear-gradient(#8f5a2b, #6a3f1c)` | A wooden plaque or button, lit from above. |
+| `--fx-wood-edge` | `#43270f` | The dark foot under it. |
+| `--fx-wood-rail` | `#6a3f1c` | The frame round a shelf board. |
+| `--fx-wood-ink` | `#fff3d6` | Cream lettering on wood. |
+| `--fx-wood-cord` | `#7a5a33` | The cord a tag hangs by. |
+
+### Medal
+
+Bronze, silver and gold: a tier’s flag, a rank’s disc, the tint of a tier named in words.
+
+| Token | Value | Use |
+| --- | --- | --- |
+| `--fx-medal-bronze` | `linear-gradient(180deg, #f0b583, #c47a43)` | Bronze, lit from above. |
+| `--fx-medal-bronze-light` | `#f0b583` | Bronze as lettering on dark water. |
+| `--fx-medal-bronze-foot` | `#8a5228` | The foot under a bronze disc. |
+| `--fx-medal-bronze-ink` | `#3b1d08` | Lettering on bronze. |
+| `--fx-medal-silver` | `linear-gradient(180deg, #ffffff, #b9c6d4)` | Silver, lit from above. |
+| `--fx-medal-silver-foot` | `#8090a4` | The foot under a silver disc. |
+| `--fx-medal-silver-ink` | `#23304f` | Lettering on silver. |
+| `--fx-medal-gold` | `linear-gradient(180deg, #fff0bf, #f3b53f)` | Gold, lit from above. |
+
+### Quality
+
+The stone that marks a fish’s quality, one colour per grade, on dark water and (deeper) on paper.
+
+| Token | Value | Use |
+| --- | --- | --- |
+| `--fx-quality-bronze` | `#cf8f52` | Bronze quality, on water and on paper. |
+| `--fx-quality-silver` | `#d6dee6` | Silver quality on water. |
+| `--fx-quality-gold` | `#f3c453` | Gold quality on water. |
+| `--fx-quality-diamond` | `#a8ecff` | Diamond quality on water. |
+| `--fx-quality-purple` | `#c59bff` | Purple quality on water. |
+| `--fx-quality-silver-paper` | `#aab7c4` | Silver quality on paper. |
+| `--fx-quality-gold-paper` | `#e3ad2f` | Gold quality on paper. |
+| `--fx-quality-diamond-paper` | `#58c6e8` | Diamond quality on paper. |
+| `--fx-quality-purple-paper` | `#9d68e8` | Purple quality on paper. |
+
+### Brass
+
+The plates a painted room hangs on its walls: a name, a door, a thing to open. A brass face with a dark edge, a solid foot and a bright top line.
+
+| Token | Value | Use |
+| --- | --- | --- |
+| `--fx-brass-face` | `linear-gradient(180deg, #fff0bf 0%, #f0cd78 22%, #c99a45 60%, #a87a2e 100%)` | The plate itself, lit from above. |
+| `--fx-brass-edge` | `#5a3a12` | The dark border round a plate. |
+| `--fx-brass-foot` | `#2a170c` | The solid foot under a plate, and the shade of a painted room. |
+| `--fx-brass-shine` | `#fff6d8` | The bright line along a plate’s top edge. |
+| `--fx-brass-ink` | `#3a2416` | Lettering on a plate, and the dark dot of a door’s arrow. |
+| `--fx-brass-glint` | `#ffe8b0` | The arrow on that dark dot. |
+| `--fx-brass-wood` | `#3b2a1d` | The wall colour behind a room’s painting while it loads. |
+| `--fx-brass-shadow` | `rgb(20 8 2 / 45%)` | The soft shadow a plate throws on the painting. |
+| `--fx-brass-plate` | `0 3px 0 #2a170c, inset 0 1px #fff6d8, 0 6px 12px rgb(20 8 2 / 45%)` | A plate’s whole lift: foot, top line and shadow. |
+| `--fx-brass-drop` | `0 8px 10px rgb(20 8 2 / 50%)` | The shadow under a painted door or object standing in the room. |
+
 ### Glass
 
 The one material everything floats on: tinted water glass with a sheen across its top.
@@ -235,13 +320,13 @@ Named slots the motion system fills (apps/web/app/motion/motion.css, where each
 
 ### Places
 
-- [Kelp Garden](https://fishies.lol/open-water/kelp-garden) · A coral garden that runs into a kelp forest, home to the Gallery and the Pineapple House. Bite the kelp for Kelp Fibre.
+- [Kelp Forest](https://fishies.lol/open-water/kelp-garden) · A coral garden that runs into a kelp forest, home to the Gallery and the Pineapple House. Bite the kelp for Kelp Fibre.
-- [Shipwreck](https://fishies.lol/open-water/shipwreck) · An old ship asleep on the sand, lanterns still lit. A chest is hidden along it every week, and its crates give Driftwood.
+- [Wreck](https://fishies.lol/open-water/shipwreck) · An old ship asleep on the sand, lanterns still lit. A chest is hidden along it every week, and its crates give Driftwood.
-- [Market](https://fishies.lol/open-water/market) · Stalls in the sunny shallows where keepers trade fish, eggs and food. The wanted board asks for new fish every week.
+- [Harbour](https://fishies.lol/open-water/market) · Stalls in the sunny shallows where keepers trade fish, eggs and food. The wanted board asks for new fish every week.
 - [Lagoon](https://fishies.lol/open-water/lagoon) · Warm, bright shallows of seagrass and white sand. Play Pearl Catch at the oyster bed and open the clams for Lagoon Shells.
 - [Arena](https://fishies.lol/open-water/arena) · An open stadium of coral stands round a start gate. Race the week's course for a place on the board.
 - [Ice Shelf](https://fishies.lol/open-water/ice-shelf) · Pale water under an ice roof, frost ferns and ice spires. The seasonal parties are thrown here, and the spires give Ice Crystals.
-- [Ruins](https://fishies.lol/open-water/ruins) · A sunken temple among fallen columns, its door sealed. Six lost tablets are hidden across Open Water, and the columns give Stone Shards.
+- [Sunken Terrace](https://fishies.lol/open-water/ruins) · A sunken temple among fallen columns, its door sealed. Six lost tablets are hidden across Open Water, and the columns give Stone Shards.
 - [Trench](https://fishies.lol/open-water/trench) · The dark deep at the reef's edge. Send a fish on an expedition into it from the diving bell.
 - [Vents](https://fishies.lol/open-water/vents) · Warm volcanic chimneys glowing in the dark. Send a fish on an expedition from the outpost.
 - [Pineapple House](https://fishies.lol/open-water/pineapple-house) · A house made from a pineapple, deep in the kelp. It is the reading room: tap it to open the Reef Journal.
@@ -253,19 +338,19 @@ Named slots the motion system fills (apps/web/app/motion/motion.css, where each
 
 - [Collection pages](https://fishies.lol/wiki/collections) (24) · Every Reef Journal collection page: its pieces, where each one comes from and what finishing it pays.
 - [Species catalogue](https://fishies.lol/wiki/species) (107) · Every fish in the game with its growth time, unlock level, egg price and sale value.
-- [Quest log](https://fishies.lol/wiki/quests) (158) · Every quest in the game with its goals, its place in its chain and its reward.
+- [Quest log](https://fishies.lol/wiki/quests) (166) · Every quest in the game with its goals, its place in its chain and its reward.
-- [Quest chains](https://fishies.lol/wiki/quest-chains) (21) · The storyline and every quest chain, step by step, with what opens each one and what it pays in all.
+- [Quest chains](https://fishies.lol/wiki/quest-chains) (23) · The storyline and every quest chain, step by step, with what opens each one and what it pays in all.
 - [Achievement list](https://fishies.lol/wiki/achievements) (40) · Every achievement with its tier and reward. The hidden ones stay behind a spoiler.
 - [Badges](https://fishies.lol/wiki/badges) (13) · Every badge a keeper can wear on a profile and how it is earned.
 - [Decorations catalogue](https://fishies.lol/wiki/decorations) (74) · Every plant and ornament, what it costs and how long it keeps algae away.
 - [Equipment catalogue](https://fishies.lol/wiki/equipment) (10) · Every filter, auto-feeder and heater with its price, unlock level and what it does.
-- [Items](https://fishies.lol/wiki/items) (90) · Every food, material, tool, wardrobe piece and prize: what it does, where it comes from and what it is used in.
+- [Items](https://fishies.lol/wiki/items) (94) · Every food, material, tool, wardrobe piece and prize: what it does, where it comes from and what it is used in.
-- [Workshop recipes](https://fishies.lol/wiki/recipes) (28) · Every mix the Workshop's bowl makes, with its ingredients, time, level and what comes out.
+- [Workshop recipes](https://fishies.lol/wiki/recipes) (31) · Every mix the Workshop's bowl makes, with its ingredients, time, level and what comes out.
-- [Research tree](https://fishies.lol/wiki/research) (38) · Every study and crown in the Research tree, with its branch, level, Notes, coins and what it opens.
+- [Research tree](https://fishies.lol/wiki/research) (45) · Every study and crown in the Research tree, with its branch, level, Notes, coins and what it opens.
 - [Rooms, themes and floors](https://fishies.lol/wiki/styles) (23) · Every Room around the glass, every water theme and every floor, with how each one is unlocked.
 - [Upgrades](https://fishies.lol/wiki/upgrades) (5) · The bench tiers, the expedition kits, more aquariums, enlarging and the slot gains, tier by tier.
-- [Characters](https://fishies.lol/wiki/npcs) (5) · The neighbours out in the sea: where each one lives, how they talk, what they give and what they ask for.
+- [Characters](https://fishies.lol/wiki/npcs) (6) · The neighbours out in the sea: where each one lives, how they talk, what they give and what they ask for.
 - [Creatures](https://fishies.lol/wiki/creatures) (2) · The wild creatures of the sea that are not fish: the jellyfish and the golden shoal.
 - [Lore](https://fishies.lol/wiki/lore) (1) · The stories of the sea, told by the game: the Lantern Keepers and what they left behind.
-- [Places](https://fishies.lol/wiki/places) (13) · Every Open Water place and every room behind a door: what stands there, what you find there and how to get there.
+- [Places](https://fishies.lol/wiki/places) (18) · Every Open Water place and every room behind a door: what stands there, what you find there and how to get there.
 - [Events and seasons](https://fishies.lol/wiki/events) (11) · The seasonal parties, the weekly contests and the things that happen out in the sea, with their dates, places and prizes.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishies/ui",
-  "version": "0.8.24",
+  "version": "0.8.25",
   "description": "The Fishies UI kit: reef-toy components, design tokens and the painted system icon set from the social aquarium game Fishies.",
   "keywords": [
     "fishies",

src/tokens.generated.css

@@ -38,6 +38,61 @@
   --fx-cream: #f3dfb2;
   --fx-plum: #36203f;
   
+  --fx-paper: #fbf1da;
+  --fx-paper-white: #fffaf0;
+  --fx-paper-lift: #fff8e6;
+  --fx-paper-well: #e9d6ad;
+  --fx-paper-hover: #f1e2c0;
+  --fx-paper-edge: #b98d55;
+  --fx-paper-rim: #f6d987;
+  --fx-paper-ink: #3b2414;
+  --fx-paper-ink-2: #6b4a2e;
+  --fx-paper-ink-3: #8a6a4a;
+  --fx-paper-tag: #c0392b;
+  --fx-paper-ready: #5c8a3a;
+  --fx-paper-gold: linear-gradient(#ffe08a, #f2b23c);
+  --fx-paper-gold-edge: #a86f12;
+  --fx-paper-gold-ring: #f2b23c;
+  --fx-paper-alarm: #8a2c17;
+  --fx-paper-teal: #2d9682;
+  --fx-focus-glow: #ffe08a;
+  
+  --fx-wood-face: linear-gradient(#8f5a2b, #6a3f1c);
+  --fx-wood-edge: #43270f;
+  --fx-wood-rail: #6a3f1c;
+  --fx-wood-ink: #fff3d6;
+  --fx-wood-cord: #7a5a33;
+  
+  --fx-medal-bronze: linear-gradient(180deg, #f0b583, #c47a43);
+  --fx-medal-bronze-light: #f0b583;
+  --fx-medal-bronze-foot: #8a5228;
+  --fx-medal-bronze-ink: #3b1d08;
+  --fx-medal-silver: linear-gradient(180deg, #ffffff, #b9c6d4);
+  --fx-medal-silver-foot: #8090a4;
+  --fx-medal-silver-ink: #23304f;
+  --fx-medal-gold: linear-gradient(180deg, #fff0bf, #f3b53f);
+  
+  --fx-quality-bronze: #cf8f52;
+  --fx-quality-silver: #d6dee6;
+  --fx-quality-gold: #f3c453;
+  --fx-quality-diamond: #a8ecff;
+  --fx-quality-purple: #c59bff;
+  --fx-quality-silver-paper: #aab7c4;
+  --fx-quality-gold-paper: #e3ad2f;
+  --fx-quality-diamond-paper: #58c6e8;
+  --fx-quality-purple-paper: #9d68e8;
+  
+  --fx-brass-face: linear-gradient(180deg, #fff0bf 0%, #f0cd78 22%, #c99a45 60%, #a87a2e 100%);
+  --fx-brass-edge: #5a3a12;
+  --fx-brass-foot: #2a170c;
+  --fx-brass-shine: #fff6d8;
+  --fx-brass-ink: #3a2416;
+  --fx-brass-glint: #ffe8b0;
+  --fx-brass-wood: #3b2a1d;
+  --fx-brass-shadow: rgb(20 8 2 / 45%);
+  --fx-brass-plate: 0 3px 0 #2a170c, inset 0 1px #fff6d8, 0 6px 12px rgb(20 8 2 / 45%);
+  --fx-brass-drop: 0 8px 10px rgb(20 8 2 / 50%);
+  
   --fx-glass-top: rgb(22 58 120 / 70%);
   --fx-glass-bottom: rgb(8 26 66 / 88%);
   --fx-glass-quiet-top: rgb(22 58 120 / 62%);

src/tokens.ts

@@ -8,7 +8,7 @@ export type Token = {
 }
 
 export type TokenGroup = {
-  readonly id: 'brand' | 'water' | 'ink' | 'gold' | 'tone' | 'glass' | 'rim' | 'depth' | 'type' | 'radius' | 'space' | 'layer' | 'motion'
+  readonly id: 'brand' | 'water' | 'ink' | 'gold' | 'tone' | 'paper' | 'wood' | 'medal' | 'quality' | 'brass' | 'glass' | 'rim' | 'depth' | 'type' | 'radius' | 'space' | 'layer' | 'motion'
   readonly title: string
   readonly use: string
 
@@ -82,6 +82,86 @@ export const TOKEN_GROUPS: readonly TokenGroup[] = [
       { name: '--fx-plum', value: '#36203f', use: 'Plum: the landing’s deep warm shadow under cream.' },
     ],
   },
+  {
+    id: 'paper', title: 'Paper', swatch: 'colour',
+    use: 'The warm card the game writes on when a room opens a sheet over its painting: paper, three weights of brown ink, and the tan edge that gives it a foot.',
+    tokens: [
+      { name: '--fx-paper', value: '#fbf1da', use: 'The card itself: a room sheet, a close button, a small mark.' },
+      { name: '--fx-paper-white', value: '#fffaf0', use: 'A field written into: the lightest paper.' },
+      { name: '--fx-paper-lift', value: '#fff8e6', use: 'Paper lit from above: a card button under the pointer.' },
+      { name: '--fx-paper-well', value: '#e9d6ad', use: 'A pressed-in place on paper: a button, a mark, a tile.' },
+      { name: '--fx-paper-hover', value: '#f1e2c0', use: 'A well under the pointer.' },
+      { name: '--fx-paper-edge', value: '#b98d55', use: 'The tan foot under a card or button, and its hairlines.' },
+      { name: '--fx-paper-rim', value: '#f6d987', use: 'The pale gold ring round a tag standing off a card.' },
+      { name: '--fx-paper-ink', value: '#3b2414', use: 'Brown ink: titles and values on paper.' },
+      { name: '--fx-paper-ink-2', value: '#6b4a2e', use: 'Sentences on paper.' },
+      { name: '--fx-paper-ink-3', value: '#8a6a4a', use: 'Captions and labels on paper.' },
+      { name: '--fx-paper-tag', value: '#c0392b', use: 'A red tag on a shelf: a count, a warning.' },
+      { name: '--fx-paper-ready', value: '#5c8a3a', use: 'A green tag: ready, on offer.' },
+      { name: '--fx-paper-gold', value: 'linear-gradient(#ffe08a, #f2b23c)', use: 'A gold button or chip on paper: the chosen kind, the way forward.' },
+      { name: '--fx-paper-gold-edge', value: '#a86f12', use: 'The foot under that gold.' },
+      { name: '--fx-paper-gold-ring', value: '#f2b23c', use: 'The ring round a chosen tag or an own listing.' },
+      { name: '--fx-paper-alarm', value: '#8a2c17', use: 'A warning in ink on paper: held back, refused.' },
+      { name: '--fx-paper-teal', value: '#2d9682', use: 'The band of recent sales over a price slider.' },
+      { name: '--fx-focus-glow', value: '#ffe08a', use: 'The pale gold of a focus ring or a lit hover on a painted room.' },
+    ],
+  },
+  {
+    id: 'wood', title: 'Wood', swatch: 'colour',
+    use: 'The stall’s own timber: the plaques and buttons that stand on the counter beside paper and gold.',
+    tokens: [
+      { name: '--fx-wood-face', value: 'linear-gradient(#8f5a2b, #6a3f1c)', use: 'A wooden plaque or button, lit from above.' },
+      { name: '--fx-wood-edge', value: '#43270f', use: 'The dark foot under it.' },
+      { name: '--fx-wood-rail', value: '#6a3f1c', use: 'The frame round a shelf board.' },
+      { name: '--fx-wood-ink', value: '#fff3d6', use: 'Cream lettering on wood.' },
+      { name: '--fx-wood-cord', value: '#7a5a33', use: 'The cord a tag hangs by.' },
+    ],
+  },
+  {
+    id: 'medal', title: 'Medal', swatch: 'colour',
+    use: 'Bronze, silver and gold: a tier’s flag, a rank’s disc, the tint of a tier named in words.',
+    tokens: [
+      { name: '--fx-medal-bronze', value: 'linear-gradient(180deg, #f0b583, #c47a43)', use: 'Bronze, lit from above.' },
+      { name: '--fx-medal-bronze-light', value: '#f0b583', use: 'Bronze as lettering on dark water.' },
+      { name: '--fx-medal-bronze-foot', value: '#8a5228', use: 'The foot under a bronze disc.' },
+      { name: '--fx-medal-bronze-ink', value: '#3b1d08', use: 'Lettering on bronze.' },
+      { name: '--fx-medal-silver', value: 'linear-gradient(180deg, #ffffff, #b9c6d4)', use: 'Silver, lit from above.' },
+      { name: '--fx-medal-silver-foot', value: '#8090a4', use: 'The foot under a silver disc.' },
+      { name: '--fx-medal-silver-ink', value: '#23304f', use: 'Lettering on silver.' },
+      { name: '--fx-medal-gold', value: 'linear-gradient(180deg, #fff0bf, #f3b53f)', use: 'Gold, lit from above.' },
+    ],
+  },
+  {
+    id: 'quality', title: 'Quality', swatch: 'colour',
+    use: 'The stone that marks a fish’s quality, one colour per grade, on dark water and (deeper) on paper.',
+    tokens: [
+      { name: '--fx-quality-bronze', value: '#cf8f52', use: 'Bronze quality, on water and on paper.' },
+      { name: '--fx-quality-silver', value: '#d6dee6', use: 'Silver quality on water.' },
+      { name: '--fx-quality-gold', value: '#f3c453', use: 'Gold quality on water.' },
+      { name: '--fx-quality-diamond', value: '#a8ecff', use: 'Diamond quality on water.' },
+      { name: '--fx-quality-purple', value: '#c59bff', use: 'Purple quality on water.' },
+      { name: '--fx-quality-silver-paper', value: '#aab7c4', use: 'Silver quality on paper.' },
+      { name: '--fx-quality-gold-paper', value: '#e3ad2f', use: 'Gold quality on paper.' },
+      { name: '--fx-quality-diamond-paper', value: '#58c6e8', use: 'Diamond quality on paper.' },
+      { name: '--fx-quality-purple-paper', value: '#9d68e8', use: 'Purple quality on paper.' },
+    ],
+  },
+  {
+    id: 'brass', title: 'Brass', swatch: 'colour',
+    use: 'The plates a painted room hangs on its walls: a name, a door, a thing to open. A brass face with a dark edge, a solid foot and a bright top line.',
+    tokens: [
+      { name: '--fx-brass-face', value: 'linear-gradient(180deg, #fff0bf 0%, #f0cd78 22%, #c99a45 60%, #a87a2e 100%)', use: 'The plate itself, lit from above.' },
+      { name: '--fx-brass-edge', value: '#5a3a12', use: 'The dark border round a plate.' },
+      { name: '--fx-brass-foot', value: '#2a170c', use: 'The solid foot under a plate, and the shade of a painted room.' },
+      { name: '--fx-brass-shine', value: '#fff6d8', use: 'The bright line along a plate’s top edge.' },
+      { name: '--fx-brass-ink', value: '#3a2416', use: 'Lettering on a plate, and the dark dot of a door’s arrow.' },
+      { name: '--fx-brass-glint', value: '#ffe8b0', use: 'The arrow on that dark dot.' },
+      { name: '--fx-brass-wood', value: '#3b2a1d', use: 'The wall colour behind a room’s painting while it loads.' },
+      { name: '--fx-brass-shadow', value: 'rgb(20 8 2 / 45%)', use: 'The soft shadow a plate throws on the painting.' },
+      { name: '--fx-brass-plate', value: '0 3px 0 #2a170c, inset 0 1px #fff6d8, 0 6px 12px rgb(20 8 2 / 45%)', use: 'A plate’s whole lift: foot, top line and shadow.' },
+      { name: '--fx-brass-drop', value: '0 8px 10px rgb(20 8 2 / 50%)', use: 'The shadow under a painted door or object standing in the room.' },
+    ],
+  },
   {
     id: 'glass', title: 'Glass', swatch: 'surface',
     use: 'The one material everything floats on: tinted water glass with a sheen across its top.',