Home
DESIGN.mdStar on GitHub

The web design agent
for professional sites

Create a professional website with Framer's no-code AI website builder — design freely, manage CMS content, and publish fast.

Colors
Primary
framer-blue#0099FFAccent, selection, buttons
white#FFFFFFPage (light)
ink#141414Page + canvas (dark)
Surfaces
bg-2#F3F3F3Cards (light)
bg-3#EBEBEBFills, hover
panel-dark#1F1F1FPanels (dark)
raise-dark#303030Raised / fills (dark)
border#E4E4E4Dividers (light)
Text
text#141414Primary (light)
text-2#4B4B4BSecondary
text-3#757575Muted
text-2-dark#CBCBCBSecondary (dark)
Semantic
green#00C65EPublished, success
red#FF3B30Error, destructive
blue-tint#0099FF1ASelection fill
near-black#080808Deepest surface
Typography · Inter · JetBrains Mono
display
700 · −0.035em
The web design agent
42px700
h2
600 · −0.02em
Design freely on an infinite canvas
28px600
h3
600
Manage CMS content and publish fast
21px600
body
400
Create a professional website with Framer's no-code AI website builder.
16px400
layer
JetBrains Mono · 500
Hero / Stack · 1440 × auto
13pxmono
value
JetBrains Mono · 400
radius: 8px · fill: #0099FF · padding: 28px
12pxmono
Designer · Canvas, Layers & Properties
Landing — Home
Layers
Hero
Badge
Title
Subtitle
Button
Now with AI
Build the site of your dreams
Design, animate, and publish — all without code.
Get started for free
Properties
Hero
Fill
Radius 999px
Font size 11px
Padding 6px
Click a layer to select it · edit Fill / Radius / Font size / Padding to repaint the canvas live · switch breakpoints · Publish
Components
Buttons
Input & tags
Canvas Published CMS Breakpoints
Spacing
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
Guardrails
DO
Keep the shell monochrome — white (light) / #141414 (dark) — with #0099FF as the only accent
Use blue for selection outlines, links and primary buttons; tint with alpha (#0099FF1A) for fills
Keep the Designer canvas chrome dark even in light mode — it's a product cockpit
Use Inter everywhere; JetBrains Mono only for layer names, dimensions and CSS values
Show real product vocabulary — Canvas, Layers, Breakpoints, CMS, Publish
DON'T
Introduce a second accent hue — Framer is blue-on-monochrome
Treat the homepage's template-preview fonts (Geist, VT323…) as the brand font — it's Inter
Recolor the F mark to a gradient or multiple fills — one solid fill only
Use #000/#fff naively for text on the opposite surface — step the ink/cbcbcb scale
Randomize the canvas — element edits must repaint deterministically from the controls