Guidelines deck

6 boards · page order preserved

framer

design tools / website builder2014
Framer
The web builder loved by designers.
FramerFramer — Brand
01Framer — Brandcover
Identity · Marks
Logo
primaryclear 1× cap heightmin 88px · screen
Framer
light
Framer
dark
Framer
brand
mark“The Framer F”clear 0.5× mark widthmin 20px · screen
FR
light
FR
dark
FR
brand
inverseclear 1× cap heightmin 88px · screen
Framer
light
Framer
dark
Framer
brand
favicon
FR
light
FR
dark
FR
brand
monoclear 1× logo heightmin 24px · screen
Framer
light
Framer
dark
Framer
brand
Favicon legibilityfavicon · at native px
FR
16px
FR
20px
FR
24px
FramerLogo
02Logologo-suite
Tokens · Color
Color
Framer Blue
primary#0055FF
50950
AA 5.6
Black
text#0A0A0A
50950
AA 19.8
White
surface#FFFFFF
50950
FramerColor
03Colorcolor-system
Tokens · Typography
Typography
Aa
InterRasmus Andersson · google · variable
The web builder loved by designers.
Regular400Medium500Semibold600Bold700
FramerTypography
04Typographytype-specimen
Identity · Voice
Voice
confident·crisp·modern·energetic
Sample · headline
“The web builder loved by designers.”
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
FramerVoice
05Voicevoice
Applications · Social
Social
FR
Framer@framer
X
Design, publish, and scale — all in one place.
♡ 2.4k↻ 318↗ 41
FR
Framer@framer
LinkedIn
Design, publish, and scale — all in one place.
♡ 2.4k↻ 318↗ 41
FramerSocial
06Socialsocial-mockups