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 fixedapps/web/components/sidebar.tsx— active state + logo SVGapps/web/components/top-bar.tsx— hamburger visible, bell removedapps/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