Reform Collective
www.reformcollective.comThe 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.
Design tokens
- 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.
Related references
Analogue
strongCreative 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.
Bindery
nicheFilm 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.
Brand Appart
strongCreative 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.
Dverso
strongCreative Studio
a Milan "immersive" studio that builds its homepage like a technical drawing, a warm cream canvas with a blueprint grid, mono-everything UI, a giant outlined "dverso" wordmark, and the team rendered as stylised 3D avatars standing inside the letters, with a pixel display font and scramble text for character.