Design System

Build agents
with precision.

An obsidian canvas with electric emerald accents. Minimal, technical, and built for developer-first AI agent platforms.

13 color tokens 11 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Deep obsidian neutrals with electric emerald accents. 13 tokens across surfaces, text hierarchy, and interactive states.

Obsidian
#050507
Primary page background
Carbon
#101010
Cards, elevated surfaces
Onyx
#1a1a1a
Hover states, active
Charcoal
#3d3a39
Borders, dividers
Warm Gray
#5c5855
Hover borders
Ghost
#ffffff
Primary text
Silver
#dcdcdc
Secondary UI text
Pewter
#b8b3b0
Labels, muted elements
Ash
#8a8380
Description text
Emerald
#00d992
Brand accent, CTAs
Emerald Soft
#10B981
Softer accent variant
Emerald Particle
#22c55e
Decorative particles
Volt Glow
rgba(0,217,146,0.15)
Glow effects

Gradients

volt
Background glow orbs for hero sections
surface
Translucent surface overlay on black
Typography

Type Scale

Inter as primary typeface. Clean geometric sans-serif with precise weights. JetBrains Mono for code and terminal.

Display-lg Build agents 48px / 1.0 / -0.02em
Display Ship faster 40px / 1.15 / -0.02em
Heading-xl Section heading 32px / 1.15 / -0.02em
Heading Feature title 24px / 1.3 / -0.01em
Body Default body text for readable content 16px / 1.5 / 0
Body-sm Dense data, comparison rows 14px / 1.5 / 0
Label SECTION LABEL 13px / 1.0 / 0.1em
Caption Meta info · Footer · Labels 12px / 1.5 / 0.06em

Fonts

Primary Inter 400-700 · 12-48px
Mono JetBrains Mono 400-500 · Code only
Fallback system-ui Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Compact developer density. 14-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
8080px

Border Radius

sm 4px
md 6px
lg 8px
xl 12px
2xl 16px
pill 9999px

Shadows

Subtle inset border
Elevated floating cards
Glow emerald accent
Focus input focus
Elevation

Depth & Surfaces

Borders over shadows. Thin charcoal lines for separation. 4 distinct surface levels.

Depth Levels

Obsidian
Base page background
Level 0
Carbon
Cards, elevated panels
Level 1
Onyx
Hover states, active surfaces
Level 2
Translucent
Floating overlays, glass effects
Level 3

Surface System

Obsidian #050507
Carbon #101010
Onyx #1a1a1a
Translucent rgba(255,255,255,.06)
Components

Button Variants

Primary (Emerald filled), outlined (Emerald border), ghost (transparent), and secondary (Charcoal border) variants.

Primary CTA Button
Main call to action
.btn-primary
Emerald (#00d992) background, Obsidian text, 6px radius. Use for the single most important action.
Ghost Button
Secondary interactive actions
.btn-ghost
Emerald text, Emerald border. Clear interactive target without competing with primary.
Secondary Button
Tertiary actions
.btn-secondary
Ghost text, Charcoal border. For less prominent actions.
Card
Content containers
.card
Agent Workflow
Build multi-agent systems with supervisor orchestration and observability.
Carbon background, Charcoal border, 8px radius. Hover: Warm Gray border, Onyx background.
Input Field
Text input
input
Transparent background, Ghost text, 6px radius. Focus: Emerald border with glow.
Pill Badge
Status indicators, tags
.badge
Active Pending Error
Pill shape (9999px radius). Emerald for active, Charcoal for neutral, red for errors.
Guidelines

Do's & Don'ts

Do — Embrace
  • Obsidian (#050507) as primary background
  • Ghost (#ffffff) for all primary text
  • Emerald (#00d992) for brand accents and CTAs
  • Charcoal (#3d3a39) for all borders
  • Small border radius (4-8px) for precision
  • 4px-based compact spacing
  • Borders and glows over heavy shadows
Don't — Avoid
  • Bright saturated colors beyond emerald
  • Generic gray borders (#e5e5e5, #ccc)
  • Large decorative drop shadows
  • Dense text without breathing room
  • Serif or decorative fonts
  • Emerald for large background areas
  • Hard sharp corners on interactive elements