From e7889537b5885973c3a6f22b1472bff0b615f148 Mon Sep 17 00:00:00 2001
From: fmw666 <fmw19990718@gmail.com>
Date: Mon, 8 Jun 2026 15:18:54 +0800
Subject: [PATCH] feat(design): add Pixel Pop (8-bit pastel arcade) preset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A self-authored 15th `--design` preset: the neo-brutalist hard-outline
chassis (3px ink borders, hard-offset zero-blur shadows, zero radius)
re-skinned in a candy pastel palette (lavender / mint / pink / butter / sky)
with bitmap pixel headlines (Press Start 2P) over a retro monospace body
(Space Mono). Ships light + dark (arcade-night) halves, a pixel-dot field,
`image-rendering: pixelated`, and hover-pop / active-slam press motion.

- register `pixel` in the CLI design choices, preview params-schema (+label),
  and audit-design spec (voice checks)
- load Press Start 2P + Space Mono behind the design=pixel variant marker in
  both template index.html copies (fall back to ui-monospace where blocked)
- CJK-safe font stacks (PingFang SC / Microsoft YaHei / Noto Sans SC before
  the generic) so Chinese/Japanese titles render in a clean sans instead of
  dropping to the browser default serif against the bitmap Latin
- re-sync the create-eikon-react template package.json to the source template
  (drop unused @radix-ui/react-label — native <label htmlFor> is used)

Audit: pixel scores 100/100. Local verify:pr green
(typecheck / lint / test / build / e2e).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/create-eikon-react/src/index.ts      |   1 +
 .../.agent/skills/customize-design/SKILL.md   |   1 +
 .../create-eikon-react/template/index.html    |  17 ++
 .../create-eikon-react/template/package.json  |   1 -
 .../template/src/styles/index.css             | 265 ++++++++++++++++++
 .../preview-site/src/lib/params-schema.ts     |   2 +
 .../.agent/skills/customize-design/SKILL.md   |   1 +
 packages/template-react/index.html            |  17 ++
 packages/template-react/src/styles/index.css  | 265 ++++++++++++++++++
 scripts/audit-design.mjs                      |  40 +++
 10 files changed, 609 insertions(+), 1 deletion(-)

