A-Train Marketing
Website Style Guide
Color
Primary Colors
Primary Blue Light
#418FDE
Primary Blue Mid
#307FE2
Primary Blue Dark
#0072CE
Secondary Colors
Secondary Purple Light
#46499E
Secondary Purple Mid
#404291
Secondary Purple Dark
#3A3B85
Secondary Teal Light
#0093B7
Secondary Teal Mid
#0287A8
Secondary Teal Dark
#017C9A
Secondary Green Light
#00A477
Secondary Green Mid
#00976D
Secondary Green Dark
#008A64
Secondary Magenta Light
#804B98
Secondary Magenta Mid
#76448C
Secondary Magenta Dark
#6C3D80
Secondary Orange Light
#D0772C
Secondary Orange Mid
#C26F26
Secondary Orange Dark
#B16521
Secondary Yellow Light
#E1AE46
Secondary Yellow Mid
#CC9F3E
Secondary Yellow Dark
#BA9138
Link/CTA Colors
Unclicked/Static
#307FE2
Hover
#418FDE
Clicked/Pressed
#0072CE
Unclicked/Static
#EF5D38
Hover
#FF6A44
Clicked/Pressed
#E0451E
Neutrals
Neutral Black
#000000
Neutral Near Black
#252628
Neutral Gray 1
#F3F4F4
Neutral Gray 2
#E7E9EA
Neutral Gray 3
#CFD2D2
Gradients
Hero Gradient
(90% opacity when used over imagery)
#3A3B85 – #307fe2
Button Gradient
#418FDE – #0072CE
Subtle Gradient
#ECF4FC – #E4EEFB
Typography
Headline 1
This is a Sample of Headline 1
Headline 2
This is a Sample of Headline 2
Headline 3
This is a Sample of Headline 3
Headline 4
This is a Sample of Headline 4
Mini Headline
This is a Sample of a Mini Headline
Body Text
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.
Buttons
Standard / Default
Outline
Large
Orange
White
Design Components
