Design System: Framer

1. Visual Theme & Atmosphere

Framer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black not a warm charcoal or a cozy dark gray, but an absolute void (#000000) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.

The typography is the signature move: GT Walsheim with aggressively tight letter-spacing (as extreme as -5.5px on 110px display text) creates headlines that feel compressed, kinetic, almost spring-loaded like words under pressure that might expand at any moment. The transition to Inter for body text is seamless, with extensive OpenType feature usage (cv01, cv05, cv09, cv11, ss03, ss07) that gives even small text a refined, custom feel. Framer Blue (#0099ff) is deployed sparingly but decisively as link color, border accents, and subtle ring shadows creating a cold, electric throughline against the warm-less black.

The overall effect is a nightclub for web designers: dark, precise, seductive, and unapologetically product-forward. Every section exists to showcase what the tool can do, with the website itself serving as proof of concept.

Key Characteristics:

• Pure black (#000000) void canvas absolute dark, not warm or gray-tinted
• GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)
• Framer Blue (#0099ff) as the sole accent color cold, electric, precise
• Pill-shaped buttons (40px100px radius) no sharp corners on interactive elements
• Product screenshots as hero art the tool IS the marketing
• Frosted glass button variants using rgba(255, 255, 255, 0.1) on dark surfaces
• Extensive OpenType feature usage across Inter for refined micro-typography