Backgrounds

This section defines the background system, including colors, images, gradients, and reset options for consistent surfaces and visual hierarchy across the interface. Full color options are available in the Variables (V) section.
Need help choosing your brand colors?
You can use color palette tools such as Huemint, Coolors, or ColorSlurp to explore different color combinations, generate palette ideas, and find a direction that fits your brand. Once you choose your colors, update the color variables in the Style Guide to keep the system consistent across the website.

Main Color Backgrounds

Background color classes used to apply the main neutral colors across sections, components, and layout areas.
Primary
background-color-primary
Secondary
background-color-secondary
Tertiary
background-color-tertiary
Alternate
background-color-alternate

Component Color Backgrounds

Background color classes used to apply the main theme colors across sections, components, and layout areas.
Primary
background-component-color-primary
Secondary
background-component-color-secondary
Tertiary
background-component-color-tertiary
Alternate
background-component-color-alternate

Component Color Backgrounds Alpha

Transparent background color classes used to apply softer color variations across sections, components, and layout areas.
Primary Alpha
background-component-color-primary-alpha
Secondary Alpha
background-component-color-secondary-alpha
Tertiary Alpha
background-component-color-tertiary-alpha
Alternate Alpha
background-component-color-alternate-alpha
White Alpha
background-component-color-white-alpha
Black Alpha
background-component-color-black-alpha

Neutral Color Backgrounds

Background color classes used to apply solid black and white across sections, components, and layout areas.
White
background-color-white
Black
background-color-black

Neutral Color Backgrounds Alpha

Transparent black and white background color classes used for softer overlays, subtle surfaces, and layered interface elements.
White Alpha
background-color-white-alpha
Black Alpha
background-color-black-alpha

Alert Color Backgrounds

Background color classes used to apply system feedback colors across alerts, messages, notices, and status-based components.
Success
background-color-success
Info
background-color-info
Warning
background-color-warning
Error
background-color-error

Alert Color Backgrounds Alpha

Transparent background color classes used to apply softer system feedback colors across alerts, messages, notices, and status-based components.
Success Alpha
background-color-success-alpha
Info Alpha
background-color-info-alpha
Warning Alpha
background-color-warning-alpha
Error Alpha
background-color-error-alpha

Linear Gradient Backgrounds

Background color utilities that use directional gradient transitions to create depth, movement, and visual separation across sections and components.
Component Primary Bottom
background-component-gradient-primary-bottom
Component Primary Top
background-component-gradient-primary-top
Component Primary Left
background-component-gradient-primary-left
Component Primary Right
background-component-gradient-primary-right
Component Secondary Bottom
background-component-gradient-secondary-bottom
Component Secondary Top
background-component-gradient-secondary-top
Component Secondary Left
background-component-gradient-secondary-left
Component Secondary Right
background-component-gradient-secondary-right
Component Tertiary Bottom
background-component-gradient-tertiary-bottom
Component Tertiary Top
background-component-gradient-tertiary-top
Component Tertiary Left
background-component-gradient-tertiary-left
Component Tertiary Right
background-component-gradient-tertiary-right
Component Alternate Bottom
background-component-gradient-alternate-bottom
Component Alternate Top
background-component-gradient-alternate-top
Component Alternate Left
background-component-gradient-alternate-left
Component Alternate Right
background-component-gradient-alternate-right
Background Primary Bottom
background-gradient-primary-bottom
Background Primary Top
background-gradient-primary-top
Background Primary Left
background-gradient-primary-left
Background Primary Right
background-gradient-primary-right
Background Secondary Bottom
background-gradient-secondary-bottom
Background Secondary Top
background-gradient-secondary-top
Background Secondary Left
background-gradient-secondary-left
Background Secondary Right
background-gradient-secondary-right
Background Tertiary Bottom
background-gradient-tertiary-bottom
Background Tertiary Top
background-gradient-tertiary-top
Background Tertiary Left
background-gradient-tertiary-left
Background Tertiary Right
background-gradient-tertiary-right
Background Alternate Bottom
background-gradient-alternate-bottom
Background Alternate Top
background-gradient-alternate-top
Background Alternate Left
background-gradient-alternate-left
Background Alternate Right
background-gradient-alternate-right
Background Success Bottom
background-gradient-success-bottom
Background Success Top
background-gradient-success-top
Background Success Left
background-gradient-success-left
Background Success Right
background-gradient-success-right
Background Info Bottom
background-gradient-info-bottom
Background Info Top
background-gradient-info-top
Background Info Left
background-gradient-info-left
Background Info Right
background-gradient-info-right
Background Warning Bottom
background-gradient-warning-bottom
Background Warning Top
background-gradient-warning-top
Background Warning Left
background-gradient-warning-left
Background Warning Right
background-gradient-warning-right
Background Error Bottom
background-gradient-error-bottom
Background Error Top
background-gradient-error-top
Background Error Left
background-gradient-error-left
Background Error Right
background-gradient-error-right
Background Black Bottom
background-gradient-black-bottom
Background Black Top
background-gradient-black-top
Background Black Left
background-gradient-black-left
Background Black Right
background-gradient-black-right
Background White Bottom
background-gradient-white-bottom
Background White Top
background-gradient-white-top
Background White Left
background-gradient-white-left
Background White Right
background-gradient-white-right

