Style Guide

Colors

Add these as variables

#XXXXXX - Color Name

#000000 - Black

#999999 - Gray

#F4F4F4 - Light Gray

#FFFFFF - White

rgba(255, 255, 255, 0) - Transparent

Typography

Base Classes & Headings

All Paragraphs

No class here; standard paragraph size — set size within variables. No class here; standard paragraph size — set size within variables. No class here; standard paragraph size — set size within variables. No class here; standard paragraph size — set size within variables.

All Links

All Block Quotes

Block Quote

All Unordered Lists

Bullet list item
Bullet list item

All Ordered Lists

Numbered list item
Numbered list item
Numbered list item

IMPORTANT!

From Variables: Usually add modes for 1440px+ and Mobile L; Base Mode (Desktop) can also often be used for 1280 & Tablet too.
From BASE Mode (desktop) in Designer: For each H level, set text weight, % height (leading), letter spacing (kerning), & margins.

All H1 Headings

H1: set as variables

All H2 Headings

H2: set as variables

All H3 Headings

H3: set as variables

All H4 Headings

H4: set as variables

All H5 Headings

H5: set as variables

All H6 Headings

H6: set as variables

Heading Sizes as Text not Headers (i.e. when you want an H1 to be the size of an H3, OR a text block to be the size of an H4)

IMPORTANT! The headers should be TEXT blocks, not "H" elements.

From BASE Mode (desktop) for each text block (H level) below: Manually tie each of these to their corresponding H-level variable, so "Size" (next to purple variable) appears as blue.
From BASE Mode (desktop) for each text block (H level) below: Also manually match text weight, % height (leading), letter spacing (kerning), & margins w/ pink H values.

H1 size - tied to variable

H2 size - tied to variable

H3 size - tied to variable

H4 size - tied to variable

H5 size - tied to variable

H6 size - tied to variable

eyebrow

Eyebrow - need to tie to variable

Paragraph Sizes

Large paragraph here - set within variables

p2-default

Mirrors 'all paragraphs' above but has blue class.

Small paragraph here - set within variables

Extra small paragraph here if needed - add as a variable and set

Text Weights

text-weight-bold

Set text weight to this class after font(s) installed; prefer variable font(s).

Rich Text Block

rich-text-block

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

List item
List item
List item

List item
List item
List item

Text Alignment

text-align-left

text-align-center

text-align-right

text-wrap-balance

Text Max Character Widths

max-char-10