Implement a typographic scale using design tokens and accessible properties

WHAT THIS TESTS: This question tests whether you understand design token architecture beyond simple variables, specifically how to build a proportional typographic scale using token references and mathematical ratios. It also checks for accessibility awareness and whether you know which properties must travel together to create usable text styles.

A GOOD ANSWER COVERS: A strong answer starts by defining a base font size token, typically 14 to 16 pixels, because accessibility depends on a readable default. Next, it introduces a separate number token for the scale ratio, such as 1.2 for subtle app UI or 1.618 for dramatic marketing hierarchies. The candidate should explain that font size tokens can reference the base size and the ratio token to calculate each step, ensuring visual harmony without hardcoding every value. Beyond font size, the answer must mention line height, letter spacing, font weight, and font family as essential companions, because a scale is unusable if text collides or weights clash. The best responses advocate for composite typography tokens that bundle these properties into platform agnostic presets, so a single token like typography heading large applies size, leading, tracking, and weight all at once. The candidate should also note that content heavy designs need a wider spread between smallest and largest sizes, while utilitarian app interfaces stay compressed.

COMMON WRONG ANSWERS: Red flags include picking font sizes arbitrarily without a ratio, treating typography tokens as only font size and color, or suggesting every size be manually entered in pixels. Another weak pattern is ignoring line height and letter spacing entirely, which produces inaccessible, cramped text. Failing to mention composite tokens suggests a lack of systems thinking, since the whole point of a token system is to distribute complete styles across design and engineering.

LIKELY FOLLOW-UPS: An interviewer might ask how you would handle responsive scaling, perhaps by referencing the same ratio token at different breakpoints or by maintaining separate but related scales for mobile and desktop. They may also probe how you keep design and code in sync, which is where exporting tokens to JSON and consuming them in CSS or component libraries becomes relevant. Another angle is theming, such as swapping the base size or ratio for accessibility preferences like large text modes.

ONE CONCRETE EXAMPLE: Imagine a Penpot starter kit using eleven tokens. You set font size base to 15px and scale ratio to 1.2. A font size token for medium text references font size base directly, while large text references font size base multiplied by scale ratio. Extra large references large multiplied by scale ratio again. You then create composite typography tokens for body text that combine the medium font size token with a line height of 1.5 and a font weight of 400, and a separate composite token for labels that uses the small font size token with a line height of 1.2 and letter spacing of 0.5 pixels. When the base or ratio needs to change, every derived size and composite style updates automatically.

Source: penpot.app