Background color

Background utilities for surfaces and intents.

Quick reference

Class	Styles
af-bg-background	background-color: var(--af-color-background)
af-bg-surface	background-color: var(--af-color-surface-primary)
af-bg-surface-secondary	background-color: var(--af-color-surface-secondary)
af-bg-surface-tertiary	background-color: var(--af-color-surface-tertiary)
af-bg-muted	background-color: var(--af-color-surface-secondary)
af-bg-primary	background-color: var(--af-color-primary)
af-bg-success	background-color: var(--af-color-success)
af-bg-danger	background-color: var(--af-color-danger)
af-bg-warning	background-color: var(--af-color-warning)
af-bg-info	background-color: var(--af-color-info)
af-bg-*-soft	background-color: var(--af-color-*-soft)
af-bg-*-hard	background-color: var(--af-color-*-hard)

Examples

Surface backgrounds

Surface

Secondary

<div class="af-bg-surface af-border af-radius-md af-p-sm">
  Surface
</div>
<div class="af-bg-surface-secondary af-border af-radius-md af-p-sm">
  Secondary
</div>

Available classes

• af-bg-background - Base background
• af-bg-surface - Surface background (primary)
• af-bg-surface-secondary - Secondary surface background
• af-bg-surface-tertiary - Tertiary surface background
• af-bg-muted - Muted surface background (same as surface-secondary)
• af-bg-primary - Primary intent background
• af-bg-success - Success intent background
• af-bg-danger - Danger intent background
• af-bg-warning - Warning intent background
• af-bg-info - Info intent background
• af-bg-primary-soft / af-bg-success-soft / af-bg-danger-soft / af-bg-warning-soft / af-bg-info-soft
• af-bg-primary-hard / af-bg-success-hard / af-bg-danger-hard / af-bg-warning-hard / af-bg-info-hard

When placing small text on a soft intent background, use the matching *-hard color (as badges/chips do), not the mid-tone intent token — soft + base often fails WCAG AA.

For gradients, see Gradients.

Responsive variants

All background utilities support responsive variants using the @{bp} suffix. See Responsive Suffix for syntax and breakpoints.

Related

• Text color