Design System

Your agent decides
what to do.

Developer command center for AI agent tooling. Monospace labels, near-black surfaces, electric blue accents. Compact, technical, precise.

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

Color Tokens

Near-black surfaces with electric blue and neon cyan accents. 15 tokens spanning neutrals, interactive, semantic, and decorative categories.

Carbon Black
#0a0a0a
Primary page background
Obsidian
#111111
Nav bar, elevated panels
Graphite
#1a1a1a
Code blocks, inputs
Slate
#262626
Borders, dividers
Iron
#333333
Inactive states
Snow White
#ffffff
Primary text, icons
Silver
#a1a1a1
Secondary text
Steel
#666666
Placeholders, labels
Mist
#525252
Helper text, captions
Electric Blue
#3b82f6
Links, interactive accents
Neon Cyan
#22d3ee
Highlight accents, glow
Emerald
#10b981
Success states
Signal Red
#ef4444
Error states, alerts
Amber
#f59e0b
Warning, pending status
Violet
#8b5cf6
Decorative accents

Gradients

blue-glow
Gradient accent for hero graphics
cyan-pulse
Ambient glow behind feature cards
Typography

Type Scale

Inter for body and headings. JetBrains Mono for code, navigation labels, and technical UI. Monospace labels create the terminal-meets-dashboard aesthetic.

Display-lg Ship faster 48px / 1.0 / −0.02em
Display Build what matters 40px / 1.1 / −0.02em
Heading-lg Section heading 32px / 1.2 / −0.02px
Heading Subsection heading 24px / 1.2 / −0.02px
Body-lg Default body text for readable content blocks 16px / 1.6 / —
Body Dense data, comparison rows, UI text 14px / 1.5 / —
Caption META · LABELS · STATUS 12px / 1.5 / 0.02px

Fonts

Primary Inter 400–700 · 12–48px
Mono JetBrains Mono 400–700 · Code, nav, badges
Fallback system-ui Substitute for Inter
Layout

Spacing & Shapes

Base unit 4px. Compact density with clear visual hierarchy. 15-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

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

Border Radius

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

Depth & Surfaces

Near-black layering with subtle tonal shifts. No shadows — elevation is communicated through background brightness alone.

Depth Levels

Carbon Black
Base page background — the canvas
Level 0
Obsidian
Nav bar, elevated panels, modals
Level 1
Graphite
Code blocks, input fields, cards
Level 2
Slate
Borders, dividers, containers
Level 3

Surface System

Carbon Black #0a0a0a
Obsidian #111111
Graphite #1a1a1a
Slate #262626
Components

Button Variants

White primary CTA, Electric Blue accent, ghost variants. Monospace labels throughout for the technical aesthetic.

Primary CTA Button
Main call to action — highest contrast
.btn-primary
White (#ffffff) background, Carbon Black text, 6px radius. Monospace 12px uppercase. Use for the single most important action.
Blue Accent Button
Secondary interactive actions
.btn-ghost
Electric Blue text and border, transparent background. Clear interactive target without competing with primary.
Secondary Button
Tertiary actions, navigation
.btn-secondary
Snow White text, Slate border. For less prominent actions that still need visual presence.
Nav Link
Navigation items
.nav-link
Products Solutions Docs
JetBrains Mono 12px, uppercase, 0.06em tracking. Steel color, Snow White on hover. Transparent background.
Status Badge
Connection and execution status
.badge-status
Connected Pending Error
Pill shape, JetBrains Mono 10px uppercase. Semantic colors: Emerald for success, Amber for pending, Signal Red for error.
Code Block
Code snippets and terminal output
.code-block
const tools = session.tools();
const agent = Agent({
  name: "Assistant",
  tools,
});
Graphite background, 12px radius, 1px Slate border. JetBrains Mono 14px, Silver text. Syntax highlighting with semantic accent colors.
Guidelines

Do's & Don'ts

Do — Embrace
  • Carbon Black (#0a0a0a) as primary background
  • Snow White (#ffffff) for all primary text
  • JetBrains Mono for nav labels, code, badges
  • Electric Blue (#3b82f6) for links and accents
  • 6px radius for buttons, 12px for cards
  • 4px-based spacing with compact density
  • Semantic colors only for status (green/red/amber)
Don't — Avoid
  • Bright or saturated background colors
  • Electric Blue on large surface areas
  • Inter for code or navigation labels
  • Rounded corners larger than 16px on cards
  • Decorative gradients on text content
  • Multiple accent colors per component
  • Heavy drop shadows — use tonal layering