Style Guide
A style guide is a collection of pre-designed elements, graphics and rules designers or developers should follow to ensure that separate website pieces will be consistent and will create a cohesive experience at the end.
Colors
Primary
@variable
#hex
Accent
@variable
#hex
Foreground
@variable
#hex
Background
@variable
#hex
Typography
Heading 1
Heading 2
Heading 3
Paragraph with inline link
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur deserunt dolore est, expedita facilis hic id laborum nulla numquam obcaecati optio pariatur quas quia quis quos soluta tempore. Ducimus, molestiae.
Small Paragraph with inline link
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur deserunt dolore est, expedita facilis hic id laborum nulla numquam obcaecati optio pariatur quas quia quis quos soluta tempore. Ducimus, molestiae.
Extra Small Paragraph with inline link
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur deserunt dolore est, expedita facilis hic id laborum nulla numquam obcaecati optio pariatur quas quia quis quos soluta tempore. Ducimus, molestiae.
Stand alone links
Lists
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
Components
use case instructions
Class Of
2020
The Future Awaits
50% Off Engraving
Spacing
u-margin-bottom-x-small use case instructions
u-margin-bottom-small use case instructions
u-margin-bottom-medium use case instructions
u-margin-bottom-large use case instructions
u-margin-bottom-x-large use case instructions
Layouts
Flex default
Flex justify start
Flex justify end
Flex justify between
Flex justify around
Flex justify evenly
Flex align start
Flex align end
Grid
Grid 2 column
Grid 2 column first long
Grid 2 column second long
Grid 3 column
Grid 4 column
Legends | Classic
Yeti
$29.99
2,232 Reviews
4.9 star rating