Surgent Design System
Component atoms and molecules for SurgentAI. Built on OKLCH color science, Geist typography, and an industrial sharp-edge aesthetic inspired by Profound and Claro.
OKLCH Color Tokens
Primary
oklch(82.55% 0.182 145)
--surgent-primary
CTA, Accent, Active
Background
oklch(12% 0.01 250)
--surgent-background
Page Background
Surface
oklch(16% 0.01 250)
--surgent-surface
Cards, Panels
Border
oklch(25% 0.02 145)
--surgent-border
Outlines, Dividers
Foreground
oklch(92% 0.01 145)
--surgent-foreground
Primary Text
Muted
oklch(60% 0.01 250)
--surgent-muted
Caption, Secondary
Chart 1
oklch(82.55% 0.182 145)
--chart-1
Data Series 1
Chart 2
oklch(65% 0.14 145)
--chart-2
Data Series 2
Chart 3
oklch(48% 0.10 145)
--chart-3
Data Series 3
Chart 4
oklch(35% 0.06 145)
--chart-4
Data Series 4
Chart 5
oklch(25% 0.04 145)
--chart-5
Data Series 5
Destructive
oklch(0.704 0.191 22.216)
--destructive
Error, Warning
Typography Scale
3.5rem / 800w
Geist Sans
2.25rem / 700w
Geist Sans
1.5rem / 600w
Geist Sans
1.125rem / 600w
Geist Sans
1rem / 400w
Geist Sans
0.875rem / 400w
Geist Sans
0.85rem / 500w
Geist Mono
0.7rem / 400w
Geist Mono
Buttons
Primary — glow on hover
Ghost — blueprint border
Border Radius
2px
Font
Geist Mono
Case
Uppercase
Glow
0 0 20px primary/20
Data Cards
Active Agents
Live24
+3 since last hour
Tasks Completed
24h1,842
99.7% success rate
System Status
OpsNo Power Rail
VariantCards without accent omit the top power rail. Use for informational content that is not actively running.
Pipeline Latency
P95Error Rate
Alert0.3%
ErrorStatus Badges
Active and Live variants include a pulsing animation via framer-motion. Idle and Error are static.
Spacing & Radius
Spacing Scale
Border Radius Scale
Forms
Lowercase, hyphens only. Used as workflow identifier.
Only alphanumeric characters and hyphens are allowed.
Define the agent's role and constraints.
System prompt cannot be empty.
Overlays, Feedback & Accordion
Alert variants
Tabs
Progress
Skeleton (loading state)
Overlays
Accordion (FAQ pattern)
Navigation & Section Headers
NavBar — sticky, mobile-responsive
EyebrowLabel
Used by 500+ teams
New in v2.4
Enterprise-grade
SectionHeader — left align
Automation Platform
Scale your presence, not your workload
Surgent deploys autonomous AI agents that handle your most complex workflows end-to-end — from lead qualification to content delivery.
SectionHeader — center align
Trusted by industry leaders
Agents for every marketing channel
Every workflow. Every channel. One platform. Built for teams that move fast.
Blog Components
TagBadge — content categories
ArticleCard — blog grid
How AI Agents Are Replacing Entire Marketing Departments
The shift from AI-assisted work to AI-autonomous workflows is happening faster than anyone predicted. Here's what it means for your team.
Building Deterministic Agent Pipelines at Scale
Flaky agents are the silent killer of enterprise AI adoption. This is how we engineer for reliability from the ground up.
The Zero-Click Future: What Grok's Rise Means for SEO
When AI answers questions before users even visit your site, traditional SEO is dead. Here's what comes next.
AuthorCard — full + compact
Dennis Acosta
Founder & CEO
Building the future of autonomous business workflows at Surgent. Previously led growth at two enterprise SaaS companies.
Compact (inline)
Dennis Acosta
Founder & CEO
Surgent Team
Engineering
Prose — article body typography
Why deterministic agents outperform probabilistic ones
Most teams start with a simple prompt and call it an agent. It works fine in demos. In production, at scale, with real data — it breaks. The root cause is almost always the same: non-determinism.
A deterministic agent pipeline has explicit state transitions, typed inputs/outputs, and idempotent operations. When something fails, you know exactly where and why.
The best agents aren't the most creative — they're the most reliable.
The three failure modes
- Hallucinated data fields that pass validation
- Silent retries that cause duplicate side effects
- Prompt drift across model version upgrades
Surgent's agent runtime enforces typed contracts at every step via zod schemas, making all three failure modes detectable at build time.