Framer
No-code site builder with real motion
A no-code website builder aimed at designers who want production-grade animation without writing code.
framer.comColor palette
Accent
Primary#ffffff
Primary brand color — key actions and emphasis.
Accent Blue#0099ff
Accent color used within the product's own UI.
Gradient Magenta#d44df0
Accent color used within the product's own UI.
Gradient Violet#6a4cf5
Accent color used within the product's own UI.
Gradient Orange#ff7a3d
Accent color used within the product's own UI.
Gradient Coral#ff5577
Accent color used within the product's own UI.
Semantic
Semantic Success#22c55e
Success state.
Neutral
On Primary#000000
Text and icon color on a solid primary fill.
Ink#ffffff
Primary text color.
Ink Muted#999999
Primary text color.
Canvas#090909
Page background.
Surface 1#141414
Card and panel surfaces.
Surface 2#1c1c1c
Card and panel surfaces.
Hairline#262626
Borders and dividers.
Hairline Soft#1a1a1a
Borders and dividers.
Inverse Canvas#ffffff
Page background.
Inverse Ink#000000
Primary text color.
Type scale
- Display Xxl
- 110px · 500 · 0.85
- Display Xl
- 85px · 500 · 0.95
- Display Lg
- 62px · 500 · 1
- Display Md
- 32px · 500 · 1.13
- Subhead
- 24px · 400 · 1.3
- Headline
- 22px · 700 · 1.2
- Body Lg
- 18px · 400 · 1.3
- Body
- 15px · 400 · 1.3
- Body Sm
- 14px · 500 · 1.4
- Button
- 14px · 500 · 1
- Caption
- 13px · 500 · 1.2
- Micro
- 12px · 400 · 1.2
Fonts
PrimaryInter VariableWeights 400, 500
SecondaryGT Walsheim MediumWeights 500
SecondaryGT Walsheim Framer MediumWeights 500
SecondaryInterWeights 700
Spacing & shape
- Hair
- 1px
- Xxs
- 4px
- Xs
- 8px
- Sm
- 12px
- Md
- 15px
- Lg
- 20px
- Xl
- 30px
- Xxl
- 40px
- Section
- 96px
- Xs
- 4px
- Sm
- 6px
- Md
- 10px
- Lg
- 15px
- Xl
- 20px
- Xxl
- 30px
- Pill
- 100px
- Full
- 9999px
Guidelines
- Reserve Primary for primary actions and emphasis — it is the system's one accent color.
- Keep type on the documented family set (Inter Variable, GT Walsheim Medium, GT Walsheim Framer Medium, Inter).
- Use one of the documented corner radii (4px, 6px, 10px, 15px, 20px, 30px, 100px, 9999px) rather than a one-off value.
- Build spacing from the documented scale (1px, 4px, 8px, 12px, 15px, 20px, 30px, 40px, 96px) instead of arbitrary padding.
- Don't apply Primary as a full-page background or a large fill.
- Don't introduce a second accent color alongside Primary.
- Don't mix in an additional typeface beyond the ones documented here.