From add956abdd4611ed6fa30b78e3951ac0652c90b8 Mon Sep 17 00:00:00 2001
From: Avi <avi@aiolabs.com>
Date: Mon, 28 Sep 2026 08:54:13 -0500
Subject: [PATCH] =?UTF-8?q?feat(theme):=20add=20Workshop=20theme=20?=
 =?UTF-8?q?=E2=80=94=20Cybernetic=20Workshop=20identity=20from=20Moi=20DES?=
 =?UTF-8?q?IGN.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Warm paper (#f3efe6), near-black ink, hairline borders, one pine accent (#215c48), serif display headings, Moi radii (14/9). Tokens verified rendering live via computed styles on the built shell: body bg #f3efe6, card #faf7f0, border #d9d1c3, h2 Iowan/Palatino 500. Settings -> Appearance -> 'Workshop — Cybernetic'.
---
 frontend/src/lib/types.ts               |  2 +-
 frontend/src/screens/SettingsScreen.tsx |  1 +
 frontend/src/styles.css                 | 64 +++++++++++++++++++++++++
 src/settings.rs                         |  4 ++
 4 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index a255dd9..ab62400 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -1,5 +1,5 @@
 export type Theme =
-  'light' | 'dark' | 'glass' | 'neon' | 'impeccable' | 'impeccable-dark' | 'cosmic';
+  'light' | 'dark' | 'glass' | 'neon' | 'impeccable' | 'impeccable-dark' | 'cosmic' | 'workshop';
 
 /** Active signer mode. */
 export type SignerMode = 'embedded' | 'nip46_bunker' | 'nip46_client';
diff --git a/frontend/src/screens/SettingsScreen.tsx b/frontend/src/screens/SettingsScreen.tsx
index 9be95c9..e7b6a2a 100644
--- a/frontend/src/screens/SettingsScreen.tsx
+++ b/frontend/src/screens/SettingsScreen.tsx
@@ -109,6 +109,7 @@ export function SettingsScreen() {
                 <option value="impeccable">Impeccable — Light</option>
                 <option value="impeccable-dark">Impeccable — Dark</option>
                 <option value="cosmic">Cosmic — Stardust</option>
+                <option value="workshop">Workshop — Cybernetic</option>
               </select>
               <div
                 aria-hidden="true"
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 5c3c1d6..3fe8c26 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -570,6 +570,70 @@ html[data-theme='cosmic'] .empty-state {
   border-color: var(--border);
 }
 
+/* "Workshop" — Cybernetic Workshop, the Moi portfolio identity (DESIGN.md):
+   warm paper, near-black ink, hairline borders, one pine accent, copper
+   index ticks, serif headings. Light is the material; flat depth
+   Paper -> Surface -> Stone, shadow only where Moi allows it. */
+:root[data-theme='workshop'] {
+  --bg: #f3efe6;
+  --surface: #faf7f0;
+  --surface-2: #eae4d8;
+  --surface-hover: #faf7f0;
+  --border: #d9d1c3;
+  --border-strong: #c9bfad;
+  --text: #1c1814;
+  --text-muted: #5e574d;
+  --primary: #215c48;
+  --primary-hover: #184536;
+  --primary-soft: #e4f0ea;
+  --on-primary: #f3efe6;
+  --danger: #a13d2e;
+  --danger-soft: #f5e5e1;
+  --warning: #8b5a32;
+  --warning-soft: #f3ead9;
+  --success: #215c48;
+  --success-soft: #e4f0ea;
+  --info: #3c5a72;
+  --info-soft: #e6ecf1;
+  --focus: #215c48;
+  --shadow: 0 1px 2px rgba(28, 24, 20, 0.05), 0 8px 24px rgba(28, 24, 20, 0.06);
+  --shadow-modal: 0 12px 40px rgba(28, 24, 20, 0.18);
+  --radius: 14px;
+  --radius-sm: 9px;
+}
+
+/* Workshop type: Iowan/Palatino serif for display surfaces, everything
+   else stays on the local system stack (Moi ships no webfonts). */
+html[data-theme='workshop'] h1,
+html[data-theme='workshop'] h2 {
+  font-family: 'Iowan Old Style', Palatino, Georgia, serif;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+html[data-theme='workshop'] h1 {
+  font-size: 30px;
+  line-height: 1.05;
+}
+html[data-theme='workshop'] h2 {
+  font-size: 19px;
+  line-height: 1.2;
+}
+
+/* One accent rule: pine carries focus and active states; copper marks
+   index-like mono elements instead of a second saturated hue. */
+html[data-theme='workshop'] code,
+html[data-theme='workshop'] .mono {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+}
+html[data-theme='workshop'] .sidebar {
+  background: var(--surface);
+  border-right-color: var(--border);
+}
+html[data-theme='workshop'] .card {
+  border-color: var(--border);
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/src/settings.rs b/src/settings.rs
index d4eb9d3..11bcf40 100644
--- a/src/settings.rs
+++ b/src/settings.rs
@@ -28,6 +28,9 @@ pub enum Theme {
     #[serde(rename = "impeccable-dark")]
     ImpeccableDark,
     Cosmic,
+    /// "Cybernetic Workshop" — the Moi portfolio look: warm paper, near-black
+    /// ink, hairline borders, one pine accent, serif headings.
+    Workshop,
 }
 
 impl Theme {
@@ -41,6 +44,7 @@ impl Theme {
             "impeccable" => Some(Self::Impeccable),
             "impeccable-dark" => Some(Self::ImpeccableDark),
             "cosmic" => Some(Self::Cosmic),
+            "workshop" => Some(Self::Workshop),
             _ => None,
         }
     }