Skip to content

Design System

Kristen Lohman edited this page Jun 27, 2023 · 1 revision

SmartPay Program Site Design System

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

Colors

image

Font sizes

image

Typography Spacing

image

Buttons

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

Links

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

External links should use the USWDS "launch" icon: image

Graphics

image

Card Images

image