From 343fdd6e3d52e8643d6afee01699549ae3752297 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Mon, 27 Apr 2026 15:32:48 +0200
Subject: [PATCH] fix(sidebar): home tile uses brand lavender, not neutral grey
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Translucent white over the cool-dark sidebar reads as muddy grey;
that's the same root cause as the earlier #1d1d1b warm-grey complaint.
Any unsaturated tint loses against the dark sidebar bg.

Switching the home tile to accent-lavender (RGB 196,181,253 — the
endpoint of the mark's gradient) breaks the grey because saturation
defeats the grey-on-grey muddiness. Lavender also (a) complements
the gradient mark sitting on top, (b) parallels Discord's brand-
coloured home button pattern, and (c) gives the sidebar a clear
semantic colour hierarchy: action = mint, home = lavender (brand),
spaces = user-defined.

Three states escalate by alpha (0.08 / 0.16 / 0.28) so corner-morph
and fill-brightness both signal interaction.
---
 .../src/components/layout/SpaceSidebar.tsx    | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/layout/SpaceSidebar.tsx b/packages/web/src/components/layout/SpaceSidebar.tsx
index a843cd24..c2eb464a 100644
--- a/packages/web/src/components/layout/SpaceSidebar.tsx
+++ b/packages/web/src/components/layout/SpaceSidebar.tsx
@@ -79,17 +79,20 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe
     }
 
     if (type === 'dm') {
-      // Home tile uses a translucent white surface so the squircle→square
-      // corner-radius transition has something visible to morph. The bare
-      // mark in logo.png is centred with internal padding (transparent
-      // outside ~75% scale), so without a button background there is no
-      // visible hover/active feedback at all.
+      // Home tile uses brand-tinted lavender (the endpoint of the mark's
+      // gradient — see assets/brand/mark.svg) so the bg is on-brand and
+      // visibly NOT grey against the cool-dark sidebar (any neutral tint
+      // reads as muddy grey-on-dark; only saturation breaks the grey).
+      // Discord's home button uses brand blurple the same way; ours uses
+      // accent-lavender. The bare mark in logo.png sits at 75% scale on
+      // transparent so the lavender tile is the visible frame, escalating
+      // at rest → hover → active for clear interaction feedback.
       return {
         background: active
-          ? 'rgba(255, 255, 255, 0.10)'
+          ? 'rgba(196, 181, 253, 0.28)'
           : isHovered
-            ? 'rgba(255, 255, 255, 0.07)'
-            : 'rgba(255, 255, 255, 0.04)',
+            ? 'rgba(196, 181, 253, 0.16)'
+            : 'rgba(196, 181, 253, 0.08)',
       };
     }