refactoring-ui

Apply constrained design systems instead of arbitrary values: use a fixed spacing scale (4, 8, 16, 24, 32, 48, 64px), a modular type scale, and a 5-9 shade color palette. Design in grayscale first to force hierarchy through size, weight, and spacing before adding color.

Create hierarchy through three levers: size, weight, and color, but combine rather than multiply them. De-emphasize secondary content like labels and metadata so primary content stands out, and reserve the strongest treatment for the single most important element.

WCAG 2.1 AA requires 4.5:1 contrast 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 rather than lighter grays.

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

Clutter usually comes from equal spacing everywhere and insufficient white space. Group related items with tight spacing, separate groups with larger gaps, and start with more white space than feels necessary before removing any.

Avoid pie charts when comparing values, showing more than five categories, or displaying change over time. Use bar charts for comparisons and line charts for trends; for two values, a simple percentage statement is often clearer.