Typography

Class: Title
Font-size: 80px
Line-height: 1.3 EM

Heading 1

Class: All H1 Headings
Font-size: 38px
Line-height: 1.3 EM

Heading 2

Class: All H2 Headings
Font-size: 32px
Line-height: 1.3 EM

Heading 3

Class: All H3 Headings
Font-size: 24px
Line-height: 1.6 EM

Heading 4

Class: All H4 Headings
Font-size: 18px
Line-height: 1.6 EM
Heading 5
Class: All H5 Headings
Font-size: 14px
Line-height: 1.6 EM
Heading 6
Class: All H6 Headings
Font-size: 12px
Line-height: 1.6 EM

This is a paragraph element. We have some placeholder text here to show what a paragraph looks like.

Class: All Paragraphs
Font-size: 14px
Line-height: 1.6 EM
This is a tex tlink
Class: text-link
Font-size: 14px
Line-height: 1.6 EM
This is a button
Class: button
Font-size: 14px
Line-height: 1.6 EM
Padding top and bottom: 20px
Padding left and right: 40px
Letter spacing: .3px
This is an outlined button
Class: button
Combo class: outline
Font-size: 14px
Line-height: 1.6 EM
Background: Transparent
Border: 2px, solid
Border color: #4738ec
Padding top and bottom:
20px
Padding left and right: 40px
Letter spacing: .3px

Colors

Class: primary-color
Color: #5350ff
Class: secondary-color
Color: #e8f5fd
Class: dark-color
Color: #0e0e0e

Components

Components include things like your navbar, forms and your footer. These are made out of symbol elements because when you update it one place, it updates it across the site for consistency and easy maintenance.

Navbar

The Navbar symbol below can be placed on any page. If you update it in one instance (like below), it will update across the entire website.

It's common to have multiple different navbars. It's also common to move sub-elements outside of the container and removing the container from navbars. If you do this, make sure to add padding on the left and right hand side of the navbar.

Navbars are typically not inside of a container, they usually site inside of a section or above sections. Add the fixed class to it to make the navbar in the fixed position (this will place it at the top of the page and the navbar will stay on the page while you're scrolling).

Class: navbar
Width: 100%
Container max-width: 1200px
Padding top and bottom: 0px
Padding left and right: 0px

Icon from flaticon ➞

Forms

Forms are a critical component on any website, they help your customers and audience to contact your team. It's important to retain form field labels to make your forms accessible.

Input field font size: 16px (16px+ prevents zooming on mobile devices)
Width: 100%

Contact form

Place this anywhere on the website that you'd like your customers to be able to contact you. A common area to place these is inside of footers or in content sections after you've had some sort of call to action.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sign-up form

Place this anywhere on the website that you'd like your customers to sign-up to subscribe for something. It's common to connect these to MailChimp.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Tabs

You can use the tabs element to share tabulated content. These elements are helpful for when you have a lot of content to share with similar hierarchy.

To use the tabs element copy the symbol and paste it. Or use the CMD + K or CTRL + K keyboard shortcut to add in a Tabs symbol.

Once a Tabs symbol is added to your site, press CMD + SHIFT + A to disconnect it from the symbol parent. On Windows, press CTRL + SHIFT + A.

You can add more tabs by selecting a tab, and using the Copy and Paste function via right click or by pressing CMD + C and CMD + V on Mac, or CTRL + C and CTRL + V on Windows.

To navigate to a different tab, press "D" on your keyboard to open settings on the right hand side. Within there, you can select a tab pane and then add content to that tab pane.

This is a heading inside of a tab

This is the content inside of the first tab, you can place anything inside of a tab

This is the content inside of your second tab, you can place anything inside of a tab

This is the content inside of your third tab, you can place anything inside of a tab

This is the content inside of your third tab, you can place anything inside of a tab

Cards

Use these when you have multiple sets of content to display with images.

Card one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Footer

Class: Footer
Width: 100%
Container max-width: 1200px

Icon from flaticon ➞

Extra styles

Here we are defining extra styles like the max-width of our container element, our padding for each breakpoint, and the border radius which we're utilizing.

Keeping these styles consistent in your design is an easy way to keep your site looking professional and responsive across break points. As you define the styles on each breakpoint, update the values below.

Containers on desktop

Class: container
Max-width: 1200px
Padding top and bottom: 140px
Padding left and right: 40px

Containers on tablet

Class: container
Max-width: 100%
Padding top and bottom: 140px
Padding left and right: 40px

Containers on mobile landscape and portrait

Class: container
Max-width: 100%
Padding top and bottom: 60px
Padding left and right: 20px

Border radius used on elements

Border radius: 4px

Resources and tools

Below is a list of resources and tools which you can reference as you build out your new Webflow website.

Webflow

Webflow is a professional web design platform which you can use to build fully functional, responsive, custom websites visually without having to write code.

Figma

Figma is a collaborative, visual design platform. Figma helps teams create, test, and ship better designs from start to finish.

Webflow University

Webflow University is a free resource where you can learn about how to use Webflow and become a freelancer.

Webflow community forum

The Webflow Forum is a wonderful resource where you can connect with the community, ask questions, help each other and find many answers to your questions about how to use Webflow.

Blush

Create, mix, and customize illustrations made by artists around the world to use in your websites and creative work.

Pixel Geek Community

A community of no coders that leads with empathy and honesty. Make the web beautiful, together.

Zapier

Zapier moves info between your web apps automatically, so you can focus on your most important work.

Google Analytics

Google analytics can be used to add tracking events to any Webflow site.

Notion

Notion is a very user friendly app which works on all of your devices, it allows you to quickly and easily organize information, build relational databased, pages and much more.

Airtable

Airtable is a visual spreadsheet application with many advanced features that allows for automation.

Adalo

Adalo is a visual app development tool that allows you to build apps visually without having to write code.

Unsplash

Unsplash is a resource to find free, high quality photography that you can use in any of your design projects.

The Noun Project

Free icons and stock photos.

Dribbble

Dribbble is a creative community where you can connect with our creatives around the world and share your work in progress. Many creatives visit dribbble to draw inspiration.

MailChimp

MailChimp is an incredible platform which you can use to automate your business communications and so much more.

CodePen

CodePen is an amazing community of people that share creative code solutions with one another.

Twitter

Twitter is a great platform to get to meet people in the creative industry and business professionals.

YouTube

YouTube is a great place to host your videos for your websites.

Webflow Blog

The Webflow Blog is a great place to learn more about web design, business, Ecommerce, product updates, community stories, case studies, SEO and much more.

Waldo's blog

Waldo shares blog posts with content ranging from web design, leadership, habits, life and more.

MakerPad

Makerpad is the worlds leading destination to learn, share and work together to create software—without writing code. We provide the best-in-class education paired with a supportive community and accountability.

Lottiefiles

Lottie animations and the tools you need to test and perfect them. Simply edit and ship your animations in just a few clicks.

Flaticon

The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.

Figma community

Explore, install, use, and remix thousands of files and plugins

Coverr

Coverr is one of the largest repositories of free to use video backgrounds.