📊 We use cookies & analytics to improve your experience. Learn more
Latest

UI/UX Design Fundamentals Module 2 · Lesson 6 of 15

0% Exit to course

Module 2 · Layout, hierarchy and type Lesson 6 of 15

Type scale and colour system

Learning objective

A type scale is a small set of sizes used everywhere. A colour system is one primary, one accent and a fixed set of greys — decided once, reused always.

The concept

Pick two typefaces at most: one for headings, one for body, and if in doubt use one for both. Then set a scale — 14, 16, 20, 24, 32, 40 — and use those sizes and no others. A six-step scale looks designed; eleven arbitrary sizes look accidental.

A colour system is a small named set: one primary, one accent, a text colour, a muted colour, a border, a success and a danger. In design tools these become styles; in code they become CSS variables. Build it once and every new screen is consistent by default, and changing the brand colour is one edit rather than forty.

CSS
:root {
  /* six-step type scale - use these and no others */
  --t-sm: 14px; --t-base: 16px; --t-lg: 20px;
  --t-xl: 24px; --t-2xl: 32px; --t-3xl: 40px;

  /* named colour system */
  --brand: #2563eb; --accent: #f59e0b;
  --text: #1f2937; --muted: #6b7280;
  --border: #e5e7eb; --ok: #16a34a; --danger: #dc2626;
}
/* Body-text contrast target: at least 4.5:1 against its background. */

Common mistakes

The mistake is grey text that is too light to read. Body text needs real contrast — aim for a ratio of at least 4.5 to 1 against its background — and pure black on pure white is harsh, so use a dark grey like #1f2937. Check your own work with a contrast checker rather than your own eyes on your own monitor.

Worked example

A four-step scale such as 14/16/20/28 covers a whole app; nine sizes picked per screen do not survive the second screen.

Your practice task

Define your own scale and palette, then audit a screen you designed earlier and fix every value that is outside the system.

Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.

Key takeaway

Pick two typefaces at most: one for headings, one for body, and if in doubt use one for both.

Create free account or sign in

Almost there

15 lessons left of 15

Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.