Voice & Tone

Our purpose

To empower you to create for the web.

In today's web, the means of production lie in the hands of the few. We want to change that, and help create a more beautiful, diverse web.

We want to democratize access to the tools and knowledge required to build beautiful, well-coded websites, web apps, and — eventually — digital products of all kinds.
‍

Our promise

To give you the tools and knowledge you need without dumbing things down, or taking power out of your hands.

Building the web won’t be easy. It’s a rich, dynamic environment, and that means that the tools we build for it need to be complex.

We simplify web design and development not by removing functionality or limiting your vision, but by translating code’s abstractions into concrete visual effects.

In so doing, we get the artist as close as possible to the medium itself.
‍

What sets us apart

We’re building the future, today.
‍

We will push the boundaries, and do things that weren’t possible before. We don’t think, “Is it going to be hard?”
We just do it.

–Sergie Magdalan, Chief Design Officer, Webflow
‍

What we stand for

The democratization of creativity.

If the web is “dying” — if it’s being homogenized — it’s because too few people have the power to create on the web. With few creators comes a constrained vision. By empowering more people to create for the web, we can diversify not only what’s built, but how it’s built.
‍

Our voice persona

The helpful senior designer.

Our voice is that of a hip, informed professional fired up by their vision of democratizing design; making beautiful, usable products; and helping others find both the inspiration and power to make those products themselves.

We have a vision for how the design process should work, and want to get you on board with it, because we believe it’s the right way.
‍

Our voice characteristics

Professional. Empowering. Responsive. Knowledgeable. Helpful.
‍

Professional, not corporate

When it comes to our product, we’re confident and serious, but not stiff or distant. We care about our customers’ dreams and struggles. We’re not above sharing our excitement and cracking a joke now and again, especially on the blog, forums, and social media. Positive emoji and hilarious GIFs are right up our alley.
‍

Empowering, not overpowering

Everything we do at Webflow is about empowering our customers. It's not about the effort we put into building tools and features — it's what designers can do with those tools that matters.

We want to give you the tools and knowledge you need to build your vision — not to tell you exactly how to do it. When we provide tips and knowledge, it’s not that we believe it’s a matter of “this way and no other,” but “we believe this is the best way.”
‍

Responsive, not reactive

When our customers encounter problems, we’re there, ready to help. We acknowledge their thoughts, opinions, and struggles, but don’t just blindly adopt their stance. Because we have a strong vision for the future of design, we’re not going to act on just any advice, negative reaction, or momentary trend. When we’re challenged on something, we respond intelligently, not with outrage.
‍

Knowledgeable, but not pedantic

We know the web design world inside and out, and we’re ready to share that knowledge wherever and whenever we think it’s useful. We’ve always got an authoritative reference at our fingertips, and we’re happy to share it.
‍

Helpful, not salesy

Everything from our product’s feature set to our content marketing should be designed not to sell people on us, but to give them something useful and empowering. Yeah, we want you to upgrade and host with us, but only if it’s right for you.
‍

Simple, clear, and direct

Like our product, our content should always aim to simplify the complex. With that in mind, always use the shortest, most well-known word (i.e., say go, not navigate). Limit your use of adjectives, adverbs, and jargon. And always use the active voice — instead of saying "SEO settings can be updated in the Pages panel," say "You can update your page's SEO setting in the Pages panel."
‍

Our design process

Content-first. Design-led. Responsive and accessible.

Every website combines content, code, and design. The best websites consider how all three can work together to the greatest effect throughout the design process.

In general, use...

‍

• The Oxford comma
  Put a comma before "and" in a list‍
• Spaces before/after an ellipses and an em dash
  “Because … duh”
  “Because — duh”‍
• Sentence case
  “How to do this” not “How To Do This”‍
• American English
  “Favorite” not “favourite”‍
• PG-13 language
  Similar to exclamation points, you get one. Like the use of “bullshit” in this quote‍
• Our inclusive writing guidelines to double-check for racist, ableist, or sexist language
• Contractions
  ‍“you’re” not “you are”
• The full term or phrase of an acronym before the acronym
  “Web Content Accessibility Guidelines (WCAG),” then just “WCAG” thereafter
  If the piece is long and you haven’t mentioned WCAG in a while, rinse & repeat

How we name things

At Webflow, we like things clear, straightforward, and easy to understand.

That preference is reflected in how we name things. We don't go for razzle-dazzle, allusive names that give you no clue what the named thing actually is.

That's why our core products — Designer, CMS, Editor, and Hosting — all just tell you what the product is, without trying too hard. Keep this standard in mind when you're trying to name a new product or feature.
‍

Naming style

Any Webflow product (see below for the list) should be title-cased when referenced in text.

The proper name for each product should follow this structure: the Webflow [Product Name].
‍

Example

The Webflow Designer gives anyone the power to design and develop a beautiful, responsive website. That’s because the Designer gives you direct, visual access to the HTML, CSS, and JavaScript that powers the web — without you actually writing the code.

The following are official Webflow products.

• Webflow
  
• Client Billing
• Designer
• CMS
• Editor
• Hosting
• Ecommerce

Obviously, Designer, Editor, and Hosting have non-productized uses that don’t require capitalization. E.g., when referring to an individual who practices the discipline of design, you wouldn’t capitalize the word “Designer.“
‍

Products vs. features

Our products represent the core, broad use cases for Webflow — design, develop, publish, host, and manage — not detailed functionality.

Each Webflow product encompass a variety of features, which should not be capitalized, except where doing so helps clarify that you’re referring to a Webflow-specific concept. Examples of the latter are included in the list of products above.

Examples of features within our products include:

• Interactions
  
• 3D transforms
• Flexbox

These features should not be capitalized. Note that, in general, these refer to generic web concepts we didn’t invent, hence the lack of capitalization.
‍

Referencing UI elements in copy

Wherever possible, avoid referencing specific UI elements in copy.

Instead of saying "hit the save button," just say, "save." Or, instead of "open the Add panel and throw in a div block," say "Add a div block."

• Showcase
  
• Discover
• Project Settings
• Dashboard
• Add panel
• Pages panel
• Collections panel
• Asset panel
• Style panel
• Elements tab
• Symbols tab
• Settings tab
• Settings panel
• Navigator (tab)
• Style Manager (tab)
• Interactions tab
• Collection(s)
• Collection list
• Editor panel

Individual elements from the Add panel (div block, link block, etc.) don’t require capitalization, except as noted above.
‍

Title casing rules

Note that we use sentence case in all marketing materials, and are moving toward sentence case in the product as well. Which is to say: you should not need to reference the below.

• Capitalize the first and last word in a phrase
  
• Capitalize all “major” words (nouns, verbs, adjectives, adverbs, and pronouns), including the second part of hyphenated major words (e.g., Self-Report not Self-report)
  
• Capitalize all words of four letters or more
  

Lowercase “minor” words of three letters or fewer, including:

• Conjunctions (words like and, or, nor, and but)
  
• Articles (a, an, and the)
  
• Prepositions (words like as, at, by, for, in, of, on, per, and to)

Words carry meaning, and can cause harm — even if unintentional. And creating more inclusive spaces is defined by our actions, not our beliefs. Here’s how to help people feel more safe and included using language.

Use the below sections as a reference to avoid causing unintentional harm with the words we use. Note: Alternatives for these terms will vary depending on context.
‍

General tips

• Most times, the way to make something more inclusive is to get more specific about what you’re trying to say — e.g. “That’s unheard of” rather than “That’s crazy”
  
• When referring to Black people, capitalize “Black”
  
• When referring to Native or Indigenous people, capitalize “Native” and “Indigenous”

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.