Framer
www.framer.comthe website builder demonstrating itself - a dark, bento-led showcase built in Framer and animated by Framer Motion, where the site IS the product pitch.
Design tokens
- display
- GT Walsheim (Medium)
- body
- Inter / Inter Variable
- alt
- Mona Sans
Do / Don't
Reference it for
- Motion-as-default product marketing - entrances and hover life on most elements.
- A dark hero with a single bright accent (#0099ff) and huge white display type.
- The bento feature grid: unequal colourful tiles, each showing real product UI.
- Very tight display tracking (~-0.05em) on a geometric display face.
Do not copy
- The animation DENSITY - 600+ animated elements is Framer flexing its own engine; most brands should animate a fraction of that.
- GT Walsheim (licensed) and the #0099ff blue - both Framer-coded.
- Framer Motion as a hard dependency - on Astro, reproduce the feel with lighter tools (see astro-rebuild.md).
Signature moves
bento feature grid of real product UI tiles
unequal colourful bento tiles, each showing real product UI, sit on a pure-black hero with a single bright #0099ff accent and huge white display type.
motion-as-default product marketing
entrances and hover life appear on most elements as the product pitch itself (Framer Motion), with very tight ~-0.05em display tracking.
Related references
Figma
flagshipSaas Product
a white-canvas product site that uses tilted Figma file-cards as the hero imagery, the bespoke variable figmaSans + figmaMono pair at non-integer weights (340, 480, 520, 540), and a 0.16s ease-out motion contract to demonstrate breadth without showing a single screenshot of the actual Figma UI.
Teachable
strongSaas Product
The reference for course-platform brands with editorial serif + neon-yellow CTA — Ivy Presto Headline at 75px, integration illustration with portrait centre, 150,000 creators trust signal.
Webflow
flagshipSaas Product
a white-canvas product flagship that is itself built in Webflow - using the bespoke WF Visual Sans Variable + WF Visual Sans Mono, a Webflow-blue `#146ef5` primary, GSAP + ScrollTrigger + Three.js + Swiper all bundled, and a three-card "AI / Template / Scratch" entry hero that mirrors the actual product's onboarding paths.
Wispr Flow
strongSaas Product
The reference for a butter-cream voice-AI brand at peak typographic confidence — EB Garamond serif hero on lavender-and-evergreen surfaces, with curved-path transcript animations as the signature motion.