feat(palette): adopt imprint — new categorical palette + named API + frontend rebuild

.serena/memories/style_guide.md

@@ -15,24 +15,29 @@ Frontend tokens: `app/src/theme/index.ts` + `app/src/main.tsx` (MUI theme).
 - **Exception**: ErrorBoundary uses raw `'monospace'` (crash-safe fallback).
 - `fontSize.micro` (0.5rem) and `fontSize.xxs` (0.625rem) restricted to data-dense pages (StatsPage, DebugPage). Public pages: `fontSize.xs` (0.75rem) minimum.
 
-## Color — Okabe-Ito palette
-Colorblind-safe categorical palette; first 7 fixed across themes, 8th is adaptive neutral.
+## Color — imprint palette
+Colourblind-safe categorical palette (8 hues, hybrid-v3 sort) plus 3 semantic anchors outside the pool. All 8 categorical slots stay fixed across themes; the neutral and muted anchors flip per theme. Full rationale: `docs/reference/palette-variants-v3/decision-rationale.md`.
 
 ```
-1 #009E73 bluish green   ★ brand
-2 #D55E00 vermillion      (errors, destructive)
-3 #0072B2 blue            (info links, footnotes)
-4 #CC79A7 reddish purple  PLOT-ONLY
-5 #E69F00 orange          ("new" badges, secondary hover)
-6 #56B4E9 sky blue        PLOT-ONLY
-7 #F0E442 yellow          PLOT-ONLY
-8 adaptive neutral: #1A1A1A light / #E8E8E0 dark
+slot 0 #009E73 brand green   ★ first series — logo, primary CTAs
+slot 1 #C475FD lavender       (creative / artistic)         PLOT-ONLY
+slot 2 #4467A3 blue            (info links, footnotes)
+slot 3 #BD8233 ochre           (hover accent, earth / commodity)
+slot 4 #AE3030 matte red       (errors, destructive — deferred semantic anchor)
+slot 5 #2ABCCD cyan            (sky / tech-cool)            PLOT-ONLY
+slot 6 #954477 rose            (wellness / health)          PLOT-ONLY
+slot 7 #99B314 lime            (growth / nature)            PLOT-ONLY
+
+semantic anchors (outside the categorical pool):
+  amber   #DDCC77             warning / caution (fixed)
+  neutral #1A1A17 / #F0EFE8   totals / baseline / outline (theme-adaptive)
+  muted   #6B6A63 / #A8A79F   other / rest / disabled    (theme-adaptive)
 ```
 
-**Brand green `#009E73` appears in UI ONLY in 8 contexts:** logo dot, italic accent words in headlines, hero terminal cursor, active nav item (dot prefix + underline), code-action button hover, code-block syntax (strings), palette strip, small status indicators.
+**Brand green `#009E73` appears in UI ONLY in 8 contexts:** logo dot, italic accent words in headlines, hero terminal cursor, active nav item (dot prefix + underline), code-action button hover, code-block syntax (comments), palette strip, small status indicators.
 **Never**: backgrounds, regular card borders, body text emphasis, non-logo icons, static decorative dots.
 
-**Plot-only colors** (purple/sky/yellow) must never appear in UI chrome.
+**Plot-only colours** (lavender, cyan, rose, lime) must never appear in UI chrome — they are reserved for data marks so categorical plots retain visual impact.
 
 ## Surfaces — warm, not clinical
 Pure `#FFFFFF` is out — makes saturated palette colors look harsh.
