refactoring-ui

Run the 8-point quick diagnostic: check hierarchy with a blur test, verify it works in grayscale, increase white space, de-emphasize labels, and enforce the 4/8/16/24/32/48/64px spacing scale. Most amateur-looking UIs fail on insufficient white space and unconstrained content widths.

Use dark grays like #18181b instead of pure black, off-white #fafafa instead of pure white text, and desaturated accent colors. Convey elevation with lighter surfaces rather than shadows, and switch themes via CSS custom properties or Tailwind's class-based dark mode.

WCAG 2.1 AA requires 4.5:1 for normal text under 18px, 3:1 for large text, and 3:1 for UI components. On white backgrounds, use gray-700 (#374151) or darker for body text since lighter grays like gray-400 fail the threshold.

Flat UIs usually lack an elevation system. Apply a shadow scale where small shadows indicate slightly raised elements like buttons and large shadows indicate floating elements like modals, or use lighter top borders and subtle gradients as shadow alternatives.

Avoid pie charts when comparing values, showing more than 5 categories, displaying change over time, or when values do not sum to 100%. Use bar charts for comparisons and line charts for trends instead.