Theme 083 · Art movements & eras

Bauhaus Primer

The whole film is built from a 1920s classroom kit: circle, square, triangle, a thick black bar and all-lowercase sans in the Herbert Bayer spirit. Kandinsky-style shape–colour pairing is re-cast in Acme's palette (circle = teal, triangle = amber, square = ink), so when one square falls out of the grid and turns coral, everyone sees the anomaly before reading a word.

readability ●●●trust ●●○effort low

how many
dashboards did
you check today?

38 dashboards · 14 metrics · 0 answers

fri 17:58 · missed

1 · HOOK0:00–0:08

Shapes stamp in on 8th notes in a strict 6-column primer grid, left→right; the headline wipes up from the black bar. Downbeat at 0:06: one square slips off its slot, rotates 28° and goes coral.

acme pulse

form follows function · the watcher

2 · REVEAL0:08 (drop)

On the drop the black diagonal bar slams in first, then circle (scale 0→1), triangle (slide up) and coral square (drop from top) land on consecutive beats; the Acme mark appears in the circle's hole and "acme pulse" types in lowercase.

watching 14 metrics · 2,418 events/sec

signups ✓

active users ✓

p95 212 ms ✓

checkout ✕

−18%

checkout
conversion

since 09:42
after deploy #2231
your call ↓

roll back

acknowledge

3 · PROOF MOMENT0:12–0:32

Three healthy shapes tick ✓ on the beat while the fourth slot sits empty; the coral square falls into frame tilted −9° carrying −18%. On the bar line the black "roll back" block slides in from the right and the triangle cursor clicks it.

you ship.
pulse watches.

acme pulse

start free

acme.example · no card needed

4 · CTA0:36–0:45

Headline builds word-by-word on quarter notes, the teal quarter-circle grows from the corner like a compass arc and the ink CTA block stamps in on the final downbeat; the amber play-triangle nudges right twice.

COMPONENT KIT

Primer shapes — circle / square / triangle as metric tokens (teal, ink, amber)
Black bar — structural rule that wipes headlines and cuts diagonals
Lowercase universal type — Manrope 800 lowercase, Bayer-style, one serif italic accent word
Empty slot — dashed coral outline where a metric went missing
Fallen square — the anomaly — tilted coral block carrying the number
Block button — flat ink rectangle with a coral dot or amber triangle glyph

MOTION · MUSIC

Stamp-in — shapes scale 0→1.06→1, back.out(2) 0.25 s, one per 8th note (0.25 s at 120 BPM)
Gravity slip — anomaly square rotates 0→−9° and drops 40 px, power3.in 0.4 s, landing on a downbeat
Bar wipe — black bar scaleX 0→1 from the left, expo.out 0.5 s, always on beat 1 of a bar; text rides behind it with clip-path

WHY / RISK · ADAPT IT

Primitives read instantly at thumbnail size and the grammar (one shape leaves the grid = something is wrong) needs no explanation, which suits a background agent. Risk: the lowercase-plus-serif mix can look like a design-school exercise; keep every number big and every shape doing a job.

Adapt to your product: Map your own metrics or features to the three primitives (e.g. circle = users, square = revenue, triangle = performance) and let the thing your product catches be the one that breaks the grid. Swap the button labels for your product's real action.

References: https://en.wikipedia.org/wiki/Bauhaus — school overview: geometric simplicity, Kandinsky colour teaching · https://en.wikipedia.org/wiki/Herbert_Bayer — Bayer's all-lowercase sans for Bauhaus print