@agentic-design-kits/verdigris 2026.1113.1 → 2026.1114.0

package/COMPONENTS.md

@@ -289,6 +289,7 @@ A row of outlined buttons that narrows a list to one category. One choice at a t
 - Announce the result in a polite live region outside the accordion: `<p class="sr-only" aria-live="polite">Showing 5 Writing items</p>`.
 - With `FavoriteStar`, add a **Favorites** chip after All, its count in `<span class="chip-count" data-favorites-count>0</span>`. It filters like a category, using the starred ids. When it shows nothing, say how to add some in a `muted` line under the accordion.
 - Listen for `filter:reset` and go back to All (`JumpToCurrent` sends it when the current item is filtered out).
+- A chip that can't be chosen right now takes `disabled`: it fades to 60% and doesn't fill on hover. Say why near the row.
 
 ## FavoriteStar
 
@@ -741,7 +742,7 @@ A title banner in place of a hero, for pages that need a name but not an introdu
 
 **Markup.** `<header class="page-title"><h1 class="page-title-text">All work</h1></header>`. Add `page-title--bar` to set it on a dark `bar` block with `bar-ink` text and an 8px `accent` rule along its bottom edge (plain `accent`, since it is a large shape; vermilion or verdigris with the site).
 
-- Bold, tight, `clamp(3rem, 9vw, 7.5rem)`: smaller than `display`, still the biggest thing on the page. A long word wraps instead of pushing the page sideways.
+- Light (300), `clamp(3.5rem, 9vw, 8rem)`, line height 1.1 to give Cormorant's ascenders and descenders room: smaller than `display`, still the biggest thing on the page. A long word wraps instead of pushing the page sideways.
 - Space like a hero's: `space-12` above, a little less below (more from 768px). No rule under it; the section below starts with its own 2px rule.
 - The bar version spans the container, not the window, and keeps a margin above and below so it reads as a block on the page.
 - One per page, and only on pages without a `Hero`.
