Design system  /  Identity  /  Film
Film

Every frame on purpose.

Our films are web pages. Each frame is computed from the time, on a 128 BPM grid at 24 frames a second. This section holds the method, the motion tokens, kinetic type on a voice, and the brief and review we use for every film.

Format1920 x 1080, 24 fps Grid128 BPM, 45 frames a bar Sound-14 LUFS, peak -1.5 dBTP Sub-pages4 topics

The five laws

  1. One ideaIt fits one sentence. If the logline needs "and", it is two films.
  2. One device that travelsThe thing the eye follows crosses every cut. It never blinks out.
  3. One orangePer scene, orange is the answer. Text or a shape, never a box behind text.
  4. One motion systemMoves come from named tokens. Times come from the film's timeline.
  5. Measure, never guessTimes from the grid or the voice, holds from the word count, loudness from the meter.

The house rules, short

Picture

  • Solid fills. No gradients, glows, blur, 3D or photos.
  • Pointy-top hexes, never rotated. A hex flips in, it never pops.
  • One honeycomb grid, solid. Every hex sits on a cell.
  • Type in a left column, the picture on the right.

Words and sound

  • The story reads with the sound off. Frame 1 says something.
  • 20 to 30 words on screen, at most 35 per 30 seconds.
  • Each line holds 1.5 seconds, or 0.4 seconds a word if that is longer.
  • Every sound has a visible cause. The accent sound is a dry click.

The binding rules are in the film bible, preview/films/BIBLE.md, rounds 1 to 30. The method is the film skill in the design-system repository, at .claude/skills/film/.

Films

Every film, with its slides per direction and the videos to download, is on the Films page. A few to start with:

ConNext

Nextcloud apps that work together, in one unbroken camera move through the honeycomb.

41.25 s · 22 bars · direction A, one take

Conduction opening

The shared sting in front of every film: a ripple, the app cluster, the name. Its sound is electricity connecting.

5.625 s · 3 bars · shared module

Dossiq, municipal casework

The right decision, on time: a backlog, documents in the case, guidance as you decide, standards, flows.

45 s · 24 bars · audience film

Portaliq

You design the portal, the client logs in and sees every ticket, case and invoice in one view.

60 s · 32 bars · audience film

Keepiq

An ownership story about keys, then passwords and certificates you request, share and use where you keep your data.

45 s · 24 bars · audience film

Thematiq

Ownership is a style: restyle real components, share templates through the store, load your NL Design System theme.

37.5 s · 20 bars · audience film

Nooit meer archiveren?

Our first Dutch film: when the workspace is also the archive, archiving stops being a separate job.

45 s · 24 bars · Dutch

Kinetic voice

One line in Dutch and one in English, each word arriving on the frame it is spoken. The voice is provisional.

11.25 s · 6 bars · demo

Studies

Install board concepts

The concepts explored for the shared install board before "current" was picked in round 24.

Retired

The current, a motif

The travelling wire, kept for the record. It was retired in round 28: the fallback seam is now the hex flip wave.

Make one

Start with the brief. Pick moves from the motion tokens. If there is a voice, follow the voice recipe. Run the review before you render.