422EE6E9-046C-4CAA-B2C8-4088D3FCF1E8 Created with sketchtool. 0

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

Lorem ipsum

Lorem ipsum

Lorem ipsum

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
  1. Lorem ipsum dolor sit amet, consectetur
  2. Lorem ipsum dolor sit amet, consectetur
  3. Lorem ipsum dolor sit amet, consectetur
  4. Lorem ipsum dolor sit amet, consectetur

Buttons

use case instructions

use case instructions

use case instructions

use case instructions

use case instructions

use case instructions

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

This is the extremely important heading of this banner

Call to Action

This is the extremely important heading of this banner

Call to Action
Product Render Product Lifestyle

Legends | Classic

Yeti

$29.99

2,232 Reviews

4.9 star rating
Quickshop