Screenshot of Cappen

Cappen

cappen.com

The reference for award-winning Miami creative dev studios — extreme typographic range (200 to 900 weight, 10 to 300px scale), three premium fonts, left/right-anchored hero positioning, PageLayer + Splitting.js stack.

Creative Studio Digital Experience Studio strong

Design tokens

offWhite
white
black
nearBlack
darkSurface
warmGrey
greySubtle
blackTransparent
display
HelveticaNowDisplay
body
HelveticaNowDisplay
mono
Martian Mono
editorial
PP Editorial New

Do / Don't

Reference it for

  • Off-white rgb(252, 252, 252) background — softer than pure white
  • Near-black rgb(20, 20, 20) secondary text alongside pure black primary
  • rgb(43, 43, 43) for dark surface inversions (when sections invert)
  • Warm-grey rgb(152, 154, 150) for muted text — green-tinted not blue-tinted
  • HelveticaNowDisplay + Martian Mono + PP Editorial New three-font system
  • PP Editorial New for editorial moments — Pangram Pangram's open serif
  • Martian Mono for caps mono labels (Google open-source)
  • HelveticaNowDisplay for display + body

Do not copy

  • The Cappen brand identity
  • The shark mascot image
  • The "BUILDING TOMORROW FR TODAY" copy
  • The "HUMAN THINKERS / DIGITAL MAKERS" position
  • The "since 2006" credential unless brand is genuinely that old
  • The HelveticaNowDisplay licence (paid Linotype)
  • The 300px hero size unless the brand has display ambition AND a short tagline
  • The PageLayer / WordPress dependency unless that's the brand's CMS choice

Signature moves

edge-anchored split hero with a centred image in the gap

two display phrases anchor opposite edges (one left, one right) with a small centred image in the gap between them, a confident asymmetric composition.

extreme-range type with a 300px hero and four discipline weights

the most extreme scale in the library (10/15/16/25/46/140/300px) tops out at a 300px hero, carried by a Helvetica-class display, a mono for caps labels and a serif for editorial moments at four weights (200/300/400/900).

Splitting.js letter-reveal on a curated easing set

Splitting.js animates letter-by-letter reveals (including an abbreviation like 'FR' inside a heading) using curated easings (easeOutQuart cubic-bezier(0.25,1,0.5,1), easeOutCirc) at ~300ms with multi-property combined transitions.

Related references

Screenshot of Analogue

Analogue

strong

Creative Studio

a "seriously playful" brand-and-motion studio that wears its personality as type, a wonky multi-alternate ANALOGUE wordmark, emoji and icon glyphs set inline in the copy, a candy-pink accent on white, and a GSAP-driven box of tricks (mexican-wave letters, glitches, bounce, float) kept just on the right side of chaos.
Screenshot of Bindery

Bindery

niche

Film Production

The reference for boutique NYC production studios — full-bleed video tile mosaic on warm off-white, condensed black serif wordmark, GSAP+Lenis scroll choreography over a soft pastel palette that cycles per section.
Screenshot of Brand Appart

Brand Appart

strong

Creative Studio

The reference for Paris startup design agencies — Youth chunky-sans display, cream parchment paper, orange ©-superscript wordplay, live Paris clock, Webflow + Lenis + Splitting.js stack.
Screenshot of Chipsa

Chipsa

niche

Creative Studio

Russian creative-agency portfolio with a 24-column grid, light/dark theme tokens, PPNeueMontreal + PPRightGrotesk pairing, and a leva-driven WebGL/canvas experimentation layer.