Style guide

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

Styles
Color
Typography
Components
Buttons
Forms
Rich text

Colors

Black
#000000
White
#FFFFFF
Neutral 25
#FCFCFD
Neutral 50
#F9FAFB
Neutral 100
#F3F4F6
Neutral 200
#E5E7EB
Neutral 300
#D2D6DB
Neutral 400
#9DA4AE
Neutral 500
#6C737F
Neutral 600
#4D5761
Neutral 700
#384250
Neutral 800
#1F2A37
Neutral 900
#111927
Primary 25
#F5FAFF
Primary 50
#EFF8FF
Primary 100
#D1E9FF
Primary 200
#B2DDFF
Primary 300
#84CAFF
Primary 400
#53B1FD
Primary 500
#2E90FA
Primary 600
#1570EF
Primary 700
#175CD3
Primary 800
#1849A9
Primary 900
#194185
Success 100
#D1FADF
Success 700
#32D583
Success 900
#027948
Warning 100
#FEEFC7
Warning 700
#FDB022
Warning 900
#B54708
Error 100
#FEE4E2
Error 700
#F97066
Error 900
#B32318

Typography

The quick brown fox jumps over the lazy dog

Heading XXLarge - 3.5rem / 1.2

The quick brown fox jumps over the lazy dog

Heading XLarge - 3rem / 1.2

The quick brown fox jumps over the lazy dog

Heading Large - 2.5rem / 1.2

The quick brown fox jumps over the lazy dog

Heading Medium - 2rem / 1.3

The quick brown fox jumps over the lazy dog

Heading Small - 1.5rem / 1.4

The quick brown fox jumps over the lazy dog

Heading XSmall - 1.25rem / 1.4
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.
Body text Medium - 1.125rem / 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.
Body text Regular - 1rem / 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.
Body text Small - 0.875rem / 1.5

Buttons

Button
Primary Large
Button
Secondary Small
Button
Secondary Large
Button
Primary Small
Button
Tertiary Large
Button
Tertiary Black Large

Buttons

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.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Sed do eiusmod tempor incididunt
  4. 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

A sapiente eveniet doloremque

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.

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.
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.