Counterform Studio
An identity system that behaves like a live print studio under pressure.
Challenge
A fictional brand-and-digital studio portfolio built from crop marks, typographic proofs, and decisive case-study cuts.
Oversized type, registration marks, hard crops, productive misalignment.
Condensed display grotesk with a practical neo-grotesk text face.
Pointer lens toggles between final work and construction layer.
Fast, exact, ink-on-paper tension.
Scene-by-scene experience
The route has a job at every depth.
Manifesto
State position without agency filler.
One sentence, live proof counter, rotating discipline label.
Work Index
Make the range scannable.
Dense typographic list expanding into media on focus.
Case Cut
Show thinking before polish.
Alternating artifact and rationale frames.
Capabilities
Define the actual engagement.
Scope matrix, not icon cards.
Contact
Invite a precise brief.
Budget band, timing, and problem fields.
Motion record
- trigger
- Pointer/focus on work; scene entry
- duration
- 0.24s lens / 0.65s scene
- delay
- stagger 45ms
- easing
- [0.16,1,0.3,1]
- transform
- mask position, x 16→0, scale .98→1
- scroll
- Native; progress line only
- desktop
- Cursor lens follows with damped motion
- mobile
- Press-and-hold construction toggle
- reducedMotion
- Static side-by-side proof/final state
Responsive behavior
Designed across the actual range.
390px becomes a disciplined typographic list; 768px introduces previews; 1024px+ enables pointer lens; 1440/1920px expand margins rather than line lengths.
Implementation: Next.js and Motion; CSS masks for the proof lens.