Shape and depth
Use radius and shadow tokens for application-owned surfaces.
Liquidify's radius scale runs from compact corners to a full pill. Apply it to application-owned containers that should sit beside the component library.
.summary-card {
border-radius: var(--lq-radius-18);
box-shadow: var(--lq-shadow-level2);
}
.status-chip {
border-radius: var(--lq-radius-pill);
}Depth roles
shadow-level1, shadow-level2, and shadow-level3 form the general elevation scale. The remaining glass-edge and specular shadow tokens are engine inputs; prefer a Material, GlassPrimitive, or component surface instead of assembling those optical layers by hand.
Radius and elevation should communicate containment and hierarchy. Avoid stacking several elevated glass surfaces when one parent surface and simpler child rows would express the same structure.