Gather Style Guide
Gather-Style V1.0 • Last updated Sep 10, 2024
Log
Section : Other HTML Tags - Lists need to be worked on. Unable to figure out how to edit custom css for list styles (bulleted, no-bullet, numbered) 
Section : Rich Text does not exist (yet)

Typography
HTML Headings Tags
HTML tags define default Heading styles.
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
Heading Classes
Heading classes when typography style doesn't match the default HTML tag.
heading-style-h1

Heading-style-h1

heading-style-h2

Heading-style-h2

heading-style-h3

Heading-style-h3

heading-style-h4

Heading-style-h4

heading-style-h5

Heading-style-h5

heading-style-h6

Heading-style-h6

Other HTML Tags
HTML tags define default text styles.
All Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
All Links
All Unordered Lists
  • No bullet list
  • No bullet list
All Unordered Lists
Bullet list
Bullet list
All Ordered Lists
numbered list
numbered list
Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.
text-size-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-size-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-size-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-size-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-size-tiny
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-bold (600)
text-weight-medium
text-weight-bold (500)
text-weight-normal
text-weight-bold (400)
text-weight-light
text-weight-bold (300)
Text Alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Colors
Background Color
Manage recurring background colors.
background-color-black
background-color-white
background-color-primary
background-color-secondary
background-color-tertiary
background-color-light
background-color-alternative
Text Color
Manage recurring text colors.
text-color-white
text-color-white
text-color-black
text-color-black
text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-alternative
text-color-alternative
Effects
Box Shadows
‍Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
UI Elements
Buttons
primary-button
button
is-small
outline-button
outline-button
is-small
Structure Classes
Defined and flexible core structure we can use on all or most pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
Max Widths
Use the max-width CSS property to contain inner content to a maximum width.
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
***Use this to adjust the styles for every element used in the website. Look at the class associated with the element to be sure you're adjusting the correct settings.
*Adjust borders to all be the same on buttons, images and divs
*check animations 
primary-button
-Adjust this one since it's the one used 99% across the site. 
Double-click to edit button text.
outline-button
 - Adjust this one as well but be sure it's the opposite design of the primary-button as it's the 2nd choice of buttons used.
Double-click to edit button text.
image-styling
 - adjust borders, shadows
 - leave the width and height to be adjusted only per image
div-styling
 - adjust borders
 - leave the width and height to be adjusted only per div

div-shadow
 - adjust the box shadow

heading-1

1. update everything you want on Heading-1
2. assign the class heading-1-white-text to the same heading-1 above
3. copy the formatting from heading-1 to the white heading
4. delete the class from the heading-1
5. heading-1-white-text change the color to white
*this makes it so the styling of the heading 1 and white heading-1 are the same but just dark and white

heading-1-white-text

heading-2

do the same as you did above for white heading-1

heading-2-white