diff --git a/packages/create-eikon-react/src/index.ts b/packages/create-eikon-react/src/index.ts
index 419b035..37cf847 100644
--- a/packages/create-eikon-react/src/index.ts
+++ b/packages/create-eikon-react/src/index.ts
@@ -58,6 +58,7 @@ const VARIANT_CHOICES = {
     'editorial',
     'animal-crossing',
     'evomap',
+    'pixel',
   ] as const,
   layout: [
     'stacked',
diff --git a/packages/create-eikon-react/template/.agent/skills/customize-design/SKILL.md b/packages/create-eikon-react/template/.agent/skills/customize-design/SKILL.md
index 21ac2e1..b63dd0f 100644
--- a/packages/create-eikon-react/template/.agent/skills/customize-design/SKILL.md
+++ b/packages/create-eikon-react/template/.agent/skills/customize-design/SKILL.md
@@ -58,6 +58,7 @@ translate them to OKLCH for perceptual-uniform contrast checking.
 | `carbon`          | IBM Carbon Design System     | IBM Blue `#0F62FE` on layered grays     | IBM Plex Sans             | Dense (0.22rem)                           | Square corners, 2px focus, enterprise. |
 | `editorial`       | Broadsheet / magazine print  | black ink `#262626` on white paper      | Playfair Display / Georgia | Editorial (0.27rem) · 17px · 1.85 LH      | Stark B&W serif, hairline rules, flat. |
 | `animal-crossing` | [animal-island-ui]           | mint teal `#19c8b9` + parchment `#f8f8f0`, brown ink `#794f27`, focus yellow `#ffcc00` | Baloo 2 / M PLUS Rounded 1c | Spacious (0.27rem) · chunky 12–24px radii | Cosy island; hard flat-bottom shadow, rounded gothic, bouncy easing. |
+| `pixel`           | Retro 8-bit / pixel-art (self-authored) | candy pastels — lavender `oklch(0.78 0.13 300)` + mint + pink + butter + sky on lavender-gray paper, ink-black outline | Press Start 2P (display) / Space Mono (body) | Standard (0.25rem) · tamed display scale | 8-bit pastel arcade; brutalist 3px ink borders + hard-offset shadows, zero radius, `image-rendering: pixelated`, pixel-dot field. Hover pops, active slams. |
 
 [linear.app/brand]: https://linear.app/brand
 [Anthropic brand guidelines]: https://github.com/anthropics/skills/blob/main/skills/brand-guidelines/SKILL.md
diff --git a/packages/create-eikon-react/template/index.html b/packages/create-eikon-react/template/index.html
index fb81d97..e332109 100644
--- a/packages/create-eikon-react/template/index.html
+++ b/packages/create-eikon-react/template/index.html
@@ -88,6 +88,23 @@
       rel="stylesheet"
     />
     <!-- @eikon:variant(design=evomap) end -->
+    <!-- @eikon:variant(design=pixel) begin -->
+    <!--
+      Press Start 2P — the canonical bitmap pixel face — for headlines, over
+      Space Mono (retro monospace) for body / UI. Both are SIL OFL fonts on
+      Google Fonts; loaded eagerly because the pixel face defines the first
+      paint of every title. They fall back to ui-monospace / system mono on
+      networks that block Google Fonts — see --font-display / --font-sans in
+      src/styles/index.css. Each ships a single weight (Press Start 2P 400,
+      Space Mono 400/700), which is all the pixel preset asks for.
+    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <!-- @eikon:variant(design=pixel) end -->
     <title>Eikon App</title>
     <script>
       (function () {
diff --git a/packages/create-eikon-react/template/package.json b/packages/create-eikon-react/template/package.json
index 6b2db10..71a372b 100644
--- a/packages/create-eikon-react/template/package.json
+++ b/packages/create-eikon-react/template/package.json
@@ -44,7 +44,6 @@
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
diff --git a/packages/create-eikon-react/template/src/styles/index.css b/packages/create-eikon-react/template/src/styles/index.css
index 4b66db0..94d8dd4 100644
--- a/packages/create-eikon-react/template/src/styles/index.css
+++ b/packages/create-eikon-react/template/src/styles/index.css
@@ -4301,6 +4301,271 @@
 }
 /* @eikon:variant(design=evomap) end */
 
+/* @eikon:variant(design=pixel) begin */
+/* Pixel Pop — 8-bit pastel arcade. The neo-brutalist hard-outline chassis
+ * (3px ink borders, hard-offset zero-blur shadows, zero radius) re-skinned
+ * in a soft CANDY palette — lavender / mint / pink / butter / sky — and
+ * crowned with a true bitmap pixel display face (Press Start 2P) over a
+ * retro monospace body (Space Mono). Reads like a friendly handheld /
+ * retro-computing UI rather than brutalism's raw zine: same hard depth,
+ * pastel mood. Cards/buttons stay sharp pixels; `rounded-full` badges stay
+ * candy pills. Hover POPS the shadow out; active SLAMS it flat. Dark mode is
+ * a deep arcade-night purple-black with light outlines + light cast shadows.
+ * Self-authored aesthetic — no third-party brand assets. Press Start 2P +
+ * Space Mono are SIL OFL fonts loaded in index.html behind the variant
+ * marker; both fall back to ui-monospace where Google Fonts is blocked. */
+:root.design-pixel {
+  --color-background: oklch(0.95 0.005 300); /* soft lavender-gray paper */
+  --color-foreground: oklch(0.17 0.02 295); /* near-black violet ink */
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.17 0.02 295);
+  --color-muted: oklch(0.93 0.008 300);
+  --color-muted-foreground: oklch(0.42 0.03 295);
+  --color-border: oklch(0.17 0.02 295); /* ink outline */
+  --color-input: oklch(0.17 0.02 295);
+  --color-primary: oklch(0.78 0.13 300); /* candy lavender */
+  --color-primary-foreground: oklch(0.17 0.02 295);
+  --color-secondary: oklch(0.87 0.11 165); /* mint */
+  --color-secondary-foreground: oklch(0.17 0.02 295);
+  /* Accent is the shadcn hover/highlighted-row tint — a pale pink WASH, not
+   * a fill (a saturated pink would flood the whole row on hover). The candy
+   * pop comes from primary/secondary fills + the hard shadow pop, not from
+   * accent. */
+  --color-accent: oklch(0.91 0.05 350); /* pale pink wash */
+  --color-accent-foreground: oklch(0.17 0.02 295);
+  --color-destructive: oklch(0.62 0.22 25);
+  --color-destructive-foreground: oklch(0.98 0 0);
+  --color-ring: oklch(0.6 0.2 300); /* vivid arcade violet — visible focus */
+
+  /* Zero radius — sharp pixels. `rounded-full` badge pills are a fixed
+   * utility (9999px), unaffected by these tokens, so candy pills stay round. */
+  --radius-lg: 0rem;
+  --radius-md: 0rem;
+  --radius-sm: 0rem;
+
+  /* Bitmap pixel headlines over a retro monospace body. Press Start 2P runs
+   * VERY large per glyph, so the display type-scale below is dialled down to
+   * keep titles from overflowing while still reading big and chunky.
+   *
+   * CJK fallback — Press Start 2P + Space Mono are Latin-only, so every stack
+   * ends with system CJK sans faces (PingFang / YaHei / Noto Sans SC) BEFORE
+   * the generic. Without them a Chinese/Japanese title drops to the browser's
+   * default serif and clashes with the bitmap Latin (e.g. a "大豆包" heading
+   * mixed with pixel ASCII). CJK ideographs are full-width, so they sit
+   * cleanly in the monospace rhythm. For TRUE pixel CJK, drop an open bitmap
+   * CJK webfont (Zpix / Fusion Pixel / Cubic 11) at the front of --font-display
+   * and load it in index.html behind the design=pixel variant marker. */
+  --font-sans:
+    'Space Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular,
+    Menlo, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', monospace;
+  --font-mono:
+    'Space Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular,
+    Menlo, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', monospace;
+  --font-display:
+    'Press Start 2P', 'Space Mono', ui-monospace, SFMono-Regular, Menlo,
+    'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', monospace;
+
+  /* Roomy arcade density; Space Mono ships only 400/700 so medium maps to
+   * 400 (avoid faux-bold mush) and semibold to 700. */
+  --spacing: 0.25rem;
+  --text-sm: 0.8125rem;
+  --text-sm--line-height: 1.2rem;
+  --text-base: 0.9375rem;
+  --text-base--line-height: 1.5rem;
+  --font-weight-medium: 400;
+  --font-weight-semibold: 700;
+  --tracking-tight: 0em;
+
+  /* Tamed display scale for the wide bitmap face + extra leading (pixel
+   * glyphs are tall and need vertical air). */
+  --text-3xl: 1.35rem;
+  --text-3xl--line-height: 1.9rem;
+  --text-4xl: 1.6rem;
+  --text-4xl--line-height: 2.1rem;
+  --text-5xl: 2rem;
+  --text-5xl--line-height: 1.2;
+  --text-6xl: 2.5rem;
+  --text-6xl--line-height: 1.2;
+
+  /* Hard-outline chassis: thick ink border, no backdrop/inset, hard-offset
+   * zero-blur shadows. Hover pops the offset OUT (lifts off the page),
+   * active slams it flat (presses in). */
+  --surface-border-width: 3px;
+  --surface-backdrop: none;
+  --surface-inset-shadow: none;
+  --surface-ring-width: 0px;
+  --surface-ring-color: transparent;
+  --surface-hover-shadow: 6px 6px 0 oklch(0.17 0.02 295);
+  --surface-active-shadow: 2px 2px 0 oklch(0.17 0.02 295);
+
+  --shadow-sm: 3px 3px 0 oklch(0.17 0.02 295);
+  --shadow-md: 5px 5px 0 oklch(0.17 0.02 295);
+  --shadow-lg: 8px 8px 0 oklch(0.17 0.02 295);
+  --shadow-xl: 10px 10px 0 oklch(0.17 0.02 295);
+
+  /* Snappy arcade motion — quick, no float. */
+  --duration-fast: 90ms;
+  --duration-normal: 140ms;
+  --duration-slow: 240ms;
+
+  --scrollbar-size: 14px;
+  --scrollbar-thumb: oklch(0.78 0.13 300);
+  --scrollbar-thumb-hover: oklch(0.6 0.2 300);
+  --scrollbar-thumb-radius: 0rem;
+  --scrollbar-thumb-border: 3px;
+
+  /* Sidebar — a flat candy-lavender block with the hard ink outline; the
+   * active item flips to ink with a mint label. */
+  --color-sidebar: oklch(0.78 0.13 300);
+  --color-sidebar-foreground: oklch(0.17 0.02 295);
+  --color-sidebar-primary: oklch(0.17 0.02 295);
+  --color-sidebar-primary-foreground: oklch(0.87 0.11 165);
+  --color-sidebar-accent: oklch(0.87 0.11 165);
+  --color-sidebar-accent-foreground: oklch(0.17 0.02 295);
+  --color-sidebar-border: oklch(0.17 0.02 295);
+
+  /* Chart — the five candy hues (lavender / mint / pink / butter / sky) as
+   * flat pixel blocks. */
+  --chart-1: oklch(0.78 0.13 300);
+  --chart-2: oklch(0.85 0.13 165);
+  --chart-3: oklch(0.78 0.14 350);
+  --chart-4: oklch(0.86 0.14 95);
+  --chart-5: oklch(0.78 0.12 235);
+
+  /* State colours — pastel candy fills with ink labels (no muted whispers;
+   * arcade UI shouts in colour). */
+  --color-success: oklch(0.8 0.15 160);
+  --color-success-foreground: oklch(0.17 0.02 295);
+  --color-warning: oklch(0.88 0.15 95);
+  --color-warning-foreground: oklch(0.17 0.02 295);
+  --color-info: oklch(0.8 0.12 235);
+  --color-info-foreground: oklch(0.17 0.02 295);
+
+  /* Focus halo — vivid violet, 3px (reads as an extra-thick pixel border)
+   * with a 2px paper gap. */
+  --ring-width: 3px;
+  --ring-offset-width: 2px;
+  --ring-offset-color: oklch(0.95 0.005 300);
+}
+.dark.design-pixel {
+  /* Arcade night — deep purple-black, never flat grey. Outlines + cast
+   * shadows flip to light so the hard-edge chassis still reads. */
+  --color-background: oklch(0.17 0.015 290);
+  --color-foreground: oklch(0.95 0.01 300);
+  --color-card: oklch(0.21 0.02 290);
+  --color-card-foreground: oklch(0.95 0.01 300);
+  --color-muted: oklch(0.26 0.02 290);
+  --color-muted-foreground: oklch(0.74 0.02 300);
+  --color-border: oklch(0.95 0.01 300);
+  --color-input: oklch(0.95 0.01 300);
+  --color-primary: oklch(0.8 0.13 300);
+  --color-primary-foreground: oklch(0.15 0.02 290);
+  --color-secondary: oklch(0.84 0.12 165);
+  --color-secondary-foreground: oklch(0.15 0.02 290);
+  --color-accent: oklch(0.34 0.06 350); /* deeper pink hover-row in the dark */
+  --color-accent-foreground: oklch(0.95 0.01 300);
+  --color-destructive: oklch(0.62 0.22 25);
+  --color-destructive-foreground: oklch(0.98 0 0);
+  --color-ring: oklch(0.8 0.13 300);
+
+  --color-success: oklch(0.82 0.15 160);
+  --color-success-foreground: oklch(0.15 0.02 290);
+  --color-warning: oklch(0.88 0.15 95);
+  --color-warning-foreground: oklch(0.15 0.02 290);
+  --color-info: oklch(0.8 0.12 235);
+  --color-info-foreground: oklch(0.15 0.02 290);
+
+  --surface-hover-shadow: 6px 6px 0 oklch(0.95 0.01 300);
+  --surface-active-shadow: 2px 2px 0 oklch(0.95 0.01 300);
+
+  --shadow-sm: 3px 3px 0 oklch(0.95 0.01 300);
+  --shadow-md: 5px 5px 0 oklch(0.95 0.01 300);
+  --shadow-lg: 8px 8px 0 oklch(0.95 0.01 300);
+  --shadow-xl: 10px 10px 0 oklch(0.95 0.01 300);
+
+  --scrollbar-thumb: oklch(0.78 0.13 300);
+  --scrollbar-thumb-hover: oklch(0.88 0.1 300);
+
+  --color-sidebar: oklch(0.21 0.02 290);
+  --color-sidebar-foreground: oklch(0.95 0.01 300);
+  --color-sidebar-primary: oklch(0.8 0.13 300);
+  --color-sidebar-primary-foreground: oklch(0.15 0.02 290);
+  --color-sidebar-accent: oklch(0.3 0.04 300);
+  --color-sidebar-accent-foreground: oklch(0.95 0.01 300);
+  --color-sidebar-border: oklch(0.95 0.01 300);
+
+  --ring-offset-color: oklch(0.17 0.015 290);
+}
+
+/* Pixel-dot field — a fine candy-dot grid evoking a low-res screen, low
+ * enough opacity that white cards + ink text stay crisp on top. */
+:root.design-pixel body {
+  background-image: radial-gradient(
+    color-mix(in oklab, var(--color-primary) 24%, transparent) 1.5px,
+    transparent 1.5px
+  );
+  background-size: 16px 16px;
+}
+.dark.design-pixel body {
+  background-image: radial-gradient(
+    color-mix(in oklab, var(--color-foreground) 12%, transparent) 1.5px,
+    transparent 1.5px
+  );
+  background-size: 16px 16px;
+}
+
+/* Crunch raster images down to hard pixels — the whole point of the look,
+ * and what turns the avatar / agent icons into 8-bit sprites. Design-scoped
+ * + inside the marker, so it ships only when `pixel` survives stripping. */
+:root.design-pixel img {
+  image-rendering: pixelated;
+}
+
+/* Hard-outline chrome + the pop/slam press, lifted from the brutalist
+ * chassis: thick ink borders on chrome/controls, hover lifts the surface up-
+ * left and grows the cast shadow, active presses it down-right onto a stub. */
+:root.design-pixel .app-nav-shell,
+:root.design-pixel .app-dropdown-trigger,
+:root.design-pixel .app-dropdown-content {
+  background: var(--color-sidebar);
+  border-width: 3px;
+  border-color: var(--color-sidebar-border);
+  box-shadow: var(--shadow-md);
+}
+:root.design-pixel .app-nav-link,
+:root.design-pixel .app-nav-action,
+:root.design-pixel .app-bottom-nav-link,
+:root.design-pixel button,
+:root.design-pixel a[role='button'],
+:root.design-pixel [role='button'],
+:root.design-pixel input:not([type='checkbox']):not([type='radio']):not([type='range']),
+:root.design-pixel textarea,
+:root.design-pixel select {
+  border-width: 3px;
+  border-radius: 0;
+}
+:root.design-pixel .app-nav-link:hover,
+:root.design-pixel .app-nav-action:hover,
+:root.design-pixel .app-bottom-nav-link:hover,
+:root.design-pixel button.shadow-sm:hover,
+:root.design-pixel a.shadow-sm:hover {
+  opacity: 1;
+  transform: translate(-2px, -2px);
+  box-shadow: var(--surface-hover-shadow);
+}
+:root.design-pixel .app-nav-link-active,
+:root.design-pixel .app-bottom-nav-link-active {
+  background: var(--color-sidebar-primary);
+  color: var(--color-sidebar-primary-foreground);
+  box-shadow: var(--shadow-sm);
+}
+:root.design-pixel button:active,
+:root.design-pixel a[role='button']:active {
+  transform: translate(2px, 2px);
+  box-shadow: var(--surface-active-shadow);
+}
+/* @eikon:variant(design=pixel) end */
+
 /* --- layout axis -----------------------------------------------------------
  * Each layout (stacked / sidebar / topbar-sidebar / centered) is its own
  * top-level component file under src/app/layouts/, so layout-specific
diff --git a/packages/preview-site/src/lib/params-schema.ts b/packages/preview-site/src/lib/params-schema.ts
index cb3efbb..ed78f2d 100644
--- a/packages/preview-site/src/lib/params-schema.ts
+++ b/packages/preview-site/src/lib/params-schema.ts
@@ -129,6 +129,7 @@ export const PARAMS = [
       'editorial',
       'animal-crossing',
       'evomap',
+      'pixel',
     ],
     default: 'default',
     cliFlag: 'design',
@@ -155,6 +156,7 @@ export const PARAMS = [
       editorial: 'Editorial (black-and-white print)',
       'animal-crossing': 'Animal Crossing (mint teal + parchment)',
       evomap: 'EvoMap (agent economy cyan)',
+      pixel: 'Pixel Pop (8-bit pastel arcade)',
     },
   },
   {
diff --git a/packages/template-react/.agent/skills/customize-design/SKILL.md b/packages/template-react/.agent/skills/customize-design/SKILL.md
index 21ac2e1..b63dd0f 100644
--- a/packages/template-react/.agent/skills/customize-design/SKILL.md
+++ b/packages/template-react/.agent/skills/customize-design/SKILL.md
@@ -58,6 +58,7 @@ translate them to OKLCH for perceptual-uniform contrast checking.
 | `carbon`          | IBM Carbon Design System     | IBM Blue `#0F62FE` on layered grays     | IBM Plex Sans             | Dense (0.22rem)                           | Square corners, 2px focus, enterprise. |
 | `editorial`       | Broadsheet / magazine print  | black ink `#262626` on white paper      | Playfair Display / Georgia | Editorial (0.27rem) · 17px · 1.85 LH      | Stark B&W serif, hairline rules, flat. |
 | `animal-crossing` | [animal-island-ui]           | mint teal `#19c8b9` + parchment `#f8f8f0`, brown ink `#794f27`, focus yellow `#ffcc00` | Baloo 2 / M PLUS Rounded 1c | Spacious (0.27rem) · chunky 12–24px radii | Cosy island; hard flat-bottom shadow, rounded gothic, bouncy easing. |
+| `pixel`           | Retro 8-bit / pixel-art (self-authored) | candy pastels — lavender `oklch(0.78 0.13 300)` + mint + pink + butter + sky on lavender-gray paper, ink-black outline | Press Start 2P (display) / Space Mono (body) | Standard (0.25rem) · tamed display scale | 8-bit pastel arcade; brutalist 3px ink borders + hard-offset shadows, zero radius, `image-rendering: pixelated`, pixel-dot field. Hover pops, active slams. |
 
 [linear.app/brand]: https://linear.app/brand
 [Anthropic brand guidelines]: https://github.com/anthropics/skills/blob/main/skills/brand-guidelines/SKILL.md
diff --git a/packages/template-react/index.html b/packages/template-react/index.html
index fb81d97..e332109 100644
--- a/packages/template-react/index.html
+++ b/packages/template-react/index.html
@@ -88,6 +88,23 @@
       rel="stylesheet"
     />
     <!-- @eikon:variant(design=evomap) end -->
+    <!-- @eikon:variant(design=pixel) begin -->
+    <!--
+      Press Start 2P — the canonical bitmap pixel face — for headlines, over
+      Space Mono (retro monospace) for body / UI. Both are SIL OFL fonts on
+      Google Fonts; loaded eagerly because the pixel face defines the first
+      paint of every title. They fall back to ui-monospace / system mono on
+      networks that block Google Fonts — see --font-display / --font-sans in
+      src/styles/index.css. Each ships a single weight (Press Start 2P 400,
+      Space Mono 400/700), which is all the pixel preset asks for.
+    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <!-- @eikon:variant(design=pixel) end -->
     <title>Eikon App</title>
     <script>
       (function () {
diff --git a/packages/template-react/src/styles/index.css b/packages/template-react/src/styles/index.css
index 4b66db0..94d8dd4 100644
--- a/packages/template-react/src/styles/index.css
+++ b/packages/template-react/src/styles/index.css
@@ -4301,6 +4301,271 @@
 }
 /* @eikon:variant(design=evomap) end */
 
+/* @eikon:variant(design=pixel) begin */
+/* Pixel Pop — 8-bit pastel arcade. The neo-brutalist hard-outline chassis
+ * (3px ink borders, hard-offset zero-blur shadows, zero radius) re-skinned
+ * in a soft CANDY palette — lavender / mint / pink / butter / sky — and
+ * crowned with a true bitmap pixel display face (Press Start 2P) over a
+ * retro monospace body (Space Mono). Reads like a friendly handheld /
+ * retro-computing UI rather than brutalism's raw zine: same hard depth,
+ * pastel mood. Cards/buttons stay sharp pixels; `rounded-full` badges stay
+ * candy pills. Hover POPS the shadow out; active SLAMS it flat. Dark mode is
+ * a deep arcade-night purple-black with light outlines + light cast shadows.
+ * Self-authored aesthetic — no third-party brand assets. Press Start 2P +
+ * Space Mono are SIL OFL fonts loaded in index.html behind the variant
+ * marker; both fall back to ui-monospace where Google Fonts is blocked. */
+:root.design-pixel {
+  --color-background: oklch(0.95 0.005 300); /* soft lavender-gray paper */
+  --color-foreground: oklch(0.17 0.02 295); /* near-black violet ink */
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.17 0.02 295);
+  --color-muted: oklch(0.93 0.008 300);
+  --color-muted-foreground: oklch(0.42 0.03 295);
+  --color-border: oklch(0.17 0.02 295); /* ink outline */
+  --color-input: oklch(0.17 0.02 295);
+  --color-primary: oklch(0.78 0.13 300); /* candy lavender */
+  --color-primary-foreground: oklch(0.17 0.02 295);
+  --color-secondary: oklch(0.87 0.11 165); /* mint */
+  --color-secondary-foreground: oklch(0.17 0.02 295);
+  /* Accent is the shadcn hover/highlighted-row tint — a pale pink WASH, not
+   * a fill (a saturated pink would flood the whole row on hover). The candy
+   * pop comes from primary/secondary fills + the hard shadow pop, not from
+   * accent. */
+  --color-accent: oklch(0.91 0.05 350); /* pale pink wash */
+  --color-accent-foreground: oklch(0.17 0.02 295);
+  --color-destructive: oklch(0.62 0.22 25);
+  --color-destructive-foreground: oklch(0.98 0 0);
+  --color-ring: oklch(0.6 0.2 300); /* vivid arcade violet — visible focus */
+
+  /* Zero radius — sharp pixels. `rounded-full` badge pills are a fixed
+   * utility (9999px), unaffected by these tokens, so candy pills stay round. */
+  --radius-lg: 0rem;
+  --radius-md: 0rem;
+  --radius-sm: 0rem;
+
+  /* Bitmap pixel headlines over a retro monospace body. Press Start 2P runs
+   * VERY large per glyph, so the display type-scale below is dialled down to
+   * keep titles from overflowing while still reading big and chunky.
+   *
+   * CJK fallback — Press Start 2P + Space Mono are Latin-only, so every stack
+   * ends with system CJK sans faces (PingFang / YaHei / Noto Sans SC) BEFORE
+   * the generic. Without them a Chinese/Japanese title drops to the browser's
+   * default serif and clashes with the bitmap Latin (e.g. a "大豆包" heading
+   * mixed with pixel ASCII). CJK ideographs are full-width, so they sit
+   * cleanly in the monospace rhythm. For TRUE pixel CJK, drop an open bitmap
+   * CJK webfont (Zpix / Fusion Pixel / Cubic 11) at the front of --font-display
+   * and load it in index.html behind the design=pixel variant marker. */
+  --font-sans:
+    'Space Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular,
+    Menlo, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', monospace;
+  --font-mono:
+    'Space Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular,
+    Menlo, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', monospace;
+  --font-display:
+    'Press Start 2P', 'Space Mono', ui-monospace, SFMono-Regular, Menlo,
+    'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', monospace;
+
+  /* Roomy arcade density; Space Mono ships only 400/700 so medium maps to
+   * 400 (avoid faux-bold mush) and semibold to 700. */
+  --spacing: 0.25rem;
+  --text-sm: 0.8125rem;
+  --text-sm--line-height: 1.2rem;
+  --text-base: 0.9375rem;
+  --text-base--line-height: 1.5rem;
+  --font-weight-medium: 400;
+  --font-weight-semibold: 700;
+  --tracking-tight: 0em;
+
+  /* Tamed display scale for the wide bitmap face + extra leading (pixel
+   * glyphs are tall and need vertical air). */
+  --text-3xl: 1.35rem;
+  --text-3xl--line-height: 1.9rem;
+  --text-4xl: 1.6rem;
+  --text-4xl--line-height: 2.1rem;
+  --text-5xl: 2rem;
+  --text-5xl--line-height: 1.2;
+  --text-6xl: 2.5rem;
+  --text-6xl--line-height: 1.2;
+
+  /* Hard-outline chassis: thick ink border, no backdrop/inset, hard-offset
+   * zero-blur shadows. Hover pops the offset OUT (lifts off the page),
+   * active slams it flat (presses in). */
+  --surface-border-width: 3px;
+  --surface-backdrop: none;
+  --surface-inset-shadow: none;
+  --surface-ring-width: 0px;
+  --surface-ring-color: transparent;
+  --surface-hover-shadow: 6px 6px 0 oklch(0.17 0.02 295);
+  --surface-active-shadow: 2px 2px 0 oklch(0.17 0.02 295);
+
+  --shadow-sm: 3px 3px 0 oklch(0.17 0.02 295);
+  --shadow-md: 5px 5px 0 oklch(0.17 0.02 295);
+  --shadow-lg: 8px 8px 0 oklch(0.17 0.02 295);
+  --shadow-xl: 10px 10px 0 oklch(0.17 0.02 295);
+
+  /* Snappy arcade motion — quick, no float. */
+  --duration-fast: 90ms;
+  --duration-normal: 140ms;
+  --duration-slow: 240ms;
+
+  --scrollbar-size: 14px;
+  --scrollbar-thumb: oklch(0.78 0.13 300);
+  --scrollbar-thumb-hover: oklch(0.6 0.2 300);
+  --scrollbar-thumb-radius: 0rem;
+  --scrollbar-thumb-border: 3px;
+
+  /* Sidebar — a flat candy-lavender block with the hard ink outline; the
+   * active item flips to ink with a mint label. */
+  --color-sidebar: oklch(0.78 0.13 300);
+  --color-sidebar-foreground: oklch(0.17 0.02 295);
+  --color-sidebar-primary: oklch(0.17 0.02 295);
+  --color-sidebar-primary-foreground: oklch(0.87 0.11 165);
+  --color-sidebar-accent: oklch(0.87 0.11 165);
+  --color-sidebar-accent-foreground: oklch(0.17 0.02 295);
+  --color-sidebar-border: oklch(0.17 0.02 295);
+
+  /* Chart — the five candy hues (lavender / mint / pink / butter / sky) as
+   * flat pixel blocks. */
+  --chart-1: oklch(0.78 0.13 300);
+  --chart-2: oklch(0.85 0.13 165);
+  --chart-3: oklch(0.78 0.14 350);
+  --chart-4: oklch(0.86 0.14 95);
+  --chart-5: oklch(0.78 0.12 235);
+
+  /* State colours — pastel candy fills with ink labels (no muted whispers;
+   * arcade UI shouts in colour). */
+  --color-success: oklch(0.8 0.15 160);
+  --color-success-foreground: oklch(0.17 0.02 295);
+  --color-warning: oklch(0.88 0.15 95);
+  --color-warning-foreground: oklch(0.17 0.02 295);
+  --color-info: oklch(0.8 0.12 235);
+  --color-info-foreground: oklch(0.17 0.02 295);
+
+  /* Focus halo — vivid violet, 3px (reads as an extra-thick pixel border)
+   * with a 2px paper gap. */
+  --ring-width: 3px;
+  --ring-offset-width: 2px;
+  --ring-offset-color: oklch(0.95 0.005 300);
+}
+.dark.design-pixel {
+  /* Arcade night — deep purple-black, never flat grey. Outlines + cast
+   * shadows flip to light so the hard-edge chassis still reads. */
+  --color-background: oklch(0.17 0.015 290);
+  --color-foreground: oklch(0.95 0.01 300);
+  --color-card: oklch(0.21 0.02 290);
+  --color-card-foreground: oklch(0.95 0.01 300);
+  --color-muted: oklch(0.26 0.02 290);
+  --color-muted-foreground: oklch(0.74 0.02 300);
+  --color-border: oklch(0.95 0.01 300);
+  --color-input: oklch(0.95 0.01 300);
+  --color-primary: oklch(0.8 0.13 300);
+  --color-primary-foreground: oklch(0.15 0.02 290);
+  --color-secondary: oklch(0.84 0.12 165);
+  --color-secondary-foreground: oklch(0.15 0.02 290);
+  --color-accent: oklch(0.34 0.06 350); /* deeper pink hover-row in the dark */
+  --color-accent-foreground: oklch(0.95 0.01 300);
+  --color-destructive: oklch(0.62 0.22 25);
+  --color-destructive-foreground: oklch(0.98 0 0);
+  --color-ring: oklch(0.8 0.13 300);
+
+  --color-success: oklch(0.82 0.15 160);
+  --color-success-foreground: oklch(0.15 0.02 290);
+  --color-warning: oklch(0.88 0.15 95);
+  --color-warning-foreground: oklch(0.15 0.02 290);
+  --color-info: oklch(0.8 0.12 235);
+  --color-info-foreground: oklch(0.15 0.02 290);
+
+  --surface-hover-shadow: 6px 6px 0 oklch(0.95 0.01 300);
+  --surface-active-shadow: 2px 2px 0 oklch(0.95 0.01 300);
+
+  --shadow-sm: 3px 3px 0 oklch(0.95 0.01 300);
+  --shadow-md: 5px 5px 0 oklch(0.95 0.01 300);
+  --shadow-lg: 8px 8px 0 oklch(0.95 0.01 300);
+  --shadow-xl: 10px 10px 0 oklch(0.95 0.01 300);
+
+  --scrollbar-thumb: oklch(0.78 0.13 300);
+  --scrollbar-thumb-hover: oklch(0.88 0.1 300);
+
+  --color-sidebar: oklch(0.21 0.02 290);
+  --color-sidebar-foreground: oklch(0.95 0.01 300);
+  --color-sidebar-primary: oklch(0.8 0.13 300);
+  --color-sidebar-primary-foreground: oklch(0.15 0.02 290);
+  --color-sidebar-accent: oklch(0.3 0.04 300);
+  --color-sidebar-accent-foreground: oklch(0.95 0.01 300);
+  --color-sidebar-border: oklch(0.95 0.01 300);
+
+  --ring-offset-color: oklch(0.17 0.015 290);
+}
+
+/* Pixel-dot field — a fine candy-dot grid evoking a low-res screen, low
+ * enough opacity that white cards + ink text stay crisp on top. */
+:root.design-pixel body {
+  background-image: radial-gradient(
+    color-mix(in oklab, var(--color-primary) 24%, transparent) 1.5px,
+    transparent 1.5px
+  );
+  background-size: 16px 16px;
+}
+.dark.design-pixel body {
+  background-image: radial-gradient(
+    color-mix(in oklab, var(--color-foreground) 12%, transparent) 1.5px,
+    transparent 1.5px
+  );
+  background-size: 16px 16px;
+}
+
+/* Crunch raster images down to hard pixels — the whole point of the look,
+ * and what turns the avatar / agent icons into 8-bit sprites. Design-scoped
+ * + inside the marker, so it ships only when `pixel` survives stripping. */
+:root.design-pixel img {
+  image-rendering: pixelated;
+}
+
+/* Hard-outline chrome + the pop/slam press, lifted from the brutalist
+ * chassis: thick ink borders on chrome/controls, hover lifts the surface up-
+ * left and grows the cast shadow, active presses it down-right onto a stub. */
+:root.design-pixel .app-nav-shell,
+:root.design-pixel .app-dropdown-trigger,
+:root.design-pixel .app-dropdown-content {
+  background: var(--color-sidebar);
+  border-width: 3px;
+  border-color: var(--color-sidebar-border);
+  box-shadow: var(--shadow-md);
+}
+:root.design-pixel .app-nav-link,
+:root.design-pixel .app-nav-action,
+:root.design-pixel .app-bottom-nav-link,
+:root.design-pixel button,
+:root.design-pixel a[role='button'],
+:root.design-pixel [role='button'],
+:root.design-pixel input:not([type='checkbox']):not([type='radio']):not([type='range']),
+:root.design-pixel textarea,
+:root.design-pixel select {
+  border-width: 3px;
+  border-radius: 0;
+}
+:root.design-pixel .app-nav-link:hover,
+:root.design-pixel .app-nav-action:hover,
+:root.design-pixel .app-bottom-nav-link:hover,
+:root.design-pixel button.shadow-sm:hover,
+:root.design-pixel a.shadow-sm:hover {
+  opacity: 1;
+  transform: translate(-2px, -2px);
+  box-shadow: var(--surface-hover-shadow);
+}
+:root.design-pixel .app-nav-link-active,
+:root.design-pixel .app-bottom-nav-link-active {
+  background: var(--color-sidebar-primary);
+  color: var(--color-sidebar-primary-foreground);
+  box-shadow: var(--shadow-sm);
+}
+:root.design-pixel button:active,
+:root.design-pixel a[role='button']:active {
+  transform: translate(2px, 2px);
+  box-shadow: var(--surface-active-shadow);
+}
+/* @eikon:variant(design=pixel) end */
+
 /* --- layout axis -----------------------------------------------------------
  * Each layout (stacked / sidebar / topbar-sidebar / centered) is its own
  * top-level component file under src/app/layouts/, so layout-specific
diff --git a/scripts/audit-design.mjs b/scripts/audit-design.mjs
index d0f3333..5bfbfbd 100644
--- a/scripts/audit-design.mjs
+++ b/scripts/audit-design.mjs
@@ -784,6 +784,46 @@ const SPECS = {
       ),
     ],
   },
+
+  pixel: {
+    label: 'Pixel Pop (8-bit pastel arcade)',
+    inspiration: 'Retro 8-bit / pixel-art pop',
+    voice: [
+      check('pixel-font', '像素位图标题字体 (Press Start 2P)', 2, (c) =>
+        bool(
+          /Press Start 2P/i.test(c.L['--font-display'] || ''),
+          `display=${short(c.L['--font-display'])}`
+        )
+      ),
+      check('hard-shadow', '硬偏移零模糊阴影 (Npx Npx 0)', 2, (c) =>
+        bool(
+          /-?\d+px -?\d+px 0\b/.test(c.L['--shadow-md'] || ''),
+          `shadow-md=${short(c.L['--shadow-md'])}`
+        )
+      ),
+      check('zero-radius', '零圆角 --radius-lg = 0', 2, (c) =>
+        near(lenRem(c.L['--radius-lg']) ?? 1, 0, 0.01, 'rem')
+      ),
+      check('thick-border', '粗边框 --surface-border-width = 3px', 1, (c) =>
+        atLeast(lenRem(c.L['--surface-border-width']) * 16, 3, 'px')
+      ),
+      check('pastel-primary', '糖果柔彩 primary (0.08 ≤ C ≤ 0.17, L ≥ 0.7)', 1, (c) => {
+        const p = c.color(c.L['--color-primary']);
+        if (!p) return bool(false, 'primary 无法解析');
+        const ok = p.oklch.C >= 0.08 && p.oklch.C <= 0.17 && p.oklch.L >= 0.7;
+        return bool(ok, `primary L=${p.oklch.L.toFixed(2)} C=${p.oklch.C.toFixed(2)}`);
+      }),
+      check('mono', '等宽正文字体', 1, (c) =>
+        bool(/Mono|Fira Code/i.test(c.fontSans), `font-sans=${short(c.fontSans)}`)
+      ),
+      check('hover-pop', 'hover 阴影弹出 --surface-hover-shadow', 1, (c) =>
+        bool(
+          /-?\d+px -?\d+px 0\b/.test(c.L['--surface-hover-shadow'] || ''),
+          `hover=${short(c.L['--surface-hover-shadow'])}`
+        )
+      ),
+    ],
+  },
 };
 
 // Small result builders for voice checks → { score: 0..1, detail }.