Elevation & Shape

GospeLib maintains two distinct surface personalities — Paper and Chrome — each with their own elevation behavior and shape language.

The Two Surface Characters

Surface	Character	Background	Edges	Radius
Paper	Warm, subtly textured — holds scripture and annotations	white-200 (#F5F3EE) with 2% opacity noise grain	Float via shadow — no visible borders	12px for cards; square edges for the scripture page itself
Chrome	Clean, flat, cooler — navigation, tools, settings	white-100 (light) / navy-800 (dark)	Crisp Material-inspired elevation shadows	8px for controls

The distinction between 12px paper-surface cards and 8px chrome controls is intentional — it creates a perceptible layer separation. Paper feels softer and more physical than the surrounding chrome.

Elevation Scale

Inspired by Material Design 3's tonal elevation, but using warm shadows rather than colored overlays:

Level	Box Shadow	Usage
0	none	Background (page itself)
1	0 1px 3px rgba(20,16,10,0.08), 0 1px 2px rgba(20,16,10,0.06)	Resting cards, inline panels, verse cards, collapsed panels
2	0 3px 8px rgba(20,16,10,0.10), 0 2px 4px rgba(20,16,10,0.07)	Raised cards, hover states, note cards, active panels
3	0 6px 16px rgba(20,16,10,0.12), 0 3px 6px rgba(20,16,10,0.08)	Bottom sheets at rest, docked panels, coach marks
4	0 12px 32px rgba(20,16,10,0.14), 0 4px 8px rgba(20,16,10,0.09)	Popovers, command palette, draggable windows
5	0 20px 48px rgba(20,16,10,0.18), 0 6px 12px rgba(20,16,10,0.10)	Modal dialogs, full-screen sheets

tip

Shadow colors use warm near-black rgba(20,16,10) rather than pure black, preserving warmth even in shadows. In dark modes, shadows switch to rgba(0,0,0) at higher opacity.

The Scripture Page Shadow

The scripture page uses a unique three-layer shadow creating the impression of a physical page with genuine thickness:

.scripture-page {
  box-shadow:
    0 2px 4px rgba(20, 16, 10, 0.06),
    /* close — defines the edge */ 0 8px 24px rgba(20, 16, 10, 0.08),
    /* mid — creates lift */ 0 20px 60px rgba(20, 16, 10, 0.05); /* far — grounds it */
}

On dark backgrounds (Study Dark mode), the page shadow reads as a halo of lighter dark against the navy chrome — the page still floats.

The Paper Texture

Applied subtly to all paper surfaces via a CSS/React Native background:

background-image: url('data:image/svg+xml,...'); /* SVG noise filter at 2% opacity */
background-color: #f5f3ee;

The feel: high-quality uncoated paper — not old parchment, not a digital gradient. Clean and modern but physically warm.

The page background is never perfectly white. Even in the lightest mode, the page uses white-200 (#F5F3EE) — the slight warmth is essential to the paper metaphor.

Corner Radius

Token	Value	Usage
radius.xs	2px	Micro elements
radius.sm	4px	Chips, badges, small controls
radius.md	8px	Buttons, inputs, chrome panels
radius.lg	12px	Cards, note cards, paper surfaces
radius.xl	16px	Bottom sheets (top corners only)
radius.full	9999px	Pills, avatars, FABs

Radius Philosophy

• Paper surfaces use large radius (12px) — softer, more physical
• Chrome surfaces use standard control radius (8px)
• The scripture page itself has no border-radius — paper has square edges
• Bottom sheets use 16px on top corners only

Border Usage

Borders are used sparingly. Paper surfaces never have visible borders — they float via shadow.

Context	Border	Color
Chrome dividers (light mode)	1px solid	white-500
Chrome dividers (dark mode)	1px solid	navy-700
Horizontal section rules	0.5px at 40% opacity	white-500

The 0.5px section rule is barely visible — just enough to organize, never to divide.

Related Pages

• Design Tokens — complete elevation and radius token tables
• Colors — surface colors for paper and chrome
• Dark Mode — shadow behavior across modes
• Reader Experience — scripture page shadow details