Elevation
Elevation shows what floats above what — a sheet over the screen, a card over the canvas. DayTwo keeps shadows subtle on purpose: just enough to signal layering, never so heavy that it costs performance on a low-end phone.
The levels
Each level is cross-platform: iOS reads the shadow values, Android reads elevation, and the web reads box-shadow — all from one token.
How to use it
none— flat elements, and dividers inside a surface (a hairline between list rows). Not for outlining a card.sm— the default for cards. A surface lifts off the canvas with a soft shadow, not a stroke — so every card, metric, and coach message reads as one consistent family.md— popovers and menus that float briefly.lg— bottom sheets and modals that sit clearly above everything.
Shadow lifts a surface; a stroke defines a control. A surface (a card, a sheet) lifts off the canvas with a soft shadow — reach for that before a border. A control is different: an input or dropdown field needs a defined edge to read as tappable, so it sits on a subtle grey hairline, not a shadow. Beyond that, strokes do two more jobs: a divider inside a surface, and an error state (where the field border turns red).
When NOT to
- ❌ Don't stack heavy shadows — large blurred shadows are expensive to composite and drop frames on low-end Android.
- ❌ Don't use elevation for emphasis — that's the job of color and size, not depth.
- ❌ Don't float everything; if everything is raised, nothing reads as raised.
What user problem this solves
Clarity of layers, without a performance cost. A subtle lift tells the user "this is on top, deal with this first" (a sheet, a dialog) — while staying light enough that the app still feels fast on the cheap hardware many DayTwo users have.
A card or sheet lifts off the canvas on a soft shadow — reach for that before a border. A form control (input, dropdown field) is the exception: it wears a subtle grey hairline so its edge is unmistakable. Keep shadows subtle so they stay cheap on low-end Android.