Design System & Visual Consistency Audit

You are a design systems engineer auditing visual coherence across the application. Your goal is to identify inconsistencies that make the UI feel unpolished and recommend consolidation toward a unified design language.

Methodology: Search the codebase for all unique spacing, typography, color, and border-radius values. Use pattern matching to find hardcoded hex/rgb values, pixel values not on the spacing scale, and inline styles that bypass the design system. Count unique values per category — more than 10-12 unique spacing values or 6-8 unique font sizes signals an uncontrolled system. Compare actual usage against the token source of truth: Tailwind v4 @theme blocks / CSS custom properties (v4 is CSS-first — the JS config often does not exist), legacy tailwind.config.js/ts on v3, or MUI createTheme definitions. Focus on what the code says, not how it renders — flag deviations from design tokens as the primary signal of inconsistency.

Note: This is a parent audit that covers broad consistency. For deeper analysis of specific areas, use the specialized prompts: Color System (#64), Typography (#67), Layout & Spacing (#70), Design Tokens (#65).

Audit the entire frontend for visual inconsistencies in spacing, typography, color, and component patterns.

Spacing & Layout Checklist

• Inconsistent padding/margin values across similar components
• Magic numbers instead of a spacing scale (4px, 8px, 16px, etc.)
• Misaligned elements that should share a grid or baseline
• Inconsistent gap sizes between sections, cards, or list items
• Container max-widths that vary across pages

Typography Checklist

• More than 3-4 font sizes used without a type scale
• Inconsistent font weights for the same semantic level (headings, body, captions)
• Line heights that vary for same-size text
• Hardcoded font sizes instead of theme/design tokens
• Truncation or overflow on long text without ellipsis or wrapping strategy

Color Checklist

• Hardcoded hex/rgb values instead of theme variables or CSS custom properties
• Same semantic meaning using different colors (e.g., "success" is green in one place, blue in another)
• Brand colors used inconsistently across pages
• Text colors that don't meet contrast requirements against their backgrounds
• Hover/focus/active states using inconsistent color shifts

Component Pattern Checklist

• Buttons with different sizes, border-radius, or padding across pages
• Cards or containers with inconsistent shadow, border, and rounding
• Form inputs styled differently across forms
• Duplicate components solving the same problem with different implementations
• Icons from mixed icon sets or inconsistent sizing

Dark Mode / Theming Checklist

• Components with hardcoded light-mode colors that break in dark mode
• Missing dark mode variants for backgrounds, borders, or text
• Images or illustrations without dark mode alternatives
• Shadows that look wrong on dark backgrounds

---

Calibration

• Severity context: A young product with 5 pages has different consistency needs than a mature app with 50 screens. Some inconsistency is expected during rapid development — focus on the patterns that are most visible and most repeated.
• Confidence ratings: Mark each finding as Confirmed (measured the inconsistency in code), Likely (visual inspection suggests variation), or Speculative (may be intentional design variation).
• Anti-hallucination guard: If an area is clean and consistent, say so. Not every codebase needs a full design token system — some are consistent enough with simple CSS variables.

Output Format

Start with a 3-5 line executive summary: overall health of this area, issue count by severity, the single most important finding, and the single biggest strength.

1. Summary: One paragraph assessing overall visual consistency and the category with the most variation.
2. Risk Summary Table: Top findings with columns: Category | Issue | Unique Values Found | Expected Range | Impact.
3. Detailed Analysis: For Critical and High severity issues only — what varies, the dominant pattern, and the consolidation path.
4. Positive Findings: Areas where the design system is already consistent and well-maintained.

For each inconsistency: file:line — what varies, the dominant pattern, specific fix to standardize. Group findings by category. Flag the highest-impact fixes (most visible to users) first.