From 4d0df31726359bbedb754127c55d74944638cbf3 Mon Sep 17 00:00:00 2001
From: Avi <avi@aiolabs.com>
Date: Wed, 30 Sep 2026 09:11:55 -0500
Subject: [PATCH] =?UTF-8?q?feat(theme):=20Archipelago=20=E2=80=94=20synthw?=
 =?UTF-8?q?ave=20sunset=20sea=20from=20reference=20art?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Teal-navy dusk, coral scanline sun (subtle repeating-linear horizon
stripes + low-center sun glow + pink cloud banks, fixed attachment),
glassmorphic cards/sidebar (blur, translucent surfaces), coral primary
accent, white logo filter on the dark canvas. Parsed as 'archipelago'
in settings; Settings -> Appearance option 'Archipelago - Sunset Sea'.
Verified tokens + all 6 rules compute in the built bundle; 221+6 Rust,
139 frontend tests, clippy 0, electron:build green.
---
 frontend/src/lib/types.ts               |  3 +-
 frontend/src/screens/SettingsScreen.tsx |  1 +
 frontend/src/styles.css                 | 81 +++++++++++++++++++++++++
 src/settings.rs                         |  5 ++
 4 files changed, 89 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 1b2db24..9d71707 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -7,7 +7,8 @@ export type Theme =
   | 'impeccable-dark'
   | 'cosmic'
   | 'workshop'
-  | 'workshop-dark';
+  | 'workshop-dark'
+  | 'archipelago';
 
 /** 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 fdfd396..428c2ee 100644
--- a/frontend/src/screens/SettingsScreen.tsx
+++ b/frontend/src/screens/SettingsScreen.tsx
@@ -148,6 +148,7 @@ export function SettingsScreen() {
                 <option value="cosmic">Cosmic — Stardust</option>
                 <option value="workshop">Workshop — Cybernetic</option>
                 <option value="workshop-dark">Workshop — Dark</option>
+                <option value="archipelago">Archipelago — Sunset Sea</option>
               </select>
               <div
                 aria-hidden="true"
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 44509b6..b2013c2 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -706,6 +706,87 @@ html[data-theme='workshop'] .card {
   border-color: var(--border);
 }
 
+/* ------------------------------------------------------------------
+   Archipelago — synthwave sunset sea, from the reference artwork:
+   a coral scanline sun sinking into a teal dusk, pink cloud banks,
+   and glassmorphic panels floating over the horizon like islands.
+   ------------------------------------------------------------------ */
+:root[data-theme='archipelago'] {
+  --bg: #0c1418;
+  --surface: rgba(19, 36, 41, 0.78);
+  --surface-2: #17303a;
+  --surface-hover: rgba(26, 46, 52, 0.85);
+  --border: #27464e;
+  --border-strong: #35606a;
+  --text: #e9f3f1;
+  --text-muted: #92aeb2;
+  --primary: #f0685c;
+  --primary-hover: #ff8578;
+  --primary-soft: #40232a;
+  --on-primary: #ffffff;
+  --danger: #e2554f;
+  --danger-soft: #3a2026;
+  --warning: #e8b26a;
+  --warning-soft: #37291d;
+  --success: #5fc9b2;
+  --success-soft: #173630;
+  --info: #6f9fc4;
+  --info-soft: #1c2c38;
+  --focus: #f0685c;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.4);
+  --shadow-modal: 0 14px 44px rgba(0, 0, 0, 0.65);
+  --radius: 16px;
+  --radius-sm: 10px;
+  --arch-coral: rgba(240, 104, 92, 0.16);
+  --arch-cloud: rgba(232, 130, 160, 0.1);
+  --arch-teal: rgba(60, 150, 155, 0.14);
+}
+
+/* The horizon: sun glow low-center, cloud banks left/right, teal dusk
+   above. Fixed so the vista stays put while content scrolls over it. */
+html[data-theme='archipelago'] .main {
+  background-image:
+    repeating-linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.014) 0px,
+      rgba(255, 255, 255, 0.014) 1px,
+      transparent 1px,
+      transparent 3px
+    ),
+    radial-gradient(70% 42% at 50% 108%, var(--arch-coral), transparent 72%),
+    radial-gradient(45% 34% at 8% 16%, var(--arch-cloud), transparent 70%),
+    radial-gradient(45% 34% at 92% 10%, var(--arch-teal), transparent 70%);
+  background-attachment: fixed;
+}
+
+/* Glass panels: let the sunset read through the cards, like the
+   reference dashboard. */
+html[data-theme='archipelago'] .card,
+html[data-theme='archipelago'] .profile-card,
+html[data-theme='archipelago'] .relay-row {
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+html[data-theme='archipelago'] .sidebar {
+  background: linear-gradient(180deg, rgba(13, 24, 29, 0.92), rgba(13, 24, 29, 0.82));
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-right-color: var(--border);
+}
+
+/* Dark artwork theme: the ink logo needs the same treatment as the
+   other dark themes. */
+html[data-theme='archipelago'] .sidebar-logo img {
+  filter: invert(1) grayscale(1) brightness(1.4);
+}
+
+html[data-theme='archipelago'] code,
+html[data-theme='archipelago'] .mono {
+  background: rgba(23, 48, 58, 0.9);
+  border: 1px solid var(--border);
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/src/settings.rs b/src/settings.rs
index 9f96f99..bf6176c 100644
--- a/src/settings.rs
+++ b/src/settings.rs
@@ -35,6 +35,10 @@ pub enum Theme {
     /// personality change") — near-black paper, warm light ink, pale pine.
     #[serde(rename = "workshop-dark")]
     WorkshopDark,
+    /// "Archipelago": synthwave sunset sea from the user's reference art —
+    /// teal-navy dusk, coral scanline sun, glass-island cards.
+    #[serde(rename = "archipelago")]
+    Archipelago,
 }
 
 impl Theme {
@@ -50,6 +54,7 @@ impl Theme {
             "cosmic" => Some(Self::Cosmic),
             "workshop" => Some(Self::Workshop),
             "workshop-dark" => Some(Self::WorkshopDark),
+            "archipelago" => Some(Self::Archipelago),
             _ => None,
         }
     }