Screenshot of Reform Collective

Reform Collective

www.reformcollective.com

The reference for serif-display motion-creative agency sites — cream #F9F8EE paper, serif/grotesk hybrid wordmark, sticker-style organic shapes, and a fixed top chrome that morphs the brand tagline letterforms.

Creative Studio Brand Digital Agency niche

Design tokens

paper
paperRgb
ink
inkRgb
panelDark
white
red1
red2
videoRed
orange1
blue1
blue2
display
editorialNew
body
foundersGrotesk
constructed
rasterGrotesk
fallback
Times

Do / Don't

Reference it for

  • Cream color(display-p3 0.9765 0.9725 0.9333) paper as primary surface (not white, not off-white — a warm cream in display-p3)
  • Near-black color(display-p3 0 0 0) body text in display-p3 colour space — modern colour-science adoption alongside RGB fallbacks
  • Warm orange #FE3712 / rgb(208, 4, 1) accent reserved for hover + chrome dots — never decorative
  • Hidden palette of --blue1, --yellow1, --pink1/2, --orange1, --offwhite1-5 for case-study tiles only
  • color(display-p3 0.1553 0.1586 0.18) dark surface for case study cards and the closing panel — not pure black
  • Two-mode surface system: cream editorial pages vs near-black showcase panels
  • Four-family typography: editorialNew (serif display) + foundersGrotesk (workhorse sans) + rasterGrotesk (constructed nav/button) + Times fallback
  • editorialNew Light 200 for monumental editorial display ("Your business has a story.")

Do not copy

  • The Reform Collective black-in-square logomark
  • The editorialNew / foundersGrotesk / rasterGrotesk specific font licences (substitute with Editorial New / Söhne / GT America-equivalents or open-source: Fraunces + Inter Variable + JetBrains Mono Variable)
  • The exact #FE3712 Reform red — pick the client brand colour
  • The "Award winning (development) agency" cycling tagline copy
  • The "We live in the details" tagline
  • The "REFORM CO" / "REFORM NOVA" wordmarks
  • The "Your business has a story. / We design and build to tell it." copy verbatim
  • The Webflow / CD Projekt Red / TikTok / Loom client list

Signature moves

top-chrome morphing-letterform tagline

a fixed top-chrome tagline cycles letterforms ('Award winning (development) agency' morphing word-by-word) via swipe-out-left/right/up/down keyframes on a serif italic, on a classic in-out cubic (cubic-bezier(0.645,0.045,0.355,1)) at 0.5s/0.7s.

two-mode cream-editorial vs near-black-showcase surfaces

cream paper (display-p3 0.9765 0.9725 0.9333) carries editorial pages while near-black (display-p3 0.1553 0.1586 0.18) panels carry case-study showcases, with a warm orange (#fe3712) accent reserved for hover and chrome dots only.

sticker-cut work cards with dominant pill service-tags

irregular SVG-masked sticker-cut featured-work cards (16px rounded inner content) carry pill (1425.6px radius) service-tag chip clusters ('ART DIRECTION' / 'BRANDING' / 'WEB DESIGN'), the dominant component shape, with type-as-layout CTAs wedged between words.