Colors
A showcase of the different color families that are routinely used in designs.
INFO
The primary and secondary color families are white-labelled giving a specific firm the ability to override them.
.sf-bg-white
.sf-bg-primary-subtle
.sf-bg-primary-lighter
.sf-bg-primary-light
.sf-bg-primary
.sf-bg-primary-dark
.sf-bg-primary-darker
.sf-bg-secondary-lighter
.sf-bg-secondary-light
.sf-bg-secondary
.sf-bg-secondary-dark
.sf-bg-secondary-darker
.sf-bg-text-lighter
.sf-bg-text-light
.sf-bg-text
.sf-bg-text-dark
.sf-bg-text-darker
.sf-bg-neutral-subtle-1
.sf-bg-neutral-subtle-2
.sf-bg-neutral-lighter-1
.sf-bg-neutral-lighter-2
.sf-bg-neutral-light-1
.sf-bg-neutral-light-2
.sf-bg-neutral
.sf-bg-neutral-dark-1
.sf-bg-neutral-dark-2
.sf-bg-neutral-darker-1
.sf-bg-neutral-darker-2
.sf-bg-snow-lighter
.sf-bg-snow-light
.sf-bg-snow
.sf-bg-snow-dark
.sf-bg-snow-darker
.sf-bg-success-subtle-1
.sf-bg-success-subtle-2
.sf-bg-success-lighter-1
.sf-bg-success-lighter-2
.sf-bg-success-light-1
.sf-bg-success-light-2
.sf-bg-success
.sf-bg-success-dark-1
.sf-bg-success-dark-2
.sf-bg-success-darker-1
.sf-bg-success-darker-2
.sf-bg-warning-subtle-1
.sf-bg-warning-subtle-2
.sf-bg-warning-lighter-1
.sf-bg-warning-lighter-2
.sf-bg-warning-light-1
.sf-bg-warning-light-2
.sf-bg-warning
.sf-bg-warning-dark-1
.sf-bg-warning-dark-2
.sf-bg-warning-darker-1
.sf-bg-warning-darker-2
.sf-bg-danger-subtle-1
.sf-bg-danger-subtle-2
.sf-bg-danger-lighter-1
.sf-bg-danger-lighter-2
.sf-bg-danger-light-1
.sf-bg-danger-light-2
.sf-bg-danger
.sf-bg-danger-dark-1
.sf-bg-danger-dark-2
.sf-bg-danger-darker-1
.sf-bg-danger-darker-2
.sf-bg-ai-subtle-1
.sf-bg-ai-subtle-2
.sf-bg-ai-lighter-1
.sf-bg-ai-lighter-2
.sf-bg-ai-light-1
.sf-bg-ai-light-2
.sf-bg-ai
.sf-bg-ai-dark-1
.sf-bg-ai-dark-2
.sf-bg-ai-darker-1
.sf-bg-ai-darker-2
.sf-bg-info-subtle-1
.sf-bg-info-subtle-2
.sf-bg-info-lighter-1
.sf-bg-info-lighter-2
.sf-bg-info-light-1
.sf-bg-info-light-2
.sf-bg-info
.sf-bg-info-dark-1
.sf-bg-info-dark-2
.sf-bg-info-darker-1
.sf-bg-info-darker-2