Design Audit Findings

OverviewCopy Anchor Link

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-20
Design System: DESIGN.md (Precision Ops v2)
Baseline Scores: Design Score B | AI Slop Score A–

Audit SummaryCopy Anchor Link

Findings DetailCopy Anchor Link

FINDING-001 — Cookie Banner Race ConditionCopy Anchor Link

Impact: High
Category: Interaction States
File: 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: ✅ Fixed
Commit: Deployed to main (cookie banner moved to authenticated layout)

FINDING-002 — Hardcoded Colors in Pulse HeaderCopy Anchor Link

Impact: High
Category: Color & Contrast / Design Token Compliance
File: apps/app/src/app/(authenticated)/components/dashboard/pulse-header.tsx

Problem: Component used hardcoded colors (#FFB000, #00FF41, #00D1FF) and a hardcoded $783.07 value.

Fix:

• 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: ✅ Fixed
Commit: Deployed to main (hardcoded colors replaced with design tokens)

FINDING-003 — Sidebar Touch Targets Below 44pxCopy Anchor Link

Impact: High
Category: Responsive Design / Accessibility
File: 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: ✅ Fixed
Commit: 547985a4 — sidebar nav items changed from h-8 to min-h-[44px], confirmed active in latest sidebar redesign (85418b2)

FINDING-004 — Incidents Pages Use Inline StylesCopy Anchor Link

Impact: Medium
Category: Design Token Compliance
Files: incidents/incidents-list-client.tsx (50 occurrences), incidents/[id]/page.tsx (30 occurrences)

Problem: Incidents pages used 80+ inline style objects with hardcoded values:

borderBottom: "1px solid #2A2F3D" // should be border-b border-border
style={{ fontFamily: "var(--font-display)", fontSize: 22 }} // should be className

Fix: Convert to Tailwind utility classes. This is a large change deferred for atomic commit.

Status: ⏳ Deferred
Reason: Too large for single commit; requires careful regression testing

FINDING-005 — Missing Ember Left Border on IncidentsCopy Anchor Link

Impact: Medium
Category: Color & Design Spec Compliance
File: 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: ✅ Complete
Commit: See incident workflow updates

FINDING-006 — Submitted/Published Badges Wrong ColorCopy Anchor Link

Impact: Medium
Category: Color / Semantic Tokens
Files: 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: ✅ Complete
Commit: See reports documentation

FINDING-007 — Emoji Star RatingsCopy Anchor Link

Impact: Medium
Category: AI Slop / Content Quality
Files: 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).

Status: ✅ Complete
Commit: See Components documentation

FINDING-008 — Schedule CTAs Use Raw Inline-FlexCopy Anchor Link

Impact: Polish
Category: Component Consistency
Files: 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: ✅ Complete
Commit: Deployed to main (inline-flex → Button pattern)

FINDING-009 — Announcement Category Chips Use Raw TailwindCopy Anchor Link

Impact: Polish
Category: Design Token Compliance
File: 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.

Status: ✅ Complete
Commit: See Messages documentation

FINDING-010 — Dashboard H1 UndersizedCopy Anchor Link

Impact: Polish
Category: Typography Consistency
File: 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: ✅ Complete
Commit: Deployed to main (H1 restored to 30px)

Goodwill ScoreCopy Anchor Link

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.

RelatedCopy Anchor Link