A complete visual catalog of design tokens, components, and patterns extracted from Framer's marketing site and documented in DESIGN.md.
Every color from Framer's dark-first identity — pure black void, electric blue accent, and frosted white surfaces.
GT Walsheim for compressed display headlines, Inter for refined body and UI text with extensive OpenType features.
All pill-shaped — no sharp corners on interactive elements. 40px–100px radius range.
Dark surface cards with Framer Blue ring borders and multi-layer floating shadows.
Build layouts with a true visual editor that outputs clean, production-ready code. Drag, resize, and animate with precision.
Create reusable components with built-in variants, interactions, and responsive overrides that scale across your project.
Sites built on Framer's infrastructure load instantly with optimized assets, code splitting, and edge delivery.
Dark inputs with Framer Blue focus rings and minimal chrome.
8px base unit system with fine-grained sub-8px values for micro-adjustments.
From nearly-squared micro edges to full pill shapes — radius grows with element importance.
Inverted elevation system — blue ring shadows for containment, white edge highlights for floating elements.