Foundations
Our Layer System is a fundamental mechanism for establishing visual depth, structure, and hierarchy across all product interfaces. It defines how essential elements—such as cards, panels, and modals—are stacked to create a clean, consistent, and accessible user experience.
Layer 1
Layer 2
Layer 3
Layer 0
Layer 1
Layer 2
Layer 3
Layer 0
The stacking rule
To maintain learnability and appropriate contrast across the product, layers must always be used in sequence.
Layer 0 acts as the base container for the entire application interface, typically the background.
Layer 1 sits on Layer 0, often used for primary content areas or surface cards.
Layer 2 sits on Layer 1, used for elements like nested containers, tooltips, or elevated form components.
Layer 3 sits on Layer 2, typically reserved for high-priority overlays or temporary elements like toasts or modals.
Benefits
A primary benefit of the Layer System is accessibility. The layers are engineered to automatically adjust the contrast of internal elements (like text and icons) relative to the background color. This ensures optimal readability and guarantees that our interfaces meet AA WCAG contrast standards. Elements like form components, tool tips, and badges are all structured using this layer stacking principle. And this layering system works in both dark and light mode!
Element types
Applying layers correctly depends on accurately classifying the content they contain. A clear distinction between element types is vital for proper layer application and accessibility adjustments.
Text: Reserved for general body content and non-actionable icons. Utilize designated opacity settings to control emphasis, guaranteeing proper contrast for all text states.
Status text: Text-based elements intended to convey system state or feedback.
Interactive elements: Anything the user can click, tap, or interact with to initiate an action.
Alternative layers
Alternative Layers are specifically set in the Brand theme and are intended for specialized, ad hoc use cases. These layers function independently of the normal layer stacking patterns and are reserved for elements that require unique visual treatment or functional priority related to brand, emphasis, or status.
High contrast
Used to highlight critical content by creating maximum visual distinction. This layer operates by essentially inverting the color mode for that specific container: a light mode high-contrast surface is dark, and vice-versa. Use sparingly for content that demands universal attention.
Hover here!
Use the high-contrast alternative layer to focus attention.
Learn more
A popover/flyout making use of the high contrast alt layer.
Primary
Uses the primary scale of the Brand color palette. This layer helps highlight a surface while maintaining a direct connection to the main brand identity. Common use cases include persistent headers and footers, or any surface where a strong brand presence is desired.
Primary alt layer being used as a footer background.
Status
Divided into sub-layers (Alert, Success, and Warning) to showcase system status or draw attention to actions. These are straightforward: they should be used anywhere a status needs to be communicated, such as destructive buttons, toast messages, form validation, or other system feedback.
Status alt layers used in toast messages.
Practical application in Figma
The conceptual layer system is implemented directly in the UI kit, where each layer acts as a thematic property that can be applied to components.
Inheriting properties
When a component is placed in an interface, it automatically starts at Layer 0. A designer can then select a different layer (from 0 to 3) based on its final placement. By selecting a layer property, the component instance immediately inherits the correct background color for that layer and the right properties for its children elements to ensure accessibility and consistency on that background.
This mechanism ensures that components like a button or a card will always have the correct styling, regardless of which background layer they are placed on.
