Play Design systems
Name that token.
Match colors and type on this site to the design tokens behind them.
Question 1 of 6. This site sets supporting text, like dates and captions, in a softer grey that still passes AA. Which token is it?
--ink-muted is about 6:1 on the page background, so it is safe for text. The lighter --ink-faint fails contrast, which is why it is reserved for decoration.
Question 2 of 6. Separator dots and arrow glyphs use a pale grey that is never allowed to carry text. Which token is it?
Naming a token for its job, and writing down where it must not be used, stops a decorative grey from quietly turning into a body text color.
Question 3 of 6. Hairline rules and card borders use the lightest of the line colors. Which token is it?
--line is for quiet structure. Its partner --line-strong is for emphasised rules and input borders, where the edge needs to be easier to see.
Question 4 of 6. Links, primary buttons and the italic words in headlines share one deep denim blue. Which token is it?
There is exactly one accent. It also changes on dark surfaces, switching to a lighter blue so it keeps its contrast, which a hard-coded hex value could never do.
Question 5 of 6. The page itself sits on a near-white with a faint cool cast. Panels that lift off it are pure white. Which token is the page?
--paper is the page and --raised is for surfaces that lift off it. Using white sparingly is what keeps the raised panels, like this game, feeling raised.
Question 6 of 6. The italic display font is Newsreader, but its CSS variable kept the name of the font it replaced. Which variable is it?
Renaming a widely used variable means touching every file that uses it, so the old name stayed. Names that outlive their meaning are a real design system cost; a good one documents them.
Good token names describe a job, not a color. That is what lets one change reach every page safely.