Review verdict: the paper direction is out, and the first night pass was color-drenched - navy as wallpaper rather than voice. The palette is not required to be the only pigment in the app, so the chrome becomes neutral near-black with a faint cool cast, and the five identity colors take speaking roles instead: linen is the text, cerulean marks everything interactive and the data readouts, the earth browns carry zone markers and warm details, and the navy holds the water around the map. The theme toggle is gone; one direction remains.
- commit
- 5cbf8e5b902b7d288f99bb275ece7560a76c7e38
- parent
- 79b0cec2bd33de692349d8433207ed48b1092345
- author
- Dami <dami.etoile@gmail.com>
| M | frontend/ | 69 | +++++++++--------------------- |
@@ -1,5 +1,5 @@
11 2-<html lang="en" data-theme="paper" data-dock="list">2+<html lang="en" data-theme="night" data-dock="list">33 <head>44 <meta charset="utf-8">55 <meta name="viewport" content="width=device-width, initial-scale=1">@@ -19,47 +19,28 @@
1919 font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;2020 font-synthesis: none;2121 }22-:root[data-theme="paper"] {23- color-scheme: light;24- --bg: var(--linen);25- --panel: #f3e7d8;26- --panel-raised: #fdf7ef;27- --ink: var(--olive);28- --ink-strong: #33300f;29- --muted: rgba(96, 73, 44, 0.72);30- --line: rgba(96, 73, 44, 0.22);31- --line-strong: rgba(96, 73, 44, 0.38);32- --accent: var(--cerulean);33- --accent-ink: #f9ebe0;34- --accent-wash: rgba(32, 138, 174, 0.11);35- --accent-wash-strong: rgba(32, 138, 174, 0.2);36- --data: var(--navy);37- --map-surround: var(--navy);38- --hover: rgba(96, 73, 44, 0.08);39- --shadow: 0 10px 30px rgba(13, 33, 73, 0.18);40- --shadow-soft: 0 2px 10px rgba(13, 33, 73, 0.1);41- --scrim: rgba(249, 235, 224, 0.86);42-}4322 :root[data-theme="night"] {4423 color-scheme: dark;45- --bg: #081530;46- --panel: var(--navy);47- --panel-raised: #16305e;48- --ink: var(--linen);49- --ink-strong: #fdf7ef;50- --muted: rgba(249, 235, 224, 0.6);51- --line: rgba(249, 235, 224, 0.14);52- --line-strong: rgba(249, 235, 224, 0.28);53- --accent: #35a9cf;54- --accent-ink: #081530;55- --accent-wash: rgba(53, 169, 207, 0.14);56- --accent-wash-strong: rgba(53, 169, 207, 0.26);57- --data: #8fd6ee;58- --map-surround: #050e21;59- --hover: rgba(249, 235, 224, 0.07);24+ --bg: #121417;25+ --panel: #17191d;26+ --panel-raised: #1e2126;27+ --ink: #ece5d8;28+ --ink-strong: #f9ebe0;29+ --muted: rgba(236, 229, 216, 0.55);30+ --line: rgba(236, 229, 216, 0.1);31+ --line-strong: rgba(236, 229, 216, 0.22);32+ --accent: #3aa5c9;33+ --accent-ink: #0c1216;34+ --accent-wash: rgba(32, 138, 174, 0.13);35+ --accent-wash-strong: rgba(32, 138, 174, 0.24);36+ --data: #7fc5de;37+ --map-surround: #0d1626;38+ --hover: rgba(236, 229, 216, 0.06);6039 --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);6140 --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);62- --scrim: rgba(13, 33, 73, 0.82);41+ --scrim: rgba(23, 25, 29, 0.85);42+ --warm: #8a6a44;43+ --warm-strong: #b08a5a;6344 }6445 * { margin: 0; padding: 0; box-sizing: border-box; }6546 body { background: #202020; color: var(--ink); }@@ -207,7 +188,7 @@ body { background: #202020; color: var(--ink); }
207188 .row.dim { opacity: 0.45; }208189 .zone-row { display: flex; gap: 9px; padding: 4.5px 20px 4.5px 30px; font-size: 12.5px; align-items: center; }209190 .zone-row:hover { background: var(--hover); }210-.zone-row .zm { width: 9px; height: 9px; border: 2px solid var(--umber); border-radius: 2.5px; flex: none; }191+.zone-row .zm { width: 9px; height: 9px; border: 2px solid var(--warm); border-radius: 2.5px; flex: none; }211192 .zone-row.current { color: var(--ink-strong); font-weight: 700; }212193 .zone-row.current .zm { background: var(--accent); border-color: var(--accent); }213194 .sidebar-footer {@@ -349,10 +330,6 @@ body { background: #202020; color: var(--ink); }
349330 350331 <div class="mock-bar">351332 <strong>ATLAS IDENTITY MOCKUP</strong>352- <span class="set">theme353- <button data-set-theme="paper" class="on">paper</button>354- <button data-set-theme="night">night</button>355- </span>356333 <span class="set">dock357334 <button data-set-dock="list" class="on">results</button>358335 <button data-set-dock="detail">detail</button>@@ -558,12 +535,6 @@ body { background: #202020; color: var(--ink); }
558535 559536 <script>560537 const root = document.documentElement;561-for (const button of document.querySelectorAll("[data-set-theme]")) {562- button.addEventListener("click", () => {563- root.dataset.theme = button.dataset.setTheme;564- sync("data-set-theme", button);565- });566-}567538 for (const button of document.querySelectorAll("[data-set-dock]")) {568539 button.addEventListener("click", () => {569540 root.dataset.dock = button.dataset.setDock;