Immersive

Identity

Bold & Expressive

An exhibit-style, game-like interface: a continuous deep-green canvas, chunky comic-panel outlines, and a bright magenta pop reserved for highlights.

Typography

Ag
OswaldDisplay
Ag
InterBody
Ag
JetBrains MonoMono
--text-4xl · 76pxThe quick brown fox
--text-3xl · 58pxThe quick brown fox
--text-2xl · 40pxThe quick brown fox
--text-xl · 27pxThe quick brown fox
--text-lg · 19pxThe quick brown fox
--text-base · 16pxThe quick brown fox
--text-sm · 14pxThe quick brown fox
--text-xs · 12pxThe quick brown fox

Palette

--bg#0b5c34Page background — defines the brand canvas.
--surface#14713fCard / lifted container background.
--surface-warm#1a824aTertiary surface tier (kami warm-sand).
--fg#f5faf6Primary text color.
--fg-2#dcefe0Secondary text tier (kami dark-warm).
--muted#b9d6c2Subtext / captions.
--meta#8fb89aTertiary FG / metadata tier (kami stone).
--border#f5faf6Default border / card edge.
--border-soft#3a8f5eInner row separator that should not visually compete.
--accent#f062b0Brand accent. ≤2 visible uses per screen (lint enforced).
--accent-on#1a0d15FG when --accent is the bg.
--success#4ade80Success state.
--warn#fbbf24Warning state.
--danger#f87171Danger state.

Imagery & layout

Radius

--radius-sm10px
--radius-md16px
--radius-lg16px
--radius-pill9999px

Spacing

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-5 · 20px
--space-6 · 24px
--space-8 · 32px
--space-12 · 48px

Elevation

--elev-raised

Component kit