Framer

The web builder loved by designers.

design tools / website builderverifiedframer.com

Framer lets anyone ship a beautiful, responsive website without code — designing, publishing, and iterating in one place. The brand is high-contrast and confident: crisp black-on-white, one electric blue, tight Inter type, and motion baked into everything. It looks like the product feels — fast, precise, and a little electric.

Color

primary

Framer Blue

#0055ff

The electric blue — primary CTAs, links, brand highlights.

surfacedark

White

#ffffff

High-key white canvas; dark mode is near-black.

textdark

Black

#0a0a0a

Body and heading text on white; near-white on dark.

Typography

display → Interheading → Interbody → Inter

Interinter

google

The web builder loved by designers.

Foundry:: Rasmus Andersson
Weights:: 400, 500, 600, 700

Inter (SIL OFL) — safe to self-host. Used as a variable font.

Gradient

Derived from the colour roles, interpolated perceptually. The same three tokens ship in brand.css and tokens.json.

Brand--brand-gradient

linear-gradient(135deg in oklab, #0055ff 0%, #7d15ff 100%)

Worst-case contrast — white 5.59:1 AA · black 3.42:1 AA-large

Hero--brand-gradient-hero

linear-gradient(135deg in oklab, #506ca2 0%, #6f61a2 100%)

Worst-case contrast — white 5.22:1 AA · black 3.90:1 AA-large · ink #ffffff

Button--brand-gradient-button

linear-gradient(180deg in oklch shorter hue, #095cff 0%, #003ee9 100%)

Worst-case contrast — white 5.27:1 AA · black 2.87:1 · ink #ffffff

Voice & Tone

confidentcrispmodernenergetic

Do

+Be crisp and declarative — one strong idea per line
+Speak to designers as peers
+Show the outcome: a live, shipped site
+Keep energy high without hype

Don't

−Don't pad with adjectives
−Avoid generic 'no-code' clichés
−Never bury the capability

Sample copy

buttoncta

Start for free

empty canvasempty-state

Blank canvas. Drop a section to get started.

feature subheadheadline

Design, publish, and scale — all in one place.

hero headlineheadline

The web builder loved by designers.

Logo Inventory

primary

svgpng

mono

svg

Marks from Simple Icons (CC0). Licences and attribution

Usage Rules

MUSTMeet WCAG AA for textaccessibility
Black on white clears AA easily; keep blue for fills and links.
MUSTRespect logo clear spacelogo
Keep at least one cap-height of clear space around the lockup.
SHOULDSet display type tighttypography
Headlines use Inter with negative tracking. Keep leading tight for the crisp Framer feel.
SHOULDOne idea per linevoice
Be crisp and declarative. Cut the second sentence if it isn't load-bearing.

mcpConnect your agent to Framer

live endpoint

Point any MCP client at this brand and every session grounds itself in the real system — colors, type, voice, usage rules. Read-only.

endpointhttps://mcp.brandsweets.com/framer/mcp

.mcp.json

{
  "mcpServers": {
    "brandsweets-framer": {
      "type": "http",
      "url": "https://mcp.brandsweets.com/framer/mcp"
    }
  }
}

claude codeclaude mcp add --transport http brandsweets-framer https://mcp.brandsweets.com/framer/mcp

Framer trademarks and logos belong to their owner. Shown for identification (nominative use); not affiliated or endorsed. Owner of this brand? Request a correction or removal →