Type Scale and Color with Contrast

Open the text styles of a file that grew without a plan and you will find 13 px, 14 px, 14.5 px, 15 px and 16 px body text, each used once or twice. Nobody chose them; they drifted in. The result is a screen where hierarchy feels slightly off everywhere, and nobody can say why.

A type scale and a role-based palette are how you stop the drift. You decide the sizes and colors once, give each a job, and then every screen picks from the list.

A type scale with jobs

A type scale is a short list of text sizes, each paired with a line height and weight. For a phone app, it helps to start near the platform’s defaults because people’s eyes are already tuned to them. Steady’s scale borrows most of its sizes from Apple’s default text styles, rounds line heights to multiples of 4, and uses 13 px (Apple’s footnote size) for captions:

Notice what the table does. Each step is big enough to read as a different rank. Headline and Body share a size and differ only in weight, which is how you rank text without adding another size. Line heights are about 1.4× for running text and tighter for big titles, because large text with loose line height falls apart into separate lines.

Two or three weights are enough: Regular, Semibold and Bold here. Each extra weight is one more thing to keep consistent, and readers cannot tell Medium from Semibold at a glance anyway.

In Figma you save each row as a text style (Lesson 3.3 compares styles with variables). Name styles by role, Headline or Caption, not by value like 17 Semibold, so you can adjust a size later without the name lying.

Color from roles, not favourites

Picking colors you like produces a mood board. Picking colors for roles produces a usable palette. Start from the jobs color does on a screen:

• Text: primary text (near-black, #1A1A1A) and secondary text (grey, #6B7280).
• Surfaces: the page (#FFFFFF) and raised areas like cards or sheets.
• Borders and dividers: light grey (#E5E7EB).
• Primary action: Steady’s teal (#0F766E). It appears on check buttons and the main button, and almost nowhere else.
• Status: green for success and red for errors, used only for those meanings.

Restraint is the point. If teal only appears on things you can tap, people learn “teal means tap” within seconds. Paint headings, icons and borders teal too and that lesson becomes impossible to learn.

Contrast: the numbers that matter

Contrast ratio compares the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) 2.2 set the thresholds most teams design to, level AA:

• 4.5:1 for normal text.
• 3:1 for large text: at least 24 px regular, or about 18.66 px bold (18 pt and 14 pt).
• 3:1 for the visible parts of controls and meaningful graphics, such as a checkbox outline or a progress ring against its background.

Level AAA raises normal text to 7:1. Teams usually aim for AA everywhere and AAA for long reading text.

Steady’s colors measured against white: primary text #1A1A1A gives 17.40:1, secondary grey #6B7280 gives 4.83:1 (passes, narrowly), and teal #0F766E gives 5.47:1, so a white label on a teal button passes too.

Figma has a contrast checker built into the color picker. At the time of writing, you select a text layer, open its fill color, click Check color contrast, and Figma shows the ratio against what sits behind the layer, with AA and AAA marks and a one-click fix to the nearest passing color. Use it as you pick colors, not as an audit at the end.

You now have rules for rank (type), meaning (color) and legibility (contrast). Next you put them on the canvas: frames, groups, layers and constraints, the raw material of every Figma screen.