@@ -833,7 +834,7 @@ In Astro, `<PostList posts={posts} />`, each a `Post` (`title`, `href`, `date`,
 
 ## PostFeature
 
-One post at the top of a blog's index, set like a split `Hero`: the text and a square image 50/50 from 768px, text first on phones. The `PostList` of the other posts follows it.
+One post at the top of a blog's index, in one of two layouts. **Split**, like a split `Hero`: the text and a square image 50/50 from 768px, text first on phones. **Wide**: the text across the full width, then the image under it at 16:9. The `PostList` of the other posts follows it.
 
 **Markup.**
 
@@ -850,15 +851,15 @@ One post at the top of a blog's index, set like a split `Hero`: the text and a s
 </article>
 ```
 
-In Astro, `<PostFeature post={post} image={art} alt="What it shows" />`, with the same `Post` as `PostList` and an imported image. `label` (default "Featured") and `action` (default "Read post") change the two short labels; `level="h1"` when nothing else on the page is the `h1`.
+In Astro, `<PostFeature post={post} image={art} alt="What it shows" />`, with the same `Post` as `PostList` and an imported image. The image's shape picks the layout: wide for a landscape image, split for a square or portrait one. `layout="wide"` or `layout="split"` overrides it. `label` (default "Featured") and `action` (default "Read post") change the two short labels; `level="h1"` when nothing else on the page is the `h1`.
 
 - It takes a hero's place and space: `space-12` above, more from 768px. A page with a `PostFeature` has no `Hero` or `PageTitle`; give it an `h1` (visually hidden is fine) naming the page.
 - The label is small, bold and `accent-text`; the title is bold and tight at `clamp(2.5rem, 5.5vw, 5rem)`, and underlines (3px) on hover.
 - The primary button is the page's one main action. Its name adds the post's title, so it says where it goes.
-- The image is cropped square (`.media--1x1`) and loads eagerly, like a hero's. A square or portrait original crops best.
+- Split crops the image square (`.media--1x1`); wide crops it 16:9 (`.media--16x9`) and adds `post-feature--wide` to the article, which also gives the summary a longer measure. Either way it loads eagerly, like a hero's. Give wide a landscape original and split a square or portrait one, so the crop takes little.
 - Only one per page. Don't repeat the featured post in the list below it.
 
-**Other media.** `image` and `alt` are optional. To show something other than a raster image, such as an SVG that follows the theme, leave them out and fill the `media` slot: `<PostFeature post={post}><svg slot="media" …></svg></PostFeature>`. Keep it square, and give it its own text alternative if it says anything.
+**Other media.** `image` and `alt` are optional. To show something other than a raster image, such as an SVG that follows the theme, leave them out and fill the `media` slot: `<PostFeature post={post}><svg slot="media" …></svg></PostFeature>`. Keep it square, or 16:9 with `layout="wide"`, and give it its own text alternative if it says anything.
 
 ## Pager
 
@@ -986,9 +987,9 @@ One note a reader must not miss. The manicule is the font's, drawn in CSS, so it
 
 ## Rosette
 
-Engraved line work in the two metals, for a page with no picture of its own. It follows the theme, and is `aria-hidden`. No text on it, and never a background. `<Rosette />` draws it at build time; `.rosette` sets its strokes, in `accent-text` and `copper-text`, so it holds up on paper. `--rosette-line` is thicker in light than in dark, because dark lines on paper read thinner.
+Engraved line work in the two metals, for a page with no picture of its own. It follows the theme, and is `aria-hidden`. No text on it, and never a background. `<Rosette />` draws it at build time; `.rosette` sets its strokes in `--rosette-verdigris` and `--rosette-copper`, a verdigris and a bright copper orange with their own light and dark values. `--rosette-line` is thicker in light than in dark, because dark lines on paper read thinner.
 
-`<Rosette spin />` turns it once every two minutes and adds a switch, on by default, that stops it. Moving content needs a way to stop it (WCAG 2.2.2), so never remove the switch. With Reduce Motion it stays still and the switch is hidden. Use `spin` once a page at most.
+`<Rosette spin />` turns it once every 30 seconds and adds a switch, on by default, that stops it. Moving content needs a way to stop it (WCAG 2.2.2), so never remove the switch. With Reduce Motion it stays still and the switch is hidden. Use `spin` once a page at most.
 
 For a wide crop, put it in a `.media` box with `.rosette-crop`: `<div class="media media--16x9 rosette-crop"><Rosette /></div>`.
 

package/DESIGN.md

@@ -12,7 +12,7 @@ Verdigris is a package, built for **Astro with Tailwind v4** (no React needed).
 - `panel.js` (Swiss Minimal, imported as `@agentic-design-kits/verdigris/panel.js`): the slide-down panel's behavior, tabs included. Plain JavaScript, no dependencies, like the other scripts: `new-dot.js` (the "new" dot), `drawer.js` (the second, non-modal panel), `jump.js` (jump to the current item), `marquee.js` (a scrolling title), `file-pick.js` (the file picker), `output.js` (live output), `dialog.js` (fills in for the native dialog where a browser is behind), `favorites.js` (favorite stars) and `icon-controls.js` (icon buttons for rows built in the browser).
 - The Astro components, imported as `@agentic-design-kits/verdigris/astro/Name.astro`. `BaseLayout`, `Mark` and `Rosette` are written here (`kit/astro/`); the rest are Swiss Minimal's, passed on by `kit/shared/`: BaseLayout, Hero, PageTitle, Mark, Rosette, PostList, PostFeature, Pager, PostHeader, PostNav, Footer, BottomBar, FilePicker, SummaryList, OutputPanel, Dialog, Ellipse, NumCircle, MenuButton, MenuPanel, MenuItems, ThemeToggle, Drawer, DrawerButton, FavoriteButton, FeaturesList, IconTemplates (needs `astro-icon`) and the types (`MenuItem`, `PanelTab`, `NewDot`, `Feature`, `Post`, `PostLink`). They use Tailwind utilities for layout and the kit classes for components.
 - `kit/example.html`: a one-page demo using only `theme.css` and `verdigris.css`. Open it from the repository (it reads Swiss Minimal's `theme.css` from the `kit/` at the root) to see what "correct" looks like.
-- `fonts/Cormorant-*.woff2` (six files) and `fonts/Cormorant-LICENSE.txt`, SIL OFL 1.1. Keep the license beside the fonts. Source Code Pro, for code, comes with Swiss Minimal.
+- `fonts/Cormorant-VF.woff2` and `fonts/Cormorant-Italic-VF.woff2` (variable, weights 300 to 700) and `fonts/Cormorant-LICENSE.txt`, SIL OFL 1.1. Keep the license beside the fonts. Source Code Pro, for code, comes with Swiss Minimal.
 - `tokens.json`: the token values as data. If a value in `theme.css` ever differs, `tokens.json` wins.
 
 Put this in `<head>` before first paint so a saved theme does not flash:
@@ -58,7 +58,7 @@ Light is the default. Dark keeps the same roles.
 
 ## Type
 
-One family, `--font-sans` (Cormorant, falling back to Garamond, Iowan Old Style, Georgia). Code is the only exception: `code`, `pre`, `kbd` and `samp` use `--font-mono`, Source Code Pro at 400, scaled to 0.8em because it is far larger on its body than Cormorant.
+One family, `--font-sans` (Cormorant, falling back to Garamond, Iowan Old Style, Georgia). Code is the only exception: `code`, `pre`, `kbd` and `samp` use `--font-mono`, Source Code Pro at 400, scaled to 0.72em (code blocks 0.7em) because it is far larger on its body than Cormorant.
 
 | Style | Use |
 | --- | --- |
@@ -69,7 +69,7 @@ One family, `--font-sans` (Cormorant, falling back to Garamond, Iowan Old Style,
 | `body` | Body copy, 1.375rem then 1.625rem from 768px, 500, line height 1.55, Garamond forms on (`ss02`) |
 | `small` | Meta, sublines, counts, 1.125rem |
 | `label` | 1 to 2 words, sentence case, 600 |
-| `code` | Code, file names, commands, keys: `--font-mono` at 0.8em, never under 0.875rem |
+| `code` | Code, file names, commands, keys: `--font-mono` at 0.72em, never under 0.875rem; a code block at 0.7em, never under 18px |
 
 - **18px is the floor.** Cormorant's x-height is 0.386 of its size against Overused Grotesk's 0.5, so 18px reads about as tall as 14px there. Code is the exception, as its x-height is large.
 - **Weight follows size.** Light at display sizes, medium for reading, semibold for names. Never light under 1.75rem: the hairlines disappear.
@@ -78,6 +78,46 @@ One family, `--font-sans` (Cormorant, falling back to Garamond, Iowan Old Style,
 - Every size, weight, body line height and label style is a token at the top of `theme.css`, set for Verdigris in `verdigris.css`. A new rule uses these tokens, never a raw value.
 - Code is plain HTML, no class, as in Swiss Minimal; see CodeBlock in `COMPONENTS.md`. Monospace never goes beyond code.
 
+### OpenType features
+
+Cormorant has many optional glyphs. Verdigris already sets these: `kern`, `liga` and `ss02` (Garamond forms) on body text, `dlig` on headings, old-style figures in text, and lining tabular figures in `.num`. The demo's Type and color page shows every feature off and on.
+
+| Feature | What it changes | Use |
+| --- | --- | --- |
+| `dlig` | Joins c t, s t, s p, r t, t t, f u, Q y | Display sizes only; already on in headings |
+| `hlig` | Joins ſ t and t z | Display sizes only |
+| `liga` | Joins f with i, l, f | Leave on (the default) |
+| `ss01` | Calligraphic A B J K Q R U, and g | Display sizes only |
+| `ss02` | Garamond forms: A C G R, a e g, 1 | Already on in body text |
+| `ss03` | U W, single-storey a and g, w y | Site-wide in place of `ss02`, if chosen; the two both change a and g, so use one |
+| `ss04` | Umlaut dots | Site-wide, for German text, if chosen |
+| `ss13` | Accents on capitals | Site-wide, if chosen |
+| `ss15` | Dagger | Upright only |
+| `cv01`, `cv02` | Tail of a Q on its own (not before u) | Display sizes |
+| `cv05` | f | Site-wide, if chosen |
+| `cv06`, `cv07` | Long s (ſ) | Upright only, for old spellings |
+| `case` | Brackets, dashes, colon and @ raised to sit with capitals; lining figures | Around acronyms: "(NASA)" |
+| `onum` / `lnum` | Old-style or lining figures | Old-style is already the default in text; `.num` sets lining |
+| `tnum` | Tabular figures | Through `.num` |
+| `frac` | Fractions | On the fraction only |
+| `zero` | A dot in the zero (Cormorant's form of the slashed zero) | Where 0 and O could be confused |
+| `ordn` | Raised a and o after a figure; No. becomes № | Where the text calls for it |
+| `sups`, `subs` | Superscript, subscript figures | On the figures only |
+| `cv03`, `cv04`, `ss07`, `ss08` | Italic only: two more Q tails, another a, the long-tailed Q before u | In italic, at display sizes |
+
+- **Choose alternates once.** Set a site's alternate letters on `body`, or on the heading styles, so a letter has one shape everywhere. Don't switch them word by word.
+- **Prefer `font-variant-*`** where it exists: `font-variant-ligatures` (`discretionary-ligatures`, `historical-ligatures`), `font-variant-numeric` (`oldstyle-nums`, `lining-nums`, `tabular-nums`, `diagonal-fractions`, `slashed-zero`, `ordinal`) and `font-variant-position` (`super`, `sub`). These combine on their own. Stylistic sets, character variants and `case` have no such property, so they need `font-feature-settings`.
+- **`font-feature-settings` replaces, it doesn't add.** Setting it on an element drops every feature it inherited, including Verdigris's `ss02` on body text and `dlig` on headings. To let features stack, give each its own custom property, keep the kit's own in the list, and set only the one that changes:
+
+  ```css
+  body { font-feature-settings: "kern", "liga", var(--ff-ss02, "ss02" 1), var(--ff-ss04, "ss04" 0), var(--ff-zero, "zero" 0); }
+  .codes { --ff-zero: "zero" 1; }
+  ```
+
+- **Ligatures stay in display text.** A ligature can confuse a screen reader, and copy and paste, when it stands for more than one letter.
+- **The italic has fewer.** It has no `ss15`, `cv06` or `cv07`, and adds `cv03`, `cv04`, `ss07` and `ss08` of its own.
+- **Never used:** `smcp`, `c2sc` and `ss05` (small caps, all small caps, unicase), as Verdigris has no capitals. `ss06` and `ss12` change only small caps. `ss09`, `ss10` and `ss14` change Cyrillic only.
+
 ## Layout
 
 - Content width `page-max` (88rem), centered in `.page`, with `gutter` side padding (1rem, 2rem from 640px).
@@ -94,7 +134,7 @@ One family, `--font-sans` (Cormorant, falling back to Garamond, Iowan Old Style,
 
 ## Iconography
 
-- **Glyphs come first.** Use the font's own: ❦ ⁂ † ‡ § ☞ ◆ and the arrows. CSS draws the menu bars and the plus and minus.
+- **Glyphs come first.** Use the font's own: ❦ ⁂ † ‡ § ☞ ☜ ◆ ◇ ◊ and the arrows. The demo's Type and color page shows every ornament, arrow, shape and sign Cormorant has. A glyph that acts as a control needs an `aria-label`, as screen readers read glyphs by their Unicode names. CSS draws the menu bars and the plus and minus.
 - **Marks are the icon set.** `Mark.astro` holds twelve drawn icons (menu, search, next, open, close, journal, write, letter, save, leaf, date, place): 24px grid, 1.25px line, round ends. Add new ones in the same pen.
 - **A mark may stand beside its label,** which Swiss Minimal did not allow. It should add recognition, not repeat a whole row of the same picture.
 - Third-party brand marks (YouTube, Spotify) still use Simple Icons, and a few actions Material Symbols, through `astro-icon`.

package/kit/astro/Rosette.astro

@@ -1,17 +1,8 @@
 ---
 // The engraved rosette (see Ornament in DESIGN.md): line work in the two metals, for a page with
 // no picture of its own. Drawn at build time, so it follows the theme. Decorative: aria-hidden.
-function wave(radius: number, depth: number, waves: number, phase: number, points: number) {
-  const at: string[] = [];
-  for (let i = 0; i < points; i += 1) {
-    const angle = (2 * Math.PI * i) / points;
-    const r = radius + depth * Math.sin(waves * angle + phase);
-    at.push(`${(300 + r * Math.cos(angle)).toFixed(1)} ${(300 + r * Math.sin(angle)).toFixed(1)}`);
-  }
-  return `M${at.join('L')}Z`;
-}
-const band = (curves: number, radius: number, depth: number, waves: number, points: number) =>
-  Array.from({ length: curves }, (_, i) => wave(radius, depth, waves, (2 * Math.PI * i) / curves, points)).join('');
+import { rosettePaths } from './rosette.ts';
+
 interface Props {
   class?: string;
   spin?: boolean; // Turns slowly, with a switch to stop it (WCAG 2.2.2). Never with Reduce Motion.
@@ -22,10 +13,10 @@ const { class: className, spin = false } = Astro.props;
 <div class:list={['rosette', { 'rosette--spin': spin }, className]}>
   <div class="rosette-disc">
     <svg viewBox="0 0 600 600" aria-hidden="true">
-      <path class="rosette-outer" d={band(12, 262, 24, 18, 216)}></path>
-      <path class="rosette-inner" d={band(12, 150, 46, 9, 126)}></path>
-      <path class="rosette-core" d={band(8, 52, 20, 6, 72)}></path>
+      <path class="rosette-outer" d={rosettePaths.outer}></path>
+      <path class="rosette-inner" d={rosettePaths.inner}></path>
+      <path class="rosette-core" d={rosettePaths.core}></path>
     </svg>
   </div>
-  {spin && <label class="choice rosette-switch"><input class="switch" type="checkbox" role="switch" checked /> Turn the rosette slowly</label>}
+  {spin && <label class="choice rosette-switch"><input class="switch" type="checkbox" role="switch" checked /> Turn the rosette</label>}
 </div>

package/kit/astro/font.ts

@@ -1,2 +1,2 @@
-// The one font BaseLayout preloads: the text weight. Belongs to Verdigris, not Swiss Minimal.
-export { default } from '../../fonts/Cormorant-Medium.woff2?url';
+// The one font BaseLayout preloads: the upright variable file, which has every weight. Belongs to Verdigris, not Swiss Minimal.
+export { default } from '../../fonts/Cormorant-VF.woff2?url';

package/kit/astro/rosette.ts

@@ -0,0 +1,20 @@
+// The rosette's geometry: three bands of wavy rings in a 600-unit square. Rosette.astro draws it
+// in the page; demo/scripts/hero-image.ts draws the same paths into a picture.
+function wave(radius: number, depth: number, waves: number, phase: number, points: number) {
+  const at: string[] = [];
+  for (let i = 0; i < points; i += 1) {
+    const angle = (2 * Math.PI * i) / points;
+    const r = radius + depth * Math.sin(waves * angle + phase);
+    at.push(`${(300 + r * Math.cos(angle)).toFixed(1)} ${(300 + r * Math.sin(angle)).toFixed(1)}`);
+  }
+  return `M${at.join('L')}Z`;
+}
+const band = (curves: number, radius: number, depth: number, waves: number, points: number) =>
+  Array.from({ length: curves }, (_, i) => wave(radius, depth, waves, (2 * Math.PI * i) / curves, points)).join('');
+
+/** The path data for each band: the outer ring and the core in verdigris, the inner ring in copper. */
+export const rosettePaths = {
+  outer: band(12, 262, 24, 18, 216),
+  inner: band(12, 150, 46, 9, 126),
+  core: band(8, 52, 20, 6, 72),
+};

package/kit/fonts.css

@@ -1,46 +1,19 @@
 /* Verdigris's typeface. tailwind.css loads this after Swiss Minimal's theme.css, so its
    --font-sans wins. The fonts live in ../fonts (SIL OFL 1.1, keep Cormorant-LICENSE.txt beside
-   them). Source Code Pro, for code, comes with Swiss Minimal. */
+   them): one variable file for upright and one for italic, each covering weights 300 to 700.
+   Source Code Pro, for code, comes with Swiss Minimal. */
 
 @font-face {
   font-family: "Cormorant";
-  src: url("../fonts/Cormorant-Light.woff2") format("woff2");
-  font-weight: 300;
+  src: url("../fonts/Cormorant-VF.woff2") format("woff2");
+  font-weight: 300 700;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: "Cormorant";
-  src: url("../fonts/Cormorant-LightItalic.woff2") format("woff2");
-  font-weight: 300;
-  font-style: italic;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Cormorant";
-  src: url("../fonts/Cormorant-Medium.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Cormorant";
-  src: url("../fonts/Cormorant-MediumItalic.woff2") format("woff2");
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Cormorant";
-  src: url("../fonts/Cormorant-SemiBold.woff2") format("woff2");
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Cormorant";
-  src: url("../fonts/Cormorant-SemiBoldItalic.woff2") format("woff2");
-  font-weight: 600;
+  src: url("../fonts/Cormorant-Italic-VF.woff2") format("woff2");
+  font-weight: 300 700;
   font-style: italic;
   font-display: swap;
 }

package/kit/verdigris.css

@@ -11,16 +11,18 @@
   --ink: #10201f;          /* text and rules, a green-black (14.4:1) */
   --muted: #566460;        /* secondary text (5.3:1) */
   --rule: #c9c5b4;         /* thin row dividers, decorative */
-  --accent: #0f8f8c;       /* verdigris: large shapes and the focus ring only (3.4:1) */
+  --accent: #328f6c;       /* verdigris: large shapes and the focus ring only (3.4:1) */
   --accent-ink: #ffffff;   /* text on a verdigris fill (6.3:1) */
-  --accent-text: #0b6b69;  /* small verdigris text (5.4:1) */
-  --accent-bright: #5fd4cc;/* small verdigris text on bar (8.5:1) */
+  --accent-text: #256a50;  /* small verdigris text (5.5:1) */
+  --accent-bright: #51c297;/* small verdigris text on bar (6.9:1) */
   --copper: #b0612f;       /* large ornament only (3.9:1) */
-  --copper-text: #8f4a22;  /* small ornament and labels (5.7:1) */
-  --copper-bright: #e39a68;/* ornament and labels on bar (6.6:1) */
+  --copper-text: #8f4c1e;  /* small ornament and labels (5.6:1) */
+  --copper-bright: #db8b54;/* ornament and labels on bar (5.7:1) */
   --bar: #0e2a29;          /* dark surfaces stay dark in both themes */
   --bar-ink: #f2ede1;      /* text on bar (13:1) */
   --rosette-line: 0.9;     /* dark lines on paper read thinner than light lines on dark */
+  --rosette-verdigris: #016a41; /* the rosette's outer ring and core; decorative, so no contrast floor */
+  --rosette-copper: #f75b00;    /* the rosette's inner ring */
   --row-hover-bg: var(--bar);
   --row-active-bg: var(--bar);
   --row-fg: var(--bar-ink);
@@ -41,7 +43,7 @@
   --size-page-title: clamp(3.5rem, 9vw, 8rem);
   --size-post-feature: clamp(2.75rem, 5.5vw, 5.25rem);
   --size-post-title: clamp(3.5rem, 7.4vw, 5.75rem);
-  --code-sample-size: var(--size-200); /* code on the Beautiful Code page: 20px, as --size-300 runs large here */
+  --code-sample-size: var(--size-100); /* code on the Beautiful Code page: 18px, as larger sizes run large here */
   --weight-body: 500;
   --weight-medium: 600;
   --weight-strong: 600;
@@ -58,15 +60,18 @@
     --ink: #ece6d8;
     --muted: #a6b5b0;
     --rule: #3a4a47;
-    --accent: #5fd4cc;
+    --accent: #51c297;
     --accent-ink: #0b1716;
-    --accent-text: #5fd4cc;
-    --accent-bright: #5fd4cc;
+    --accent-text: #51c297;
+    --accent-bright: #51c297;
     --copper: #e39a68;
-    --copper-text: #e39a68;
+    --copper-text: #db8b54;
+    --copper-bright: #db8b54;
     --bar: #132c2a;
     --bar-ink: #ece6d8;
     --rosette-line: 0.6;
+    --rosette-verdigris: #43f6b3;
+    --rosette-copper: #f15900;
     --row-hover-bg: #132c2a;
     --row-active-bg: var(--bar);
     --row-fg: var(--ink);
@@ -78,15 +83,18 @@
   --ink: #ece6d8;
   --muted: #a6b5b0;
   --rule: #3a4a47;
-  --accent: #5fd4cc;
+  --accent: #51c297;
   --accent-ink: #0b1716;
-  --accent-text: #5fd4cc;
-  --accent-bright: #5fd4cc;
+  --accent-text: #51c297;
+  --accent-bright: #51c297;
   --copper: #e39a68;
-  --copper-text: #e39a68;
+  --copper-text: #db8b54;
+  --copper-bright: #db8b54;
   --bar: #132c2a;
   --bar-ink: #ece6d8;
   --rosette-line: 0.6;
+  --rosette-verdigris: #43f6b3;
+  --rosette-copper: #f15900;
   --row-hover-bg: #132c2a;
   --row-active-bg: var(--bar);
   --row-fg: var(--ink);
@@ -101,14 +109,16 @@ body {
 .display, .h2, .page-title-text, .post-feature-title, .post-header-title {
   font-feature-settings: "kern", "liga", "dlig";
 }
+/* Cormorant's tall ascenders and descenders need more room than Swiss Minimal's tight 0.9. */
+.page-title-text { line-height: 1.1; }
 .lead { font-style: italic; font-weight: 300; line-height: 1.22; }
 .figure > figcaption, .post-body figcaption { font-style: italic; }
 /* Source Code Pro is far larger on its body than Cormorant, so code steps down to match. */
-code, kbd, samp { font-size: max(0.875rem, 0.8em); }
+code, kbd, samp { font-size: max(0.875rem, 0.72em); }
 /* A code block steps down further than theme.css's 0.9375em, or it reads nearly as large as
-   the text around it: about 20px beside 26px text, as on the Beautiful Code page, never under
+   the text around it: about 18px beside 26px text, as on the Beautiful Code page, never under
    the 18px floor. */
-pre { font-size: max(var(--size-100), 0.77em); }
+pre { font-size: max(var(--size-100), 0.7em); }
 /* Numbers that line up need lining figures; old-style would wander. */
 .num, .chip-count, .panel-tab-num, .num-circle, .post-body ol { font-variant-numeric: lining-nums tabular-nums; }
 
@@ -145,13 +155,13 @@ pre { font-size: max(var(--size-100), 0.77em); }
 .rosette { fill: none; stroke-width: var(--rosette-line); }
 .rosette svg { display: block; width: 100%; height: auto; }
 .rosette-disc { overflow: hidden; }   /* the square's corners swing wider than the page on a phone */
-.rosette-outer, .rosette-core { stroke: var(--accent-text); }
-.rosette-inner { stroke: var(--copper-text); }
+.rosette-outer, .rosette-core { stroke: var(--rosette-verdigris); }
+.rosette-inner { stroke: var(--rosette-copper); }
 /* Under no-preference, so Reduce Motion never starts it. The switch is hidden there too. */
 .rosette-switch { display: none; }
 @media (prefers-reduced-motion: no-preference) {
   .rosette--spin .rosette-switch { display: inline-flex; margin-top: 0.5rem; }
-  .rosette--spin svg { animation: rosette-turn 120s linear infinite; will-change: transform; }
+  .rosette--spin svg { animation: rosette-turn 30s linear infinite; will-change: transform; }
   .rosette--spin:has(.switch:not(:checked)) svg { animation-play-state: paused; }
 }
 @keyframes rosette-turn { to { transform: rotate(360deg); } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentic-design-kits/verdigris",
-  "version": "2026.1113.1",
+  "version": "2026.1114.0",
   "description": "A design kit in Cormorant, copper green and engraved line work, for Astro and Tailwind v4 sites. Built on Swiss Minimal.",
   "license": "MIT",
   "author": "Danny Englander",
@@ -43,7 +43,7 @@
     "./*.js": "./kit/shared/*.ts"
   },
   "dependencies": {
-    "@agentic-design-kits/swiss-minimal": "2026.1113.1"
+    "@agentic-design-kits/swiss-minimal": "2026.1114.0"
   },
   "peerDependencies": {
     "astro": ">=7.0.0",

package/tokens.json

@@ -48,10 +48,10 @@
    {
     "name": "accent",
     "value": {
-     "light": "#0f8f8c",
-     "dark": "#5fd4cc"
+     "light": "#328f6c",
+     "dark": "#51c297"
     },
-    "usage": "Verdigris for LARGE shapes only, and the 3px focus ring (3.4:1 on light `paper`, 10.3:1 dark). Never small text."
+    "usage": "Verdigris for LARGE shapes only, and the 3px focus ring (3.4:1 on light `paper`, 8.3:1 dark). Never small text."
    },
    {
     "name": "accent-ink",
@@ -59,23 +59,23 @@
      "light": "#ffffff",
      "dark": "#0b1716"
     },
-    "usage": "Text on a verdigris fill: 6.3:1 on light `accent-text`, 10.3:1 dark."
+    "usage": "Text on a verdigris fill: 6.5:1 on light `accent-text`, 8.3:1 dark."
    },
    {
     "name": "accent-text",
     "value": {
-     "light": "#0b6b69",
-     "dark": "#5fd4cc"
+     "light": "#256a50",
+     "dark": "#51c297"
     },
-    "usage": "Verdigris for small text on `paper` (5.4:1 light, 10.3:1 dark) and the fill of the primary button."
+    "usage": "Verdigris for small text on `paper` (5.5:1 light, 8.3:1 dark) and the fill of the primary button."
    },
    {
     "name": "accent-bright",
     "value": {
-     "light": "#5fd4cc",
-     "dark": "#5fd4cc"
+     "light": "#51c297",
+     "dark": "#51c297"
     },
-    "usage": "Verdigris for small text and marks on `bar` (8.5:1)."
+    "usage": "Verdigris for small text and marks on `bar` (6.9:1 light, 6.7:1 dark)."
    },
    {
     "name": "copper",
@@ -88,18 +88,18 @@
    {
     "name": "copper-text",
     "value": {
-     "light": "#8f4a22",
-     "dark": "#e39a68"
+     "light": "#8f4c1e",
+     "dark": "#db8b54"
     },
-    "usage": "Copper for labels and small ornament on `paper` (5.7:1 light, 7.9:1 dark). Never marks an action."
+    "usage": "Copper for labels and small ornament on `paper` (5.6:1 light, 6.8:1 dark). Never marks an action."
    },
    {
     "name": "copper-bright",
     "value": {
-     "light": "#e39a68",
-     "dark": "#e39a68"
+     "light": "#db8b54",
+     "dark": "#db8b54"
     },
-    "usage": "Copper on `bar` (6.6:1)."
+    "usage": "Copper on `bar` (5.7:1 light, 5.5:1 dark)."
    },
    {
     "name": "bar",
@@ -219,38 +219,14 @@
   "fonts": [
    {
     "family": "Cormorant",
-    "file": "fonts/Cormorant-Light.woff2",
-    "weight": "300",
-    "style": "normal"
-   },
-   {
-    "family": "Cormorant",
-    "file": "fonts/Cormorant-LightItalic.woff2",
-    "weight": "300",
-    "style": "italic"
-   },
-   {
-    "family": "Cormorant",
-    "file": "fonts/Cormorant-Medium.woff2",
-    "weight": "500",
-    "style": "normal"
-   },
-   {
-    "family": "Cormorant",
-    "file": "fonts/Cormorant-MediumItalic.woff2",
-    "weight": "500",
-    "style": "italic"
-   },
-   {
-    "family": "Cormorant",
-    "file": "fonts/Cormorant-SemiBold.woff2",
-    "weight": "600",
+    "file": "fonts/Cormorant-VF.woff2",
+    "weight": "300 700",
     "style": "normal"
    },
    {
     "family": "Cormorant",
-    "file": "fonts/Cormorant-SemiBoldItalic.woff2",
-    "weight": "600",
+    "file": "fonts/Cormorant-Italic-VF.woff2",
+    "weight": "300 700",
     "style": "italic"
    },
    {
@@ -609,6 +585,22 @@
      "dark": "0.6"
     },
     "usage": "Stroke width of the rosette, in its 600-unit drawing. Dark lines on paper read thinner than light lines on a dark ground."
+   },
+   {
+    "name": "rosette-verdigris",
+    "value": {
+     "light": "#016a41",
+     "dark": "#43f6b3"
+    },
+    "usage": "The rosette's outer ring and core. The rosette is decorative and aria-hidden, so its colors have no contrast floor."
+   },
+   {
+    "name": "rosette-copper",
+    "value": {
+     "light": "#f75b00",
+     "dark": "#f15900"
+    },
+    "usage": "The rosette's inner ring, a bright copper orange."
    }
   ]
  },