DarkHorse
A Los Angeles production agency where the work has to lead: loud type, full-bleed reels and case studies that carry the pitch.
What they came with
A production agency is hired on what it has already shot, so the reels and the frames have to arrive first and at full width. Every finished job then has to become a case study, and no two arrive in the same shape: one is a single film, the next is a campaign with twenty stills and a long credit list. Publishing those without a developer in the loop, on pages carrying heavy video, was the work.
What the engagement covered
- Bold visual language
- Case study layouts
- WordPress build-out
- Brand colour and logo kit
Technical detail
Case studies assembled from blocks
Each study is composed from a set of layout blocks: full-bleed video, two-up stills, pull quote, credits. A job with three frames and a job with twenty use the same template, so the layout follows the work instead of padding it out.
Reels load on intersection
Video is poster-framed and muted, with playback starting when the element enters the viewport rather than on page load. First paint is an image, so a page of reels does not spend its opening seconds pulling video nobody has scrolled to yet.
Display type without the reflow
Display faces are self-hosted as preloaded woff2 with a fallback matched on metrics, so headline sizes do not jump when the font lands. At the sizes this design uses, a late swap would move an entire screen.
Colour as custom properties
The brand palette is expressed as CSS custom properties and the logo sits inline as SVG, so a section can flip to a dark or accent ground using the same markup and asset. No second set of files exists to fall out of sync.
The stack
CMS
Frontend
Media
Design
- Sector
- Creative production
- Platform
- WordPress
- Shape
- Agency site and case studies
- Scope
- Design, build, brand
Something like this to build?
Tell us what runs today and where it hurts. An engineer reads it and replies.