Skip to content

chore: Add design system audit report (#6606)#6806

Draft
talissoncosta wants to merge 1 commit intomainfrom
chore/design-system-audit-6606
Draft

chore: Add design system audit report (#6606)#6806
talissoncosta wants to merge 1 commit intomainfrom
chore/design-system-audit-6606

Conversation

@talissoncosta
Copy link
Contributor

Summary

  • Adds frontend/DESIGN_SYSTEM_AUDIT.md — a comprehensive code-first audit of the frontend design system
  • Adds frontend/DESIGN_SYSTEM_AUDIT_PLAN.md — the plan document for the audit approach
  • No code changes — report only

The audit identifies 85 findings (21 P0, 34 P1, 30 P2) across 7 areas:

Area P0 P1 P2
Colours 10 11 6
Typography 2 10 8
Spacing 0 10 7
Buttons 3 2 3
Form inputs 1 3 4
Icons 4 2 1
Notifications 3 2 2

Plus a component inventory covering 11 UI pattern categories (modals, dropdowns, selects, toasts, tables, tabs, buttons, icons, empty states, tooltips, layout).

Top 5 fixes by impact:

  1. Icon.tsx default fills — ~60 icons invisible in dark mode
  2. Feature pipeline status — broken in dark mode
  3. Chart components — hardcoded light-mode colours
  4. Button variants missing dark mode (btn-tertiary, btn-danger, btn--transparent)
  5. Toast notifications — no dark mode styles

Closes #6606

Test plan

  • Review the audit report for accuracy
  • Verify file paths and line numbers are correct
  • Confirm severity classifications are appropriate

🤖 Generated with Claude Code

Scan the frontend codebase for design token misuse, dark mode gaps,
and component fragmentation. Produces a structured report with 85
findings across 7 areas (colours, typography, spacing, buttons, forms,
icons, notifications) and a component inventory covering 11 categories.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@talissoncosta talissoncosta requested a review from a team as a code owner February 28, 2026 02:59
@talissoncosta talissoncosta requested review from kyle-ssg and removed request for a team February 28, 2026 02:59
@vercel
Copy link

vercel bot commented Feb 28, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Building Building Preview, Comment Feb 28, 2026 2:59am
flagsmith-frontend-staging Building Building Preview, Comment Feb 28, 2026 2:59am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Feb 28, 2026 2:59am

Request Review

@github-actions github-actions bot added front-end Issue related to the React Front End Dashboard chore labels Feb 28, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Feb 28, 2026

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-6806 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-6806 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-6806 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-private-cloud:pr-6806 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-frontend:pr-6806 Finished ✅ Results

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

chore front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Audit frontend UI against design system (Figma)

1 participant