framer.com website design: fonts, colors and UI patterns

Design character

Framer’s captured marketing pages are a high-contrast product stage: a visually black field, broad white statements, subdued gray detail, and product demonstrations that supply the texture. The interface is deliberately quiet around the demonstrations. Thin dividers, rounded dark panels, and modest pill actions create order without turning the page into conventional light SaaS chrome.

The lasting character is cinematic but operational: a large claim establishes ambition, an orderly capability matrix proves it, and crisp product imagery or video-like scenes make the platform tangible.

Supported foundations

Color

Only the values below were returned with explicit color roles. They are observations from the listed home captures, not an official Framer token file.

The screenshots visibly use a black canvas and dark product surfaces, but the batch does not provide measured background values. Preserve the dark-field relationship; do not promote an inferred canvas or surface hex into a production token from this evidence.

Typography

No font family or type-role mapping was returned, so this guide deliberately names no family and includes no font-usage component. The captured hierarchy is nevertheless concrete.

The display tier is tight and medium-weight rather than heavy. Supporting copy opens its line height, while small UI text stays compact. Reproduce those relationships with a licensed family chosen separately; the evidence does not establish a font name or license.

Spacing and layout

The values below recur in the desktop section crops. They are a supported inventory, not a normalized spacing scale.

At the observed wide desktop sizes (1408–1712px), content sits in a centered, generously margined frame. The agents page moves from header to statement, actions, a five-column capability matrix, then paired visual cards. The home crop uses a two-by-three capability grid. These are observed compositions, not a claim about every Framer page.

Shape and depth

Some radius and spacing observations are truncated in individual crops; treat the table as a recurring-value reference rather than a complete component inventory.

Visual language

The black field is not empty: it makes white typography, subtle gray UI, saturated imagery, and blue marks feel intentional. Panels are usually dark-on-dark rather than light cards on a dark page. Their soft corners and hairline-looking seams create structure with very little apparent depth.

The strongest color and image moments belong to the product demonstrations. In the agents capture, an abstract purple card sits beside a photographic, play-affordance video card; in the platform capture, blue is concentrated in small performance indicators rather than spread across every tile. This keeps the shell restrained and makes proof moments carry the visual energy.

Components and visible states

Global header

The agents capture shows a compact horizontal header: Framer mark at left, grouped navigation links, Log in, and a light Sign up pill at right. It is a wide-desktop observation only.

Statement and action pair

A large multiline statement is followed by two adjacent pill-shaped actions. The light-filled action leads; the darker adjacent action supports it. Preserve a clear primary/secondary contrast instead of giving both actions equal fill.

Capability matrix

The agents page presents ten capability cells in a two-row, five-column rounded matrix. Each cell contains a small icon and a short multiline label, separated by fine visible rules. The home capture uses the same evidence-first idea as a two-by-three product grid with a label and arrow per tile.

Visual story cards

The agents capture pairs a colored abstract story card with a wider photographic media card containing a visible play affordance. Treat the play symbol as a visible state of that captured card, not evidence for video controls, autoplay, or playback behavior elsewhere.

Supported states

Hover, focus, pressed, disabled, loading, validation, empty, error, menu-open, and responsive-navigation states are not established.

Practical guidance

Preserve

1. Start with a visually black field and let white display text carry the first read.
2. Keep saturated blue and richer media concentrated in proof moments, not across the whole UI.
3. Use large rounded dark panels with quiet seams instead of bright generic cards.
4. Maintain the tight display / relaxed-support-copy contrast.
5. Make capability proof scannable through short labels, icons, and ruled matrices.
6. Pair one clearly leading action with one quieter alternative.

Avoid

1. Recasting the system as a pale dashboard or filling every region with gray cards.
2. Applying blue as a default background, link, badge, and action all at once.
3. Replacing the low-noise matrix with decorative icon clouds or heavy shadows.
4. Treating the captured family-unknown typography as permission to name or distribute a font.
5. Inventing mobile collapse rules, motion, or unseen interaction states.

Known gaps

This batch does not establish exact background, border, gradient, or media-system values; a complete palette; a font family or licensing; a repeatable shadow system; full spacing/radius inventories; interaction behavior beyond the visible states above; motion; accessibility treatments; or mobile/tablet behavior and breakpoints.

Reference scope

This guide studies eight Framer desktop section crops: seven from https://framer.com/ and one from https://framer.com/agents/, at widths from 1408px to 1712px. The four pins above are the representative visual references. It describes the captured marketing surfaces only, not the editor, account, template, documentation, or full site system.