Download Font
View Colors

Design guidelines

Best practices for logos, colors, and typography

Our design system helps us create a memorable, coherent, and consistent brand.

Logo usage

Our mark is a W made up of three separate shapes, which together represent the three pillars of the web: HTML, CSS, and Javascript.

Clearspace

The logo and mark should have healthy padding in every placement. Ideal clearspace is equal to the height of the W on each side.

Sub-brands

The brand’s reach is extended through the strategic use of one of our many sub-brand logos. These unwieldy landscape logos should be used carefully, and defer to the default logo or mark when scaleability or accessibility is at risk.
Download template

Cobranding

Our community, agency service providers, Webflow apps, and event co-sponsors provide many opportunities for split or shared branding.

The dont's

Colors convey emotions, establish our brand identity, and enhance the user experience. These principles ensure effective and purposeful use of color.
Don’t misalign the mark and the wordmark
Don’t use the default logo on a color
Don’t fail contrast accessibility
Don’t alter, crop, skew, outline, or distort
Don’t exclude the mark from the logo
Don’t stack the logo vertically
Don’t add gradients or effects
Don’t substitute the logo in a sentence

Typography

WF Visual Sans is a variable font that takes cues from geometric standards like ITC Avant Garde and Futura, while offering a wider range of styles, and a lower stroke contrast. Its elegant plainness allows it to move effortlessly between being a central design element to playing a supporting role in smaller copy.
AaBbCc123#→%
AaBbCc123#→%
AaBbCc123#→%

Headings & large texts

All brand headlines are set in WF Visual Sans Semibold. Headlines with three or more lines, as in the lower example, can use the Regular weight while using Semibold for emphasis.
Download font
Click on me to edit text
Google Font alternative: Poppins Semibold

Heading type stack

Put time and attention into the headlines, layouts, and hierarchy. Let the font do the rest.
Build better
h0
Weight
Semibold
Font size
8rem / 128px
Line Height
1.04 / 104%
Letter spacing
0.01em / 1%
Your site should do more than look good
h1
Weight
Semibold
Font size
5.313rem / 85px
Line Height
1.04 / 104%
Letter spacing
0.01em / 1%
The site you want — without the dev time
h2
Weight
Semibold
Font size
3.5rem / 56px
Line Height
1.04 / 104%
Letter spacing
0.01em / 1%
First-ever website experience platform
h3
Weight
Semibold
Font size
2.313rem / 37px
Line Height
1.04 / 104%
Letter spacing
0.01em / 1%
The site you want — without the dev time
h4
Weight
Semibold
Font size
1.5rem / 24px
Line Height
1.3 / 130%
Letter spacing
0.02em / 2%
Webflow lets marketers, designers, and developers come together
to build, optimize, and scale web experiences that get results.
h5
Weight
Semibold
Font size
1rem / 16px
Line Height
1.3 / 130%
Letter spacing
0.02em / 2%
Design. Build. Launch
h6
Weight
Medium
Font size
0.9375rem / 15px
Line Height
1.3 / 130%
Letter spacing
0.01em / 10%

Paragraphs

WF Visual Sans Text optical sizes optimize for readability. The spacing opens up and the letterforms become more condensed as the geometric design becomes more traditional, and better suited for reading.
Download font
Click on me and type anything you want so you can preview WF Visual Sans Text in use.
Google Font alternative: Inter Regular

Paragraph type stack

Typeset text with optical kerning and use sentence case. Setting in all caps is allowed for eyebrows or other types of documentation.
Webflow is used by more than 3,500,000 designers and teams to create, collaborate on, and scale beautiful websites in a completely visual canvas — no coding needed.
So everyone can focus on what they do best.
Paragraph XXL
Weight
Regular
Font size
2.125rem / 34px
Line Height
1.6 / 160%
Designing your site is just the first step. As the first ever website experience platform, Webflow gives every team the tools they need for every step of the website lifecycle — including visual site building, content management, analytics, and optimization.
Paragraph XL
Weight
Regular
Font size
1.5rem / 34px
Line Height
1.6 / 160%
Turn nav bars, footers, signup forms, and more into components that you can reuse, maintain, and modify across your org with shareable libraries.
Paragraph L
Weight
Regular
Font size
1.125rem / 18px
Line Height
1.6 / 160%
Take control of HTML5, CSS3, and JavaScript in a completely visual canvas — and let Webflow translate your design into clean, semantic code that’s ready to publish to the web, or hand off to developers.
Paragraph
Weight
Regular
Font size
1rem / 16px
Line Height
1.6 / 160%
Webflow is used by more than 3,500,000 designers and teams to create, collaborate on, and scale beautiful websites in a completely visual canvas — no coding needed.
So everyone can focus on what they do best.
Paragraph s
Weight
Regular
Font size
0.9375em / 15px
Line Height
1.65 / 165%
More than a website builder
Eyebrow
Weight
Medium
Font size
0.9375em / 15px
Line Height
1.3 / 130%
Letter spacing
0.01em / 10%
Design. Build. Launch.
Caption
Weight
Medium
Font size
0.625rem / 10px
Line Height
1.3 / 130%
Letter spacing
0.01em / 10%

Color palette

Our palette spans the rainbow and the customer journey. In brand our colors are bright and punchy. In product they’re serious and restrained.

Main palette

