Design Audit Findings Summary of design audit findings and remediation status
Danvas undergoes periodic design audits to ensure compliance with the Precision Ops v2 "Midnight Kitchen" design system. This page tracks findings, their impact, and remediation status.
Latest Audit Date: 2026-05-20Design System: DESIGN.md (Precision Ops v2)Baseline Scores: Design Score B | AI Slop Score A–
Finding Impact Category Status Priority FINDING-001 High Interaction States 🔧 Fixed P0 FINDING-002 High Color & Contrast 🔧 Fixed P0 FINDING-003 High Accessibility 🔧 Fixed P0 FINDING-004 Medium Design Tokens ⏳ Deferred P2 FINDING-005 Medium Design Spec ✅ Complete P1 FINDING-006 Medium Semantic Colors ✅ Complete P1 FINDING-007 Medium Component Quality ✅ Complete P1 FINDING-008 Polish Component Consistency ✅ Complete P3 FINDING-009 Polish Design Tokens ✅ Complete
FINDING-010 Polish Typography ✅ Complete P3
Impact: HighCategory: Interaction StatesFile: apps/app/src/app/layout.tsx, packages/design-system/components/cookie-banner.tsx
Problem: Cookie banner fired before PostHogAuthConsent on every authenticated session, causing GDPR banner to appear to internal staff on every load.
Root Cause: CookieBanner lived in root layout as sibling to <Suspense>, firing its useEffect before PostHogAuthConsent resolved.
Fix: Moved <CookieBanner /> from root layout into authenticated layout, rendered after <PostHogAuthConsent />.
Status: ✅ FixedCommit: Deployed to main (cookie banner moved to authenticated layout)
Impact: HighCategory: Color & Contrast / Design Token ComplianceFile: apps/app/src/app/(authenticated)/components/dashboard/pulse-header.tsx
Problem: Component used hardcoded colors (#FFB000, #00FF41, #00D1FF) and a hardcoded $783.07 value.
Replaced #FFB000 → text-ember for live sales figures
Replaced #00FF41 → text-success
Replaced #00D1FF → text-primary
Replaced bg-zinc-900/50 ring-white/5 → bg-card border-border
Connected hardcoded value to real data source
Status: ✅ FixedCommit: Deployed to main (hardcoded colors replaced with design tokens)
Impact: HighCategory: Responsive Design / AccessibilityFile: packages/design-system/components/ui/sidebar.tsx
Problem: Sidebar nav items were 32px tall (h-8), below the 44px PWA minimum.
Fix: Changed SidebarMenuButton from h-8 to h-11 (44px).
Status: ✅ FixedCommit: 547985a4 — sidebar nav items changed from h-8 to min-h-[44px], confirmed active in latest sidebar redesign (85418b2)
Impact: MediumCategory: Design Token ComplianceFiles: incidents/incidents-list-client.tsx (50 occurrences), incidents/[id]/page.tsx (30 occurrences)
Problem: Incidents pages used 80+ inline style objects with hardcoded values:
Fix: Convert to Tailwind utility classes. This is a large change deferred for atomic commit.
Status: ⏳ DeferredReason: Too large for single commit; requires careful regression testing
Impact: MediumCategory: Color & Design Spec ComplianceFile: apps/app/src/app/(authenticated)/incidents/incidents-list-client.tsx
Problem: Open incidents had no visual distinction (no left border) compared to resolved incidents.
Fix: Added border-l-2 with conditional ember/success coloring matching the pattern in incidents-list.tsx.
Status: ✅ CompleteCommit: See incident workflow updates
Impact: MediumCategory: Color / Semantic TokensFiles: reports/reports-list.tsx, reports/manager/page.tsx, reports/manager/[id]/page.tsx
Problem: "Submitted" and "published" badges rendered in primary blue instead of success green, incorrectly signaling "in-progress" instead of "complete".
Fix: Changed badge variant from "default" (blue) to success green chip pattern: bg-success/12 text-success border-success/25.
Status: ✅ CompleteCommit: See reports documentation
Impact: MediumCategory: AI Slop / Content QualityFiles: Multiple reports pages
Problem: Star ratings used emoji (⭐.repeat(n)) which are inconsistent across platforms and cannot be styled.
Fix: Created StarRating component using Lucide StarIcon with design token colors (text-ember, text-muted-foreground/30).
Impact: PolishCategory: Component ConsistencyFiles: schedule/page.tsx, schedule/schedule-client.tsx
Problem: Schedule page used raw <a className="inline-flex ..."> instead of <Button> component.
Fix: Replaced with <Button asChild><Link href={...}>...</Link></Button>.
Status: ✅ CompleteCommit: Deployed to main (inline-flex → Button pattern)
Impact: PolishCategory: Design Token ComplianceFile: apps/app/src/app/(authenticated)/board/components/announcement-card.tsx
Problem: Category chips used raw Tailwind semantic colors instead of design system chip pattern.
Fix: Mapped categories to design-system chips using bg-[color]/12 text-[color] border border-[color]/25 pattern.
Impact: PolishCategory: Typography ConsistencyFile: apps/app/src/app/(authenticated)/components/dashboard/dashboard-header.tsx
Problem: Dashboard H1 used text-2xl (24px) instead of text-3xl (30px) used on all other pages.
Fix: Changed text-lg md:text-2xl → text-2xl md:text-3xl.
Status: ✅ CompleteCommit: Deployed to main (H1 restored to 30px)
The goodwill score measures user experience quality:
Start: 70/100 Dashboard load → cookie banner on every visit 70 → 55 (-15) Location truncation (can't see full name) 55 → 50 (-5) Reports page → clean, fast, clear action 50 → 60 (+10) Incidents → no ember signal on open incidents 60 → 55 (-5) Draft schedule → no path forward for admin 55 → 50 (-5) FINAL: 50/100 — Needs work (functional but has friction) Primary drain: Cookie banner appearing on every authenticated visit. Removing this single issue jumps the score to ~65.
"1px solid #2A2F3D"
// should be border-b border-border
style = {{ fontFamily : "var(--font-display)" , fontSize : 22 }} // should be className