CitySide Style Guide

Color

Base Colors

Styled with both global swatches and classes

Neutrals

Blue Black
#0E1828
slate Grey
#616A7E
light slate grey
#9099AF
light steel blue
#C2CBE2
WHITE
#FFFFFF

Blues

dark slate grey
#015B75
powder blue
#99D6D5

Reds

crimson
#d72927

Typography

Primary

Styled with tags first then classes

Heading 1

h1
Raleway 800 Extra Bold
80-50-50-35

Heading 2

h2
Raleway 800 Extra Bold
50-35-35-26

Heading 3

h3
Raleway 800 Extra Bold
30-21-21-16

Heading 4

h4
Raleway 800 Extra Bold
20-18-18-14

Paragraph - Regular: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in.

p
Raleway 400 NORMAl
16-16-16-13
  1. List Item
  2. List Item
  3. List Item
ol/ul
Raleway 400 NORMAl
16-16-16-13

Paragraph - Big: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

p
--p-big
Raleway 400 NORMAl
20-18-18-15

Paragraph - XL: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

p
--p-xl
Raleway 500 Medium
25-21-21-17

Paragraph - XXL

p
--p-xxl
Raleway 500 Medium
50-35-35-26

RSD

p
--p-raised
Raleway 500 Medium
25-21-21-17
Text Link - Regular
a
Raleway 400 NORMAl
16-16-16-13
Text Link - Big
a
--a-big
Raleway 400 NORMAl
20-18-18-15
Block Quote
blockquote
Raleway 400 NORMAl
20-18-18-15

Secondary

Styled with tags first then classes

Heading 1

h1
Raleway 800 Extra Bold
80-50-50-35

Heading 2

h2
Raleway 800 Extra Bold
50-35-35-26

Heading 3

h3
Raleway 800 Extra Bold
30-21-21-16

Heading 4

h4
Raleway 800 Extra Bold
20-18-18-14

Paragraph - Regular: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in.

p
Raleway 400 NORMAl
16-16-16-13

Paragraph - Big: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

p
--p-big
Raleway 400 NORMAl
20-18-18-15

Paragraph - XL: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

p
--p-xl
Raleway 500 Medium
25-21-21-17

Paragraph - XXL

p
--p-xxl
Raleway 500 Medium
50-35-35-26

RASD

p
--p-raised
Raleway 500 Medium
25-21-21-17
Text Link - Regular
a
Raleway 400 NORMAl
16-16-16-13
Text Link - Big
a
--a-big
Raleway 400 NORMAl
20-18-18-15

Muted

Styled with tags first then classes

Heading 1

h1
Raleway 800 Extra Bold
80-50-50-35

Paragraph - Regular: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in.

p
Raleway 400 NORMAl
16-16-16-13
Text Link - Regular
a
Raleway 400 NORMAl
16-16-16-13

Overlay Text

Headings

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.

Rich Text

Rich Text One

Styled within the single rich text parent class using the nested "all xxx" selector

rich-text-1

H1

H2

H3

H4

Paragraph

Link

  • Bullets
  • Bullets

Rich Text Two

Styled within the single rich text parent class using the nested "all xxx" selector

rich-text-1

H1

H2

H3

H4

Paragraph

Link

  • Bullets
  • Bullets

Virtual Training Rich Text

Styled within the single rich text parent class using the nested "all xxx" selector

vts__rich-text

H1

H2

H3

H4

Paragraph

Link

  • Bullets
  • Bullets

Class Adder

Class Adder Classes

For code only

Global Classes

Page Backgrounds

Containers

Buffers

No Display