Typography
These styles are to be set in the theme customizer to be applied as globally as possible.
Font sizes to be set in REM whenever possible.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
- This is just a placeholder
- We will change this out later
- We’re using Website Ipsum
- This is just a placeholder
- We will change this out later
- We’re using Website Ipsum
Body Text: This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
This is a blockquote. Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.
~ Citation
This is a pullquote. Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.
~ Citation
Colour Palette
This site’s color palette supplies you with 18 different colors to choose from. Each color is named by its function rather than its value to help futureproof the color system.
Every color on the website should be linked to a value in the color palette so it can be easily changed globally across the site whenever necissary.
Colors are set as variables in the root of the document using the following naming convetion:
Text: var(–text)
Heading: var(–heading)
Link Hover: var(–link-hover)
body
outside-container
text
text-light
primary
secondary
tertiary
accent
link
link-hover
button
button-hover
button-alt
button-alt-hover
white
neutral-lightest
neutral-lighter
neutral-light
neutral
neutral-dark
neutral-darker
neutral-darkest
black
Buttons
Standard button styles are configured using the GenerateBlocks Global Styles.
Buttons margin set for demo purposes only, remove on any global styles.
Badges, Pills, & Pre-Headers
Useful for meta data or smaller pre-heading style. Styles are configured using the GenerateBlocks Global Styles.
BADGE PRIMARY
Pre-Header
Pill
Forms
Global form styling is changed in the child theme style sheet.