Visual design: hierarchy, type, spacing, colour and layout

The goal of visual design is not to make a screen pretty; it is to make it easy to understand. Size, weight, colour, spacing and position decide where the eye lands first, what matters most and which things belong together.

In a design system these choices are made once, as tokens and components, and then reused everywhere. That only works if the choices rest on a few clear rules. This part covers them.

Visual hierarchy

These are the tools for building hierarchy, roughly from strongest to weakest:

1. 01Size. Larger things are seen first.
2. 02Weight and contrast. Bold type and darker colours pull attention.
3. 03Colour. An accent or brand colour marks what is important or interactive.
4. 04Position. In left-to-right languages, the top left is read first.
5. 05Whitespace. Space around an element gives it weight.

Size is not the only lever. Secondary text can stay at a readable size and step back through a lighter colour, such as a text.secondary token, instead of shrinking until it is hard to read.

Typography

A type scale

Pick sizes from a ratio rather than one by one. A ratio of 1.25, the Major Third, rounded to the grid gives 12, 14, 16, 20, 24, 30, 36 and 48. Most interfaces need only six to eight sizes. Each becomes a token with its line height and weight:

Readability rules

• Line height. Around 1.4 to 1.6 for body text and 1.1 to 1.3 for headings. Scripts with tall marks above and below the line, such as Bangla or Devanagari, need more.
• Line length. Roughly 45 to 75 characters per line for comfortable reading.
• Font pairing. One family is usually enough, with weight doing the work of hierarchy. If you use two, make them clearly different.
• Letter spacing. Tighten large headings slightly; open up small uppercase labels.
• Numbers. Use tabular figures in tables and metrics so digits line up in columns.
• A floor. Keep body text at a size people can read comfortably; 12px is a sensible minimum for small print, not for paragraphs.

.metric {
  font-variant-numeric: tabular-nums;
}

Spacing

An 8 point grid, with 4 as a half step, means every spacing value is a multiple of 4 or 8: 4, 8, 12, 16, 24, 32, 48, 64. Fewer options mean fewer decisions, and the values scale well across screen sizes.

• Internal ≤ external. The padding inside an element should be no larger than the gap around it. Otherwise groups blur together, which is Gestalt proximity at work.
• Three kinds of space. Inset is padding inside a container, stack is the vertical gap between elements, inline is the horizontal gap. Naming them makes spacing tokens easier to apply.
• Whitespace is not empty. It is what creates hierarchy and grouping in the first place.

Colour

Palette structure

• Neutral scale (for example 50 to 950): backgrounds, text, borders. Most of an interface is built from neutrals.
• Brand or primary scale: interactive elements and focus.
• Semantic colours: success (green), warning (amber), danger (red) and info (blue).

The 60–30–10 rule is a useful starting point: about 60% neutral background, 30% secondary surfaces and 10% accent. Treat it as a guide for balance, not a formula.

Why OKLCH

In HSL, a yellow and a blue with the same lightness value look very different in brightness. OKLCH is designed to be perceptually uniform: the same L value looks about equally light whatever the hue. That makes it much easier to build scales where step 500 of every colour feels like the same step. Modern CSS supports it directly:

:root {
  --blue-500: oklch(62% 0.19 260);
  --green-500: oklch(62% 0.17 150);
}

Rules for colour

• Never use colour alone to carry meaning. An error also needs an icon and text, so people with colour vision deficiencies get the message.
• Check contrast. WCAG asks for 4.5:1 for normal text, and 3:1 for large text and for UI parts such as borders and icons. Part 9 goes into detail.
• Design dark mode; don’t invert it. Avoid pure black, make surfaces lighter as they rise in elevation, and soften very saturated colours.

Layout and grids

• Alignment. Everything lines up with an edge or a grid line. Small misalignments make a screen feel careless even when nobody can say why.
• Reading patterns. Text-heavy pages tend to be scanned in an F shape; sparse landing pages in a Z shape.
• Density. Dashboards and data-heavy tools often need a compact mode with tighter spacing.

Consistency

• Visual consistency: the same radius, shadows and icon style, down to the stroke width.
• Functional consistency: the same action behaves the same way everywhere.
• Internal and external: consistent within your product, and with the conventions of the platform.

The strongest tool for consistency is the design system itself: tokens and components make the right choice the easy one. When an exception is genuinely needed, document it, so the next person knows it was deliberate.

A structure for critiquing a screen

When you review a screen, yours or someone else’s, work through it in order and name the principle behind each point:

1. 01What is the goal of this screen?
2. 02Does the hierarchy point to that goal?
3. 03Are spacing and alignment consistent?
4. 04Does the typography follow the scale?
5. 05Do colour and contrast work, including without colour?
6. 06Is it consistent with the rest of the product?
7. 07What would you change, and why?

Next in the series

Contrast ratios came up more than once here. Part 9 is about accessibility: the WCAG principles, a designer’s checklist for WCAG 2.2, and how keyboard and screen reader users move through an interface.