Foundations

Elevation

The No-Line rule: borders are replaced with ambient drop shadows and tonal fill shifts – never hard strokes. Depth in PlanJolly comes from soft, ink-toned or navy-toned shadows on warm cream, so cards feel placed rather than outlined.

The base recipe: a drop shadow at 20–32px blur, on-surface colour at 5–6% opacity, offset 4px down. Everything else on this page is a tuned variation of it.

Shadow tokens

Each card below wears its own token. Values are React Native points (offset-y, blur radius, opacity); on the web the same tokens render with blur doubled, which matches how iOS diffuses them.

card

y 4 · blur 16 · 6% · #1b3b5a

the default card

modal

y 4 · blur 24 · 12% · #1b3b5a

sheets and dialogs

fab

y 4 · blur 12 · 28% · #1b3b5a

the floating action button

cardSm

y 2 · blur 10 · 4% · #1a1c1c

dense lists, nav pills

cardLg

y 3 · blur 16 · 5% · #1a1c1c

feature cards, hero panels

ctaLift

y 8 · blur 30 · 20% · #1b3b5a

countdown hero, primary CTAs

The FAB

The strongest shadow in the system belongs to the floating action button – a 56px navy-gradient circle ringed by a 3px cream border so it reads as punched through the page, not stuck on it.

The ghost border

The one sanctioned stroke: primary navy at 20–30% opacity, reserved for inputs and interactive states. It whispers where a full border would shout.

Alex & Sam

Figma elevation variables

In Figma the shadow opacities are variables of their own, so mockups and code stay in step.

Variable	Opacity	Used for
`elevation/card`	0.06	cards
`elevation/modal`	0.12	modal sheets
`elevation/hero-card`	0.22	countdown hero
`elevation/fab`	0.28	FAB