First Frame
firstframe.frParis 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.
Design tokens
- 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.
Related references
Lanserring
flagshipTrades
a bespoke-joinery house that sells craft as heritage, warm sepia interiors and meadow photography under a high-contrast transitional serif, the brand reduced to a single fine line-drawn ring, with quiet WordPress structure and almost no visible motion furniture.
Drexler
nicheCreative Studio
A Baltimore studio that uses a single 765px-tall wordmark as the entire homepage, with a warm pink-on-black palette and 5-link nav, signalling small-shop confidence through wordmark-as-canvas restraint.
Gianluca Gradogna
nicheDesign Portfolio
a multidisciplinary designer's portfolio that floats a crisp white intro card over a dark, full-bleed photographic world, pairing a clean Neue Montreal grotesque with a high-contrast Times display serif and one slow in-out-sine colour fade.
Hugo Baron
nicheDesign Portfolio
The reference for solo motion-design portfolios that lean on a single brand colour, a giant condensed display face, and a "loading-screen-as-hero" gimmick to read as confident and craft-forward without an agency budget.