Guide de style
Color
Neutral / Gray Scale
Black
var(--color-black)
Neutral 900
var(--color-neutral-900)
Neutral 800
var(--color-neutral-800)
Neutral 700
var(--color-neutral-700)
Neutral 600
var(--color-neutral-600)
Neutral 500
var(--color-neutral-500)
Neutral 400
var(--color-neutral-400)
Neutral 300
var(--color-neutral-300)
Neutral 200
var(--color-neutral-200)
Neutral 100
var(--color-neutral-100)
White
var(--color-white)
Primary Colors
Color Primary 100
var(--color-primary-100)
Color Primary 200
var(--color-primary-200)
Color Primary 300
var(--color-primary-300)
Color Primary 400
var(--color-primary-400)
Color Primary 500
(Primary Brand Color)
var(--color-primary)
Color Primary 600
var(--color-primary-600)
Support + Utility Colors
Success 400
var(--color-success-400)
Success 300
var(--color-success-300)
var(--color-success)
Success 200
var(--color-success-200)
Success 100
var(--color-success-100)
Error 400
var(--color-error-400)
Error 300
var(--color-error-300)
var(--color-error)
Error 200
var(--color-error-200)
Error 100
var(--color-error-100)
Typography
Fonts
Tahoma
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
var(--font-heading--family), var(--font-accent--family)
"Tahoma", sans-serif;
Andale Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
var(--font-subheading--family)
"Andale Mono", sans-serif;
Outfit
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
var(--font-body--family)
"Outfit", sans-serif;
Header Styles
H1 Header style
.heading-1, h1, .h1
H2 Header style
.heading-2, h2, .h2
H3 Header style
.heading-3, h3, .h3
H4 Header style
.heading-4, h4, .h4
H5 Header style
.heading-5, h5, .h5
H6 Header Style
.heading-6, h6, .h6
Paragraph Styles
Paragraph Medium (default)
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.
Link inside body copy should look like this.
Paragraph Small
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.
Paragraph Large
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.
Paragraph Extra Small
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.
Blockquote
Remember, if you don't do it this year, you'll be one year older when you do.
Caption
Image caption text
Eyebrow
Eyebrow Small (default)
Eyebrow Large
Color Schemes
.color-scheme-1
Text Primary: 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.
Text Secondary: 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.
LinkBadge
.color-scheme-2
Text Primary: 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.
Text Secondary: 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.
LinkBadge
.color-scheme-3
Text Primary: 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.
Text Secondary: 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.
LinkBadge
Forms
Theme Light
Alerts
Additional Error Content
Theme Dark
Alerts
Additional Error Content
General Icons - 24px
UI Icons - 24px
Social Icons - 24px
Info Icons - 16px
Player Icons - 32px
Customer Support Icons
Container & Spacing
Container Full
.container
Container Extra Large
.container-xl
Container Large
.container-lg
Container Medium
.container-md
Container Small
.container-sm
Container Small
.container-xs
Spaced Section
.stacked-component
Another Spaced Section, Medium Spacing
.stacked-component.spacing-md
Stacked Spaced Sections, Spacing Small, Same Theme
.stacked-component.spacing-sm
This section has no padding-top
.stacked-component.spacing-sm + .stacked-component.spacing-sm