Style Guide
Colors
Theme Palette
Primary/Orange
#F7781E
--wp--preset--color--primary-orange
Primary/Red
#FB1F1E
--wp--preset--color--primary-red
Primary/LightOrange
#F99D3A
--wp--preset--color--primary-lightorange
Secondary/DarkBlue
#111F54
--wp--preset--color--secondary-darkblue
Secondary/LightBlue
#7AB5DE
--wp--preset--color--secondary-lightblue
Black
#000000
--wp--preset--color--black
DarkGray
#323E46
--wp--preset--color--darkgray
Gray
#E0E1E2
--wp--preset--color--gray
LightGray
#F2F2F2
--wp--preset--color--lightgray
White
#FFFFFF
--wp--preset--color--white
Orange Gradient
--wp--preset--gradient--orange
Orange Gradient 135
--wp--preset--gradient--orange-135
Orange Gradient 270
--wp--preset--gradient--orange-270
Orange Gradient Radial
--wp--preset--color--orangeradial
Orange Gradient Radial Top Left
--wp--preset--color--orangeradial-2
Orange Gradient Radial Bottom Right
--wp--preset--color--orangeradial-3
Orange Gradient Radial Bottom Left
--wp--preset--color--orangeradial-4
Orange Gradient Radial Top Right
--wp--preset--color--orangeradial-5
Interactive Palette
Primary/Orange
#F7781E
--wp--preset--color--primary-orange
Primary/OrangeHover
#F99D3A
--wp--preset--color--primary-orange-hover
Primary/OrangeActive
#DE6C1B
--wp--preset--color--primary-orange-active
Primary/OrangeDisabled
#E0E1E2
--wp--preset--color--primary-orange-disabled
Primary/Red
#FB1F1E
--wp--preset--color--primary-red
Primary/RedHover
#E21C1B
--wp--preset--color--primary-red-hover
Primary/RedActive
#C91918
--wp--preset--color--primary-red-active
Primary/RedDisabled
#E0E1E2
--wp--preset--color--primary-red-disabled
Secondary/LightBlue
#7AB5DE
--wp--preset--color--secondary-lightblue
Secondary/LightBlueHover
#86C6F2
--wp--preset--color--secondary-lightblue-hover
Secondary/LightBlueActive
#6291B2
--wp--preset--color--secondary-lightblue-active
Secondary/LightBlueDisabled
#E0E1E2
--wp--preset--color--secondary-lightblue-disabled
Base
Base
#323E46
--wp--preset--color--base
Base/Emphasis
#000000
--wp--preset--color--base-emphasis
Base/Muted
#91999F
--wp--preset--color--base-muted
Base/Subtle
#F2F2F2
--wp--preset--color--base-subtle
Base/Canvas
#FFFFFF
--wp--preset--color--base-canvas
Base/Disabled
#E0E1E2
--wp--preset--color--base-disabled
Typography
Primary - Body - IBM Plex Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
123456789 123456789
Secondary - Futura - Headlines
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
123456789 123456789
Typography/Headings
Colossus Heading
Nulla dolor sit amet consectetur nulla.
Uber Heading
Nulla dolor sit amet. Adipiscing est lorem amet. Sit dolor consectetur nulla.
Display Heading
Nulla dolor sit amet. Adipiscing est lorem amet. Sit dolor consectetur nulla.
Heading 1
Nulla dolor sit amet. Adipiscing est lorem amet. Sit dolor consectetur nulla.
Heading 2
Nulla dolor sit amet. Adipiscing est lorem amet. Sit dolor consectetur nulla.
Heading 3
Nulla dolor sit amet. Adipiscing est lorem amet. Sit dolor consectetur nulla.
Heading 4
Nulla dolor sit amet. Adipiscing est lorem amet. Sit dolor consectetur nulla.
Heading 5
Nulla dolor sit amet. Adipiscing est lorem amet. Sit dolor consectetur nulla.
Typography/Body
Caption Copy
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Body (Base) Copy
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Body-1 Copy
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Body-2 Copy
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Body-3 Copy
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Buttons & Links
Primary Button
Primary Button - On Dark
Secondary Button
Secondary Button - On Dark
Text Button
Text Button - On Dark
Inline Text Link
Nulla lorem ipsum dolor sit amet lorem eget link text lacinia odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum id accusamus mollitia nulla perspiciatis deleniti.
Default state
Nulla lorem ipsum dolor sit amet lorem eget link text lacinia odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum id accusamus mollitia nulla perspiciatis deleniti.
Hover state
Nulla lorem ipsum dolor sit amet lorem eget link text lacinia odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum id accusamus mollitia nulla perspiciatis deleniti.
Active state
Inline Text Link - On Dark
Nulla lorem ipsum dolor sit amet lorem eget link text lacinia odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum id accusamus mollitia nulla perspiciatis deleniti.
Default state
Nulla lorem ipsum dolor sit amet lorem eget link text lacinia odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum id accusamus mollitia nulla perspiciatis deleniti.
Hover state
Nulla lorem ipsum dolor sit amet lorem eget link text lacinia odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum id accusamus mollitia nulla perspiciatis deleniti.
Active state