# Figma Validation Report (2026-02-21)

## Figma vs Build Validation — 2026-02-21

### Critical Fix: Sidebar Dark → White

<table id="bkmrk-elementbefore-%28bug%29a"><tr><th>Element</th><th>Before (BUG)</th><th>After (FIXED)</th><th>Figma</th></tr><tr><td>Sidebar background</td><td>\#111113 (black)</td><td>\#FFFFFF (white)</td><td>\#FFFFFF</td></tr><tr><td>Sidebar text</td><td>\#FAFAFA (white)</td><td>\#111113 (dark)</td><td>\#111113</td></tr><tr><td>Sidebar hover</td><td>\#1F1F23 (dark)</td><td>\#F5F5F5 (light)</td><td>light</td></tr><tr><td>Active nav state</td><td>Solid #00E5A0 + white text</td><td>Light mint #E6FFF8 + green text</td><td>Light mint + green</td></tr><tr><td>Hamburger menu</td><td>Hidden on desktop</td><td>Visible always</td><td>Visible</td></tr><tr><td>Notification bell</td><td>Present</td><td>Removed</td><td>Not in design</td></tr><tr><td>Logo</td><td>CSS box with 'B' text</td><td>Sharp B SVG from Figma</td><td>Sharp B geometric</td></tr></table>

### Root Cause

`globals.css` `@theme` block had inverted sidebar colors (dark mode values). Tailwind CSS v4 prioritizes `@theme` over `tailwind.config.ts`, so the correct tokens in config were overridden by wrong values in CSS.

### Files Changed

- `apps/web/app/globals.css` — sidebar color tokens fixed
- `apps/web/components/sidebar.tsx` — active state + logo SVG
- `apps/web/components/top-bar.tsx` — hamburger visible, bell removed
- `apps/web/public/logo-icon.svg` — Sharp B logo extracted from Figma

### Pages Validated

<table id="bkmrk-pageroutesidebarcont"><tr><th>Page</th><th>Route</th><th>Sidebar</th><th>Content Match</th></tr><tr><td>Dashboard</td><td>/dashboard</td><td>✓ White</td><td>✓ Structure matches</td></tr><tr><td>Sales/Invoices</td><td>/invoices</td><td>✓ White</td><td>✓ Build AHEAD (filters, actions)</td></tr><tr><td>VAT Return</td><td>/reports/vat</td><td>✓ White</td><td>✓ Matches (minor: decimals)</td></tr><tr><td>Reports Hub</td><td>/reports</td><td>✓ White</td><td>✓ Build AHEAD (P&amp;L detail)</td></tr><tr><td>Add Expense</td><td>/expenses/new</td><td>✓ White</td><td>✓ Matches</td></tr><tr><td>Purchases</td><td>/purchases</td><td>✓ White</td><td>✓ Build AHEAD (full table)</td></tr><tr><td>Banking</td><td>/banking</td><td>✓ White</td><td>✓ Build AHEAD (accounts)</td></tr><tr><td>Settings</td><td>/settings</td><td>✓ White</td><td>✓ Build AHEAD (full form)</td></tr></table>

### Remaining Minor Differences

- ⌘K badge style (Figma: separate badges, Build: inline text)
- Nav icons differ slightly (Figma uses different icon set than Lucide)
- Settings bottom has N avatar in build, gear icon in Figma
- Invoice # format, status badge style, date format — content differences

### Build Status

✓ 0 errors, 12/12 pages compiled, Next.js 15.5.12