OpenHands
Design System

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value, visualized on the near-black monochrome canvas.

View Repository Explore Tokens
01 / Colors

Color Palette

Core Surfaces
background
#0d0d0d
Page background, app shell
card
#121212
Card surfaces, elevated containers
secondary
#141414
Secondary surfaces, sidebar accent
muted
#1f1f1f
Hover fills, badges, tooltips
border
#242424
Borders, input borders, dividers
muted-hover
#2e2e2e
Hover on muted surfaces
Core Text
foreground
#fafafa
Primary text, headings
muted-foreground
#8c8c8c
Secondary text, labels, placeholders
primary
#ffffff
Maximum emphasis, button bg
primary-foreground
#000000
Text on white buttons
Semantic / Status
success
#22c55e
Success states, running
success-foreground
#86efac
Success text on dark
warning
#f59e0b
Warning, caution badges
info
#3b82f6
Informational, links
destructive
#dc2626
Error, danger, delete
ring
#cccccc
Focus rings (1px, keyboard-only)
Surface Scale (5% → 18% lightness)
5%7%8%12%14%18%
02 / Typography

Typography Scale

Hero Heading (text-3xl)
30px / 600 / 1.2 / -0.5px / Inter
Page Heading (text-2xl)
24px / 600 / 1.25 / -0.3px / Inter
Sub-heading (text-xl)
20px / 600 / 1.3 / Inter
Section Title (text-lg)
18px / 600 / 1.4 / Inter
Body Large — Larger body text for chat messages and hero content. (text-base)
16px / 400 / 1.5 / Inter
Body — Standard UI text for labels, descriptions, and interface elements. (text-sm)
14px / 400 / 1.5 / Inter — primary body size (711 uses)
Label — Form labels, nav items, and badges. (text-sm font-medium)
14px / 500 / 1.5 / Inter — label weight (304 uses)
Secondary — Metadata, captions, and small labels. (text-xs)
12px / 400 / 1.5 / Inter — secondary size (427 uses)
const design = await openHands.init({ tokens: true });
14px / 400 / 1.6 / JetBrains Mono — code / technical text
SYSTEM CATEGORY
11px / 500 / uppercase / tracking-wide — section labels
03 / Buttons

Button Variants

Save Changes
default
Delete
destructive
Cancel
outline
Settings
secondary
Archive
muted
Learn More
ghost
View docs
link
Status Pills
Success
success
Warning
warning
Info
info
Error
destructive
04 / Cards

Card Examples

Standard

Standard Card

bg-card border border-border rounded-lg p-4. The workhorse container for settings panels, content sections, and list items.

Elevated

Elevated Card

bg-card border border-border rounded-xl p-6 shadow-lg. For modals, dialogs, and featured content that needs to float above the surface.

Interactive

Interactive Card

hover:border-white/30. Cards that respond to hover with a subtle border brightening to indicate they are clickable.

05 / Forms

Form Elements

Default (border-border, bg-muted/40)
Focus (ring-1, ring-ring, bg-muted/60)
Error (border-destructive)
NativeSelect (appearance: none, chevron overlay)
06 / Spacing

Spacing Scale

4 (gap-1)
6 (gap-1.5)
8 (gap-2)
12 (gap-3)
16 (gap-4)
24 (gap-6)
32 (gap-8)
48 (gap-12)
Padding Patterns
px-3 py-2 compact
px-4 py-2 standard
p-4 card
p-6 dialog
07 / Radius

Border Radius Scale

2px
rounded-sm
4px
rounded-md
6px
rounded-lg
12px
rounded-modal
16px
rounded-2xl
9999px
rounded-full
08 / Elevation

Elevation & Depth

Level 0: Flat
No shadow, bg-background
Level 1: Surface
shadow-card + border
Level 2: Raised
shadow-md — dropdowns, popovers
Level 3: Floating
shadow-lg — modals, dialogs
Level 4: Overlay
shadow-xl — full-screen overlays
Focus Ring
ring-1 ring-ring ring-offset-2