refactoring-ui

Start by adding more white space and constraining content widths, since most amateur designs are too dense. Then establish visual hierarchy by varying size, weight, and color between primary and secondary elements, and replace arbitrary pixel values with a fixed spacing scale.

Use a linear scale of 4, 8, 16, 24, 32, 48, and 64 pixels rather than arbitrary values like 13px or 17px. Keep spacing within related groups smaller than spacing between groups, and start with too much white space before removing it.

Build 5-9 shades per color from near-white to near-black, and add subtle saturation to grays matching your UI temperature, such as a blue tint for cool interfaces. Design in grayscale first, then add color last so hierarchy does not depend on color alone.

Yes, the principles map directly to Tailwind utilities like p-4 for spacing, text-gray-900 for text hierarchy, shadow-md for card elevation, and max-w-prose for readable text widths. The constrained scales align with Tailwind's default design tokens.

Body text requires a minimum 4.5:1 contrast ratio, while large text at 18px or above needs at least 3:1. Use dark grays like #374151 on white backgrounds instead of lighter grays, and never rely on color alone to convey information.

For typeface selection decisions, use a dedicated typography skill instead, and for usability audits, use a UX heuristics skill. This framework focuses on visual design systems rather than font pairing or interaction usability testing.