PAI DESIGN SYSTEM

PAI · Visual Language · v1

PAI Design System

Control-room console meets premium product documentation. Calm, technical, precise — never gaudy. This page is the reference, and it’s built in the system it documents.

01

Color

Surfaces & ink

bg
#f5f6fb
surface
#ffffff
ink
#0e1222
muted
#5a6377
line
#e4e7f1

Cinematic hero

navy
#0b1020
navy-2
#1a1c3a
navy-3
#2a2150
hero gradient
140°

Accents & status

orange — primary
#f6821f
indigo — secondary
#6366f1
green
#16a34a
amber
#d97706
cyan
#0891b2
red
#e11d48
02

Typography

Inter for everything UI · JetBrains Mono for metrics, labels, code, filenames.

display / 44Cloud Automation
h1 / 28The whole system at a glance
h2 / 22How the DA controls it
h3 / mono capsSurfaces & ink
body / 16A fully-cloud place where the DA puts reminders, data, and anything that should happen.
mono / 14step.sleepUntil(fire_at) → notify
small / 13Orange = compute · indigo = control plane · green = isolation.
03

Tokens

TokenValueUse
--r14pxcards, panels, tables
--r-sm10pxswatches, buttons, chips inputs
--sh0 1px 3px /.06 · 0 10px 30px /.06raised panels
--sh-sm0 1px 2px /.05tiles, cards
space4 · 8 · 12 · 16 · 22 · 32 · 48rhythm scale
max-width1060pxreading column
04

Components

KPI strip

€0/mo
Target cost
3
Tiers
50k
Concurrent
$0
While waiting

Tier cards

TIER A · DEFAULT

Durable serverless

Reminders, scheduled jobs, webhooks.

CF Workers + Workflows
TIER B

Managed long-running

Heavy / toolchain jobs.

Railway · Docker + cron
TIER C

Reasoning agents

“Needs a brain” on a schedule.

Hosted agent runner

Console panel

reminder.mmd
POST /reminders → insert row + start Workflow
step.sleepUntil(fire_at) — $0 while waiting
step.do → pai-notify → Telegram · Email

Status chips

live   design   plan

Buttons

Create   Deploy   Cancel

Decision item

  1. Primary engine = Cloudflare Workflows V2 REC or Trigger.dev?
  2. Heavy tier = Railway REC — retire the box?

Callout

Honest correction: per-app DBs stop app bugs, but an account-wide token could reach any data — fix with least-privilege scoped tokens.
05

Voice & tone

Do
Lead with the decision. Plain, technical, confident. Numbers in mono. One honest caveat over three hedges.
Don’t
Gaudy gradients, emoji-heavy headers, marketing fluff, vague superlatives, decorative icons without meaning.