@@ -70,15 +75,15 @@ Highlight treatments: `colors.highlight.bg`/`colors.highlight.text`, `colors.too
 
 ## Section-header pattern (shell-prompt prefixes)
 - `❯` navigation/categorical · `$` action/list · `~/path/` hierarchical/about
-- Title in italic + ss02 (script), `--ok-green`, underlined with 1px `--rule`.
+- Title in italic + ss02 (script), `--imprint-green`, underlined with 1px `--rule`.
 
 ## Buttons — method-call doctrine
-- **Action** (primary affordance): `.copy()`, `.open()`, `.download()` — `::before { content: "." }`, hover flips to `--ok-green`.
+- **Action** (primary affordance): `.copy()`, `.open()`, `.download()` — `::before { content: "." }`, hover flips to `--imprint-green`.
 - **Hero CTA** (filled, landing only): dark pill, 4px radius, hover → green.
 - **Ghost** (rare): transparent, `--rule` border.
 
 ## Logo `any.plot()`
-MonoLisa Bold, letters `--ink`, `.` `--ok-green` scaled 1.3× (circle), `()` `--ink` weight 400 at 45% opacity. Favicon reduces to `a.p`. Clear space `1em`.
+MonoLisa Bold, letters `--ink`, `.` `--imprint-green` scaled 1.3× (circle), `()` `--ink` weight 400 at 45% opacity. Favicon reduces to `a.p`. Clear space `1em`.
 
 ## Voice
 Precise · understated · curious · respectful · slightly playful · code-native · AI-honest.
@@ -92,6 +97,6 @@ Gradients (esp. purple-blue SaaS), glass/backdrop-blur, isometric illustrations,
 ## Plot defaults
 - First series **always** `#009E73`.
 - Neutral (pos 8) reserved for aggregates/residuals/reference lines.
-- Yellow `#F0E442` poor on white — position 7+ only, never thin lines/small markers.
-- Non-categorical: sequential → `viridis`/`cividis`; diverging → `BrBG`; heatmaps → `viridis` or single-polarity `Reds`/`Blues`.
+- 5 lighter members (lavender, ochre, cyan, lime, amber) fall under WCAG 3:1 on cream bg. Add a 1px ink stroke on affected series when the chart is small or accessibility-strict — see outline pattern in `docs/reference/palette-variants-v3/decision-rationale.md`.
+- Non-categorical: sequential → `imprint_seq` (green→blue); diverging → `imprint_div` (red↔theme-adaptive-midpoint↔blue). Never substitute viridis/cividis/BrBG/jet/hsv/rainbow — palette identity is part of the brand.
 - Plot-internal typography (ticks/labels/legends): MonoLisa, 10–13px.

app/src/components/CodeHighlighter.tsx

@@ -16,10 +16,10 @@ const PRISM_LANGUAGE: Record<string, string> = {
   julia: 'julia',
 };
 
-// Theme-aware Okabe-Ito syntax theme. All colors come from CSS variables in
+// Theme-aware imprint syntax theme. All colors come from CSS variables in
 // tokens.css so the block adapts to light (paper) and dark modes. Comments
 // use the brand green as a deliberate editorial accent.
