Shapes
Shape is a subtle but powerful tool for communicating interactivity, hierarchy, and grouping. Tessera UI uses a constrained radius scale mapped to semantic shape families.
Radius Scale
Section titled “Radius Scale”Six radius steps from sharp to fully rounded, each serving a distinct design purpose.
Shape Families
Section titled “Shape Families”Shape families are semantic roles that group components by their visual purpose. Instead of assigning radii per-component, families ensure related components share the same shape language.
Elevation (Shadow Scale)
Section titled “Elevation (Shadow Scale)”Five elevation levels create visual hierarchy from flat to floating. Shadows use M3-style dual-shadow for soft, natural depth.
Inset Shadows
Section titled “Inset Shadows”Inset shadows create depth for pressed or recessed elements.
Frosted Glass
Section titled “Frosted Glass”An opt-in glassmorphism effect using backdrop-filter. Use sparingly for premium overlay surfaces.
Animated gradient background
Combines translucent background with backdrop blur for a layered, premium feel. Works in both light and dark themes.
Z-Index Scale
Section titled “Z-Index Scale”A fixed z-index scale prevents stacking conflicts across components.