Framer

Overview

Framer is an AI-powered design-to-code platform that collapses the gap between ideation and production. Built for designers and developers who refuse to compromise on editability, the platform embodies a "Technological Minimalism" aesthetic—a dark, high-contrast interface where electric blue (#0099ff) and neon lime (#cbff00) accents pierce through pure black (rgb(0, 0, 0)) surfaces, creating an atmosphere of precision and forward momentum. The visual language evokes the energy of a command-line interface reimagined for the modern design canvas: stark, intentional, and unapologetically digital. Users experience a sense of control and agency; every interaction feels responsive and consequential.

The brand voice is direct, confident, and slightly irreverent. Framer speaks to builders, not bystanders. Sentences are short and active: "Ship faster. Edit forever." The vocabulary favors concrete verbs (build, ship, launch, edit) over abstract nouns. The tone rejects corporate softness—there's no "seamless synergy" here, only honest capability. Example sentence in Framer's voice: "Your agent doesn't replace you; it amplifies what you already know how to do."

Colors

The color system is built on a high-contrast dark foundation (surface: #000000, on-surface: #ffffff) punctuated by two dominant accent colors that define interaction and energy. Primary (#0099ff) is the signature electric blue used for all interactive elements—buttons, links, focus states, and the glowing border accents visible in hero imagery. It appears in computed box-shadows as rgba(0, 153, 255, 0.15) to rgba(0, 153, 255, 0.26), creating a subtle halo effect that reinforces interactivity without overwhelming the interface. Secondary (#cbff00), a vivid lime-green, serves as a highlight accent for status indicators, badges, and secondary CTAs, providing visual contrast against the blue and creating a cyberpunk-inspired palette. The surface stack progresses from pure black (#000000) throu

Typography

The type system pairs GT Walsheim (a geometric sans-serif with mechanical precision) for headlines and display text with Geist (a humanist sans-serif with excellent screen rendering) for body and label text. Display (54px, weight 500, line-height 64px, letter-spacing -0.02em) sets the hero narrative with confident scale; headline-lg (40px, weight 700, line-height 48px) anchors section introductions; body-md (16px, weight 400, line-height 24px) ensures comfortable reading at all viewport sizes. The weight hierarchy is deliberately restrained—only two weights per font (400/500 for Geist, 500/700 for GT Walsheim)—to maintain visual clarity in a dark interface where weight contrast is more critical than in light themes. Label-md (14px, weight 600, line-height 20px, letter-spacing 0.01em) is ap

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, maintaining consistent horizontal rhythm across all breakpoints. The gutter spacing is fixed at 24px (md token), creating predictable margins between grid columns. Section separation uses lg spacing (40px) for major content blocks and md spacing (24px) for subsections, establishing a clear visual hierarchy without excessive whitespace. The dark background (#000000) is treated as an active design element rather than neutral canvas—content cards (surface-container: #141414) are deliberately inset from the background, creating a layered effect enhanced by subtle borders (1px solid at surface-container-high: #242424). Hero sections occupy full viewport height with asymmetric padding: 64px (xl) top/bottom and 24px

Elevation & Depth

Depth is conveyed through a restrained shadow system that reinforces the brand's electric aesthetic rather than creating photorealistic depth. Level 1 (Base): no shadow; content sits flush on the surface (#000000). Level 2 (Standard Card): box-shadow: 0 1px 2px rgba(0, 153, 255, 0.15), 0 2px 4px rgba(9, 159, 255, 0.20)—a dual-layer shadow where the primary color at low opacity creates a subtle glow effect, signaling interactivity. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 153, 255, 0.20)—the glow intensifies on hover, providing tactile feedback. Level 4 (Modals/Overlays): box-sh

Shapes

The shape philosophy is "Technical Precision with Approachability"—rounded corners are used consistently but conservatively, avoiding the extremes of both sharp rectangles and overly organic curves. Buttons use rounded.DEFAULT (8px), creating a subtle softness that feels modern without sacrificing the geometric precision of the brand. Cards and containers use rounded.lg (15px), providing slightly more visual breathing room for larger surfaces. Input fields use rounded.DEFAULT (8px) to align with button styling, creating a cohesive interaction family. Modals and elevated surfaces use rounded.xl

Components

Action Elements Buttons are the primary interaction affordance and use a three-tier system: primary (background: #0099ff, color: #000000, padding: 10px 24px, height: 40px, rounded: 8px) for main CTAs like "Sign up" and "Get started for free"; secondary (background: #ffffff, color: #000000, border: 1px solid #666666, padding: 8px 20px, height: 36px) for alternative actions like "Log in"; and ghost (background: transparent, color: #0099ff, padding: 10px 16px) for tertiary actions. All buttons use label-md typography (14px, weight 600) with letter-spacing: 0.01em. Hover states transition the background color over 150ms (cubic-bezier(0.2, 0, 0.38, 0.9)) and intensify the shadow from sm to md elevation. Focus states add a 3px outline at rgba(0, 153, 255, 0.3) with a 2px offset, visible on k

Do's and Don'ts

**Do**

• Do use primary blue (#0099ff) exclusively for interactive elements—buttons, links, focus states, and active indicators—to create a consistent affordance language.
• Do maintain the dark background (#000000) as an active design element; never treat it as neutral negative space. Layer content with intentional surface-container colors and borders.
• Do apply the blue-tinted shadow system (rgba(0, 153, 255, 0.15) to 0.26)) consistently across all elevated surfaces to reinforce the electric aesthetic and brand identity.
• Do use GT Walsheim for headlines and Geist for body text; never mix serif fonts or introduce system-ui fallbacks that break the precision aesthetic.
• Do scale spacing in multiples of 8px (4px, 12px, 24px, 40px, 64px); arbitrary spacing breaks the grid rhythm and visual hierarchy.

**Don't**

• Don't use black shadows (rgba(0, 0, 0, ...)) on cards or interactive elements; the brand signature is the blue glow, not traditional depth.
• Don't apply rounded corners larger than 15px to buttons or standard cards; the precision aesthetic demands geometric restraint.
• Don't use secondary colors (#cbff00 or #ffffff) as primary CTAs; primary blue is the only affordance color for main actions.
• Don't introduce warm grays or off-blacks into the surface stack; the palette is pure black with cool-toned accents, never beige or warm neutrals.
• Don't animate transitions longer than 200ms on hover states; the brand feels responsive and snappy, not leisurely or delayed.