-const okabeItoTheme: Record<string, React.CSSProperties> = {
+const imprintTheme: Record<string, React.CSSProperties> = {
   'pre[class*="language-"]': {
     color: 'var(--code-text)',
     background: 'var(--code-bg)',
@@ -65,7 +65,7 @@ export default function CodeHighlighter({ code, language = 'python' }: CodeHighl
   return (
     <SyntaxHighlighter
       language={prismLanguage}
-      style={okabeItoTheme}
+      style={imprintTheme}
       customStyle={{
         margin: 0,
         padding: '24px 28px',

app/src/components/CodeShowcase.tsx

@@ -27,7 +27,7 @@ export function CodeShowcase() {
             mb: 3,
             m: 0,
             color: 'var(--ink)',
-            '& em': { fontStyle: 'italic', color: 'var(--ok-green)' },
+            '& em': { fontStyle: 'italic', color: 'var(--imprint-green)' },
           }}>
             Same palette,<br /><em>every library</em>.
           </Box>
@@ -39,7 +39,7 @@ export function CodeShowcase() {
             color: 'var(--ink-soft)',
             mb: 2.5,
           }}>
-            every example in the catalogue uses the same Okabe-Ito palette. switch libraries
+            every example in the catalogue uses the same imprint palette. switch libraries
             without losing your color grammar — a <em style={{ fontStyle: 'italic' }}>gentoo penguin</em> is always blue,
             whether you draw it in matplotlib or plotly.
           </Box>
@@ -79,40 +79,40 @@ export function CodeShowcase() {
             <Box component="span" sx={{ color: '#666', fontStyle: 'italic' }}>
               {'# pick any library. the palette travels with you.\n'}
             </Box>
-            <Box component="span" sx={{ color: '#56B4E9' }}>import</Box>{' anyplot '}
-            <Box component="span" sx={{ color: '#56B4E9' }}>as</Box>{' ap\n\n'}
+            <Box component="span" sx={{ color: '#2ABCCD' }}>import</Box>{' anyplot '}
+            <Box component="span" sx={{ color: '#2ABCCD' }}>as</Box>{' ap\n\n'}
             {'data = ap.'}
-            <Box component="span" sx={{ color: '#E69F00' }}>load</Box>
+            <Box component="span" sx={{ color: '#99B314' }}>load</Box>
             {'('}
-            <Box component="span" sx={{ color: '#009E73' }}>"penguins"</Box>
+            <Box component="span" sx={{ color: '#DDCC77' }}>"penguins"</Box>
             {')\n\n'}
             <Box component="span" sx={{ color: '#666', fontStyle: 'italic' }}>
               {'# matplotlib\n'}
             </Box>
             {'ap.'}
-            <Box component="span" sx={{ color: '#E69F00' }}>mpl</Box>
+            <Box component="span" sx={{ color: '#99B314' }}>mpl</Box>
             {'.'}
-            <Box component="span" sx={{ color: '#E69F00' }}>scatter</Box>
+            <Box component="span" sx={{ color: '#99B314' }}>scatter</Box>
             {'(data, x='}
-            <Box component="span" sx={{ color: '#009E73' }}>"bill"</Box>
+            <Box component="span" sx={{ color: '#DDCC77' }}>"bill"</Box>
             {', y='}
-            <Box component="span" sx={{ color: '#009E73' }}>"flipper"</Box>
+            <Box component="span" sx={{ color: '#DDCC77' }}>"flipper"</Box>
             {',\n               hue='}
-            <Box component="span" sx={{ color: '#009E73' }}>"species"</Box>
+            <Box component="span" sx={{ color: '#DDCC77' }}>"species"</Box>
             {')\n\n'}
             <Box component="span" sx={{ color: '#666', fontStyle: 'italic' }}>
               {'# plotly — same colors, interactive\n'}
             </Box>
             {'ap.'}
-            <Box component="span" sx={{ color: '#E69F00' }}>plotly</Box>
+            <Box component="span" sx={{ color: '#99B314' }}>plotly</Box>
             {'.'}
-            <Box component="span" sx={{ color: '#E69F00' }}>scatter</Box>
+            <Box component="span" sx={{ color: '#99B314' }}>scatter</Box>
             {'(data, x='}
-            <Box component="span" sx={{ color: '#009E73' }}>"bill"</Box>
+            <Box component="span" sx={{ color: '#DDCC77' }}>"bill"</Box>
             {', y='}
-            <Box component="span" sx={{ color: '#009E73' }}>"flipper"</Box>
+            <Box component="span" sx={{ color: '#DDCC77' }}>"flipper"</Box>
             {',\n                  hue='}
-            <Box component="span" sx={{ color: '#009E73' }}>"species"</Box>
+            <Box component="span" sx={{ color: '#DDCC77' }}>"species"</Box>
             {')'}
           </Box>
         </Box>

app/src/components/PaletteStrip.tsx

@@ -1,8 +1,9 @@
 import Box from '@mui/material/Box';
 
-const SWATCHES = [
-  '#009E73', '#D55E00', '#0072B2', '#CC79A7',
-  '#E69F00', '#56B4E9', '#F0E442', 'var(--ink)',
+// imprint palette — 8 categorical hues in hybrid-v3 sort order
+const DEFAULT_SWATCHES = [
+  '#009E73', '#C475FD', '#4467A3', '#BD8233',
+  '#AE3030', '#2ABCCD', '#954477', '#99B314',
 ];
 
 interface PaletteStripProps {
@@ -12,9 +13,12 @@ interface PaletteStripProps {
   height?: number;
   /** Top margin (MUI spacing units, default 5). */
   mt?: number;
+  /** Override the default 8-hex imprint set (e.g. to render an alternate sort). */
+  hexes?: string[];
 }
 
-export function PaletteStrip({ maxWidth = 400, height = 40, mt = 5 }: PaletteStripProps = {}) {
+export function PaletteStrip({ maxWidth = 400, height = 40, mt = 5, hexes }: PaletteStripProps = {}) {
+  const SWATCHES = hexes ?? DEFAULT_SWATCHES;
   return (
     <Box sx={{
       display: 'flex',

app/src/components/ScienceNote.tsx

@@ -58,8 +58,8 @@ export function ScienceNote() {
           px: 2.5,
           m: 0,
         }}>
-          A palette proposed as unambiguous to both colorblind and non-colorblind
-          viewers, with vivid colors that stay recognizable on screen and in print.
+          A palette unambiguous to colourblind and non-colourblind viewers alike,
+          warm-tinted to stay legible on screen and in print.
         </Box>
 
         <Box component="cite" sx={{
@@ -72,7 +72,7 @@ export function ScienceNote() {
           textTransform: 'uppercase',
           letterSpacing: '0.15em',
         }}>
-          — Okabe & Ito, Color Universal Design (2008)
+          — anyplot imprint, design rationale
         </Box>
 
         <PaletteStrip />

app/src/pages/AboutPage.tsx

@@ -95,10 +95,12 @@ export function AboutPage() {
           <SectionHeader prompt="❯" title={<em>palette</em>} />
           <Box sx={proseColumnSx}>
             <Box sx={textStyle}>
-              every plot uses the Okabe-Ito palette, designed to stay distinguishable under the main
-              forms of color vision deficiency. Masataka Okabe and Kei Ito published it on the Color
-              Universal Design page in 2002 (revised 2008). about 8% of men have some form of color
-              vision deficiency — most plotting libraries ignore this entirely. we make it the default.
+              every plot uses <strong>imprint</strong>, our own colourblind-safe categorical palette —
+              8 hues plus 3 semantic anchors, tuned for warm-paper rendering and validated against the
+              three main forms of colour vision deficiency. it sits in the same neighbourhood as
+              Okabe-Ito, Paul Tol&apos;s &ldquo;muted&rdquo;, and ColorBrewer Set2 — about 8% of men
+              have some form of CVD, and most plotting libraries ignore this entirely. we make it
+              the default.
             </Box>
             <Box sx={{ ...textStyle, mt: 1 }}>
               see the{' '}

app/src/pages/LandingPage.test.tsx

@@ -104,15 +104,12 @@ describe('LandingPage', () => {
     expect(trackEvent).toHaveBeenCalledWith('nav_click', { source: 'specs_more_link', target: '/specs' });
   });
 
-  it('tracks the suggest_spec link and the okabe-ito reference', async () => {
+  it('tracks the suggest_spec link', async () => {
     const user = userEvent.setup();
     render(<LandingPage />);
 
     await user.click(screen.getByText(/suggest/));
     expect(trackEvent).toHaveBeenCalledWith('nav_click', expect.objectContaining({ source: 'suggest_spec_link' }));
-
-    await user.click(screen.getByText(/Okabe/));
-    expect(trackEvent).toHaveBeenCalledWith('nav_click', expect.objectContaining({ source: 'palette_okabe_ito' }));
   });
 
   it('tracks the map teaser visual click', async () => {