Elevation and glass
Depth comes from two tools. Shadows lift solid content, and glass is for control layers that float above content.
Shadows
Surfaces have no border. A soft layered shadow separates them from the canvas.
| Token | Used for |
|---|---|
--sui-shadow-surface | Cards and raised fields |
--sui-shadow-raised | Selected segments, switch thumbs |
--sui-shadow-pop | Menus, popovers, toasts |
--sui-shadow-dialog | Dialogs and sheets |
Complete blood countResults on the same day. No fasting.
Rp95.000
Complete blood countResults on the same day. No fasting.
Rp95.000
Complete blood countResults on the same day. No fasting.
Rp95.000
Glass
Glass is a translucent surface with a background blur. Use it sparingly, and only on the control layer.
Use glass for top bars, docks and bottom action bars in the app; the sidebar and navbar in the dashboard; buttons on top of an image or a gradient.
Always keep solid cards, tables, forms, dialogs and sheets; any area with long text or result numbers; anything that gets printed.
| Platform | How it works | What people see |
|---|---|---|
| Web | backdrop-filter blur with 180% saturation | Real blur |
| iOS | System blur | Real blur |
| Android | Blur is unreliable on many devices, so glass-fallback is used | A solid 98% surface |
| Reduced transparency or high contrast | Follows the device setting | A solid surface |
Text on glass uses text-on-glass and must stay readable on the fallback. Check every glass design twice: with blur and with the solid fallback.