Spark Dark
v2.4 · Source of truth

The visual brand book for building electric, dark-first interfaces.

An electric-violet accent over deep near-black surfaces, a subtle grid texture, humanist sans for content and monospace for metadata. Everything below is built from the same tokens an agent should reference by name.

01 — Foundations

Color Palette

Every surface, border, accent, and shadow is driven by --spark-* tokens. Never use raw hex in components. Surfaces follow a strict elevation ladder from darkest to lightest.

Surfaces — elevation ladder
BG Root--spark-bg-root#08090cPage background
BG Input--spark-bg-input#0d0f16Input / textarea fields
BG Panel--spark-bg-panel#10121aPanels and shells
BG Card--spark-bg-card#161926Cards, chips
BG Elevated--spark-bg-elevated#1c2033Raised elements
BG Hover--spark-bg-hover#1f2340Hover state for raised elements
Accent — electric violet
Accent--spark-accent#8b6effPrimary fills, buttons, active states
Accent Light--spark-accent-light#b8a4ffAccent text, links, gradient ends
Accent Dim--spark-accent-dimrgba(139,110,255,0.18)Tinted backgrounds, focus rings
Accent Glow--spark-accent-glowrgba(139,110,255,0.40)Glow shadows
Semantic
Success--spark-success#34d399Success / online
Warning--spark-warning#fbbf24Warning / in-progress
Danger--spark-danger#f87171Error / destructive
Text — emphasis
Text 1--spark-text-1#ecedf4Primary text, titles
Text 2--spark-text-2#9698adSecondary / body copy
Text 3--spark-text-3#7e8099Muted: labels, captions, placeholders
Borders
Border--spark-borderrgba(255,255,255,0.06)Default hairline border
Border Focus--spark-border-focusrgba(120,100,255,0.50)Focus / hover border
01 — Foundations

Typography

Plus Jakarta Sans for human-facing content (body, titles, buttons). JetBrains Mono for metadata — labels, badges, stats, status, and machine output.

Sans — Plus Jakarta SansAaWeights 400 / 500 / 600 / 700 / 800. The quick brown fox jumps over the lazy dog.
Mono — JetBrains MonoAaWeights 400 / 500 / 600. const spark = "0123456789";
Build any interface
Page title800 · clamp(1.5rem, 4vw, 2.25rem) · -0.035em
Component patterns
Section / card title700 · 1.15rem · -0.02em
A dark-theme design system
Subtitle500 · 0.82rem
Humanist sans for all human-facing content, with relaxed line-height for comfortable reading.
Body400 · 0.84–0.88rem · 1.55
STATUS LABEL
Label (mono)700 · 0.72rem · 0.06em
NEW · BETA
Badge / chip (mono)600 · 0.62–0.7rem · 0.06–0.08em
128ms · 99.9% · v2.4
Micro / stats (mono)0.6rem
01 — Foundations

Radii, Shadows & Motion

Stay within the documented radii set. Pair the hover lift with the composed card + glow shadow, and reset the transform on :active.

Radii
--radius-sm8pxInputs, buttons, banners
--radius-md14pxMessage bubbles, mid containers
--radius-lg20pxCards, panels, shells
--radius-xl28pxLargest containers
Shadows
--shadow-cardDefault elevation
--shadow-glowAccent glow
--shadow-inputRecessed inputs
hovercard + glow on hover
pulse-dot
opacity 1→.5, scale 1→.8 over 1.2–2s · status & loading dots
spin
continuous 360° · spinners, spin .9s
02 — Layout & Rules

Layout, Breakpoints & Usage Rules

Fluid-capped containers, an auto-wrapping card grid, and a two-column workspace that collapses on mobile. The page shell is a centered vertical flex column.

Container widths
Standard single columnmin(92vw, 680px)
Wide content gridmin(92vw, 960px)
Two-column workspacemin(96vw, 1120px)
Reading / conversationmin(94vw, 760px)
Breakpoints
max-width: 860pxTwo-column layouts collapse to a single column
max-width: 640pxTighter padding/gap; input rows stack; buttons go full-width and 44px tall; status bars stack; page title shrinks to 1.3rem
Auto grid — repeat(auto-fit, minmax(260px, 1fr))
Self-wrapping
Cards reflow
At any width
Gap 18px
05 — Usage rules
  • Drive every surface, border, accent, and shadow from --spark-* tokens — no raw hex in components.
  • Mono for metadata (labels, badges, stats, status, machine output); sans for everything human-facing.
  • Follow the elevation ladder: root → input → panel → card → elevated → hover.
  • Pair hover lift with the composed card + glow shadow; reset transform on :active.
  • Stay within the documented radii set, container max-widths, and breakpoints.
  • Keep the optional grid texture near-invisible — it reads as texture, not pattern.
04 — Components

Component Patterns

Live recipes composed entirely from Spark tokens. Reuse these patterns rather than inventing new values. Hover the cards and focus the inputs to feel the motion conventions.

Buttons
Badges & status
NewLiveIdleOnlineGeneratingFailed
Pattern

Hover Card

Lifts -3px with a composed card + glow shadow and an accent focus border on hover.

Learn more →
Pattern

Elevation

Cards sit on bg-card above the panel surface, one rung up the elevation ladder.

Learn more →
Pattern

Anatomy

Badge → title → description (flex:1) → call-to-action in accent-light at weight 600.

Learn more →
Form fields
Prompt
Read-only output
Message thread
Assistant
Welcome to Spark Dark. What should we build today?
You
A brand book for our design system.
Banners
ErrorSomething went wrong while generating your component.
WarningYour session will expire in 5 minutes.
SuccessDesign tokens synced successfully.
Overlay & loader
Generating preview…