Style guide

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

Colors

Primary

Primary 950
#102C07
Primary 900
#265017
Primary 800
#2B5E16
Primary 700
#317714
Primary 600
#3E9C14
Primary 500
#51BC1D
Primary 400
#74DE3D
Primary 300
#98EC6A
Primary 200
#C1F5A1
Primary 100
#DFFACD
Primary 50
#F1FDE8

Neutral

Neutral 950
#09090B
Neutral 900
#18181B
Neutral 800
#27272A
Neutral 700
#3F3F46
Neutral 600
#52525B
Neutral 500
#71717A
Neutral 400
#A1A1AA
Neutral 300
#D4D4D8
Neutral 200
#E4E4E7
Neutral 100
#F4F4F5
Neutral 50
#FAFAFA

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
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-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.
text-size-small - 0.875rem / 1.5

Buttons

Button
Primary Small
Button
Primary Large
Button
Secondary Small
Button
Secondary Large
Button
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.

  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.

Velit debitis commodo expecteur sint

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.