Align the platform look and feel with the devplace.net terminal design

Retheme every token in variables.css to the terminal design language:
near-black surfaces (#0a0a0f/#111118/#1a1a24), terminal green accent
(#22c55e) with dark on-accent text, gray text ramp, #222233 borders,
sharp 4-8px radii, neutral depth shadows, and JetBrains Mono as the
primary UI font (vendored latin woff2, no CDN).

Follow-through outside the token file: white-on-accent buttons/tabs now
use the new --on-accent token for contrast, three var() fallback
violations shipping the old palette are gone, the dead --bg-hover token
is replaced with --bg-card-hover, avatar fallback SVG, statistics chart
palette, chat light-theme overrides, offline page, PWA manifest,
theme-color meta, OG image + app icons regenerated in the new palette,
and the /docs/styles-colors style guide now documents the new values.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

devplacepy/static/css/admin.css

@@ -205,14 +205,14 @@
 }
 
 .admin-btn-primary {
-    background: var(--accent, var(--info));
-    color: var(--white);
+    background: var(--accent);
+    color: var(--on-accent);
     border-color: transparent;
 }
 
 .admin-btn-primary:hover {
-    background: var(--accent-hover, var(--accent));
-    color: var(--white);
+    background: var(--accent-hover);
+    color: var(--on-accent);
 }
 
 .admin-btn-danger {
@@ -399,7 +399,7 @@
 
 .pagination-btn:hover {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     border-color: var(--accent);
     text-decoration: none;
 }
@@ -443,12 +443,12 @@
 
 .pagination-page-active {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
 }
 
 .pagination-page-active:hover {
     background: var(--accent-hover);
-    color: var(--white);
+    color: var(--on-accent);
 }
 
 .pagination-ellipsis {

devplacepy/static/css/auth.css

@@ -117,7 +117,7 @@
     font-size: 1rem;
     font-weight: 700;
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     border-radius: var(--radius);
 }
 

devplacepy/static/css/base.css

@@ -445,8 +445,8 @@ img {
 
 .btn-primary {
     background: var(--accent-gradient);
-    color: var(--white);
-    box-shadow: 0 2px 12px rgba(255, 95, 70, 0.3);
+    color: var(--on-accent);
+    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
 }
 
 .btn-primary:hover {
@@ -554,7 +554,7 @@ img {
     justify-content: center;
     font-weight: 700;
     font-size: 1rem;
-    color: var(--white);
+    color: var(--on-accent);
     flex-shrink: 0;
     overflow: hidden;
 }
@@ -589,7 +589,7 @@ img {
     pointer-events: none;
 }
 
-.presence-dot.online { background: var(--success, #2f9e44); }
+.presence-dot.online { background: var(--success); }
 
 .award-badge {
     position: absolute;
@@ -650,7 +650,7 @@ img {
 .nav-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
 .nav-badge {
     position: absolute; top: -6px; right: -8px; z-index: 1; min-width: 16px; height: 16px;
-    padding: 0 0.25rem; border-radius: 8px; background: var(--accent); color: var(--white);
+    padding: 0 0.25rem; border-radius: 8px; background: var(--accent); color: var(--on-accent);
     font-size: 0.6875rem; font-weight: 700;
     display: flex; align-items: center; justify-content: center;
 }
@@ -884,7 +884,7 @@ img {
 button.comment-form-submit {
     padding: 0.375rem 0.5rem;
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     font-weight: 600;
     font-size: 0.8125rem;
     line-height: 1.4;

devplacepy/static/css/chat.css

@@ -232,7 +232,7 @@ dp-chat[mode="embed"] {
 .message-bubble.mine {
     align-self: flex-end;
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     border-bottom-right-radius: 4px;
 }
 
@@ -429,7 +429,7 @@ dp-chat[mode="embed"] {
     height: 36px;
     padding: 0;
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     border-radius: 50%;
     display: flex;
     align-items: center;

devplacepy/static/css/containers.css

@@ -209,7 +209,7 @@
 
 .cm-suggest li:hover,
 .cm-suggest li.cm-suggest-active {
-    background: var(--bg-hover, var(--border));
+    background: var(--bg-card-hover);
 }
 
 .cm-suggest li.cm-suggest-active {

devplacepy/static/css/deepsearch.css

@@ -241,7 +241,7 @@
 .ds-phase.is-done .ds-phase-dot {
     background: var(--accent);
     border-color: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
 }
 
 .ds-phase.is-done .ds-phase-name {
@@ -546,7 +546,7 @@ dp-deepsearch-chat {
 
 .ds-chat-msg.user .ds-chat-bubble {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
 }
 
 .ds-chat-msg.agent .ds-chat-bubble {
@@ -597,7 +597,7 @@ dp-deepsearch-chat {
 
 .ds-chat-send {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     border: none;
     border-radius: var(--radius-input);
     padding: 0 var(--space-md);

devplacepy/static/css/docs-chat.css

@@ -292,7 +292,7 @@ dp-docs-chat {
 
 .docs-chat-send {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     border: none;
     border-radius: var(--radius);
     padding: 0.625rem 1.25rem;

devplacepy/static/css/docs.css

@@ -431,7 +431,7 @@ textarea.param-input {
 
 .format-option.active {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
 }
 
 .format-fixed {
@@ -621,7 +621,7 @@ pre.code-pre > .code-gutter {
 
 .docs-search-snippet mark {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     padding: 0 0.125rem;
     border-radius: 3px;
 }

devplacepy/static/css/feed.css

@@ -39,7 +39,7 @@
 
 .feed-nav-btn.active {
     background: var(--accent-gradient);
-    color: var(--white);
+    color: var(--on-accent);
     box-shadow: var(--glow-accent);
 }
 
@@ -285,7 +285,7 @@
     min-width: 1.25rem;
     padding: 0 0.375rem;
     border-radius: 999px;
-    background: var(--success, #2f9e44);
+    background: var(--success);
     color: var(--white);
     font-size: 0.6875rem;
     text-align: center;
@@ -369,7 +369,7 @@
     height: 64px;
     border-radius: 50%;
     background: var(--accent-gradient);
-    color: var(--white);
+    color: var(--on-accent);
     font-size: 2rem;
     line-height: 1;
     display: flex;

devplacepy/static/css/issues.css

@@ -35,11 +35,11 @@
     text-decoration: none;
 }
 .issues-filter:hover {
-    background: var(--bg-hover);
+    background: var(--bg-card-hover);
 }
 .issues-filter.active {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     border-color: var(--accent);
 }
 .issues-modal-hint {

devplacepy/static/css/landing.css

@@ -70,7 +70,7 @@
 
 .dashboard-btn-primary {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     border-color: var(--accent);
     font-weight: 700;
     padding: 0.55rem 1.5rem;
@@ -123,7 +123,7 @@
 
 .dashboard-xp-fill {
     height: 100%;
-    background: var(--accent-gradient, linear-gradient(90deg, var(--accent), #f0932b));
+    background: var(--accent-gradient);
     border-radius: 3px;
     transition: width 0.4s ease;
 }
@@ -466,7 +466,7 @@
     font-size: 1.125rem;
     border-radius: var(--radius-lg);
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     font-weight: 700;
 }
 
@@ -567,7 +567,7 @@
     padding: 0.7rem 2rem;
     border-radius: var(--radius-lg);
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     font-size: 0.9375rem;
     font-weight: 700;
 }
@@ -637,7 +637,7 @@
 
 .landing-xp-fill {
     height: 100%;
-    background: var(--accent-gradient, linear-gradient(90deg, var(--accent), #f0932b));
+    background: var(--accent-gradient);
     border-radius: 3px;
     transition: width 0.4s ease;
 }
@@ -970,7 +970,7 @@
     margin-top: auto;
     align-self: flex-start;
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     border: none;
     border-radius: var(--radius-lg);
     padding: 0.6rem 1.1rem;
@@ -1105,7 +1105,7 @@
     font-size: 1.05rem;
     border-radius: var(--radius-lg);
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     font-weight: 700;
     text-decoration: none;
     transition: filter 0.15s ease, transform 0.15s ease;

devplacepy/static/css/news.css

@@ -257,7 +257,7 @@
     font-size: 0.875rem;
     font-weight: 600;
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     border-radius: var(--radius);
 }
 

devplacepy/static/css/profile.css

@@ -49,7 +49,7 @@
 }
 
 .profile-presence.online {
-    color: var(--success, #2f9e44);
+    color: var(--success);
 }
 
 .profile-presence::before {
@@ -64,7 +64,7 @@
 }
 
 .profile-presence.online::before {
-    background: var(--success, #2f9e44);
+    background: var(--success);
 }
 
 .profile-stats {
@@ -231,7 +231,7 @@ a.profile-stat-value:hover {
 
 .profile-tab.active {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
 }
 
 .profile-posts {
@@ -464,7 +464,7 @@ a.profile-stat-value:hover {
 }
 
 .ai-correction-status[data-state="success"] {
-    color: var(--success, #2f9e44);
+    color: var(--success);
 }
 
 .ai-correction-status[data-state="error"] {

devplacepy/static/css/project_files.css

@@ -100,7 +100,7 @@
 
 .pf-node-row.active {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
 }
 
 .pf-node-row.pf-selected {
@@ -110,7 +110,7 @@
 
 .pf-node-row.pf-selected.active {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
 }
 
 .pf-node-row.pf-dragging {

devplacepy/static/css/projects.css

@@ -28,7 +28,7 @@
 
 .projects-tab.active {
     background: var(--accent-gradient);
-    color: var(--white);
+    color: var(--on-accent);
     box-shadow: var(--glow-accent);
 }
 

devplacepy/static/css/sidebar.css

@@ -77,7 +77,7 @@
 .sidebar-link.active,
 .sidebar-link.active:hover {
     background: var(--accent-gradient);
-    color: var(--white);
+    color: var(--on-accent);
     font-weight: 600;
     box-shadow: var(--glow-accent);
 }

devplacepy/static/css/variables.css

@@ -1,41 +1,42 @@
 /* retoor <retoor@molodetz.nl> */
 
 :root {
-    --bg-primary: #080413;
-    --bg-secondary: #120821;
-    --bg-card: #1a1030;
-    --bg-card-hover: #241640;
-    --bg-input: #140b26;
-    --bg-modal: #1a1030;
+    --bg-primary: #0a0a0f;
+    --bg-secondary: #111118;
+    --bg-card: #111118;
+    --bg-card-hover: #1a1a24;
+    --bg-input: #0a0a0f;
+    --bg-modal: #111118;
 
-    --accent: #ff6b35;
-    --accent-rgb: 255, 107, 53;
-    --accent-hover: #ff7d4d;
-    --accent-light: rgba(255, 107, 53, 0.12);
-    --accent-2: #ff4f8b;
-    --accent-gradient: linear-gradient(135deg, #ff6b3d, #ff4f6d);
+    --accent: #22c55e;
+    --accent-rgb: 34, 197, 94;
+    --accent-hover: #16a34a;
+    --accent-light: rgba(34, 197, 94, 0.12);
+    --accent-2: #4ade80;
+    --accent-gradient: linear-gradient(135deg, #22c55e, #16a34a);
+    --on-accent: #052e16;
 
-    --text-primary: #f4eefb;
-    --text-secondary: #b8a8d0;
-    --text-muted: #7a6a90;
+    --text-primary: #c8c8d0;
+    --text-secondary: #8b8b9e;
+    --text-muted: #6b6b80;
 
-    --border: rgba(255, 255, 255, 0.08);
-    --border-light: rgba(255, 255, 255, 0.14);
+    --border: #222233;
+    --border-light: #2e2e40;
 
-    --success: #4caf50;
-    --warning: #ff9800;
-    --danger: #e53935;
-    --info: #42a5f5;
+    --success: #22c55e;
+    --warning: #eab308;
+    --danger: #ef4444;
+    --info: #60a5fa;
 
-    --radius: 12px;
-    --radius-input: 14px;
-    --radius-lg: 18px;
-    --radius-xl: 24px;
+    --radius: 4px;
+    --radius-input: 4px;
+    --radius-lg: 6px;
+    --radius-xl: 8px;
 
-    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
-    --shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
-    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
-    --glow-accent: 0 6px 24px rgba(255, 95, 70, 0.45);
+    --shadow-sm: 0 0 0 1px rgba(34, 34, 51, 0.8);
+    --shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
+    --glow-accent: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
 
     --white: #fff;
     --overlay-dark: rgba(0, 0, 0, 0.7);
@@ -48,8 +49,8 @@
     --space-xl: 1.5rem;
     --space-2xl: 2rem;
 
-    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    --font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;
+    --font-sans: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
+    --font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
 
     --nav-height: 56px;
     --sidebar-width: 240px;
@@ -76,5 +77,5 @@
     --topic-fun: #ffab00;
     --topic-politics: #00bcd4;
 
-    --bg-gradient: linear-gradient(135deg, #080413 0%, #160a28 50%, #080413 100%);
+    --bg-gradient: linear-gradient(135deg, #0a0a0f 0%, #111118 50%, #0a0a0f 100%);
 }

devplacepy/static/js/StatisticsCharts.js

@@ -1,14 +1,14 @@
 // retoor <retoor@molodetz.nl>
 
 const CHART_COLORS = [
-    "#ff6b35",
+    "#22c55e",
     "#7c4dff",
     "#00bfa5",
     "#448aff",
     "#ffab00",
     "#ff5252",
     "#42a5f5",
-    "#ff4f8b",
+    "#4ade80",
 ];
 
 export class StatisticsCharts {

devplacepy/static/js/components/AppChat.js

@@ -24,15 +24,15 @@ const SEARCH_DEBOUNCE_MS = 200;
 const AUTO_GROW_MAX_HEIGHT_PX = 160;
 
 const LIGHT_THEME_OVERRIDES = {
-    "--bg-primary": "#f5f3fa",
+    "--bg-primary": "#f1f5f9",
     "--bg-secondary": "#ffffff",
     "--bg-card": "#ffffff",
-    "--bg-card-hover": "#f0edf7",
-    "--text-primary": "#1a1030",
-    "--text-secondary": "#4a3f5c",
-    "--text-muted": "#8b7fa0",
-    "--border": "rgba(0, 0, 0, 0.1)",
-    "--border-light": "rgba(0, 0, 0, 0.16)",
+    "--bg-card-hover": "#e2e8f0",
+    "--text-primary": "#0f172a",
+    "--text-secondary": "#475569",
+    "--text-muted": "#64748b",
+    "--border": "#cbd5e1",
+    "--border-light": "#e2e8f0",
 };
 
 export class AppChat extends Component {

devplacepy/static/manifest.json

@@ -9,8 +9,8 @@
     "orientation": "any",
     "lang": "en",
     "dir": "ltr",
-    "background_color": "#0f0a1a",
-    "theme_color": "#0f0a1a",
+    "background_color": "#0a0a0f",
+    "theme_color": "#0a0a0f",
     "icons": [
         {
             "src": "/static/icon-192.png",

devplacepy/static/offline.html

@@ -7,11 +7,11 @@
     <title>Offline - DevPlace</title>
     <style>
         :root {
-            --bg-primary: #0f0a1a;
-            --bg-card: #221436;
-            --accent: #ff6b35;
-            --text-primary: #f0e8f8;
-            --text-muted: #9a8db0;
+            --bg-primary: #0a0a0f;
+            --bg-card: #111118;
+            --accent: #22c55e;
+            --text-primary: #c8c8d0;
+            --text-muted: #6b6b80;
         }
         * { box-sizing: border-box; }
         body {
@@ -22,21 +22,21 @@
             justify-content: center;
             background: var(--bg-primary);
             color: var(--text-primary);
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
             padding: 1.5rem;
         }
         .offline-card {
             max-width: 360px;
             text-align: center;
             background: var(--bg-card);
-            border-radius: 16px;
+            border-radius: 6px;
             padding: 2.5rem 2rem;
         }
         .offline-mark {
             width: 72px;
             height: 72px;
             margin: 0 auto 1.25rem;
-            border-radius: 16px;
+            border-radius: 6px;
             background: var(--accent);
             color: var(--bg-primary);
             font-size: 2.75rem;
@@ -49,7 +49,7 @@
             background: var(--accent);
             color: var(--bg-primary);
             border: none;
-            border-radius: 8px;
+            border-radius: 4px;
             padding: 0.75rem 1.5rem;
             font-size: 1rem;
             font-weight: 600;

devplacepy/static/og-default.svg

@@ -1,13 +1,14 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
-  <rect width="1200" height="630" fill="#0f0a1a"/>
+  <rect width="1200" height="630" fill="#0a0a0f"/>
   <rect x="0" y="0" width="1200" height="630" fill="url(#g)"/>
   <defs>
     <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#ff6b35" stop-opacity="0.15"/>
-      <stop offset="100%" stop-color="#1a1028" stop-opacity="0"/>
+      <stop offset="0%" stop-color="#22c55e" stop-opacity="0.12"/>
+      <stop offset="100%" stop-color="#111118" stop-opacity="0"/>
     </linearGradient>
   </defs>
-  <text x="600" y="280" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="96" font-weight="800" fill="#f0e8f8">DevPlace</text>
-  <text x="600" y="370" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="36" fill="#b8a8d0">The Developer Social Network</text>
-  <circle cx="600" cy="480" r="8" fill="#ff6b35"/>
+  <text x="600" y="300" text-anchor="middle" font-family="'JetBrains Mono', 'SF Mono', Menlo, monospace" font-size="104" font-weight="800" fill="#22c55e">DevPlace</text>
+  <rect x="440" y="334" width="320" height="8" fill="#22c55e"/>
+  <text x="600" y="412" text-anchor="middle" font-family="'JetBrains Mono', 'SF Mono', Menlo, monospace" font-size="34" fill="#8b8b9e">The Developer Social Network</text>
+  <circle cx="600" cy="484" r="8" fill="#22c55e"/>
 </svg>

devplacepy/static/vendor/fonts/jetbrains-mono.css

@@ -0,0 +1,46 @@
+/* JetBrains Mono (latin) - vendored from @fontsource/jetbrains-mono 5.2.5 (SIL OFL 1.1) */
+
+@font-face {
+    font-family: "JetBrains Mono";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src: url(./jetbrains-mono-latin-400-normal.woff2) format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: "JetBrains Mono";
+    font-style: italic;
+    font-display: swap;
+    font-weight: 400;
+    src: url(./jetbrains-mono-latin-400-italic.woff2) format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: "JetBrains Mono";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 500;
+    src: url(./jetbrains-mono-latin-500-normal.woff2) format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: "JetBrains Mono";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 600;
+    src: url(./jetbrains-mono-latin-600-normal.woff2) format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: "JetBrains Mono";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 700;
+    src: url(./jetbrains-mono-latin-700-normal.woff2) format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}