Visual Design: Color, Typography and Layout

Color

Pick a small, purposeful palette: one or two brand colours, a set of neutrals (greys) for text and backgrounds, and clear semantic colours for success, warning and error. Restraint looks professional; a rainbow looks amateur.

Typography

• Use one or two typefaces. A clean sans-serif is a safe default.
• Establish a type scale – distinct sizes for headings, body and captions – so hierarchy is obvious.
• Keep body text readable: ~16px, comfortable line height, lines not too long.

Layout, spacing and hierarchy

Consistent spacing (a spacing scale like 4/8/16/24px) makes a UI feel calm and intentional. Use size, weight, colour and whitespace to create visual hierarchy so the eye lands on the most important thing first. Align elements to a grid.

Key points

• Use a small, purposeful palette: brand + neutrals + semantic colours.
• Limit typefaces; define a clear type scale.
• Consistent spacing and alignment make a UI feel polished.
• Guide the eye with hierarchy – size, weight, colour, whitespace.