refactoring-ui

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

Use the constrained scale of 4, 8, 16, 24, 32, 48, and 64 pixels, which maps to Tailwind classes p-1 through p-16. Keep spacing between groups larger than spacing within groups, and start with too much white space before removing any.

Use dark grays like #18181b instead of pure black, off-white #fafafa instead of pure white text, and desaturate accent colors. Convey elevation with lighter surfaces rather than shadows, which are invisible on dark backgrounds.

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 requirement.

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.

Pure black (#000000) creates harsh contrast and halation, where light text appears to glow against the background. Dark grays like #09090b to #18181b produce comfortable contrast while preserving surface hierarchy through lightness steps.