sprk

Sprk Design System

Single source of truth for colour, typography, components, spacing and grid. All tokens live in src/styles.css.

Colour tokens

Primary
--primary
+ /soft variant
Accent (purple)
--accent
+ /soft variant
Foreground
--foreground
Background
--background
Card
--card
Muted
--muted
Border
--border
Destructive
--destructive
Sidebar
--sidebar-bg
Page
--page-bg

Status — pass uses purple, warning uses orange, fail uses red. Never use green.

Typography

H1 · 26/32 semibold

Insurance products at scale

H2 · 18/24 semibold

Section title

H3 · 15/22 semibold

Card title

Body · 14/22

The quick brown fox jumps over the lazy dog. 0123456789.

Caption · 12/18 muted

Supporting metadata, dates (DD-MM-YYYY).

Mono / code
font-family: Inter, system-ui;

Buttons

Inputs & controls

Cards

Life Force
Category — Life
Last modified 12-05-2026
Life Force
Stat card
7,875
Total tests run

Featured

Generic content card with consistent border, radius and shadow.

Badges & status

PrimaryAccentMutedFailWarningPass

Tables

NameModifiedStatus
Life Force12-05-2026in-progress
CI Test 0208-05-2026todo
Family United Test 0102-04-2026in-progress
Universal Life Updates18-02-2026done

Grid & responsive rules

  • Container: max-width 1600px, page padding px-3 sm:px-6 lg:px-8.
  • Breakpoints: sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536.
  • Card grid: 1 col mobile → 2 sm → 3 lg → 4 xl.
  • Spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 px (Tailwind 1–8).
  • Radius: sm 8 · md 10 · lg 12 (default) · xl 16 · 2xl 20.
  • Shadow: shadow-sm for cards, shadow-lg on hover/elevated.
  • Mobile pattern: stack legends below charts; first table column sticky with right-edge shadow; horizontally scrollable.
  • Dates: always render as DD-MM-YYYY across all surfaces.
← Back to products