Paths/Frontend Engineer/CSS & Design Systems / Layout & Typography
Define a Type Scale
A type scale is a fixed set of sizes with a fixed ratio. Write it once and stop picking pixel values by hand.
Validator
⏱ 0:00
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- File ~/frontend/src/styles/type.css exists○
- The file defines the scale steps○
- The file sets a line height and a fluid size○
02Walkthrough
1 of 3 revealed- 01
Write the scale
Define the steps as custom properties on the root - every component then uses the same scale.
echo ':root {\n --text-xs: 0.75rem;\n --text-sm: 0.875rem;\n --text-base: 1rem;\n --text-lg: 1.25rem;\n --text-xl: 1.5rem;\n}' > ~/frontend/src/styles/type.css - 2 locked · each failed submit reveals one
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list