Design System

SmartPay Training Design System

The editable version of this guide is available in SmartPay-Vendor Design Handoff: Style Guide

Colors

Font sizes

Typography Spacing

Buttons

Name	Preview	Properties
Button		BG color: primary
Button:hover		BG color: primary-dark
Button:active/focused		BG color: base-ink
Button:disabled		BG color: primary / Opacity: 25% / Text color: theme-darker
Outline button		Border color: primary
Outline button:hover		Border color: primary-dark
Outline button:active/focused		BG color: primary-lighter / Border color: base-ink / Color: base-ink
Outline button:disabled		Border color: primary / Opacity: 25% / Font color: theme-dark

Links

Name	Preview	Properties
Link		Color: color-primary-bright / Text decoration: underline
Link:hover		Color: color-primary-dark
Link:visited		Color: color-violet-70v
Link:active/focused		Outline color: color-primary-bright

External links should use the USWDS "launch" icon:

Graphics

Card Images