STYLE GUIDE
This style guide contains styles and elements that are used throughout the website.
Changes made here will be applied globally.
BRAND
Logo
Logo Image
Logo SVG
Font
Primary Font
Anybody
Secondary Font
HUMANE
Color
Accent Color
Accent Light
Accent
Accent Dark
Base Color
25
50
75
100
200
300
400
450
500
550
600
700
800
900
925
950
975
Neutral Color
Transparent
White
Black
TYPOGRAPHY
Headings
Heading 1
Lorem ipsum dolor sit amet DECODE
Heading 2
Lorem ipsum dolor sit amet DECODE
Heading 3
Lorem ipsum dolor sit amet DECODE
Heading 4
Lorem ipsum dolor sit amet DECODE
Heading 5
Lorem ipsum dolor sit amet DECODE
Heading 6
Lorem ipsum dolor sit amet DECODE
HTML Tags
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.
Quote Blocks
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius enim in eros.
Links
Unordered Lists
- 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.
Ordered Lists
- 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.
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Text Styles
Text Weight
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text Weight Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text Weight Extra Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text Weight Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text Weight Semi Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text Weight Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text Weight Normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text Weight Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text Weight Extra Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text Weight Thin
Text Size
Lorem ipsum dolor sit amet.
Text Size xxGiant
Lorem ipsum dolor sit amet.
Text Size xGiant
Lorem ipsum dolor sit amet.
Text Size Giant
Lorem ipsum dolor sit amet.
Text Size xxHuge
Lorem ipsum dolor sit amet.
Text Size xHuge
Lorem ipsum dolor sit amet.
Text Size Huge
Lorem ipsum dolor sit amet.
Text Size xxLarge
Lorem ipsum dolor sit amet.
Text Size xLarge
Lorem ipsum dolor sit amet.
Text Size Large
Lorem ipsum dolor sit amet.
Text Weight Medium
Lorem ipsum dolor sit amet.
Text Size Regular
Lorem ipsum dolor sit amet.
Text Size Small
Lorem ipsum dolor sit amet.
Text Size Tiny
COLOR
Text Color
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Text 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
White
Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.
Transparent
Theme Color
Theme Base
UTILITY
Page Wrapper
Main Wrapper
Section
Padding Global
Container
Layout
Max Width
Spacing Clean