Design & Brand
Figma designs, logo, tokens, validation

Figma Validation Report (2026-02-21)
Figma vs Build Validation — 2026-02-21 

 Critical Fix: Sidebar Dark → White 
 
 Element Before (BUG) After (FIXED) Figma 
 Sidebar background #111113 (black) #FFFFFF (white) #FFFFFF 
 Sidebar text #FAFAFA (white) #111113 (dark) #111113 
 Sidebar hover #1F1F23 (dark) #F5F5F5 (light) light 
 Active nav state Solid #00E5A0 + white text Light mint #E6FFF8 + green text Light mint + green 
 Hamburger menu Hidden on desktop Visible always Visible 
 Notification bell Present Removed Not in design 
 Logo CSS box with 'B' text Sharp B SVG from Figma Sharp B geometric 
 

 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 
 
 Page Route Sidebar Content Match 
 Dashboard /dashboard ✓ White ✓ Structure matches 
 Sales/Invoices /invoices ✓ White ✓ Build AHEAD (filters, actions) 
 VAT Return /reports/vat ✓ White ✓ Matches (minor: decimals) 
 Reports Hub /reports ✓ White ✓ Build AHEAD (P&L detail) 
 Add Expense /expenses/new ✓ White ✓ Matches 
 Purchases /purchases ✓ White ✓ Build AHEAD (full table) 
 Banking /banking ✓ White ✓ Build AHEAD (accounts) 
 Settings /settings ✓ White ✓ Build AHEAD (full form) 
 

 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