Screenshot of First Frame

First Frame

firstframe.fr

Paris production and post-production studio whose own site is the canonical example of full-bleed black + IBM Plex Mono micro-type + reel-as-hero — the cinematic-craft posture for a portfolio-led service business.

Film Production Production Post Studio niche

Design tokens

page
text
textMuted
surfaceGrey
overlay30
overlay95
scrim10
scrim20
recordingGreen
borderLight
borderDark
colorBlueGrid
display
HKRequisite, sans-serif
body
IBMPlexMono, sans-serif
mono
IBMPlexMono, sans-serif

Do / Don't

Reference it for

  • Pure-black rgb(0, 0, 0) page with rgb(255, 255, 255) text — no near-black softening
  • Single muted grey rgb(51, 51, 51) for borders and label muting (67 hits)
  • rgb(0, 170, 0) recording-green as the only chromatic accent (the dot)
  • 2560px max-width for cinema-spec ultra-wide displays
  • body { text-transform: uppercase; font-size: 12px } as the global reading register
  • IBM Plex Mono Regular + Medium as the dominant typeface (49 of 58 family hits)
  • HKRequisite Medium as the residual sans (custom French foundry feel)
  • 12px body / 10px micro / 48px max — tight 6-step scale

Do not copy

  • The literal "EVERY STORY STARTS WITH A FIRST FRAME" h1 line
  • The First Frame logomark (the 98×13 monospace-derived F mark)
  • The Netflix / Deezer / YouTube / Qonto client list as a reel sequence
  • The Paris-studio brand voice, a production house in another city should not pretend to be Parisian
  • The beaucoup theme name (it's the WordPress agency Beaucoup's namespacing)
  • The Tarteaucitron consent library unless the brand specifically targets France
  • The <canvas> hero technique unless the brand has frame-accurate reel compositing as a real need, <video> is fine for most cases
  • IBM Plex Mono only if the brand has no display companion, the HKRequisite role matters for the rare non-mono moment

Signature moves

pure-black mono-micro cinematic register

a pure-black rgb(0,0,0) page with white text sets body to uppercase 12px IBM Plex Mono with 1px tracking, a single recording-green #00aa00 dot the only accent, void around a single 12px H1.

canvas reel hero with panel-wipe transitions

a full-viewport <canvas> hero (not <video>) gives frame-by-frame reel compositing control, with fixed .panel/.fade black overlays as the page-transition wipe and an ease-out-expo cubic-bezier(0.23,1,0.32,1) workhorse.