Style Guide
Colors
Theme
Primary/Red
#E51837
--wp--preset--color--primary-red
Primary/DarkRed
#901903
--wp--preset--color--primary-darkred
Secondary/Teal
#00BAD3
--wp--preset--color--secondary-teal
Secondary/DarkTeal
#007383
--wp--preset--color--secondary-darkteal
Black
#000000
--wp--preset--color--black
Gray
#6A6A6C
--wp--preset--color--gray
LightGray
#CECFD1
--wp--preset--color--lightgray
White
#FFFFFF
--wp--preset--color--white
Accent
Primary/Red
#E51837
--wp--preset--color--primary-red
Primary/RedHover
#FF2B4B
--wp--preset--color--primary-red-hover
Primary/RedActive
#C30824
--wp--preset--color--primary-red-active
Primary/RedDisabled
#E8E8E8
--wp--preset--color--primary-red-disabled
Primary/DarkRed
#901903
--wp--preset--color--primary-darkred
Primary/DarkRedHover
#B93013
--wp--preset--color--primary-darkred-hover
Primary/DarkRedActive
#671000
--wp--preset--color--primary-darkred-active
Primary/DarkRedDisabled
#E8E8E8
--wp--preset--color--primary-darkred-disabled
Secondary/Teal
#00BAD3
--wp--preset--color--secondary-teal
Secondary/TealHover
#16E1FC
--wp--preset--color--secondary-teal-hover
Secondary/TealActive
#0096AB
--wp--preset--color--secondary-teal-active
Secondary/TealDisabled
#E8E8E8
--wp--preset--color--secondary-teal-disabled
Secondary/DarkTeal
#007383
--wp--preset--color--secondary-darkteal
Secondary/DarkTealHover
#1299AB
--wp--preset--color--secondary-darkteal-hover
Secondary/DarkTealActive
#004F5A
--wp--preset--color--secondary-darkteal-active
Secondary/DarkTealDisabled
#E8E8E8
--wp--preset--color--secondary-darkteal-disabled
Tertiary/Gold
#FFB03E
--wp--preset--color--tertiary-gold
Base
Base
#2E2E2E
--wp--preset--color--base
Base/Emphasis
#000000
--wp--preset--color--base-emphasis
Base/Muted
#6A6A6C
--wp--preset--color--base-muted
Base/Subtle
#CECFD1
--wp--preset--color--base-subtle
Base/Canvas
#FFFFFF
--wp--preset--color--base-canvas
Base/Disabled
#E8E8E8
--wp--preset--color--base-disabled
Status
Success
#22C55E
--wp--preset--color--success
Success/Emphasis
#4ADE80
--wp--preset--color--success-emphasis
Success/Muted
#16A34A
--wp--preset--color--success-muted
Success/Subtle
#BBF7D0
--wp--preset--color--success-subtle
Success/Disabled
#E8E8E8
--wp--preset--color--success-disabled
Info
#3574DC
--wp--preset--color--info
Info/Emphasis
#3B82F6
--wp--preset--color--info-emphasis
Info/Muted
#2E65BF
--wp--preset--color--info-muted
Info/Subtle
#C9D6FB
--wp--preset--color--info-subtle
Info/Disabled
#E8E8E8
--wp--preset--color--info-disabled
Warning
#EAB308
--wp--preset--color--warning-fg
Warning/Emphasis
#FACC15
--wp--preset--color--warning-emphasis
Warning/Muted
#CA8A04
--wp--preset--color--warning-muted
Warning/Subtle
#FEF08A
--wp--preset--color--warning-subtle
Warning/Disabled
#E8E8E8
--wp--preset--color--warning-disabled
Error
#EF4444
--wp--preset--color--error-fg
Error/Emphasis
#DC2626
--wp--preset--color--error-emphasis
Error/Muted
#B91C1C
--wp--preset--color--error-muted
Error/Subtle
#FECACA
--wp--preset--color--error-subtle
Error/Disabled
#E8E8E8
--wp--preset--color--error-disabled
Typography
Gotham
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.
Heading 6
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.
X-Small 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.
Tiny 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.
Elevation & Shadows
0% Elevation
20% Elevation
40% Elevation
60% Elevation
80% Elevation
100% Elevation
Buttons & Links
Primary Button
Primary Button - On Dark
Secondary Button
Secondary Button - On Dark
Arrow Emphasis
Arrow Emphasis - On Dark
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
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
Other Links - On Dark
Form Elements
"*" indicates required fields