SecondaryBackground
SecondaryBackground is a design and development term used to describe a secondary background color chosen to fill surfaces that are not the main page canvas. It helps create visual hierarchy and depth by distinguishing elements such as cards, panels, drawers, tooltips, and modal backdrops from the primary background while maintaining overall color harmony. In design systems, secondaryBackground is typically implemented as a color token that differs from the primary background in hue, brightness, or saturation, and may also use subtle transparency to achieve layered effects.
SecondaryBackground supports readability and organization by providing a distinct but cohesive surface for content. It is
In code and design tokens, secondaryBackground is defined as a named color value. Common implementations include
Ensure sufficient contrast between text or icons placed on secondaryBackground and the surface itself, especially in