Style Guide
Built by A-Train Marketing
Typography
Accessibility compliance requires that all typography must meet a minimum of 4.5:1 color contrast for small text against the background and 3:1 when in an active (hover) state or for large text (headlines). Body text is a minimum size of 16px and uses REM sizing units to ensure proper accessibility scaling.
Oversize Default (4XL)
This is an Example Oversize Headline
H1 Default (3XL)
This is an Example H1 Headline.
H2 Default (2XL)
This is an Example H2 Headline.
H3 Default (XL)
This is an Example H3 Headline. This is Additional Text to See the Line Height.
H4 Default (L)
This is an Example H4 Headline. This is Additional Text to See the Line Height in Practical Application.
Body Default (M)
This is parapraph or body text. This is set to a minimum of 1rem (16px) with a 1.5em vertical spacing to comply with WCAG 2.2AA requirements.
- This is the default unordered list design.
- This is a second item on the list.
- This is the third item.
- This is the default ordered list design.
- This is a second item on the list.
- This is the third item.
Links
Mini Text
This is Text-S and should only by used sparingly. It is the default for eyebrow text.
This is Text-XS and should only by used sparingly.
Colors
Primary Colors
Primary Subtle (ADD)
#XXXXXX
Primary Light (ADD)
#XXXXXX
Primary
#XXXXXX
Primary Dark
#XXXXXX
Text Colors
Heading Text
#XXXXXX
Body Text
#XXXXXX
Link Text
#XXXXXX
Secondary Colors
Secondary Subtle
#XXXXXX
Secondary Light
#XXXXXX
Secondary
#XXXXXX
Secondary Dark
#XXXXXX
Button Colors
Button Standard
#XXXXXX
Button Standard Hover
#XXXXXX
Button Standard Border
#XXXXXX
Border and Divider Colors
Border Dark
#XXXXXX
Border Mid
#XXXXXX
Border Light
#XXXXXX
Divider Standard
#XXXXXX
Divider Reversed
#XXXXXX
Divider Subtle
#XXXXXX
Buttons
Accessibility compliance requires that all buttons must meet a minimum of 4.5:1 color contrast for text within the button and against the background, and 3:1 when in an active (hover) state. Text is a minimum size of 16px and uses REM sizing units to ensure proper accessibility scaling.
Standard (Default)
Standard Outline
Oversize
Standard Outline
Standard (Default)
Standard Outline Reversed
Oversize
Standard Outline Reversed Oversize
Drop Shadows
This is a standard drop shadow
Modules
Image Module
Default
Dividers
Divider Standard
Divider Reversed
Divider Subtle
Divider Standard Short
Divider Reversed Short
Divider Subtle Short
Accordion & Toggles
Accordion
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Toggle
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.