Lead with blue, black, and white for big brand moments. Our greyscale palette isn’t just a nice to have. White and black anchor our brand as clear, iconic, and recognizable. We elevate these basics because of their utility, but also because of their unmatched contrast.
Aa
COPY
COPY
COPY
COPY
COPY
COPY
COPY
COPY
COPY
COPY

Blue

#146EF5
Aa
COPY

Black

#080808
Aa
COPY

White

#FFFFFF
Aa
COPY

Gray 900

#171717
Aa
COPY

Gray 800

#222222
Aa
COPY

Gray 700

#363636
Aa
COPY

Gray 600

#5A5A5A
Aa
COPY

Gray 500

#757575
Aa
COPY

Gray 400

#898989
Aa
COPY

Gray 300

#ABABAB
Aa
COPY

Gray 200

#D8D8D8
Aa
COPY

Gray 100

#F0F0F0

Secondary palette

All other colors should be used strategically and with an even distribution of preference.
Aa
COPY

Purple

#7A3DFF
Aa
COPY

Pink

#ED52CB
Aa
COPY

Red

#EE1D36
Aa
COPY

Orange

#FF6B00
Aa
COPY

Green

#00D722
Aa
COPY

Yellow

#FFAE13

Color usage

Each asset should include black, white, and one color. Choose whichever color works best, while being conscious of the wider context. But only choose one.

The dont's

Each asset should include black, white, and one color. Choose whichever color works best, while being conscious of the wider context. But only choose one.
Don’t use multiple colors in a single illustration
Not ready for publish
Don’t use colors for text
Don’t use multiple colors in a contiguous line
Don't create gradients
Don’t pair floods of color

Illustration

Our illustrated objects are simple, dimensional, and often used in angled, repeating patterns. They relate to the content they accompany, on a metaphorical or conceptual level.

Standard illustrations

These visuals are suited to enhance written narratives, providing a balance between simplicity and visual appeal. Simple pops of color add emphasis and a touch of personality to ads, slide decks, layouts, swag, content, blog posts, and ebooks.
Standard Illustrations - Color example

Color

Adhere to a monochromatic palette—one color, black, and white. This restriction cultivates visual cohesion, ensuring a focused aesthetic that harmonizes seamlessly across content. Use one or two tones when needed to help emphasize or create hierarchy.

Standard Illustrations - Figures example

Figures

Depictions of people, including hands, should exude a serious, technical demeanor akin to medical illustrations. This choice keeps depictions from feeling cartoonish or trendy, aligning them with the modernist, iconic style and maintaining a cohesive visual language.

Standard Illustrations - Photos example

Photos

Photos shouldn’t be stock, and should only represent specific people in customer stories, announcements, and interviews. Elevate the visuals by removing color slightly increasing contrast, emphasizing the subject's presence. Ensure seamless integration into the composition or key the person from photo for enhanced layout cohesion.

Elevated illustrations

These visuals are suited to video, motion, and educational content. They as the bridge between our Standard and Aspirational styles. Their characteristic bloom effect help guide the eye and add emphasis to thumbnails and ads.
Elevated Illustrations - Dimension example

Dimension

Any use of 3d should balance realism with artistic expression, avoiding any cartoonish exaggeration.

Elevated Illustrations - Size example

Size

This style can be applied to smaller details to create texture and space. Use opacity or tints to emphasize one or two elements.

Elevated Illustrations - Emanating light example

Emanating light

Light should feel detailed, realistic and not just a shadow or glow affect carelessly applied. When in doubt adhere to a monochromatic palette—one color, black, and white.

Aspirational illustrations

These emotive and intricate visuals make a lasting impression, embodying Webflow’s unmistakably pro narrative. Their loud visual voice is suited for keynotes, the homepage, and hero campaigns.
Aspirational Illustrations - Dimension example

Dimension

Balance realism with artistic expression by using natural light, texture, and reflection. Avoid exaggerating proportions or perspective.

Aspirational Illustrations - Size example

Size

In tier 1 settings, this style can be applied to smaller details like icons or buttons. Each case should be considered seriously to retain the impact of the larger illustrations.

Motion

We use motion to guide the viewer and create delightful moments. We draw inspiration from web fundamentals like scrolling and swiping to progress a story. Above all, our dynamic approach should feel polished, accessible, and intentional.

Principles

We construct narratives layer by layer, enriching details, and ensuring smooth transitions for an engaging and cohesive visual experience.
Motion principles - Build example

Build

Construct, layer, and combine elements to imply growth, transformation, and emergence. This might look like elements revealed one at a time or in groups. Revealing distinct shapes and groups gives the impression of something being constructed using primitives.

Motion principles - Enhance example

Enhance

Zoom, crop, and focus on the main idea of the story. Enrich the experience by guiding viewers through details, while intentionally removing or adding context. Get in close to the action on complex UI, but be sure to zoom out to reveal helpful context such as impact on canvas, location of menu in panels, etc.

Motion principles - Reduce friction example

Reduce friction

Transition and move elements confidently, at a legible and smooth pace. Create seamless transitions, especially when combining 3D and 2D elements. Create cohesion by planning movement and layout with clear plans or storyboards.

2024 Motion Reel

Webflow's motion system extends how our brand shows up in the world. Our motion principles evolve to align with the power of our product and enhance the emotional qualities of our stories — that's central to building a brand that can stand the test of time.
Copied to Clipboard

#FFFFFF

Previous

Brand assets

↗
Next

Voice and tone

↗