From e4b1d6cb572a4f6609623255025f3e5e766bff7f Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Thu, 11 Jun 2026 11:01:00 +0200
Subject: [PATCH] style(frontend): tint canvas light to #f3f5f8 for
 cards-on-canvas contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Canvas and paper were both #ffffff in light mode — cards only separated
by a 1px hairline, causing eye fatigue. Tints the canvas token to a
very pale cool neutral (#f3f5f8) so paper cards lift naturally without
shadow or radius, preserving brutalism. Dark mode tokens unchanged.
Updates DESIGN.md Surface section with rationale.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 DESIGN.md                     | 4 ++--
 frontend/src/styles/index.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index f0e843f..a4cd1d0 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -2,7 +2,7 @@
 
 Mimic is a **BAS (Breach and Attack Simulation) purple-team console** — not a product catalog, not a marketing page. The aesthetic is **Bloomberg Terminal / SOC dashboard**: dense, angular, semantic-color-driven, zero ornament. Every surface decision reinforces operational trust: data is primary, chrome is invisible.
 
-The system sits on a **pure-white canvas** (light) / **dark slab** (dark) with one chromatic action color — **Electric Blue** (`{colors.primary}` — `#024ad8`) — and semantic status signals (`success`, `warn`, `bloom-deep`). Inter handles body/headers/labels. JetBrains Mono carries data: IDs, ISO dates, commands, execution output, MITRE technique codes, metrics — anything that must be read at a glance without typographic distraction.
+The system sits on a **pale-tinted canvas** (light: `#f3f5f8`) / **dark slab** (dark) with one chromatic action color — **Electric Blue** (`{colors.primary}` — `#024ad8`) — and semantic status signals (`success`, `warn`, `bloom-deep`). Inter handles body/headers/labels. JetBrains Mono carries data: IDs, ISO dates, commands, execution output, MITRE technique codes, metrics — anything that must be read at a glance without typographic distraction.
 
 **No rounded corners on containers.** No shadows on interactive surfaces. No transitions. Hover is instantaneous. Focus rings are sharp. This is a tool, not a storefront.
 
@@ -25,7 +25,7 @@ The system sits on a **pure-white canvas** (light) / **dark slab** (dark) with o
 - **Soft Blue** (`{colors.primary-soft}` — `#c9e0fc`): selection highlight, chip background on light surfaces.
 
 ### Surface
-- **Canvas** (`{colors.canvas}` — `#ffffff` light / `#111827` dark): universal page background.
+- **Canvas** (`{colors.canvas}` — `#f3f5f8` light / `#111827` dark): universal page background. In light mode, canvas is tinted while paper stays pure white so cards lift without shadow or radius, preserving brutalism.
 - **Paper** (`{colors.paper}` — `#ffffff` light / `#1f2937` dark): card and panel surfaces.
 - **Cloud** (`{colors.cloud}` — `#f7f7f7` light / `#1f2937` dark): alternating section band, table row zebra.
 - **Fog** (`{colors.fog}` — `#e8e8e8` light / `#374151` dark): secondary section band, input background on dense panels.
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 58c3201..8c7b74d 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -7,7 +7,7 @@
 @layer base {
   /* Light mode — default */
   :root {
-    --color-canvas: #ffffff;
+    --color-canvas: #f3f5f8;
     --color-paper: #ffffff;
     --color-cloud: #f7f7f7;
     --color-fog: #e8e8e8;