Design teardown
Framer
A black, centered page with tight geometric headlines, compact controls, and large rounded panels that play the product. Color stays nearly monochrome until blue, green, and amber appear inside those scenes.
framer.com
Design character
Night product stage
The page is a full-bleed black field with a fixed slim bar and a centered column. Large headlines sit above short gray paragraphs, then the product takes over inside rounded dark frames. Chrome stays quiet so the embedded scenes carry the color and motion.
Typography
Display lines use a geometric grotesque at a heavy optical size, tight tracking, and a 1.0 line height. Interface copy, navigation, and buttons use a variable grotesque at 14–18px. Code inside product scenes switches to a mono face with syntax color.
Color system
The page is black, white, and two grays. Saturated color is reserved for product UI inside the frames: sky blue, mint, amber, and a little purple.
Spacing and geometry
Controls are compact and sit on an 8px rhythm with 10px and 14px padding. Chapters are far apart, with about 120px above the closing block.
Layout
A fixed 64px bar spans the viewport. Content lives in a centered 1200px column. Chapters alternate a text block with a wide product frame, then a bento, a community window, a centered closer, and a six-column footer.
Motion
Page chrome stays still. Motion lives in the hero film, which changes product scenes inside an 18px clip, and in a grain texture that steps across that frame.
UI fingerprint
- Black stage The canvas is pure black, and panels step through #111111, #171717, and #1a1a1a instead of using borders.
- Tight display Headlines are GT Walsheim Medium at 54px or 44px, weight 500, tracking -0.04em, leading near 1.
- White primary The main action is a white 8px button with black 14px type, paired with a 10% white quiet button.
- Product film Large rounded frames play the interface, and that is where blue, green, and amber show up.