Radial Gradient Backgrounds

Background color utilities that use center-based gradient transitions to create soft focus, glow effects, and layered visual emphasis across the interface.
The radial gradient is set to reach the element edges, similar to a contain-style fit, so the full gradient remains visible within the element. Combine radial gradient classes with background color, size, position, and layout utilities to adjust how the gradient fits the design.
Radial Gradient - Center
Component Primary
background-component-gradient-radial-primary
Component Secondary
background-component-gradient-radial-secondary
Component Tertiary
background-component-gradient-radial-tertiary
Component Alternate
background-component-gradient-radial-alternate
Background Success
background-gradient-radial-success
Background Info
background-gradient-radial-info
Background Warning
background-gradient-radial-warning
Background Error
background-gradient-radial-error
Background Black
background-gradient-radial-black
Background White
background-gradient-radial-white
Radial Gradient - Edges
Component Primary
background-component-gradient-radial-edge-primary
Component Secondary
background-component-gradient-radial-edge-secondary
Component Tertiary
background-component-gradient-radial-edge-tertiary
Component Alternate
background-component-gradient-radial-edge-alternate
Background Success
background-gradient-radial-edge-success
Background Info
background-gradient-radial-edge-info
Background Warning
background-gradient-radial-edge-warning
Background Error
background-gradient-radial-edge-error
Background Black
background-gradient-radial-edge-black
Background White
background-gradient-radial-edge-white

Custom Backgrounds

Reusable background elements that can be added to background sections, combined with clipping options, and adapted to create custom visual treatments across the layout.
Basic Image Backgrounds
Non-fixed image background options used for standard section or element backgrounds that scroll naturally with the page.
1
background-image-1
2
background-image-2
3
background-image-3
4
background-image-4
Fixed Image Backgrounds
Image background options that remain fixed in place while the page content scrolls, creating a stronger depth or parallax-style effect.
1
background-image-fixed-1
2
background-image-fixed-2
3
background-image-fixed-3
4
background-image-fixed-4
Gradient Backgrounds
Gradient background options used to create color transitions, visual depth, and layered background effects across sections and components.
1
background-gradient-1
2
background-gradient-2
3
background-gradient-3
4
background-gradient-4

Background Clipping

Control how background visuals are clipped to an element’s shape, including padding, borders, and text boundaries.
None
background-clipping-none
None won’t clip the background, meaning any backgrounds added will extend all the way to the element’s boundary.
Padding
background-clipping-padding
Clips the background to the inside of the element’s border, including any padding added to the element.
Content
background-clipping-content
Clips the background to the edges of the content, excluding any padding added to the element.
Text
background-clipping-text
Will override the font color, filling text with background color, image, gradient, and overlay properties.

Background Reset

Transparent background addon classes for desktop, tablet and mobile views, used to remove background styling when layout or positioning changes across breakpoints.
Desktop
Tablet
Mobile
Mobile Portrait
background-color-none
tablet-background-color-none
mobile-background-color-none
mobile-portrait-background-color-none