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.
\nA 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.
\nA 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:
\n| Role | \nSize / line height | \nWeight | \nUsed for | \n
|---|---|---|---|
| Large title | \n34 / 40 | \nBold | \nScreen title on the Today screen | \n
| Title | \n28 / 36 | \nSemibold | \nHabit detail title | \n
| Headline | \n17 / 24 | \nSemibold | \nHabit names, button labels | \n
| Body | \n17 / 24 | \nRegular | \nDescriptions, form input | \n
| Subhead | \n15 / 20 | \nRegular | \nProgress line, secondary info | \n
| Caption | \n13 / 16 | \nRegular | \nSingle-line streak counts, tab labels | \n
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.
\nTwo 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.
\nIn 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.
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:
\nRestraint 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.
\nContrast 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:
\nLevel AAA raises normal text to 7:1. Teams usually aim for AA everywhere and AAA for long reading text.
\nSteady’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.
\n\nFigma 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.
\n\nYou 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.
\n","toc":[{"id":"sec-1","text":"A type scale with jobs","level":2},{"id":"sec-2","text":"Color from roles, not favourites","level":2},{"id":"sec-3","text":"Contrast: the numbers that matter","level":2}],"takeaways":["A type scale is a short, fixed list of sizes and line heights, each with a named job; you pick from the list instead of inventing sizes.","Two or three font weights are enough for a whole app; more weights add noise, not hierarchy.","Build color from roles (text, surface, border, primary action, success, danger) and use the accent sparingly so it keeps its meaning.","WCAG AA needs 4.5:1 for normal text, 3:1 for large text, and 3:1 for the visible boundaries of controls and meaningful graphics.","Check contrast while you design with Figma’s color picker, not after a stakeholder complains."],"further":[{"title":"Understanding SC 1.4.3 Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"},{"title":"Understanding SC 1.4.11 Non-text Contrast","url":"https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html"},{"title":"Update fills using the color picker (Figma)","url":"https://help.figma.com/hc/en-us/articles/360041003774-Update-fills-using-the-color-picker"},{"title":"WebAIM Contrast Checker","url":"https://webaim.org/resources/contrastchecker/"}],"quiz":[{"q":"Steady’s primary button is a bright teal, #14B8A6, with a white 17 px label. The contrast ratio is 2.49:1. What should you do?
","options":[{"text":"Keep it, because buttons only need 3:1.","why":"The 3:1 rule covers the button’s shape against its background. The label is text, so it needs 4.5:1 at this size."},{"text":"Make the label bold, which turns it into large text.","why":"Bold text counts as large from about 18.66 px (14 pt). At 17 px it is still normal text, and 2.49:1 fails even the large-text bar."},{"text":"Darken the teal, for example to","why":"Correct. Darkening the fill keeps the brand hue and lifts the label well past 4.5:1."},{"text":"Add a drop shadow behind the label.","why":"Shadows blur the letter edges and are not counted in the contrast ratio. Fix the colors themselves."}],"answer":2},{"q":"Why does a type scale use a small fixed set of sizes instead of whatever looks right on each screen?
","options":[{"text":"Figma cannot store more than six text styles per file.","why":"Figma has no such limit. The constraint is a design choice, not a tool limit."},{"text":"Repeated sizes make the rank of each text predictable across screens, and developers can map them to named styles.","why":"Correct. Consistency is what lets people learn the hierarchy once and reuse it everywhere."},{"text":"Fewer sizes make the app load faster.","why":"Font sizes have no meaningful performance cost. The benefit is consistency."},{"text":"Accessibility rules forbid more than six sizes.","why":"WCAG says nothing about how many sizes you use. It cares about contrast, resizing and readability."}],"answer":1},{"q":"The empty text field in the New habit sheet shows hint text in
","options":[{"text":"Hint text is decorative, so it should be even lighter.","why":"Hint text often carries instructions people need to read, so it should still be legible."},{"text":"It is not a problem, because the field’s border already meets 3:1.","why":"Border contrast helps people find the field, but it does nothing for reading the text inside it."},{"text":"It only matters in dark mode.","why":"The ratio is measured in light mode here and it already fails."},{"text":"Many people cannot read 2.54:1 text, so a hint that carries meaning is effectively invisible to them.","why":"Correct. Text that carries meaning needs 4.5:1. If the hint matters, darken it; better still, put the instruction in a visible label."}],"answer":3},{"q":"Which palette plan best supports a clear hierarchy on the Today screen?
","options":[{"text":"Neutrals for text and surfaces, one teal for primary actions, and green and red reserved for success and errors.","why":"Correct. With the accent used only for actions, the eye learns that teal means “tap this”."},{"text":"A different color for each habit row so the list feels lively.","why":"Rainbow rows compete with the check buttons and leave no color free to signal state."},{"text":"Teal for headings, buttons, icons, borders and links so the brand is everywhere.","why":"When everything is teal, teal stops meaning anything. The accent loses its power to point at actions."}],"answer":0}],"exercise":{"kind":"fill","language":"text","template":"Steady contrast checklist (WCAG 2.2, level AA)\n\nHabit name, 17 px semibold, on white needs at least {{0}}:1\nLarge title, 34 px bold, on white needs at least {{1}}:1\nCheckbox outline against the row surface needs at least {{2}}:1\nLong-form help text if we aim for AAA needs at least {{3}}:1\n\nLarge text starts at {{4}} px regular (18 pt).","blanks":[{"answers":["4.5"]},{"answers":["3","3.0"]},{"answers":["3","3.0"]},{"answers":["7","7.0"]},{"answers":["24"]}],"title":"Fill in the contrast thresholds","prompt":"Sofia keeps a contrast checklist pinned beside every screen she designs. Complete Steady’s copy with the WCAG 2.2 minimum ratios and the large-text size. Type numbers only (for example 4.5).
A 17 px habit name is normal text, so it needs 4.5:1, even when it is semibold (bold only counts as large from about 18.66 px). The 34 px title is large text, so 3:1 is the minimum, though you will usually exceed it. The checkbox outline is a visual boundary of a control, covered by SC 1.4.11 Non-text Contrast at 3:1. AAA raises normal text to 7:1. Large text starts at 24 px regular (18 pt × 4/3).
\n","checkLabels":{}},"words":813,"readMinutes":4}