Title: Typography Periodic Table
Prompt: A periodic table where every element is a typeface with atomic numbers of style. Build a filterable tile grid, a large specimen card, a try-your-words tester, and a pairing shelf. It should feel like a print lab — safety yellow on ink charcoal.
Design: An ink lab with a yellow-rule masthead splits into a tile grid of serif, sans, mono, and display elements beside a specimen rail with oversized glyphs, live type tester, size and spacing sliders, pairings, and a classification quiz. Tiles carry atomic numbers and amber names.
Visual techniques:
- Element tiles with classification-coded glyph rendering
- Oversized specimen card with slide-in transitions
- Live type tester with size and letterspacing controls
- Pop-in tile animations and yellow selection outlines
- Safety-yellow on charcoal print-lab palette
Interaction model: Users filter by classification, click tiles to load specimens, type custom test strings, tune size and spacing, preview pairings, and take classification quizzes with instant scoring.