Surfaces & Effects

Elevation

No shadow tokens. Depth is expressed through background tone only. Drop shadows imply a single light source. There is no single light source in the swamp.

Level	Token	Hex	Context
Base	`--color-background-base`	`#0e1115`	Page background
Surface	`--color-background-surface`	`#161b22`	Cards, primary panels
Surface 2	`--color-background-surface-alt`	`#1c2330`	Inputs, nested elements

Three levels. No further nesting.

Glassmorphism

Tokenised, not ad hoc:

Token	Value	Use
`--surface-glass-background`	`rgba(18, 18, 18, 0.65)`	Glass panel background
`--surface-blur-radius`	`24px`	`backdrop-filter: blur()` value
`--surface-noise-opacity`	`0.15`	SVG `<feTurbulence>` grain overlay

WKWebView Fallback

backdrop-filter: blur() is unreliable inside a transparent WKWebView window on macOS. When "transparent": true in tauri.conf.json:

Fallback: Replace backdrop-filter with faux-glass — more opaque surface tokens + SVG noise texture layer. The SVG grain provides physical-depth illusion without the blur calculation.

Detect platform via Tauri’s platform API at runtime.

SVG Noise Texture

<svg width="0" height="0">
  <filter id="grain">
    <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" />
  </filter>
</svg>

Applied via mix-blend-mode: overlay on glassmorphic surfaces. Resolution-independent, low-memory, no image assets.

Glow

Reserved for scarcity-dependent moments only:

Token	Value	Permitted use
`--glow-primary`	`0 0 10px cyan-glow, 0 0 20px cyan-alpha-08`	Primary button hover
`--glow-text`	`0 0 5px/10px/20px cyan at decreasing opacity`	Saltie speech (rare warmth), ceremonial display

Glow on standard UI elements (cards, inputs, labels, borders) is not permitted. The bioluminescent effect depends on scarcity.

Border Radius

Token	Value	Use
`--radius-sm`	`4px`	Tokens, badges, small inline elements
`--radius-md`	`8px`	Buttons, inputs, small cards
`--radius-lg`	`12px`	Cards, panels, overlays
`--radius-xl`	`20px`	Large modals, feature panels
`--radius-pill`	`100px`	Tags, status pills

Border-left accent strips use border-radius: 0 on the accent side.