Surface Color Hierarchy Test
Surface
(Background)
(Background)
Lowest
(Level 1)
(Level 1)
Low
(Level 2)
(Level 2)
High
(Level 3)
(Level 3)
Highest
(Level 4)
(Level 4)
Stacked Containers
Each container should appear to sit above the previous one due to the subtle lightness differences.
Surface Container Lowest - Foundation layer
Surface Container Low - Second layer
Surface Container High - Third layer
Surface Container Highest - Top layer
Nested Depth Test
Containers nested within each other to show progressive elevation.
Lowest Container
Low Container
High Container
Highest Container - Maximum elevation
Real-world Card Example
A practical example showing how the surface hierarchy works in a typical UI component.
Card Header (Surface High)
Card content sits on the low surface level, providing a subtle foundation for the elevated header and action button.