Typography and Color Systems That Scale: A Practical UI/UX Guide

After working on 100+ product interfaces, I've come to believe that most UI inconsistencies trace back to two root causes: no defined typographic scale, and no semantic colour system. These are foundational decisions that affect every screen, every component, and every developer interaction. Getting them right once saves hundreds of hours across a project's lifetime.

The Typographic Scale We Use on Every Project

We use a minor third scale (ratio 1.25) for body-focused products and a major third (ratio 1.333) for marketing and editorial products. The key is consistency — pick a ratio and derive every font size from it, rather than specifying arbitrary sizes.

• Display (72–96px): Used only for hero headings. We use a purpose-built display typeface that's optically larger than the body typeface at the same size.
• Heading (32–48px): Section titles, modal headers, page headings. Reduced line-height (1.1–1.2) is non-negotiable at this size.
• Subheading (20–28px): Card titles, sidebar navigation headers, form section labels.
• Body (15–17px): The default reading size. We rarely go below 15px for body text — it's technically readable but uncomfortable for extended reading.
• Caption (11–13px): Labels, metadata, timestamps. Requires increased tracking (letter-spacing: 0.04em) to maintain readability at small sizes.

Semantic Colour Architecture

• Background / Surface / Elevated Surface: Three levels of background elevation. Prevents the 'box in box in box' visual problem from nested containers all sharing the same background.
• Foreground / Muted Foreground: Two levels of text emphasis. Secondary information uses muted-foreground (typically 50-60% opacity of foreground), never an arbitrary grey.
• Border / Strong Border: Subtle separator (5-10% opacity) vs. emphasis separator (20-30% opacity). Used consistently, these create visual hierarchy without colour.
• Accent / Accent Foreground: The brand colour and the text colour that's legible on top of it. Check contrast ratio — 4.5:1 minimum for body text.