Elevation
One shadow value, applied one way: on the visible, rounded surface itself.
Every card, chip and pill gets the same shadow (shadow-elevated), drawn
around the shape itself: the element that has the fill, the border and the
rounded corners.
| Card | What it is | Real example |
|---|---|---|
| Solid card | Has its own colour fill. The shadow sits on the card itself. | WelcomeCard’s step rows, JauntTasksCard’s task rows, HomeUserCard’s stat tiles |
| Photo card | A photo fills it. Same shadow, still on the rounded card itself, never on an invisible wrapper around it. | The big photo card at the top of Where, Accommodation and the trip page |
Why only one way
Section titled “Why only one way”Until 13 Oct 2026, see-through wrappers used a second kind of shadow (a CSS
filter drop-shadow). iPhone Safari draws a filtered element once, as a
picture, and doesn’t always redraw it when the card grows. Cards showed with
their background cut off part-way down.
So every shadow is now the plain kind (shadow-elevated, a box-shadow). Don’t
bring the filter kind back.
The value
Section titled “The value”0px 4px 8px rgba(0, 0, 0, 0.15)
One shadow, everywhere. Never a second “bigger” or “smaller” elevation. Depth in Jaunt comes from colour and layout, not a shadow scale.
Dark mode
Section titled “Dark mode”A black shadow disappears against a near-black page, so dark mode swaps to a
soft white glow instead (2px 8px, 6% opacity). It should read as the card
catching light, not as a hole. Deliberately subtle: “elevated”, not “glowing”.