Power

Identity

Bold & Expressive

A high-end dark aesthetic for premium brand experiences: deep indigo-black canvas, bold headlines, and a single confident orange accent on pill controls.

Typography

Ag
IBM Plex MonoDisplay
Ag
IBM Plex MonoBody
Ag
IBM Plex MonoMono
--text-4xl · 76pxThe quick brown fox
--text-3xl · 56pxThe quick brown fox
--text-2xl · 38pxThe quick brown fox
--text-xl · 26pxThe quick brown fox
--text-lg · 18pxThe quick brown fox
--text-base · 16pxThe quick brown fox
--text-sm · 14pxThe quick brown fox
--text-xs · 12pxThe quick brown fox

Palette

--bg#201f33Page background — defines the brand canvas.
--surface#2a2942Card / lifted container background.
--surface-warm#34324fTertiary surface tier (kami warm-sand).
--fg#fafafaPrimary text color.
--fg-2#d8d7e6Secondary text tier (kami dark-warm).
--muted#9694b0Subtext / captions.
--meta#6f6d89Tertiary FG / metadata tier (kami stone).
--border#3b3a56Default border / card edge.
--border-soft#2e2d46Inner row separator that should not visually compete.
--accent#ff6101Brand accent. ≤2 visible uses per screen (lint enforced).
--accent-on#1a0d02FG when --accent is the bg.
--success#4ade80Success state.
--warn#fbbf24Warning state.
--danger#f87171Danger state.

Imagery & layout

Radius

--radius-sm10px
--radius-md18px
--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