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