> design_system.md

AgentMD
Design Tokens

A living reference for every visual decision in the AgentMD product — colors, type, spacing, motion, and components.

Color Tokens

--primary · --bg · --text · --border
Brand
--primary
hsl(160 84% 39%)
--primary-bright
hsl(160 84% 50%)
--primary-dim
15% alpha
--warning
hsl(38 95% 55%)
--error
hsl(0 72% 55%)
--info
hsl(210 80% 58%)
Backgrounds
--bg-base
hsl(220 20% 6%)
--bg-surface
hsl(220 18% 9%)
--bg-elevated
hsl(220 16% 12%)
--bg-subtle
hsl(220 14% 15%)
Text & Borders
--text-primary
--text-secondary
--text-tertiary
--border-default
--border-subtle
--border-strong

Typography

Outfit · JetBrains Mono
--text-2xl · 700 Agent Execution 2.25rem
--text-xl · 700 Spec Validated 1.75rem
--text-lg · 600 Running Agent Health Check 1.25rem
--text-md · 400 The agent parsed all 14 spec requirements and passed validation. Ready to execute. 1rem
--text-sm · 400 Last validated 3 minutes ago · 14 of 14 checks passed 0.875rem
--text-xs · mono agent.id = "agmd_7f3a2b" · status = READY 0.75rem
--text-code · mono const agent = new Agent(spec) 0.875rem

Spacing Scale

4px base unit
--space-1 4px — icon gaps, tight padding
--space-2 8px — inline icon spacing
--space-3 12px — button padding (y)
--space-4 16px — default component padding
--space-6 24px — card padding (default)
--space-8 32px — section gaps (tight)
--space-12 48px — section gaps (relaxed)
--space-16 64px — page section padding
--space-24 96px — hero vertical padding

Motion

staged reveals · status transitions
fadeSlideUp
Click to replay — used for section and card reveals on page load.
opacity 0 → 1 · translateY 12px → 0
glowPulse
Used on active agent status indicators and pipeline step icons.
AGENT RUNNING
statusPop
Scale 0.85 → 1.05 → 1 for badge state changes.
READY — click me
Timing Tokens
--duration-fast120ms
--duration-base220ms
--duration-slow400ms
--duration-reveal600ms

Buttons

primary · secondary · ghost · danger
Variants
Sizes
States

Badges & Status

agent health indicators
READY VALIDATED DEGRADED FAILED PENDING IDLE

Cards

surface · elevated · active
Spec Parser
v2.4.1 — Idle
IDLE
0 runs today
Health Monitor
v1.9.0 — Active
READY
142 checks / hr
Validation Engine
v3.1.0 — Warning
DEGRADED
87% pass rate
Exec Runner
v4.0.2 — Error
FAILED
3 errors

Inputs

default · focus · error states
Alphanumeric with hyphens only.
Must be a valid https:// URL.

Terminal

spec output · execution logs
agentmd — execution log
$agentmd run ./specs/health-check.md
# Parsing spec file...
✓ Loaded 14 requirements (312ms)
✓ Resolved 3 dependencies

# Running validation pass...
✓ schema valid
✓ all endpoints reachable
⚠ rate limit warning on /api/infer (920/1000 rph)

# Executing agent...
✓ Agent agmd_7f3a2b91 is READY
$

Execution Pipeline

parse → validate → execute
✓
Parse
✓
Validate
3
Execute
4
Report
Progress
Spec validation 100%
Agent execution 62%
Report generation 0%

Loading States

skeleton · shimmer

Agent Card

composite pattern
agmd_7f3a2b91 · health-monitor
Health Monitor v1.9
READY
Spec completion 14/14 checks
Uptime
99.8%
Checks/hr
142
Latency
38ms