Interactive route
glassUse the interactive route to explore this foundation live.
foundations / radius and elevation
Radius and Elevation
DK treats corners and depth as part of the system voice, not one-off decoration choices.
Principles
Core principles
These are the design-system rules this foundation should reinforce.
- Radius signals softness, friendliness, and hierarchy.
- Elevation should clarify layered relationships, not chase visual trendiness.
- Surfaces in one preset should feel related even when they vary in emphasis.
Model
How DK models it
This section connects the concept to the actual DK math and token pipeline.
- Radius and shadow values are compiled from theme families rather than typed ad hoc per component.
- Display, overlay, and status surfaces can share one elevation language while expressing different hierarchy.
- Recipes turn these values into slot-level CSS variables instead of runtime calculations.
Practice
How to use it in product work
These are the decisions designers and engineers should make with this foundation in mind.
- Use raised, outlined, and calm surfaces intentionally rather than layering everything.
- Match overlay depth to interaction importance: tooltip < popover < dialog/drawer.
- Let preset character influence how sharp or soft the surface language feels.
Proofs
What the proof layer guarantees
These are the reliability claims DK makes about this foundation today.
- Surface decisions stay stable across components because they compile from shared tokens.
- Preset comparison makes elevation and radius differences obvious before they drift into inconsistency.
- Snapshot coverage catches accidental surface regressions quickly.
Token notes
- Surface tone, radius, and elevation are exposed as semantic families in the token contract.
- Display and overlay components consume different surface roles from the same theme.