Style guide

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

Colors

Primary
#9A4322
Primary Light
#EED0C4
Primary Ultra Light
#F4EBE7
Neutral 900
#1C1917
Neutral 800
#292524
Neutral 700
#44403C
Neutral 600
#57534E
Neutral 500
#79716B
Neutral 400
#A9A29D
Neutral 300
#D7D3D0
Neutral 200
#E7E5E4
Neutral 100
#F5F5F4
Neutral 50
#FAFAF9

Typography

The quick brown fox jumps over the lazy dog

Heading XxxLarge - 4.5rem / 1.2

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.
Text Size Xlarge - 1.5rem / 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 Large - 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.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 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

Primary Large
Secondary Small
Secondary Large
Primary Small

Forms

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

Rich text

The steps covered in this guide

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.

Why you should start protecting your 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.

  1. This is an ordered list item
  2. This is an ordered list item
  3. This is an ordered list item
  4. This is an ordered list item
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.
  • This is an unordered list item
  • This is an unordered list item
  • This is an unordered list item
  • This is an unordered list item
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.

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.