Framer Expert

Overview

Framer Expert is a high-conversion portfolio and service site for a Berlin-based Framer specialist building custom websites for AI and SaaS startups. The aesthetic is **Geometric Abstraction meets Technical Precision**—a bold, energetic visual language that combines warm, saturated oranges (#f05024) with clean white space and intricate line-work overlays. The brand personality is confident, direct, and results-driven: it speaks to founders who demand performance, not decoration. The emotional response is one of forward momentum and technical credibility—the site itself demonstrates the craftsmanship it promises.

The voice is conversational yet authoritative, avoiding hype in favor of concrete outcomes. Sentences are short and action-oriented. Example: "I build Framer websites for AI and SaaS startups — migrations, marketing sites, and product launches." The brand avoids jargon while celebrating technical depth; it's equally comfortable discussing React components and conversion rates.

Colors

The color system is anchored on a vibrant, high-saturation primary orange (#f05024) that appears on all CTAs, headlines, and interactive elements. This is the signature accent—the color users instinctively click. The secondary orange (#f04e23) provides a darker variant for hover and active states, creating a tight, energetic palette. The background is pure white (#ffffff) with a warm off-white (#f5f4ef) used for subtle container differentiation and breathing room. Tertiary blue (#2432ff) is reserved for badges and secondary accents, providing a cool contrast to the warm primary.

Usage rules: Primary (#f05024) is applied to all primary CTAs ("Book a Discovery Call"), section headings, and focus states. Secondary (#f04e23) is used for button hover states and borders. On-surface text is pure

Typography

The type system pairs **Space Grotesk** (geometric, modern, tech-forward) for headlines and labels with **Inter** (neutral, highly legible) for body text and UI. This pairing communicates both creativity and precision. Display (64px, 700 weight, -0.02em tracking) is reserved for hero headlines and makes a bold statement. Headline-lg (40px, 700 weight) is used for section titles and major content blocks. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size, with generous line-height (1.56x) to ensure comfort on longer passages. Label-md (14px, 600 weight, 0.05em tracking) is used for buttons and UI labels, with increased letter-spacing to add visual weight and clarity. DM Mono (12px, 500 weight) is used sparingly for technical badges and metadata, reinforcing the brand's

Layout

The page uses a **12-column fluid grid** with a max-width of 1280px, centered on larger screens. The gutter is 24px, providing consistent breathing room between sections. Sections are separated using the lg spacing token (40px) for major breaks and md spacing (24px) for minor groupings. The hero section spans full-width with a contained content area inside, allowing the geometric background pattern to extend edge-to-edge while keeping text readable. Cards and containers use md padding (24px) internally. The layout philosophy is "generous white space with strategic density"—large headlines and short copy blocks are surrounded by ample negative space, while CTAs and badges are tightly grouped for visual impact. Container max-width is 1280px; on mobile, padding increases to md (24px) on each

Elevation & Depth

Depth is conveyed through a **layered surface stack** rather than heavy shadows. Level 1 (Base) is the white background (#ffffff). Level 2 (Cards & Containers) uses surface-container-low (#f5f4ef) with a 1px border in outline-variant (#d0d0d0), creating a subtle frame. Level 3 (Elevated Cards & Modals) uses surface-container (#f0ede8) with the same border treatment and a soft shadow: box-shadow: 0 4px 12px rgba(0,0,0,0.08). Interactive elements (buttons, inputs) receive a focus shadow of 0 0 0 3px rgba(240, 80, 36, 0.1)—a soft halo in the primary color. The geometric line-work overlay (visible

Shapes

The shape philosophy is **Technical Minimalism**—sharp, architectural corners with minimal rounding. Buttons and inputs use a 4px radius (0.25rem), just enough to soften the geometry without appearing playful. Cards use 8px (0.75rem) for a slightly more generous curve that suggests containment. The geometric line-work overlay uses sharp, angular curves (no border-radius) to reinforce the technical aesthetic. This approach contrasts with the warm, organic color palette, creating tension that feels intentional and premium. Badges use full rounding (9999px) to signal secondary, non-critical infor

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses 48px height, 12px vertical padding, 24px horizontal padding, 4px border-radius, and a 200ms ease-out transition on background-color. The hover state darkens the primary orange to #e64a1f. The active state further darkens to #d43f1a. Secondary buttons use a 2px border in the primary color with a transparent background; on hover, the background fills with primary-container (#f5e8e0) and text shifts to on-primary-container (#5a2415). All buttons use Space Grotesk at 14px, 600 weight, 0.05em letter-spacing for maximum clarity and visual weight.

Containers & Surfaces Cards use a 1px border in outline-variant (#d0d0d0), 24px padding, and 8px border-radius. The default background is surface-container-low

Do's and Don'ts

**Do**

• Do use the primary orange (#f05024) on all CTAs and interactive elements—it's the visual anchor that guides user attention.
• Do maintain generous white space around headlines and copy blocks; the layout breathes, which reinforces confidence and clarity.
• Do apply the 200ms ease-out transition to all interactive state changes (hover, focus, active) for a polished, responsive feel.
• Do use Space Grotesk for headlines and labels to reinforce the technical, forward-thinking brand personality.
• Do layer cards and containers using the surface-container stack (lowest → low → DEFAULT → high → highest) to create visual hierarchy without relying on shadows alone.

**Don't**

• Don't use the primary orange on body text or non-interactive elements—reserve it for CTAs and highlights to maintain visual hierarchy.
• Don't apply heavy shadows (anything over 0 16px 40px) to cards; the brand uses subtle elevation and the surface-container stack instead.
• Don't round corners more than 8px on cards or 4px on buttons; the sharp, technical aesthetic is core to the brand identity.
• Don't mix typefaces within a single section; use Space Grotesk for all headlines in a section and Inter for all body text.
• Don't use the tertiary blue (#2432ff) as a primary accent; it's reserved for badges and secondary UI elements only.