Build With Webflow Design System

Build With Webflow is a free comprehensive design system. Start with the all the basics covered.

Go to Components

Typography

Establishing the typographical scale for each project allows us to uphold a cohesive typography system throughout all project workstreams, ensuring consistency even within multi-designer workflows.

.heading-style-h1

The quick brown fox jumps over the lazy dog.

.heading-style-h2

The quick brown fox jumps over the lazy dog.

.heading-style-h3

The quick brown fox jumps over the lazy dog.

.heading-style-h4

The quick brown fox jumps over the lazy dog.

.heading-style-h5

The quick brown fox jumps over the lazy dog.

.heading-style-h6

The quick brown fox jumps over the lazy dog.

.text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.text-size-xsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.label-large

This is some text inside of a div block.

.Label-medium

This is some text inside of a div block.

.Label-Small

This is some text inside of a div block.

.rich-text

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

Background Colors

Establishing a defined background color palette enables your teams to consistently maintain a cohesive look and feel across all of our various working files, while also facilitating effortless modifications throughout all deliverables.

.background-black

.background-grey

.background-soft-grey

.background-soft-white

.background-indigo

.background-magenta

.background-soft-magenta

.background-peach

.background-peach

.background-soft-peach

.background-white

Text Colors

Establishing a defined typographic color palette enables your teams to consistently maintain a cohesive look and feel across all of our various working files, while also facilitating effortless modifications throughout all deliverables.

.text-color-white

.text-color-soft-white

.text-color-black

.text-color-grey

.text-color-soft-grey

.text-color-indigo

.text-color-magenta

.text-color-soft-magenta

.text-color-orange

.text-color-peach

.text-color-soft-peach

Containers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.container-1440

.container-1280

.container-960

Grids

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.Grid-12

.Grid-8

.Grid-6

.Grid-4

.Grid-2

Margins

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.margin-top-xs

.margin-top-xs {margin-top: 0.5rem;}

.margin-top-s

.margin-top-s {margin-top: 1rem;}

.margin-top-m

.margin-top-m {margin-top: 1.5rem;}

.margin-top-l

.margin-top-l {margin-top: 2rem;}

.margin-top-xl

.margin-top-xl {margin-top: 2.5rem;}

.margin-top-2xl

.margin-top-2xl {margin-top: 3rem;}

.margin-top-3xl

.margin-top-3xl {margin-top: 3.5rem;}

.margin-top-4xl

.margin-top-4xl {margin-top: 4rem;}

.margin-bottom-xs

.margin-bottom-xs {margin-bottom: 0.5rem;}

.margin-bottom-s

.margin-bottom-s {margin-bottom: 1rem;}

.margin-bottom-m

.margin-bottom-m {margin-bottom: 1.5rem;}

.margin-bottom-l

.margin-bottom-l {margin-bottom: 2rem;}

.margin-bottom-xl

.margin-bottom-xl {margin-bottom: 2.5rem;}

.margin-bottom-2xl

.margin-bottom-2xl {margin-bottom: 3rem;}

.margin-bottom-3xl

.margin-bottom-3xl {margin-bottom: 3.5rem;}

.margin-bottom-4xl

.margin-bottom-4xl {margin-bottom: 4rem;}

Paddings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.Padding-top-xs

.padding-top-xs {padding-top: 0.5rem;}

.Padding-top-s

.padding-top-s {padding-top: 1rem;}

.Padding-top-m

.padding-top-m {padding-top: 1.5rem;}

.Padding-top-l

.padding-top-l {padding-top: 2rem;}

.Padding-top-xl

.padding-top-xl {padding-top: 2.5rem;}

.Padding-top-2xl

.padding-top-2xl {padding-top: 3rem;}

.Padding-top-3xl

.padding-top-3xl {padding-top: 3.5rem;}

.Padding-top-4xl

.padding-top-4xl {padding-top: 4rem;}

.Padding-bottom-xs

.padding-bottom-xs {padding-bottom: 0.5rem;}

.Padding-bottom-s

.padding-bottom-s {padding-bottom: 1rem;}

.Padding-bottom-m

.padding-bottom-m {padding-bottom: 1.5rem;}

.Padding-bottom-l

.padding-bottom-l {padding-bottom: 2rem;}

.Padding-bottom-xl

.padding-bottom-xl {padding-bottom: 2.5rem;}

.Padding-bottom-2xl

.padding-bottom-2xl {padding-bottom: 3rem;}

.Padding-bottom-3xl

.padding-bottom-3xl {padding-bottom: 3.5rem;}

.Padding-bottom-4xl

.padding-bottom-4xl {padding-bottom: 4rem;}

Forms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Components

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.Button-Primary

.Button-Secondary

.Button-Tertiary

.Button-Tertiary

.text-Link

.text-Link .Strikethru

.IMG-16-9

An image frame showing an image preview icon over soft gray background

.img-4-3

An image frame showing an image preview icon over soft gray background

.IMG-1-1

An image frame showing an image preview icon over soft gray background