Theme 084 · Art movements & eras

Swiss Grid

International Typographic Style played straight: a visible 12-module grid, flush-left grotesk, giant numerals and a single spot colour. Every beat snaps to a module, so the one row that turns coral in an otherwise objective table is the whole story.

readability ●●●trust ●●●effort low

Fig. 1
dashboards
checked today
by one team

How many dashboards did you check today?

— And the drop still shipped on Friday.

0:00 / 0:45

1 · HOOK0:00–0:08

The grid draws first (hairlines stroke on, top→bottom), then the giant "38" cuts in on the downbeat like a Der Film poster; the headline sets line by line, flush-left, each line on a quarter note.

Acme
Anomaly agent
Release 1.0

Every metric
in the
background.

Acme
Pulse

01
Reveal
0:08

2 · REVEAL0:08 (drop)

On the drop the teal field wipes right→left across eight modules, the mark snaps into module 1, and "Acme / Pulse" slams in at 205 px — the two words land on beats 1 and 3.

Pulse · watching 14 metrics

09:47 · live

MetricNowΔ 24 hStatus

Signups1,204+2.1%ok

Active users18,630+0.4%ok

p95 latency212 ms−3 msok

Checkout conversion2.9%−18%alert

Error rate0.4%±0ok

−18%

Checkout conversion
since 09:42 · after deploy #2231

Roll back →

or acknowledge

3 · PROOF MOMENT0:12–0:32

Rows set in one by one like a timetable; on a downbeat the checkout row floods coral from left to right and the numeral −18% drops into the grid below. The ink "Roll back" block slides up one module on the next bar.

Every
metric.
Every
minute.

Acme Pulse

Start free →

acme.example
Free for 14 days

4 · CTA0:36–0:45

Words stack on quarter notes, "minute." switches to italic serif on the last beat; the coral CTA block snaps from width 0 to 5 modules on the final downbeat.

COMPONENT KIT

Visible grid — 12 × 12 modules of 80 px, hairlines at 7–16 % opacity
Giant numeral — one number per beat, 300–600 px Manrope 800, tight tracking
Flush-left headline — ragged right, never centred, one serif italic word
Timetable table — objective rows of metrics in mono; the anomaly row floods coral
Caption column — mono figure notes parked in the rightmost 3 modules
Module button — rectangular CTA exactly 5 modules wide, arrow in mono

MOTION · MUSIC

Grid stroke-on — hairlines draw 0→100 % in 0.5 s, power2.out, staggered 0.03 s — finishes on beat 1
Module snap — blocks move only in whole-module steps (80 px), steps(4) or expo.out 0.25 s, one step per 8th note
Row flood — coral background scaleX 0→1 from the left, 0.5 s power3.inOut = one beat at 120 BPM

WHY / RISK · ADAPT IT

Swiss objectivity reads as honesty: nothing decorates the data, so a monitoring product looks precise and trustworthy. Risk: it can feel cold or generic-corporate; the oversized numerals and the one-colour discipline are what keep it a poster rather than a slide.

Adapt to your product: Replace the table rows with your own KPIs or features and keep exactly one spot colour for the moment your product intervenes. Any screenshot you add should be cropped to whole grid modules.

References: https://en.wikipedia.org/wiki/International_Typographic_Style — grid, flush-left sans, asymmetric layout, objectivity · https://en.wikipedia.org/wiki/Josef_M%C3%BCller-Brockmann — Der Film poster and Grid Systems in Graphic Design