Neo-brutalism, braked for a serious product: off-white paper on a 72 px grid, 5 px ink outlines, hard unblurred offset shadows, flat fills, taped cards, rotated stickers, starbursts and one scrolling ticker. Everything moves in steps and every press lands on a beat — loud, but never messy: numbers and tables are never tilted.
Headline blocks slam in from the top with a 2-frame stepped hold, one per beat; cards drop onto the pile and press into their shadows, tape sticks half a beat later, and the coral “check today?” sticker slaps on the bar-3 downbeat (1.3 → 1, 3° wobble).
On the drop every card presses into its shadow at once (100 ms) and collapses into a strip; the teal “You ship.” block slams from the left on beat 1, the soft block from the right a beat later, and the lockup card drops and presses on bar 2.
Metric cards press in column by column, each ✓ sticker sticking half a beat later; on the bar-9 downbeat the coral card pops out 6 px with a bigger shadow and the starburst slaps its corner; the cursor clicks Roll back on the next downbeat.
The lockup card drops and presses, tape sticks on the off-beats, tagline blocks slide in from opposite sides, and the CTA slams up from below into its 14 px shadow on the sting; the cursor clicks and the button depresses for 120 ms.
It is instantly recognisable and survives any feed — nobody scrolls past a hard shadow. Risk: playful styles can undercut trust for a data product, and contrast/clutter get out of hand fast; keep the 72 px grid rigid, max three fills per frame, coral only for errors and the CTA.
Adapt to your product: Turn your product’s key objects into heavy cards and let the one that needs attention pop out with a starburst; your CTA is simply the heaviest card in the film.
References: https://www.nngroup.com/articles/neobrutalism/ (NN/G: neobrutalism definition and usability cautions) · https://www.figma.com/blog/config-2024-branding/ (Config 2024 identity: shapes and motion principles (shift, transform))