Style Guide

A reference for common components and patterns used throughout the theme.

Colors

Primaries and grays
Primary 1
Primary 2
Primary 3
Gradient 1
Gradient 2
Success
Warning
Danger
Dark
Text
Light
White

Typography

Here you can see and change the typography
Display 1
Display 2
Display 3

Heading One

Heading Two

Heading Three

Heading Four

Heading five
Heading six
Text Large
Text Medium
Text Regular
Text Small
Text Link
Small caps
Subheading

Buttons

Here you can see and change buttons

Rich Text

Component, text style and size variations

Risus sapien facicisis purus at molestie et, sed rhoncus diam. Morbi leo, pellentesque ante metus. Leo, odio vulputate at id nunc. Sed amet ultrices urna convallis odio mattis. Habitasse volutpat dignissim egestas pretium.

Rich Text Element H2

Malesuada ac urna praesent odio in suspendisse varius. Eget turpis ac amet, aliquam est. Lectus vitae, justo, massa nunc non morbi morbi. Tincidunt hac blandit velit risus proin proin. Neque posuere platea amet vitae a. Senectus volutpat purus erat non lacus. Cursus pellentesque sed posuere faucibus eget ut turpis dui. Nisl, tristique odio elementum etiam fusce vulputate.

  • Here’s an important note to remember.
  • Another thing to keep in mind is this salient point.
  • Don’t ever forget the third item in a bulleted list.
  • You can ignore the fourth if you want.

Massa, vel, interdum eget integer amet laoreet et et eget. Facilisis natoque magna mollis suspendisse dolor, imperdiet. Euismod venenatis mauris mauris, feugiat adipiscing bibendum amet id in.

Woman looking at a screen in a dark room
Here’s a caption for the image above.

Rich Text Element H3

Consectetur eu libero vulputate auctor. Tellus metus, ac integer volutpat sem pulvinar risus quisque magna. Laoreet sit consequat elementum elementum iaculis faucibus turpis. Velit sit nisi, a pharetra, euismod ultricies eget accumsan. Non pharetra et risus, natoque. Duis amet nisi at erat.

“We needed a template that reflected our dedication to beauty.”

Tortor, in senectus lacus turpis et ornare sit imperdiet. In volutpat imperdiet ornare semper viverra quis risus feugiat tellus. Volutpat consectetur dictumst vitae augue sed faucibus habitasse viverra enim. In nisi vivamus vestibulum, et, suspendisse molestie eget risus tincidunt. Vel a mauris velit euismod cras nibh viverra et commodo. Massa pulvinar nulla mattis augue diam erat. At mauris et consequat ipsum. Pellentesque egestas tellus, ut egestas eget aliquet id. Neque commodo imperdiet odio enim diam dui. Parturient eu mattis cras cras pretium.

Orci eget mi duis odio massa aliquam. Ultrices non auctor rhoncus lectus morbi ultricies viverra.

Spacers

Here you can see and change spacers
Spacer 0
Spacer Tiny
Spacer Xxsmall
Spacer Xsmall
Spacer Small
Spacer Medium
Spacer Large
Spacer Xlarge
Spacer Xxlarge
Spacer Huge
Spacer Xhuge
Spacer Xxhuge