AIPMS UI Kit

E0 · design system
100%

Every primitive, in the live theme. Toggle light/dark (top-right) and resize to see the mobile↔desktop behavior. Structure is pine green; the one warm color, terracotta, is reserved for AI.

Color

Warm parchment + forest ink. Amber is retired; terracotta marks AI.

structure / interactive
--accent
accent tint
--accent-soft
AI signal
--ai
AI tint
--ai-soft
success
--ok
warning
--warn
danger
--danger
app background
--paper
card surface
--surface
recessed
--surface-2
text
--ink
muted text
--ink-2
faint text
--ink-3
hairline
--line

Typography

Schibsted Grotesk display · Inter body · JetBrains Mono for data. Fluid clamp() scale × font-scale.

2xlDisplay 2xl
xlHeading xl
lgLarge lg
bodyBody
smSmall sm
capCaption cap
monoAIPMS-2048 · 14:32 · $12,400

Spacing & radii

4px base scale; restrained radii.

spacing
s1
s2
s3
s4
s5
s6
s7
radii
r1
r2
r3
r4
r-sheet

Buttons

One action primitive. The AI variant is only for AI-authored actions.

variants
sizes · icons · states
icon buttons · FAB

Inputs & forms

Labelled fields, validation, search.

fields
Visible to your team
That email doesn't look right.

Selection controls

Segmented / chips / sheets over dropdowns.

switch · checkbox · radio
segmented control
tabs
filter bar (opens a sheet)
Assigned to me

Data display

Chips, tags, status, health, presence, avatars.

chips & tags
DefaultSolidAccentAI suggestionRemovablePDFEN→AR
badges & status pills
4LiveTrialOverTo doIn progressIn reviewBlockedDone
health · presence · avatars
Healthy At risk Blocked

Lists & carousels

Hairline rows, swipe actions, horizontal snap.

Website relaunch
4 open · 2 mentions
Mobile app
on track
swipe row (drag left on touch/pointer)
Swipe me
reveals done · snooze · delete
horizontal snap carousel
project
Website
project
Mobile app
project
Brand
project
Q3 goals

Stats & trends

KPI tiles with delta + bar sparkline (no inline SVG).

Open tasks
1288%
On-time %
94%5%
AI actions
34221%

Feedback

Toasts (never alerts), skeletons over spinners, progress.

toasts
loading

Overlays

Sheets & drawers dismiss on scrim/Esc; detail modals close only via the button.

triggers
I appear on hover & focus

Empty state

Every empty list teaches: what it is + the next step.

No conversations yet

Start a project thread — talk in any language and AI turns it into tasks.

Patterns

Composed from the primitives: topbar controls + a generated settings panel.

topbar controls
settings form (registry-driven)
AI assist
Let AI turn chat into tasks