Style Guide

Webflow University provides a library of videos, tutorials and resources to help you get started.

Colors

Base colors

White

#FFFFFF

Black

#000000

Primary colors

Primary 900

#6C1053

Primary 800

#7B1460

Primary 700

#941A74

Primary 600

#AD2088

Primary 500

#D42AA7

Primary 400

#F557C5

Primary 300

#F899D6

Primary 200

#FAC4E5

Primary 100

#FCDFF0

Primary 50

#FDEFF7

Primary 25

#FEF7FB

Secondary colors

Secondary 200

#FEF08A

Neutral colors

Neutral 900

#101828

Neutral 800

#1D2939

Neutral 700

#344054

Neutral 600

#475467

Neutral 500

#667085

Neutral 400

#98A1B2

Neutral 300

#D0D5DD

Neutral 200

#EAECF0

Neutral 100

#F2F4F7

Neutral 50

#F6F7F9

Neutral 25

#FCFCFD

Success colors

Success 700

#027948

Success 200

#D1FADF

Error colors

Error 700

#B32318

Error 200

#FEE4E2

Typography

The quick brown fox jumps over the lazy dog

heading-style-h1 - 3.5rem / 1.1

The quick brown fox jumps over the lazy dog

heading-style-h2 - 3rem / 1.1

The quick brown fox jumps over the lazy dog

heading-style-h3 - 2.5rem / 1.2

The quick brown fox jumps over the lazy dog

heading-style-h4 - 2rem / 1.2

The quick brown fox jumps over the lazy dog

heading-style-h5 - 1.5rem / 1.4

The quick brown fox jumps over the lazy dog

heading-style-h6 - 1.25rem / 1.5

Donec in risus ac ipsum aliquam sodales vitae quis est suspendisse dignissim est sed mauris ultrices sagittis fusce pellentesque orci et mauris elementum condimentum nulla, commodo luctus nibh, eu finibus metus malesuada quis.

text-size-medium - 1.125rem / 1.6

text-size-regular - 1rem / 1.5

text-size-small - 0.875rem / 1.5

Buttons

Primary Small

Primary Large

Secondary Small

Secondary Large

Button Text

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Rich text

The steps covered in this guide

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt
Labore et dolore magna aliqua

Why you should start protecting yout skin

Et qui et quae et maxime assumenda. Suscipit voluptatum in fugiat. A sapiente eveniet doloremque asperiores numquam voluptatem. Beatae illo commodi. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Choose your preferred product

Et qui et quae et maxime assumenda. Suscipit voluptatum in fugiat. A sapiente eveniet doloremque asperiores numquam voluptatem. Beatae illo commodi. Onsectetur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

Ut porro aperiam dolores. Maxime aut rerum corporis est iusto quod molestiae ut quisquam.

Keep it simple

Quisquam ea quos quisquam velit debitis. Ut cumque eius. Dolor molestias voluptatem in. Et blanditiis perferendis aperiam illum molestiae molestiae corporis. Consequatur quae accusamus provident qui. Est dolorem ut sint aliquid et et placeat eum minima. Osmod 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt
Labore et dolore magna aliqua

Useful resources for beginners

Voluptates autem placeat in amet blanditiis. Enim aut sed qui. Dicta corporis occaecati aut. Ea architecto dolores est culpa repellat delectus. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.