v4: the six styles are reworked, each around one idea of its own, and the tab row stops painting the page — a pass over every theme, then the faults it showed in what they share. Brutalist draws every box in ink with a solid offset shadow and sets the palette's colors as flat blocks (a teal tag, an apricot quote, an inked label); its dark scheme keeps that ink darker than the page, on Twilight Indigo, where eggshell lines glared across every frame. GeoCities goes to the desktop of its day: the header is the taskbar, the site's name its Start button, the controls grey bevels, and a marquee crawls under the header (Marquee.tsx, drawn in that style alone), with Comic Neue where the system has no Comic Sans. Melange leaves its browns and Fraunces for a sorbet blend in Bricolage Grotesque, run along the header, through the site's name, where it drifts, and between a journal's blocks; its two schemes are one print and its negative, trading ink and paper while the pink and the plum written on it stay, and they share one fine grain where the light one had a coarse tile that greyed the page. Kanagawa opens the comments and the related dumps on a status line and reads on Lotus's brightest paper; its page is flat. Times draws its heavy rules in a mid grey at night, where ink is near white, and sets a journal cell with no picture as text. In what the styles share: a row of tabs (TabBar) hid the tabs scrolled under its scope switcher, and faded its ends, by painting the page's color over them, which showed as a patch on any page that is a gradient or a picture. The switcher now sits before the row that scrolls, which clips the tabs at its edge, and the fades are a mask (--tab-fade-start and --tab-fade-end); useRoomBeside measures the row through that one more level. A page's title keeps a word whole unless it alone is wider than the line: Firefox sizes a title set with negative letter-spacing a hair narrower than it lays it out, which dropped its last letter to a second line in any style that tightened it, so the rule is the base's and the two styles' copies go. A card holding one paragraph, such as the instances a new account hasn't signed in to on /settings, is spaced by its padding and not by the paragraph's margins as well. The site's name answers the pointer as a card's title does in each style, where two of them left it still. The emails follow the styles' tokens, Melange's blend among them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

api/mail/styles.ts

@@ -191,7 +191,7 @@ const RECIPES: Record<StyleName, Recipe> = {
     },
   },
   melange: {
-    webFontAxes: "opsz,wght@9..144,400;9..144,600;9..144,700",
+    webFontAxes: "wght@400;600",
     scale: 1,
     avatarRadius: 16,
     title: { size: 32, weight: 600 },

api/test/mail/theme-tokens.test.ts

@@ -32,13 +32,14 @@ Deno.test("readTokens: a forced scheme's block overrides the theme's", () => {
 
 Deno.test("readTokens: var() follows tokens, color-mix() is computed", () => {
   const melange = readTokens("melange", "light");
-  // The spice starts with var(--color-accent) and drops its stops' positions.
+  // The spice holds var()s, the accent among them, and drops its stops'
+  // positions.
   assertEquals(melange.stops("--mel-spice"), [
-    "#a06d00",
-    "#bc5c00",
-    "#c77b8b",
-    "#be79bb",
-    "#6e9b72",
+    "#ea6a45",
+    "#e2568f",
+    "#8262d8",
+    "#3a8fd4",
+    "#27a583",
   ]);
   // 18% of the muted text over the card, as a badge shows on the site.
   const smooth = readTokens("smooth", "light");