Eleven colours in two modes, fourteen text styles, one component library — built in Figma, named one-to-one with the CSS. Everything here is live; the switch at the bottom is the Figma variable modes.
Unhappened
SearchEnglish
What if
1991
What if The Soviet Union did not break up
The Long Union · In August 1991, the coup against Mikhail Gorbachev succeeded in its narrower aim: it did not restore the old order, but it broke the momentum of the republics' independence drives
841articles written
Names are the Figma variables. Values are the CSS.
Theme/ink is --ink. Every value below came out of the shipped stylesheet; the card re-themes with the switch.
paper
panel
ink
muted
rule
acc
acc/pressed
redlink
selection
still/bg
still/white
What if The Soviet Union did not break up
Still/Title · 83.2 / 1.02 · 200…the printing press had come 500 years later?
Line/Input · 45.6 / 1.1 · 200What if Coffee never leaves Ethiopia
Row/Question · 25.6 / 1.14 · 300The treaty emerged from seventeen months of negotiation that began after the August Emergency.
Article/Body · 16.32 / 1.75 · 400shell/max 1152shell/pad-desktop 32shell/pad-phone 20masthead/h 56button/h 38.4button/h-sm 32button/h-fill 50tap 44radius · History6 / 10Open in Figma ↗
Variants in Figma, classes in the product.
The panel on the right is Figma's. Change a property and the component re-renders from the product's own CSS, with the class it maps to underneath.
Designed in Figma first. Finished in code.
Compare two worlds — a feature the product did not have. Three layouts and their transitions were prototyped from the library; the one thing Figma could not do, the seam, was built here.
