Add OpenHands design assets from kosmonautical/openhands-index-paul

Add design files from kosmonautical/openhands-index-paul:

- OpenHands-Design/ folder with design system files
- New logo assets (logotype-design.svg, logotype-on-dark.svg, logotype-on-light.svg)

This PR also includes the previously synced staging fixes:
- Show all labels toggle for scatter plots
- Logo zoom behavior fixes

OpenHands-Design/DESIGN.md

@@ -0,0 +1,597 @@
+# OpenHands UI Design System
+
+## 1. Visual Theme & Atmosphere
+
+OpenHands is a dark-first AI agent platform built on a near-black monochrome canvas. The entire experience lives on a `0 0% 5%` HSL background — effectively `#0d0d0d` — with `0 0% 98%` foreground text that reads as warm off-white. Every surface is a shade of neutral grey scaled in 2–5% lightness increments, creating depth through tonal variation rather than color. The only chromatic moments are semantic: green for success, red-orange for danger, amber for warnings, and blue for informational states.
+
+Typography is carried by **Inter** (sans-serif) for all UI text and **JetBrains Mono** for code, terminals, and technical labels. The type system is weight-restrained — `font-medium` (500) is the workhorse, `font-semibold` (600) for headings and emphasis, and `font-normal` (400) for body. Bold (700) is rare and reserved for maximum emphasis.
+
+The UI framework is **React + Tailwind CSS + Radix primitives** (shadcn/ui pattern). All colors flow through CSS custom properties declared in `:root` and consumed via `hsl(var(--token))` in the Tailwind config. This means every color in the system is overridable by changing a single HSL triplet.
+
+**Key characteristics:**
+- Near-black monochrome canvas (`#0d0d0d` background, `#fafafa` foreground)
+- Neutral grey surface scale in 2–5% lightness increments (5% → 7% → 8% → 12% → 14% → 18%)
+- Inter + JetBrains Mono dual-font system
+- HSL-based CSS custom property architecture for full theme overridability
+- Tailwind utility-first styling with Radix UI headless primitives
+- `transition-colors` as the dominant transition (958 uses) — UI feels responsive but not animated
+- Dark-only primary mode; light and sepia modes exist as secondary via class-map theming
+
+---
+
+## 2. Color Palette & Roles
+
+All colors are declared as HSL triplets (without the `hsl()` wrapper) in CSS custom properties. Tailwind maps them as `hsl(var(--token))`.
+
+### Core Surfaces
+
+| Token | HSL | Hex | Role |
+|-------|-----|-----|------|
+| `--background` | `0 0% 5%` | `#0d0d0d` | Page background, app shell |
+| `--card` | `0 0% 7%` | `#121212` | Card surfaces, elevated containers |
+| `--secondary` | `0 0% 8%` | `#141414` | Secondary surfaces, sidebar accent |
+| `--popover` | `0 0% 7%` | `#121212` | Dropdown menus, popovers |
+| `--muted` | `0 0% 12%` | `#1f1f1f` | Muted backgrounds, hover fills, badges, **tooltip surfaces** |
+| `--border` / `--input` | `0 0% 14%` | `#242424` | Borders, input borders, dividers |
+| `--muted-hover` | `0 0% 18%` | `#2e2e2e` | Hover state for muted surfaces |
+| `--modal-background` | Inherits `--background` | `#0d0d0d` | Dialogs, sheets, modals (can diverge) |
+
+### Core Text
+
+| Token | HSL | Hex | Role |
+|-------|-----|-----|------|
+| `--foreground` | `0 0% 98%` | `#fafafa` | Primary text, headings |
+| `--muted-foreground` | `0 0% 55%` | `#8c8c8c` | Secondary text, labels, placeholders, icons |
+| `--primary` | `0 0% 100%` | `#ffffff` | Maximum emphasis text, primary buttons |
+| `--primary-foreground` | `0 0% 0%` | `#000000` | Text on primary (white) surfaces |
+| `--accent` | `0 0% 100%` | `#ffffff` | Accent elements (matches primary in dark) |
+
+### Sidebar (inherits core but isolated for overridability)
+
+| Token | HSL | Role |
+|-------|-----|------|
+| `--sidebar-background` | `0 0% 5%` | Sidebar background |
+| `--sidebar-foreground` | `0 0% 98%` | Sidebar text |
+| `--sidebar-accent` | `0 0% 8%` | Sidebar hover/active background |
+| `--sidebar-border` | `0 0% 14%` | Sidebar dividers |
+| `--sidebar-ring` | `0 0% 50%` | Sidebar focus ring |
+
+### Semantic / Status
+
+| Token | HSL | Hex | Role |
+|-------|-----|-----|------|
+| `--success` | `142 71% 45%` | `#22c55e` | Success states, running indicators |
+| `--success-foreground` | `142 71% 76%` | `#86efac` | Success text on dark surfaces |
+| `--warning` | `38 92% 50%` | `#f59e0b` | Warning states, caution badges |
+| `--info` | `217 91% 60%` | `#3b82f6` | Informational states, links |
+| `--destructive` | `0 72% 51%` | `#dc2626` | Error states, danger actions, delete |
+| `--destructive-foreground` | `0 0% 98%` | `#fafafa` | Text on destructive surfaces |
+| `--ring` | `0 0% 80%` | `#cccccc` | Focus rings (1px, keyboard-only via `focus-visible:`) |
+
+### Gradients & Decorative
+
+| Token | Value | Role |
+|-------|-------|------|
+| `--gradient-card-hover` | `linear-gradient(180deg, hsl(0 0% 9%) 0%, hsl(0 0% 7%) 100%)` | Subtle card hover gradient |
+| `--shadow-card` | `0 1px 2px 0 hsl(0 0% 0% / 0.3)` | Default card shadow |
+
+### Hover Backgrounds
+
+| Surface | Hover Token | Use |
+|---------|-------------|-----|
+| Dark surfaces (cards, nav items, menus, rows) | `hover:bg-muted/60` | **Standard hover** — the single canonical dark-surface hover |
+| White/primary buttons | `hover:bg-primary/85` | Light grey hover on white buttons (85% opacity white) |
+
+**Canonical dark-surface hover: `hover:bg-muted/60`** — used consistently across the codebase. Do **not** mix `/40`, `/50`, `/70` variants.
+**Canonical primary-button hover: `hover:bg-primary/85`** — never use `hover:bg-muted/60` on a `bg-primary`/`bg-white` button (causes dark flash).
+
+---
+
+## 3. Typography Rules
+
+### Font Families
+
+| Role | Family | CSS Variable | Tailwind Class | Fallbacks |
+|------|--------|-------------|----------------|-----------|
+| UI / Body | Inter | `--font-sans` | `font-sans` | `system-ui, sans-serif` |
+| Code / Technical | JetBrains Mono | `--font-mono` | `font-mono` | `monospace` |
+
+Fonts are loaded via Google Fonts `@import` in `index.css`.
+
+### Type Scale
+
+The app uses Tailwind's default type scale. These are the **canonical sizes** ordered by frequency of use:
+
+| Tailwind Class | Size | Uses | Role |
+|----------------|------|------|------|
+| `text-sm` | 14px / 0.875rem | 711 | **Primary body text**, labels, button text, descriptions |
+| `text-xs` | 12px / 0.75rem | 427 | **Secondary text**, metadata, badges, menu items, captions |
+| `text-base` | 16px / 1rem | 52 | Larger body text, input text, chat messages |
+| `text-lg` | 18px / 1.125rem | 67 | Section sub-headings, dialog titles |
+| `text-xl` | 20px / 1.25rem | 28 | Page sub-headings |
+| `text-2xl` | 24px / 1.5rem | 31 | Page headings, modal titles |
+| `text-3xl` | 30px / 1.875rem | 12 | Hero headings, landing sections |
+
+### Arbitrary Font Sizes (to normalize)
+
+These arbitrary sizes appear frequently and should be migrated to the standard scale or formalized as tokens:
+
+| Arbitrary | Count | Recommended Replacement |
+|-----------|-------|------------------------|
+| `text-[11px]` | 46 | `text-xs` (12px) — or formalize as `--text-2xs` if 11px is intentional |
+| `text-[10px]` | 20 | `text-xs` (12px) — or formalize as `--text-2xs` |
+| `text-[12px]` | 8 | `text-xs` (already 12px — use the utility) |
+| `text-[40px]` | 5 | `text-4xl` (36px) or formalize as hero display size |
+| `text-[28px]` | 3 | `text-3xl` (30px) or formalize |
+| `text-[32px]` | 1 | `text-3xl` (30px) or `text-4xl` (36px) |
+| `text-[8px]` | 1 | Likely a micro label — evaluate if needed |
+
+### Font Weight Scale
+
+| Tailwind Class | Weight | Uses | Role |
+|----------------|--------|------|------|
+| `font-medium` | 500 | 304 | Labels, nav items, badges (note: buttons use `font-normal`) |
+| `font-semibold` | 600 | 229 | **Headings**, section titles, strong emphasis |
+| `font-normal` | 400 | 106 | **Body text**, descriptions, long-form content |
+| `font-bold` | 700 | 29 | Maximum emphasis (use sparingly) |
+| `font-light` | 300 | 13 | De-emphasized text (use sparingly) |
+
+### Line Height
+
+| Tailwind Class | Uses | Role |
+|----------------|------|------|
+| `leading-4` | 38 | Tight — compact UI, badges |
+| `leading-6` | 34 | Standard — body text |
+| `leading-relaxed` | 33 | Comfortable — long-form, descriptions |
+| `leading-5` | 28 | Medium — labels, short text |
+| `leading-tight` | 27 | Condensed — headings |
+| `leading-snug` | 17 | Slightly condensed |
+| `leading-none` | 16 | No leading — single-line elements |
+
+### Letter Spacing
+
+| Tailwind Class | Uses | Role |
+|----------------|------|------|
+| `tracking-wide` | 28 | Uppercase labels, section headers |
+| `tracking-wider` | 20 | Small-caps metadata |
+| `tracking-tight` | 19 | Display headings |
+
+### Canonical Patterns
+
+**Body text:** `text-sm font-normal text-foreground`
+**Label:** `text-sm font-medium text-foreground`
+**Secondary text:** `text-sm text-muted-foreground`
+**Metadata/caption:** `text-xs text-muted-foreground`
+**Uppercase category:** `text-[11px] font-medium uppercase tracking-wide text-muted-foreground`
+**Heading (page):** `text-2xl font-semibold text-foreground`
+**Heading (section):** `text-lg font-semibold text-foreground`
+**Code/mono:** `text-sm font-mono`
+
+---
+
+## 4. Component Stylings
+
+### Buttons (`Button` component — `src/components/ui/button.tsx`)
+
+**Base classes (all variants):**
+`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-normal ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.97] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`
+
+| Variant | Background | Text | Border | Hover | Use |
+|---------|-----------|------|--------|-------|-----|
+| `default` | `bg-primary` | `text-primary-foreground` | — | `hover:bg-primary/85` | Primary CTA (white button, black text) |
+| `destructive` | `bg-destructive` | `text-destructive-foreground` | — | `hover:bg-destructive/85` | Delete, danger actions |
+| `outline` | `bg-background` | — | `border border-input` | `hover:bg-muted hover:text-foreground` | Secondary actions (most used — 53 instances) |
+| `light` | `bg-primary` | `text-primary-foreground` | `border border-input` | `hover:bg-primary/85` | High-contrast primary on dark bg (token-based, no raw `bg-white`) |
+| `secondary` | `bg-secondary` | `text-secondary-foreground` | — | `hover:bg-muted-hover` | Tertiary actions |
+| `muted` | `bg-muted` | `text-muted-foreground` | — | `hover:bg-muted-hover hover:text-foreground` | Subdued actions |
+| `ghost` | transparent | — | — | `hover:bg-muted hover:text-foreground` | Minimal chrome actions |
+| `link` | transparent | `text-primary underline-offset-4` | — | `hover:underline` | Inline links |
+
+**Primary button convention:** All white/primary buttons use `bg-primary text-primary-foreground hover:bg-primary/85`. Never use `bg-white text-black hover:bg-muted/60` inline — the dark hover on a white button is incorrect. Use the `Button` component or match its tokens.
+
+| Size | Height | Padding | Font |
+|------|--------|---------|------|
+| `default` | `h-10` | `px-4 py-2` | `text-sm` |
+| `sm` | `h-10` | `px-3` | `text-sm` |
+| `xs` | `h-10` | `px-3` | `text-xs` |
+| `lg` | `h-11` | `px-8` | `text-sm` |
+| `icon` | `h-10 w-10` | — | — |
+
+### Cards & Containers
+
+There is no dedicated `Card` primitive — cards are composed with utilities.
+
+**Standard card recipe:**
+```
+bg-card border border-border rounded-lg p-4
+```
+
+**Elevated card:**
+```
+bg-card border border-border rounded-xl p-6 shadow-lg
+```
+
+**Interactive card:**
+```
+bg-card border border-border rounded-lg p-4 transition-colors hover:border-white/30
+```
+
+**Glass / backdrop card:**
+```
+bg-card/70 border border-border/60 rounded-lg p-6 shadow-lg backdrop-blur-xl supports-[backdrop-filter]:bg-card/50
+```
+
+### Inputs (`Input` component — `src/components/ui/input.tsx`)
+
+**Standard input:**
+```
+h-10 w-full rounded-md border border-border bg-muted/40 px-3 py-2 text-base md:text-sm
+ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+focus-visible:ring-offset-2 focus-visible:bg-muted/60 hover:bg-muted/60
+placeholder:text-muted-foreground
+disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/30
+```
+
+**Canonical focus style (all inputs, textareas, selects must match):**
+```
+ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:bg-muted/60
+```
+
+Key rules:
+- Always use `focus-visible:` (keyboard-only), never `focus:` (fires on click too)
+- Always include `ring-offset-background` and `focus-visible:ring-offset-2`
+- Always include `focus-visible:bg-muted/60` for the subtle fill on focus
+- Search inputs (`type="search"`) have `appearance: none` in global CSS to strip browser default focus chrome
+
+**Size variants (via SearchInput wrapper):**
+- `sm`: `h-9` + `pl-8 pr-8` (icon padding)
+- `default`: `h-10` + `pl-9 pr-9`
+- `lg`: `h-11` + `pl-10 pr-10`
+
+### Dropdown Menus (`DropdownMenu` — Radix-based)
+
+**Menu content:**
+```
+z-[100] min-w-[8rem] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md
+```
+
+**Menu item:**
+```
+group relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm
+transition-colors focus:bg-muted/60 data-[highlighted]:bg-muted/60
+```
+
+**Icon treatment in menu items:**
+- Default: `[&_svg]:text-muted-foreground` (grey)
+- Hover/highlight: `group-hover:[&_svg]:!text-foreground` (white)
+
+### Popover
+
+**Content:**
+```
+z-50 max-h-[min(24rem,calc(100dvh-2rem))] shadow-md rounded-[12px] border border-border
+bg-sidebar p-6 text-sidebar-foreground overflow-y-auto
+```
+
+### Navigation (LeftNav sidebar)
+
+- Collapsed: 56px wide icon rail
+- Expanded: 240px+ with text labels
+- Items: `flex items-center gap-2 rounded-md px-3 py-1.5 text-xs transition-colors`
+- Icons: `w-4 h-4 text-muted-foreground group-hover:text-white`
+- Active: `bg-muted/60 text-foreground`
+- Hover: `hover:bg-muted/60 hover:text-white`
+
+### Scrollbar Variants
+
+| Class | Width | Behavior | Use |
+|-------|-------|----------|-----|
+| `.dropdown-scroll` | 6px thin | Always visible | Menus, popovers |
+| `.custom-scrollbar` | 8px thin | Always visible | Chat, main content |
+| `.scrollbar-on-hover` | 8px thin | Visible on hover only | Chat threads |
+| `.hide-scrollbar` | hidden | Hidden | Horizontal scroll areas |
+
+All scrollbar thumbs: `hsl(var(--muted-foreground) / 0.5)` with hover at `0.7`.
+
+### Tooltips
+
+All tooltips use `bg-muted` for a lighter surface that visually separates from the dark page background.
+
+**Standard tooltip (rounded-md):**
+```
+whitespace-nowrap rounded-md bg-muted px-2 py-1 text-xs text-foreground shadow-md
+```
+
+**Pill tooltip (rounded-full):**
+```
+bg-muted text-foreground text-xs rounded-full shadow-lg px-3 py-1
+```
+
+### Dialog Close Button
+
+The dialog close "×" button has no focus ring (focus ring removed to avoid visual noise on click):
+```
+absolute right-4 top-4 inline-flex h-7 w-7 items-center justify-center rounded-md opacity-70
+ring-offset-background transition-colors hover:opacity-100 hover:bg-muted/60 focus:outline-none
+```
+
+---
+
+## 5. Layout Principles
+
+### Spacing System
+
+The app uses Tailwind's default 4px-based spacing scale. These are the most common values by usage:
+
+**Gaps (flex/grid):**
+
+| Class | Px | Uses | Context |
+|-------|-----|------|---------|
+| `gap-2` | 8px | 414 | **Standard gap** — between items in rows, icon + label |
+| `gap-3` | 12px | 144 | Comfortable gap — form groups, card content |
+| `gap-4` | 16px | 110 | Generous gap — section spacing, grid layouts |
+| `gap-1` | 4px | 86 | Tight gap — inline badges, compact lists |
+| `gap-1.5` | 6px | 59 | Between tight and standard |
+| `gap-6` | 24px | 50 | Large gap — major sections |
+
+**Padding:**
+
+| Class | Px | Uses | Context |
+|-------|-----|------|---------|
+| `px-4` | 16px | 216 | **Standard horizontal padding** — buttons, cards |
+| `px-3` | 12px | 212 | Compact horizontal padding — menu items, inputs |
+| `py-2` | 8px | 200 | **Standard vertical padding** — buttons, rows |
+| `px-2` | 8px | 198 | Tight horizontal padding — badges, pills |
+| `py-1` | 4px | 138 | Compact vertical padding |
+| `py-1.5` | 6px | 76 | Slightly more than compact |
+| `p-4` | 16px | 89 | Uniform card/container padding |
+| `p-6` | 24px | 26 | Generous container/dialog padding |
+
+### Grid & Container
+
+- Max container width: `1400px` (via Tailwind `container` config with `2rem` padding)
+- Primary layout: sidebar (56–240px) + main content area
+- Settings layout: custom CSS vars for independent nav/main vertical inset
+  - `--settings-nav-padding-top/bottom`: `2rem`
+  - `--settings-main-padding-top/bottom`: `2rem`
+
+### Whitespace Philosophy
+
+- **Dense but breathable**: The app uses `text-sm` (14px) as the default with `gap-2` (8px) standard spacing — dense enough for a productivity tool, but never cramped.
+- **Consistent rhythm**: Sections are separated by `border-t border-border` dividers with `my-3` (12px) vertical margin. No heavy horizontal rules.
+- **Surface differentiation over spacing**: Rather than using large whitespace to separate areas, the app uses background color shifts (`bg-background` → `bg-card` → `bg-muted`) to create visual sections.
+
+### Border Radius Scale
+
+Defined via CSS custom properties and Tailwind mapping:
+
+| Token | Value | Tailwind | Uses | Role |
+|-------|-------|----------|------|------|
+| `--radius` | `0.375rem` (6px) | `rounded-lg` | 112 | **Standard container radius** — cards, panels |
+| `calc(--radius - 2px)` | `0.25rem` (4px) | `rounded-md` | 501 | **Default element radius** — buttons, inputs, menu items |
+| `calc(--radius - 4px)` | `0.125rem` (2px) | `rounded-sm` | 12 | Subtle radius — small inline elements |
+| `--radius-modal` | `0.75rem` (12px) | `rounded-modal` | — | Modal/dialog/popover radius |
+| — | — | `rounded-xl` | 90 | Larger cards, featured containers |
+| — | — | `rounded-2xl` | 23 | Hero elements, large cards |
+| — | — | `rounded-full` | 185 | Avatars, pills, circular buttons, badges |
+
+**Arbitrary radii to normalize:**
+
+| Arbitrary | Count | Recommended |
+|-----------|-------|-------------|
+| `rounded-[6px]` | 20 | `rounded-lg` (already 6px via `--radius`) |
+| `rounded-[100px]` | 15 | `rounded-full` (same visual effect) |
+| `rounded-[12px]` | 8 | `rounded-modal` or `rounded-xl` (12px) |
+| `rounded-[4px]` | 4 | `rounded-md` (already 4px) |
+
+---
+
+## 6. Depth & Elevation
+
+### Shadow Scale
+
+| Tailwind | Uses | Role |
+|----------|------|------|
+| `shadow-sm` | 21 | Subtle elevation — small cards, badges |
+| `shadow` | 22 | Default — standalone cards |
+| `shadow-md` | 31 | Medium — dropdown menus, popovers |
+| `shadow-lg` | 49 | **Most used** — modals, dialogs, elevated panels |
+| `shadow-xl` | 14 | High emphasis — floating panels |
+| `shadow-2xl` | 5 | Maximum — overlay dialogs |
+| `shadow-inner` | 8 | Inset — pressed buttons, input focus |
+| `shadow-none` | 19 | Reset — flat elements |
+
+### Custom Shadows
+
+| Token | Value | Role |
+|-------|-------|------|
+| `--shadow-card` | `0 1px 2px 0 hsl(0 0% 0% / 0.3)` | Card resting shadow |
+
+### Elevation Levels
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| 0 — Flat | No shadow, `bg-background` | Page background |
+| 1 — Surface | `bg-card` + `border border-border` | Cards, content panels |
+| 2 — Raised | `shadow-md` + `border` | Dropdown menus, popovers |
+| 3 — Floating | `shadow-lg` + `border` | Modals, dialogs, sheets |
+| 4 — Overlay | `shadow-xl` or `shadow-2xl` | Full-screen overlays, drawers |
+
+### Border System
+
+- **Standard border:** `border border-border` (1px solid `hsl(0 0% 14%)`)
+- **Subtle border:** `border border-border/60` (reduced opacity)
+- **Interactive hover:** `hover:border-white/30` or `hover:border-muted-foreground/30`
+- **Section divider:** `border-t border-border` (horizontal rule) or `border-t border-sidebar-border` (in sidebar)
+- **Focus ring:** `ring-1 ring-ring ring-offset-2 ring-offset-background` (1px, `focus-visible:` only)
+
+---
+
+## 7. Do's and Don'ts
+
+### Colors
+
+| Do | Don't |
+|----|-------|
+| Use `text-foreground` for primary text | Use `text-white` for primary text (278 instances to migrate) |
+| Use `text-muted-foreground` for secondary text | Use `text-stone-400` or `text-gray-400` (raw palette) |
+| Use `bg-background` for page surfaces | Use `bg-black` or hardcoded `bg-[#0d0d0d]` |
+| Use `bg-card` for elevated surfaces | Use `bg-stone-800` or `bg-neutral-900` |
+| Use `bg-muted` for subtle backgrounds | Use `bg-stone-700` or `bg-gray-800` |
+| Use `border-border` for all borders | Use `border-stone-700` or `border-gray-700` |
+| Use `text-success-foreground` for success text | Use `text-emerald-400` or `text-green-400` |
+| Use `text-destructive` for error text | Use `text-red-500` or `text-rose-500` |
+| Use `hover:text-foreground` for hover text brightening | Use `hover:text-white` except in sidebar context |
+
+**Semantic status colors:** Use `text-success` / `bg-success`, `text-warning` / `bg-warning`, `text-info` / `bg-info`, `text-destructive` / `bg-destructive` — never raw chromatic palette classes like `text-green-500`, `bg-amber-400`, `text-blue-500`, etc.
+
+**Current debt:** `themeAppClassMap.ts` and `NewUserExperienceFlowchart.tsx` still use raw `stone-*` / `rgb()` values (theme definition maps — intentionally deferred; requires per-theme CSS variable architecture). `ChatThread.tsx` `messageTypeColors` has 4 remaining raw palette colors (`orange-500`, `indigo-500`, `purple-500`, `pink-500`) for categorical distinctness — no semantic tokens defined for these yet.
+
+### Typography
+
+| Do | Don't |
+|----|-------|
+| Use `text-sm` (14px) as default body size | Use `text-[14px]` or arbitrary pixel values |
+| Use `text-xs` (12px) for small/meta text | Use arbitrary pixel sizes for general text |
+| Use Tailwind scale (`text-lg`, `text-xl`, `text-2xl`) | Use arbitrary sizes like `text-[28px]`, `text-[40px]` |
+| Use `font-medium` as default weight | Use `font-bold` for general emphasis |
+| Keep heading hierarchy: `2xl` → `xl` → `lg` → `base` | Skip levels or invert the scale |
+
+### Border Radius
+
+| Do | Don't |
+|----|-------|
+| Use `rounded-md` (4px) for buttons, inputs, menu items | Use `rounded-[4px]` (same value, less maintainable) |
+| Use `rounded-lg` (6px) for cards, containers | Use `rounded-[6px]` (use the token) |
+| Use `rounded-xl` or `rounded-modal` for dialogs | Use `rounded-[12px]` (use the token) |
+| Use `rounded-full` for pills and avatars | Use `rounded-[100px]` (use `rounded-full`) |
+
+### Spacing
+
+| Do | Don't |
+|----|-------|
+| Use `gap-2` (8px) as standard item gap | Use arbitrary gap values |
+| Use `px-3`/`px-4` for horizontal padding | Mix `px-2.5` and `px-3.5` without reason |
+| Use `p-4` for card padding, `p-6` for dialogs | Use `p-[24px]` (same as `p-6`) |
+| Use `my-3` for section divider spacing | Use inconsistent vertical margins around dividers |
+
+### Hover & Interaction
+
+| Do | Don't |
+|----|-------|
+| Use `hover:bg-muted/60` as standard hover bg on dark surfaces | Mix `/40`, `/50`, `/60`, `/70` without hierarchy |
+| Use `hover:bg-primary/85` for white/primary buttons | Use `hover:bg-muted/60` on white buttons (creates dark hover) |
+| Use `transition-colors` for color-only changes | Use `transition-all` when only color changes |
+| Use `duration-200` as standard transition speed | Mix `duration-150`, `duration-200`, `duration-300` randomly |
+| Use `group` + `group-hover:` for parent-child hover | Apply hover to each child independently |
+| Use `active:scale-[0.97]` for button press feedback | Use `active:scale-95` (inconsistent with Button component) |
+
+### Icons
+
+| Do | Don't |
+|----|-------|
+| Use `w-4 h-4` as standard icon size in menus/buttons | Use `w-3 h-3` or `w-5 h-5` without size hierarchy reason |
+| Set icon color to `text-muted-foreground` by default | Leave icons inheriting parent text color (appears too bright) |
+| Brighten on hover: `group-hover:text-foreground` or `group-hover:text-white` | Omit icon hover transitions |
+| Use `shrink-0` on icons in flex layouts | Let icons squish when text wraps |
+
+---
+
+## 8. Responsive Behavior
+
+### Breakpoints (Tailwind defaults)
+
+| Prefix | Min Width | Key Changes |
+|--------|-----------|-------------|
+| (none) | 0px | Mobile-first base styles |
+| `sm` | 640px | Wider cards, more padding |
+| `md` | 768px | Multi-column layouts begin, `md:text-sm` on inputs |
+| `lg` | 1024px | Full sidebar visible, expanded grid |
+| `xl` | 1280px | Maximum content width, full feature layout |
+| `2xl` | 1400px | Container max-width ceiling |
+
+### Touch Targets
+- Minimum interactive height: `h-10` (40px) for buttons and inputs
+- Small variant: `h-9` (36px) for compact contexts
+- Icon buttons: `h-10 w-10` (40×40px)
+- Menu items: `py-1.5` (6px) vertical padding at `text-sm` yields ~32px touch target
+
+### Collapsing Strategy
+- Sidebar: collapses from expanded (labels) to icon-only rail on narrow viewports
+- Navigation menus: horizontal → hamburger on mobile
+- Grid layouts: multi-column → single-column stacked
+- Container padding: reduces from `p-6` → `p-4` → `p-3` at smaller breakpoints
+
+---
+
+## 9. Interaction & Motion
+
+### Transitions
+
+| Pattern | Uses | When |
+|---------|------|------|
+| `transition-colors` | 958 | **Default** — use for any color/bg/border change |
+| `transition-opacity` | 96 | Fade in/out |
+| `transition-all` | 96 | Multiple properties changing simultaneously |
+| `transition-transform` | 59 | Scale/translate animations |
+
+### Duration
+
+| Duration | Uses | When |
+|----------|------|------|
+| `duration-200` | ~48 | **Standard** — local, small feedback: toggles, chevron rotation, sidebar width, card/row hovers, opacity on hover, dialogs |
+| `duration-300` | ~34 | **Layout motion** — panel/drawer resize, sheet exit, canvas split, login/marketing card hover, grid row animations |
+
+### Easing
+
+| Easing | Uses | When |
+|--------|------|------|
+| `ease-in-out` | 111 | **Default** — smooth symmetrical transitions |
+| `ease-out` | 52 | Enter animations — elements arriving |
+
+### Framer Motion Patterns (23 files)
+- `AnimatePresence` for mount/unmount transitions
+- Standard enter: `initial={{ opacity: 0 }}` → `animate={{ opacity: 1 }}`
+- Standard exit: `exit={{ opacity: 0 }}`
+- Duration: typically `0.2s`–`0.3s`
+- Used for: panel reveals, notification toasts, drawer slides, loading states
+
+### Interactive Feedback
+- **Button press:** `active:scale-[0.97]` (slight shrink on click)
+- **Card hover:** `hover:scale-[1.02]` (subtle grow, 12 uses)
+- **Focus:** `focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2` (1px ring, keyboard-only)
+
+---
+
+## 10. Agent Prompt Guide
+
+### Quick Color Reference
+- Page background: `bg-background` → `hsl(0 0% 5%)` → `#0d0d0d`
+- Primary text: `text-foreground` → `hsl(0 0% 98%)` → `#fafafa`
+- Secondary text: `text-muted-foreground` → `hsl(0 0% 55%)` → `#8c8c8c`
+- Card surface: `bg-card` → `hsl(0 0% 7%)` → `#121212`
+- Border: `border-border` → `hsl(0 0% 14%)` → `#242424`
+- Hover background: `bg-muted/60` → `hsl(0 0% 12% / 0.6)`
+- Success: `text-success-foreground` → `hsl(142 71% 76%)` → `#86efac`
+- Error: `text-destructive` → `hsl(0 72% 51%)` → `#dc2626`
+
+### Example Component Prompts
+
+- **"Create a settings card"**: `bg-card border border-border rounded-lg p-4`. Title at `text-lg font-semibold text-foreground`. Description at `text-sm text-muted-foreground`. Action button: `<Button variant="outline">`.
+- **"Create a sidebar menu item"**: `group flex items-center gap-2 rounded-md px-3 py-1.5 text-xs text-sidebar-foreground hover:text-white hover:bg-muted/60 transition-colors`. Icon: `w-4 h-4 shrink-0 text-muted-foreground transition-colors group-hover:text-white`.
+- **"Create a dropdown menu"**: Use `DropdownMenu` + `DropdownMenuTrigger` + `DropdownMenuContent` + `DropdownMenuItem` from `src/components/ui/dropdown-menu.tsx`. Icons auto-styled grey → white on hover via the component's built-in `[&_svg]` selectors.
+- **"Create a form field"**: Label at `text-sm font-medium text-foreground mb-1.5`. Use `<Input>` component (never inline raw `<input>` with custom focus styles). Help text at `text-xs text-muted-foreground mt-1`.
+- **"Create a tooltip"**: `bg-muted text-foreground text-xs rounded-md px-2 py-1 shadow-md`. For pill-style: use `rounded-full` instead of `rounded-md`.
+- **"Create a status badge"**: `inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium`. Success: `bg-success/10 text-success-foreground`. Error: `bg-destructive/10 text-destructive`.
+
+### Iteration Guide
+
+1. **Always use semantic color tokens** — never raw palette colors (`stone-*`, `gray-*`, `slate-*`). Every color should trace back to a `--css-variable`.
+2. **`text-sm` is the default** — don't reach for `text-base` unless the context genuinely needs larger text (e.g., chat messages, hero content).
+3. **`rounded-md` for elements, `rounded-lg` for containers** — this is the consistent radius hierarchy. Dialogs get `rounded-xl` or `rounded-modal`.
+4. **`gap-2` is the standard** — 8px between items in any flex/grid layout. Use `gap-4` for major sections.
+5. **Icons are always `text-muted-foreground`** by default and brighten to `text-foreground` or `text-white` on hover via `group` + `group-hover:`.
+6. **`transition-colors duration-200`** is the standard animation. Don't add `transition-all` unless multiple property types are actually changing.
+7. **`hover:bg-muted/60`** is the canonical hover background. Use it consistently across menus, nav items, and interactive rows.
+8. **The `Button` component handles its own variants** — don't rebuild button styles from scratch. Use `variant="outline"` for most secondary actions.
+

OpenHands-Design/NORMALIZATION_LOG.md

@@ -0,0 +1,36 @@
+# Token Normalization Log
+
+Tracking the migration from raw Tailwind palette classes and arbitrary values to semantic design tokens.
+
+## Completed
+
+- [x] `.dark` CSS block now declares all variables from `:root` (`--modal-background`, `--radius-*`, `--success`, `--warning`, `--info`, `--gradient-*`, `--shadow-*`, `--font-*`, `--settings-*`)
+- [x] Migrated ~160 raw `stone-*` utility classes across 17 component files to semantic tokens (excluding `themeAppClassMap.ts`, `index.ts`, and scrollbar utilities)
+- [x] Migrated ~44 raw `gray-*` utility classes across 10 files to semantic tokens
+- [x] Migrated ~83 raw `neutral-*` classes across 3 files to semantic tokens (preserving VS Code diff mock borders)
+- [x] Replaced 47 arbitrary border radius values (`rounded-[6px]` → `rounded-lg`, `rounded-[100px]` → `rounded-full`, `rounded-[12px]` → `rounded-xl`, `rounded-[4px]` → `rounded-md`, `rounded-r-[100px]` → `rounded-r-full`)
+- [x] Replaced 74 arbitrary font sizes (`text-[11px]` → `text-xs`, `text-[10px]` → `text-xs`, `text-[12px]` → `text-xs`)
+- [x] Standardized 57 `hover:bg-muted` opacity variants (`/40`, `/50`, `/70`, `/80`) to canonical `/60`
+- [x] Replaced 6 unsafe `text-white` usages with semantic tokens (`text-foreground`, `text-card-foreground`)
+- [x] Replaced `bg-[#141414]` → `bg-secondary` (2 instances)
+- [x] Migrated ~100+ chromatic palette classes to semantic tokens: `amber/yellow` → `warning`, `blue/sky` → `info`, `green/emerald` → `success`, `red` → `destructive`
+- [x] Unified tooltip backgrounds from `bg-popover`/`bg-card` to `bg-muted` across all 6 tooltip instances
+- [x] Fixed 33 inline white buttons (`bg-white text-black hover:bg-muted/60` → `bg-primary text-primary-foreground hover:bg-primary/85`)
+- [x] Fixed Button `light` variant from `bg-white text-black hover:bg-zinc-200` to `bg-primary text-primary-foreground hover:bg-primary/85`
+- [x] Removed Dialog `--ring` inline override (`0 0% 95%`) that caused inconsistent focus ring color in modals
+- [x] Updated global `--ring` from `0 0% 50%` to `0 0% 80%` for better visibility
+- [x] Normalized ~50 inline input/textarea/select focus styles to canonical `focus-visible:` pattern (from mixed `focus:`/`focus-visible:` with missing offsets)
+- [x] Changed all focus rings from `ring-2` to `ring-1` site-wide (~97 instances across 39 files)
+- [x] Added `appearance: none` on `input[type="search"]` to strip browser default focus chrome
+- [x] Removed focus ring from dialog close button
+- [x] Consolidated `active:scale-95` (3 uses) → `active:scale-[0.97]` to match Button standard
+- [x] Migrated `ChatThread.tsx` `messageTypeColors`: `yellow-500` → `warning`, `blue-500` → `info` (3 categories). Remaining categorical colors (`orange-500`, `indigo-500`, `purple-500`, `pink-500`) kept as raw palette — no semantic equivalent for multi-category distinctness
+- [x] Migrated 14 remaining `bg-white` usages in non-button contexts to semantic tokens: toggles → `bg-primary`, resize grips → `bg-foreground`, badge → `bg-primary`, attachment previews → `bg-foreground/5`, CTA buttons → `bg-primary text-primary-foreground hover:bg-primary/85`, ghost hover buttons → `hover:bg-primary hover:text-primary-foreground`
+- [x] Documented `duration-200` vs `duration-300` convention (200ms = local feedback, 300ms = layout/panel motion)
+- [x] ~~Migrate legacy `index.ts`~~ — invalid; `screens/index.ts` and `components/workflow/index.ts` are barrel files with zero raw color classes
+
+## Deferred by Design
+
+- [ ] `themeAppClassMap.ts` and `NewUserExperienceFlowchart.tsx` use raw `stone-*` / `rgb()` values — these are **theme definition maps** that intentionally encode per-theme palettes (dark/light/sepia). Migrating requires defining CSS variables for each theme mode, which is an architectural change
+- [ ] `sepia` theme in `themeAppClassMap.ts` uses hardcoded `rgb()` — requires defining a `.theme-sepia` CSS variable block before semantic classes can replace arbitrary values
+- [ ] `ChatThread.tsx` categorical palette (`orange-500`, `indigo-500`, `purple-500`, `pink-500`) for `bug`, `docs`, `dependency`, `git` message types — no semantic tokens exist for multi-category distinctness; would need new `--chart-*` or `--category-*` CSS variables

OpenHands-Design/README.md

@@ -0,0 +1,222 @@
+# OpenHands Design System
+
+A portable design system extracted from the OpenHands UI. Drop it into any React + Tailwind project to get a consistent dark-first interface with semantic color tokens, pre-built components, and a comprehensive style guide.
+
+## What's Included
+
+```
+OpenHands-Design/
+  DESIGN.md                          # Full design system specification
+  README.md                          # This file
+  tailwind.config.js                 # Tailwind theme (colors, radii, fonts, animations)
+  src/
+    globals.css                      # CSS custom properties (design tokens) + base resets
+    lib/
+      utils.ts                       # cn() helper (clsx + tailwind-merge)
+    components/ui/
+      button.tsx                     # Button with 8 variants (default, destructive, outline, light, secondary, muted, ghost, link)
+      input.tsx                      # Text input with unified focus style
+      search-input.tsx               # Search input with icon, clear button, and 3 sizes
+      native-select.tsx              # Native <select> with consistent styling
+```
+
+## Quick Start
+
+### Install with npx
+
+From your project root:
+
+```bash
+npx openhands-design
+```
+
+This adds `./OpenHands-Design/` (including `DESIGN.md`, tokens, and UI components). Then ask your AI assistant to use **`DESIGN.md`** for UI work. If the folder already exists, run `npx openhands-design --force` to replace it.
+
+### 1. Install dependencies
+
+```bash
+npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot lucide-react tailwindcss-animate
+```
+
+### 2. Copy files into your project
+
+```bash
+# Copy the design tokens and global CSS
+cp OpenHands-Design/src/globals.css        your-project/src/globals.css
+
+# Copy the Tailwind config (or merge into your existing one)
+cp OpenHands-Design/tailwind.config.js     your-project/tailwind.config.js
+
+# Copy the utility helper
+cp OpenHands-Design/src/lib/utils.ts       your-project/src/lib/utils.ts
+
+# Copy the UI components
+cp -r OpenHands-Design/src/components/ui/  your-project/src/components/ui/
+```
+
+### 3. Import globals.css
+
+In your app entry point (e.g., `main.tsx` or `App.tsx`):
+
+```tsx
+import './globals.css';
+```
+
+### 4. Add the dark class
+
+The system is dark-first. Add the `dark` class to your `<html>` tag:
+
+```html
+<html lang="en" class="dark">
+```
+
+### 5. Start using components
+
+```tsx
+import { Button } from './components/ui/button';
+import { Input } from './components/ui/input';
+import { SearchInput } from './components/ui/search-input';
+import { NativeSelect } from './components/ui/native-select';
+
+function Example() {
+  return (
+    <div className="flex flex-col gap-4 bg-background p-6 text-foreground">
+      <h1 className="text-2xl font-semibold">Settings</h1>
+      <p className="text-sm text-muted-foreground">Manage your account.</p>
+
+      <Input placeholder="Your name" />
+
+      <NativeSelect>
+        <option>Option A</option>
+        <option>Option B</option>
+      </NativeSelect>
+
+      <div className="flex gap-2">
+        <Button>Save</Button>
+        <Button variant="outline">Cancel</Button>
+        <Button variant="destructive">Delete</Button>
+      </div>
+    </div>
+  );
+}
+```
+
+## Using with AI Agents (Cursor, Copilot, etc.)
+
+The `DESIGN.md` file is structured as an AI-readable specification. Two ways to use it:
+
+### Option A: Cursor Rule (recommended)
+
+Create `.cursor/rules/design-system.md` in your project:
+
+```markdown
+When building UI components, follow the design system in /DESIGN.md.
+
+Key rules:
+- Use semantic color tokens (bg-card, text-foreground, border-border) — never raw palette classes
+- Use the Button, Input, SearchInput, and NativeSelect components — never raw HTML with inline styles
+- Hover on dark surfaces: hover:bg-muted/60
+- Hover on white/primary buttons: hover:bg-primary/85
+- Focus rings: focus-visible:ring-1 (keyboard-only, 1px)
+- Default text: text-sm font-normal text-foreground
+- Secondary text: text-sm text-muted-foreground
+- Standard gap: gap-2 (8px)
+- Standard card: bg-card border border-border rounded-lg p-4
+```
+
+Every Cursor conversation will now follow your design system automatically.
+
+### Option B: Direct prompt
+
+Paste this at the start of a conversation:
+
+> Build this feature following the design system in DESIGN.md. Use semantic tokens for all colors, the Button component for actions, and the Input component for form fields.
+
+## Token Architecture
+
+All colors are HSL triplets stored as CSS custom properties. Tailwind maps them via `hsl(var(--token))`.
+
+```
+Background scale (darkest → lightest):
+  --background    5%   #0d0d0d   Page background
+  --card          7%   #121212   Cards, elevated surfaces
+  --secondary     8%   #141414   Secondary surfaces
+  --muted        12%   #1f1f1f   Hover fills, badges, tooltips
+  --border       14%   #242424   Borders, dividers
+  --muted-hover  18%   #2e2e2e   Hover on muted surfaces
+
+Text scale:
+  --foreground          98%   #fafafa   Primary text
+  --muted-foreground    55%   #8c8c8c   Secondary text, placeholders
+  --primary            100%   #ffffff   Maximum emphasis, button bg
+  --primary-foreground   0%   #000000   Text on white buttons
+
+Semantic colors:
+  --success       hsl(142 71% 45%)   Green — success states
+  --warning       hsl(38 92% 50%)    Amber — warnings, in-progress
+  --info          hsl(217 91% 60%)   Blue — links, informational
+  --destructive   hsl(0 72% 51%)     Red — errors, danger
+```
+
+## Button Variants
+
+| Variant | Look | Use |
+|---------|------|-----|
+| `default` | White bg, black text | Primary CTA |
+| `destructive` | Red bg, white text | Delete, danger |
+| `outline` | Transparent, border | Secondary actions |
+| `light` | White bg, border | High-contrast primary |
+| `secondary` | Dark bg | Tertiary actions |
+| `muted` | Muted bg, grey text | Subdued actions |
+| `ghost` | Transparent, no border | Minimal chrome |
+| `link` | Underline on hover | Inline links |
+
+## Customization
+
+### Changing the color scheme
+
+Edit the HSL values in `globals.css`. Every UI element updates automatically:
+
+```css
+:root {
+  --background: 220 20% 5%;   /* Add a blue tint */
+  --card: 220 15% 8%;
+  --border: 220 10% 16%;
+}
+```
+
+### Adding a light theme
+
+Create a new class block in `globals.css` with inverted values:
+
+```css
+.light {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 5%;
+  --card: 0 0% 97%;
+  --border: 0 0% 88%;
+  /* ... */
+}
+```
+
+Then toggle `class="light"` on the `<html>` element.
+
+## Reference
+
+See [DESIGN.md](./DESIGN.md) for the complete specification including:
+
+1. Visual theme and atmosphere
+2. Full color palette with hex values
+3. Typography rules and type scale
+4. Component styling recipes
+5. Layout principles and spacing system
+6. Depth and elevation system
+7. Do's and Don'ts
+8. Responsive behavior
+9. Interaction and motion patterns
+10. AI agent prompt guide
+11. Normalization backlog
+
+## License
+
+MIT

OpenHands-Design/index.html

@@ -0,0 +1,396 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>OpenHands Design System</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+
+:root{
+  --bg:hsl(0 0% 5%);
+  --card:hsl(0 0% 7%);
+  --secondary:hsl(0 0% 8%);
+  --muted:hsl(0 0% 12%);
+  --border:hsl(0 0% 14%);
+  /* DESIGN.md: interactive border emphasis (e.g. card/button hover) */
+  --border-hover:hsl(0 0% 24%);
+  --muted-hover:hsl(0 0% 18%);
+  --fg:hsl(0 0% 98%);
+  --fg-muted:hsl(0 0% 55%);
+  --primary:hsl(0 0% 100%);
+  --primary-fg:hsl(0 0% 0%);
+  --success:#22c55e;
+  --success-fg:#86efac;
+  --warning:#f59e0b;
+  --info:#3b82f6;
+  --destructive:#dc2626;
+  --destructive-fg:#fafafa;
+  --ring:#cccccc;
+  --shadow-card:0 1px 2px 0 hsl(0 0% 0% / 0.3);
+  --font-sans:'Inter',system-ui,sans-serif;
+  --font-mono:'JetBrains Mono',monospace;
+}
+
+html{scroll-behavior:smooth}
+body{font-family:var(--font-sans);background:var(--bg);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased}
+
+/* Nav */
+.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;flex-wrap:nowrap;gap:16px;padding:0 24px 0 16px;height:56px;background:hsl(0 0% 5% / 0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);overflow:hidden}
+.nav-start{display:flex;align-items:center;flex-wrap:nowrap;gap:12px;flex-shrink:0;min-width:0}
+.nav-github{display:inline-flex;align-items:center;gap:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--fg-muted);text-decoration:none;padding:4px 10px;border-radius:6px;border:1px solid var(--border);transition:all 0.2s;flex-shrink:0}
+.nav-github:hover{background:var(--muted);color:var(--fg);border-color:var(--border-hover)}
+.nav-links{display:flex;flex:1;justify-content:flex-end;gap:4px;list-style:none;margin:0;padding:0;min-width:0;flex-wrap:nowrap}
+.nav-links a{font-size:13px;color:var(--fg-muted);text-decoration:none;padding:6px 12px;border-radius:6px;transition:all 0.2s}
+.nav-links a:hover{color:var(--fg);background:var(--muted)}
+.nav-logo{display:flex;align-items:center;flex-shrink:0;opacity:0.85;transition:opacity 0.2s}
+.nav-logo:hover{opacity:1}
+.nav-logo svg{height:22px;width:auto;display:block}
+/* Hero */
+.hero{text-align:center;padding:80px 24px 64px;max-width:720px;margin:0 auto}
+.hero h1{font-size:48px;font-weight:600;line-height:1.1;letter-spacing:-1.5px;margin-bottom:16px}
+.hero p{font-size:16px;color:var(--fg-muted);line-height:1.6;max-width:520px;margin:0 auto 32px}
+.hero-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
+
+/* Buttons */
+.btn-primary{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;font-size:14px;font-weight:400;border-radius:6px;text-decoration:none;transition:all 0.2s;background:var(--secondary);color:var(--fg);border:1px solid var(--border)}
+.btn-primary:hover{background:var(--muted-hover);border-color:var(--border-hover)}
+.btn-dark{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;font-size:14px;font-weight:400;border-radius:6px;text-decoration:none;transition:all 0.2s;background:var(--primary);color:var(--primary-fg)}
+.btn-dark:hover{opacity:0.85}
+.btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;font-size:14px;font-weight:400;border-radius:6px;text-decoration:none;transition:all 0.2s;color:var(--fg-muted);background:transparent}
+.btn-ghost:hover{color:var(--fg);background:var(--muted)}
+.btn-destructive{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;font-size:14px;font-weight:400;border-radius:6px;text-decoration:none;transition:all 0.2s;background:var(--destructive);color:var(--destructive-fg)}
+.btn-destructive:hover{opacity:0.85}
+.btn-outline{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;font-size:14px;font-weight:400;border-radius:6px;text-decoration:none;transition:all 0.2s;color:var(--fg);background:var(--bg);border:1px solid var(--border)}
+.btn-outline:hover{background:var(--muted);color:var(--fg)}
+.btn-muted{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;font-size:14px;font-weight:400;border-radius:6px;text-decoration:none;transition:all 0.2s;color:var(--fg-muted);background:var(--muted)}
+.btn-muted:hover{background:var(--muted-hover);color:var(--fg)}
+.btn-pill{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;font-size:12px;font-weight:500;border-radius:9999px;text-decoration:none;transition:all 0.2s;background:var(--muted);color:var(--fg-muted)}
+.btn-pill:hover{color:var(--fg);background:var(--muted-hover)}
+
+/* Sections */
+.section{max-width:1100px;margin:0 auto;padding:64px 24px}
+.section-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;color:var(--fg-muted);margin-bottom:8px}
+.section-title{font-size:28px;font-weight:600;letter-spacing:-0.5px;margin-bottom:40px}
+.section-divider{border:none;border-top:1px solid var(--border);margin:0}
+
+/* Color swatches */
+.color-group-label{font-size:13px;font-weight:500;color:var(--fg-muted);margin-bottom:12px;margin-top:32px}
+.color-group-label:first-of-type{margin-top:0}
+.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px}
+.color-swatch{border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--card);transition:transform 0.2s}
+.color-swatch:hover{transform:translateY(-2px)}
+.color-swatch-block{height:80px}
+.color-swatch-info{padding:10px 12px}
+.color-swatch-name{font-size:13px;font-weight:500;margin-bottom:2px}
+.color-swatch-hex{font-family:var(--font-mono);font-size:11px;color:var(--fg-muted)}
+.color-swatch-role{font-size:11px;color:var(--fg-muted);margin-top:4px}
+
+/* Typography */
+.type-sample{padding:20px 0;border-bottom:1px solid var(--border)}
+.type-sample:last-child{border-bottom:none}
+.type-meta{font-size:12px;color:var(--fg-muted);margin-top:8px;font-family:var(--font-mono)}
+
+/* Buttons section */
+.button-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
+.button-item{display:flex;flex-direction:column;align-items:center;gap:8px}
+.button-label{font-size:11px;color:var(--fg-muted);text-align:center}
+
+/* Cards */
+.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
+.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:24px;transition:all 0.2s}
+.card:hover{border-color:var(--border-hover)}
+.card h3{font-size:16px;font-weight:600;margin-bottom:8px}
+.card p{font-size:14px;color:var(--fg-muted);line-height:1.6}
+.card-badge{display:inline-block;font-size:11px;font-weight:500;padding:2px 8px;border-radius:9999px;margin-bottom:12px}
+
+/* Forms */
+.form-group{max-width:480px;margin-bottom:24px}
+.form-label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
+.form-input,.form-textarea{width:100%;height:40px;padding:0 12px;font-size:14px;font-family:var(--font-sans);color:var(--fg);background:hsl(0 0% 12% / 0.4);border:1px solid var(--border);border-radius:6px;outline:none;transition:all 0.2s}
+.form-input::placeholder,.form-textarea::placeholder{color:var(--fg-muted)}
+.form-input:hover,.form-textarea:hover{background:hsl(0 0% 12% / 0.6)}
+.form-input:focus,.form-textarea:focus{background:hsl(0 0% 12% / 0.6);box-shadow:0 0 0 1px var(--ring),0 0 0 3px var(--bg)}
+.form-input--focus{background:hsl(0 0% 12% / 0.6) !important;box-shadow:0 0 0 1px var(--ring),0 0 0 3px var(--bg) !important}
+.form-input--error{border-color:var(--destructive) !important;box-shadow:0 0 0 1px var(--destructive),0 0 0 3px var(--bg) !important}
+.form-textarea{height:auto;min-height:80px;padding:10px 12px;resize:vertical}
+.form-state-label{font-size:11px;color:var(--fg-muted);margin-top:6px}
+
+/* Spacing */
+.spacing-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
+.spacing-item{display:flex;flex-direction:column;align-items:center;gap:8px}
+.spacing-block{height:40px;background:var(--primary);border-radius:3px;min-width:2px}
+.spacing-value{font-family:var(--font-mono);font-size:11px;color:var(--fg-muted)}
+
+/* Radius */
+.radius-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
+.radius-item{display:flex;flex-direction:column;align-items:center;gap:8px}
+.radius-box{width:64px;height:64px;border:2px solid var(--fg-muted);background:var(--card)}
+.radius-label{font-family:var(--font-mono);font-size:12px;color:var(--fg)}
+.radius-context{font-size:11px;color:var(--fg-muted)}
+
+/* Elevation */
+.elevation-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
+.elevation-card{background:var(--card);border-radius:10px;padding:24px;min-height:100px;display:flex;flex-direction:column;justify-content:flex-end}
+.elevation-label{font-size:13px;font-weight:500;margin-bottom:4px}
+.elevation-desc{font-size:12px;color:var(--fg-muted)}
+
+/* Footer */
+.footer{text-align:center;padding:48px 24px;font-size:13px;color:var(--fg-muted);border-top:1px solid var(--border)}
+.footer a{color:var(--fg-muted);text-decoration:none;transition:color 0.2s}
+.footer a:hover{color:var(--fg)}
+
+/* Responsive */
+@media(max-width:768px){
+  .nav-links{display:none}
+  .hero h1{font-size:32px}
+  .color-grid{grid-template-columns:repeat(2,1fr)}
+  .card-grid{grid-template-columns:1fr}
+}
+</style>
+</head>
+<body>
+
+<nav class="nav">
+  <div class="nav-start">
+    <a class="nav-logo" href="https://github.com/FraterCCCLXIII/OpenHands-Design.md" target="_blank" rel="noopener noreferrer" aria-label="OpenHands">
+      <svg viewBox="0 0 599.09 99.17" fill="#fff" aria-hidden="true"><path d="M159.74,53.71c0-18.39,11.81-31.21,28.17-31.21s28.17,12.82,28.17,31.21-11.81,31.21-28.17,31.21-28.17-12.82-28.17-31.21ZM205.29,53.71c0-13.16-7.17-21.68-17.38-21.68s-17.38,8.52-17.38,21.68,7.17,21.68,17.38,21.68,17.38-8.52,17.38-21.68Z"/><path d="M246.07,84.92c-5.74,0-9.95-2.28-12.74-5.57v19.82h-10.12v-59.47h10.12v4.72c2.78-3.29,7-5.57,12.74-5.57,12.4,0,19.48,10.46,19.48,23.03s-7.09,23.03-19.48,23.03ZM233.08,60.63v2.61c0,8.18,4.72,12.82,10.97,12.82,7.34,0,11.3-5.74,11.3-14.17s-3.96-14.17-11.3-14.17c-6.24,0-10.97,4.56-10.97,12.91Z"/><path d="M291.26,84.92c-12.65,0-21.51-9.36-21.51-23.03s8.77-23.03,21.09-23.03,19.65,9.7,19.65,21.85v3.37h-31.04c.76,7.59,5.32,12.23,11.81,12.23,4.98,0,8.94-2.53,10.29-7.09l8.69,3.29c-3.12,7.76-10.12,12.4-18.98,12.4ZM290.76,47.38c-5.23,0-9.28,3.12-10.8,9.11h20.33c-.08-4.89-3.12-9.11-9.53-9.11Z"/><path d="M317.25,83.99v-44.29h10.12v4.72c2.53-2.95,6.49-5.57,12.23-5.57,9.28,0,14.85,6.41,14.85,15.94v29.19h-10.12v-26.23c0-5.48-2.19-9.45-7.76-9.45-4.55,0-9.19,3.37-9.19,9.7v25.98h-10.12Z"/><path d="M404.17,23.43h10.8v60.57h-10.8v-26.49h-29.02v26.49h-10.8V23.43h10.8v24.63h29.02v-24.63Z"/><path d="M436.93,84.75c-8.43,0-14.93-5.15-14.93-13.07,0-8.44,6.33-12.15,14.85-13.92l12.23-2.53v-.76c0-4.22-2.19-6.83-7.59-6.83-4.81,0-7.34,2.19-8.52,6.5l-9.53-2.19c2.19-7.34,8.69-13.07,18.47-13.07,10.63,0,17.04,5.06,17.04,15.27v19.06c0,2.53,1.1,3.29,3.88,2.95v7.84c-7.34.84-11.22-.59-12.74-4.22-2.78,3.12-7.42,4.98-13.16,4.98ZM449.08,68.39v-5.4l-9.53,2.02c-4.3.93-7.51,2.28-7.51,6.24,0,3.46,2.53,5.4,6.41,5.4,5.4,0,10.63-2.87,10.63-8.27Z"/><path d="M469.17,83.99v-44.29h10.12v4.72c2.53-2.95,6.49-5.57,12.23-5.57,9.28,0,14.85,6.41,14.85,15.94v29.19h-10.12v-26.23c0-5.48-2.19-9.45-7.76-9.45-4.56,0-9.2,3.37-9.2,9.7v25.98h-10.12Z"/><path d="M532.56,84.92c-12.4,0-19.48-10.46-19.48-23.03s7.08-23.03,19.48-23.03c5.74,0,9.95,2.28,12.74,5.57v-21h10.12v60.57h-10.12v-4.64c-2.78,3.29-7,5.57-12.74,5.57ZM545.55,60.63c0-8.35-4.72-12.91-10.96-12.91-7.34,0-11.3,5.74-11.3,14.17s3.96,14.17,11.3,14.17c6.24,0,10.96-4.64,10.96-12.82v-2.61Z"/><path d="M560.54,75.56l7.59-6.07c2.62,4.3,7.68,7.17,12.82,7.17,4.3,0,8.27-1.52,8.27-5.48s-3.71-4.22-10.71-5.65c-7-1.43-15.01-3.21-15.01-12.65,0-8.1,7.09-14,17.29-14,7.76,0,14.68,3.46,17.88,8.35l-6.83,6.16c-2.53-3.96-6.75-6.24-11.64-6.24-4.13,0-6.83,1.86-6.83,4.81,0,3.21,3.2,3.8,8.77,4.98,7.51,1.6,16.95,3.21,16.95,13.33,0,8.94-8.18,14.68-18.22,14.68-8.18,0-16.36-3.29-20.33-9.36Z"/><path d="M64.97,14.8V1.93c0-1.07.86-1.93,1.93-1.93s1.93.86,1.93,1.93v12.87c0,1.07-.86,1.93-1.93,1.93s-1.93-.86-1.93-1.93Z"/><path d="M74.95,16.72l6.43-11.15c.53-.92,1.71-1.24,2.64-.71.92.53,1.24,1.71.71,2.64l-6.43,11.15c-.53.92-1.71,1.24-2.64.71-.92-.53-1.24-1.71-.71-2.64Z"/><path d="M58.85,16.72l-6.43-11.15c-.53-.92-1.71-1.24-2.64-.71-.92.53-1.24,1.71-.71,2.64l6.43,11.15c.53.92,1.71,1.24,2.64.71.92-.53,1.24-1.71.71-2.64Z"/><path d="M128.77,56.65c0-3.35.9-13.3,1.19-16.58.19-2.22-.07-3.44-.43-4.06-.26-.46-.67-.78-1.66-.84-.71-.05-1.49.16-2.07.68-.54.49-1.15,1.48-1.15,3.47v.11s-.89,15.12-.89,15.12c-.03.54-.29,1.05-.72,1.39-.42.34-.97.49-1.51.4l-9.29-1.47-10.02-1.33c-.93-.12-1.63-.89-1.67-1.82l-.55-11.95v-.1c-.25-4.76-.49-9.1-.49-10.44,0-3.75-.63-5.33-1.19-5.99-.44-.53-1.08-.76-2.44-.76-.49,0-.83.1-1.09.25-.25.15-.54.41-.82.94-.59,1.12-1.02,3.22-.86,6.88.21,4.76.53,8.31.85,11.51.32,3.2.63,6.1.81,9.47.27,5.28.25,8.92.03,11.39-.11,1.23-.27,2.23-.48,3.02-.2.75-.51,1.51-1.04,2.07-.64.69-1.56,1.02-2.52.79-.76-.18-1.29-.66-1.58-.97-.61-.64-1.04-1.46-1.21-1.89-.98-2.47-4.01-8.22-8.12-11.46-1.2-.95-2.07-1.22-2.62-1.26-.52-.04-.89.11-1.19.35-.33.26-.57.63-.69.99-.04.13-.06.22-.07.27,1.11,1.88,5.53,8.77,7.61,15.76,1.55,5.21,5.29,10.52,8.09,12.8,2.71,2.2,7.57,3.57,13.05,3.84,5.42.27,11.01-.57,14.95-2.33,7.6-3.41,9.14-10.91,9.84-14.16.54-2.52.55-5.22.4-7.72-.07-1.25-.18-2.41-.27-3.49-.09-1.04-.17-2.05-.17-2.88ZM110.59,24.28c0-1.17-.31-2.21-.83-2.91-.47-.63-1.16-1.07-2.26-1.07-.91,0-1.52.11-1.94.29-.39.16-.71.42-1,.9-.68,1.1-1.18,3.3-1.18,7.69l.48,10.39c.18,3.47.37,7.22.49,10.35l6.25.83v-26.47ZM114.45,51.31l5.58.88.76-12.93v-9.97c0-1.37-.56-2.21-1.22-2.74-.74-.6-1.6-.81-2-.81-.74,0-1.5.11-2.05.5-.42.3-1.07,1.01-1.07,3.05v22.01ZM124.65,32c1.15-.58,2.39-.76,3.48-.69,1.97.13,3.71.96,4.75,2.77.95,1.65,1.15,3.83.93,6.31-.3,3.43-1.18,13.11-1.18,16.25,0,.63.06,1.47.16,2.54.09,1.05.21,2.28.28,3.6.15,2.63.16,5.72-.48,8.75-.67,3.15-2.49,12.6-12.03,16.88-4.64,2.08-10.87,2.95-16.72,2.66-5.79-.28-11.64-1.73-15.29-4.7-3.44-2.8-7.59-8.79-9.35-14.69-1.99-6.67-6.29-13.24-7.36-15.11-.63-1.1-.43-2.4-.14-3.27.33-.98.98-2,1.94-2.77,1-.79,2.32-1.29,3.88-1.18,1.53.12,3.11.81,4.72,2.08,4.14,3.27,7.18,8.43,8.67,11.59.02-.15.03-.3.05-.46.19-2.21.23-5.65-.04-10.86-.17-3.26-.47-6.05-.79-9.29-.32-3.24-.65-6.87-.87-11.72-.17-3.88.23-6.82,1.31-8.86.56-1.06,1.32-1.9,2.28-2.46.96-.56,2.01-.78,3.04-.78,1.53,0,3.43.22,4.95,1.66.13-.29.28-.56.44-.81.7-1.13,1.63-1.93,2.77-2.42,1.1-.47,2.29-.6,3.46-.6,2.36,0,4.19,1.04,5.36,2.63.76,1.03,1.22,2.23,1.44,3.46,1.25-.57,2.51-.64,3.28-.64,1.31,0,3.02.53,4.43,1.68,1.49,1.21,2.65,3.11,2.65,5.74v2.71Z"/><path d="M5.12,56.65c0-3.35-.9-13.3-1.19-16.58-.19-2.22.07-3.44.43-4.06.26-.46.67-.78,1.66-.84.71-.05,1.49.16,2.07.68.54.49,1.15,1.48,1.15,3.47v.11s.89,15.12.89,15.12c.03.54.29,1.05.72,1.39.42.34.97.49,1.51.4l9.29-1.47,10.02-1.33c.93-.12,1.63-.89,1.67-1.82l.55-11.95v-.1c.25-4.76.48-9.1.48-10.44,0-3.75.63-5.33,1.19-5.99.44-.53,1.08-.76,2.44-.76.49,0,.83.1,1.09.25.25.15.54.41.82.94.59,1.12,1.02,3.22.86,6.88-.21,4.76-.53,8.31-.85,11.51-.32,3.2-.63,6.1-.81,9.47-.27,5.28-.25,8.92-.03,11.39.11,1.23.27,2.23.48,3.02.2.75.51,1.51,1.04,2.07.65.69,1.56,1.02,2.52.79.76-.18,1.29-.66,1.58-.97.61-.64,1.04-1.46,1.21-1.89.98-2.47,4.01-8.22,8.12-11.46,1.2-.95,2.07-1.22,2.62-1.26.52-.04.89.11,1.19.35.33.26.57.63.69.99.04.13.06.22.07.27-1.11,1.88-5.53,8.77-7.61,15.76-1.55,5.21-5.29,10.52-8.09,12.8-2.71,2.2-7.57,3.57-13.05,3.84-5.43.27-11.01-.57-14.95-2.33-7.6-3.41-9.15-10.91-9.84-14.16-.54-2.52-.55-5.22-.4-7.72.07-1.25.18-2.41.27-3.49.09-1.04.17-2.05.17-2.88ZM23.29,24.28c0-1.17.31-2.21.83-2.91.47-.63,1.16-1.07,2.26-1.07.91,0,1.52.11,1.95.29.39.16.71.42,1,.9.68,1.1,1.18,3.3,1.18,7.69l-.48,10.39c-.18,3.47-.37,7.22-.49,10.35l-6.25.83v-26.47ZM19.43,51.31l-5.58.88-.76-12.93v-9.97c0-1.37.56-2.21,1.22-2.74.74-.6,1.59-.81,2-.81.74,0,1.5.11,2.05.5.42.3,1.07,1.01,1.07,3.05v22.01ZM9.24,32c-1.15-.58-2.39-.76-3.48-.69-1.97.13-3.7.96-4.75,2.77-.95,1.65-1.15,3.83-.93,6.31.3,3.43,1.18,13.11,1.18,16.25,0,.63-.07,1.47-.16,2.54-.09,1.05-.21,2.28-.28,3.6-.15,2.63-.16,5.72.48,8.75.67,3.15,2.49,12.6,12.04,16.88,4.64,2.08,10.87,2.95,16.72,2.66,5.79-.28,11.65-1.73,15.29-4.7,3.44-2.8,7.59-8.79,9.35-14.69,1.99-6.67,6.29-13.24,7.36-15.11.63-1.1.43-2.4.14-3.27-.33-.98-.98-2-1.94-2.77-1-.79-2.32-1.29-3.88-1.18-1.53.12-3.11.81-4.72,2.08-4.14,3.27-7.18,8.43-8.67,11.59-.02-.15-.03-.3-.05-.46-.19-2.21-.23-5.65.04-10.86.17-3.26.47-6.05.79-9.29.32-3.24.65-6.87.87-11.72.17-3.88-.23-6.82-1.31-8.86-.56-1.06-1.32-1.9-2.28-2.46-.96-.56-2.01-.78-3.04-.78-1.53,0-3.43.22-4.95,1.66-.13-.29-.28-.56-.44-.81-.7-1.13-1.63-1.93-2.77-2.42-1.1-.47-2.28-.6-3.46-.6-2.36,0-4.19,1.04-5.36,2.63-.76,1.03-1.22,2.23-1.44,3.46-1.25-.57-2.51-.64-3.27-.64-1.31,0-3.02.53-4.43,1.68-1.49,1.21-2.64,3.11-2.64,5.74v2.71Z"/></svg>
+    </a>
+    <a class="nav-github" href="https://github.com/FraterCCCLXIII/OpenHands-Design.md" target="_blank" rel="noopener noreferrer" aria-label="OpenHands-Design.md on GitHub">
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2 .37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+      OpenHands-Design.md
+    </a>
+  </div>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#spacing">Spacing</a></li>
+    <li><a href="#radius">Radius</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+  </ul>
+</nav>
+
+<section class="hero">
+  <h1>OpenHands<br>Design System</h1>
+  <p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value, visualized on the near-black monochrome canvas.</p>
+  <div class="hero-buttons">
+    <a class="btn-dark" href="https://github.com/FraterCCCLXIII/OpenHands-Design.md" target="_blank">View Repository</a>
+    <a class="btn-primary" href="#colors">Explore Tokens</a>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- ==================== COLORS ==================== -->
+<section class="section" id="colors">
+  <div class="section-label">01 / Colors</div>
+  <h2 class="section-title">Color Palette</h2>
+
+  <div class="color-group-label">Core Surfaces</div>
+  <div class="color-grid">
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#0d0d0d"></div><div class="color-swatch-info"><div class="color-swatch-name">background</div><div class="color-swatch-hex">#0d0d0d</div><div class="color-swatch-role">Page background, app shell</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#121212"></div><div class="color-swatch-info"><div class="color-swatch-name">card</div><div class="color-swatch-hex">#121212</div><div class="color-swatch-role">Card surfaces, elevated containers</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#141414"></div><div class="color-swatch-info"><div class="color-swatch-name">secondary</div><div class="color-swatch-hex">#141414</div><div class="color-swatch-role">Secondary surfaces, sidebar accent</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#1f1f1f"></div><div class="color-swatch-info"><div class="color-swatch-name">muted</div><div class="color-swatch-hex">#1f1f1f</div><div class="color-swatch-role">Hover fills, badges, tooltips</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#242424"></div><div class="color-swatch-info"><div class="color-swatch-name">border</div><div class="color-swatch-hex">#242424</div><div class="color-swatch-role">Borders, input borders, dividers</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#2e2e2e"></div><div class="color-swatch-info"><div class="color-swatch-name">muted-hover</div><div class="color-swatch-hex">#2e2e2e</div><div class="color-swatch-role">Hover on muted surfaces</div></div></div>
+  </div>
+
+  <div class="color-group-label">Core Text</div>
+  <div class="color-grid">
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#fafafa"></div><div class="color-swatch-info"><div class="color-swatch-name">foreground</div><div class="color-swatch-hex">#fafafa</div><div class="color-swatch-role">Primary text, headings</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#8c8c8c"></div><div class="color-swatch-info"><div class="color-swatch-name">muted-foreground</div><div class="color-swatch-hex">#8c8c8c</div><div class="color-swatch-role">Secondary text, labels, placeholders</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff;border-bottom:1px solid hsl(0 0% 14%)"></div><div class="color-swatch-info"><div class="color-swatch-name">primary</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Maximum emphasis, button bg</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">primary-foreground</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Text on white buttons</div></div></div>
+  </div>
+
+  <div class="color-group-label">Semantic / Status</div>
+  <div class="color-grid">
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#22c55e"></div><div class="color-swatch-info"><div class="color-swatch-name">success</div><div class="color-swatch-hex">#22c55e</div><div class="color-swatch-role">Success states, running</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#86efac"></div><div class="color-swatch-info"><div class="color-swatch-name">success-foreground</div><div class="color-swatch-hex">#86efac</div><div class="color-swatch-role">Success text on dark</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#f59e0b"></div><div class="color-swatch-info"><div class="color-swatch-name">warning</div><div class="color-swatch-hex">#f59e0b</div><div class="color-swatch-role">Warning, caution badges</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#3b82f6"></div><div class="color-swatch-info"><div class="color-swatch-name">info</div><div class="color-swatch-hex">#3b82f6</div><div class="color-swatch-role">Informational, links</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#dc2626"></div><div class="color-swatch-info"><div class="color-swatch-name">destructive</div><div class="color-swatch-hex">#dc2626</div><div class="color-swatch-role">Error, danger, delete</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#cccccc"></div><div class="color-swatch-info"><div class="color-swatch-name">ring</div><div class="color-swatch-hex">#cccccc</div><div class="color-swatch-role">Focus rings (1px, keyboard-only)</div></div></div>
+  </div>
+
+  <div class="color-group-label">Surface Scale (5% &rarr; 18% lightness)</div>
+  <div style="display:flex;border-radius:10px;overflow:hidden;height:64px;border:1px solid var(--border);margin-bottom:24px">
+    <div style="flex:1;background:#0d0d0d" title="5% — background"></div>
+    <div style="flex:1;background:#121212" title="7% — card"></div>
+    <div style="flex:1;background:#141414" title="8% — secondary"></div>
+    <div style="flex:1;background:#1f1f1f" title="12% — muted"></div>
+    <div style="flex:1;background:#242424" title="14% — border"></div>
+    <div style="flex:1;background:#2e2e2e" title="18% — muted-hover"></div>
+  </div>
+  <div style="display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--fg-muted);margin-bottom:8px">
+    <span>5%</span><span>7%</span><span>8%</span><span>12%</span><span>14%</span><span>18%</span>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- ==================== TYPOGRAPHY ==================== -->
+<section class="section" id="typography">
+  <div class="section-label">02 / Typography</div>
+  <h2 class="section-title">Typography Scale</h2>
+
+  <div class="type-sample"><div style="font-size:30px;font-weight:600;line-height:1.2;letter-spacing:-0.5px">Hero Heading (text-3xl)</div><div class="type-meta">30px / 600 / 1.2 / -0.5px / Inter</div></div>
+  <div class="type-sample"><div style="font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-0.3px">Page Heading (text-2xl)</div><div class="type-meta">24px / 600 / 1.25 / -0.3px / Inter</div></div>
+  <div class="type-sample"><div style="font-size:20px;font-weight:600;line-height:1.3">Sub-heading (text-xl)</div><div class="type-meta">20px / 600 / 1.3 / Inter</div></div>
+  <div class="type-sample"><div style="font-size:18px;font-weight:600;line-height:1.4">Section Title (text-lg)</div><div class="type-meta">18px / 600 / 1.4 / Inter</div></div>
+  <div class="type-sample"><div style="font-size:16px;font-weight:400;line-height:1.5">Body Large — Larger body text for chat messages and hero content. (text-base)</div><div class="type-meta">16px / 400 / 1.5 / Inter</div></div>
+  <div class="type-sample"><div style="font-size:14px;font-weight:400;line-height:1.5">Body — Standard UI text for labels, descriptions, and interface elements. (text-sm)</div><div class="type-meta">14px / 400 / 1.5 / Inter — primary body size (711 uses)</div></div>
+  <div class="type-sample"><div style="font-size:14px;font-weight:500;line-height:1.5">Label — Form labels, nav items, and badges. (text-sm font-medium)</div><div class="type-meta">14px / 500 / 1.5 / Inter — label weight (304 uses)</div></div>
+  <div class="type-sample"><div style="font-size:12px;font-weight:400;line-height:1.5;color:var(--fg-muted)">Secondary — Metadata, captions, and small labels. (text-xs)</div><div class="type-meta">12px / 400 / 1.5 / Inter — secondary size (427 uses)</div></div>
+  <div class="type-sample"><div style="font-family:var(--font-mono);font-size:14px;font-weight:400;line-height:1.6">const design = await openHands.init({ tokens: true });</div><div class="type-meta">14px / 400 / 1.6 / JetBrains Mono — code / technical text</div></div>
+  <div class="type-sample"><div style="font-size:11px;font-weight:500;line-height:1.27;text-transform:uppercase;letter-spacing:1.5px;color:var(--fg-muted)">SYSTEM CATEGORY</div><div class="type-meta">11px / 500 / uppercase / tracking-wide — section labels</div></div>
+</section>
+
+<hr class="section-divider">
+
+<!-- ==================== BUTTONS ==================== -->
+<section class="section" id="buttons">
+  <div class="section-label">03 / Buttons</div>
+  <h2 class="section-title">Button Variants</h2>
+  <div class="button-row">
+    <div class="button-item"><a class="btn-dark" href="#">Save Changes</a><div class="button-label">default</div></div>
+    <div class="button-item"><a class="btn-destructive" href="#">Delete</a><div class="button-label">destructive</div></div>
+    <div class="button-item"><a class="btn-outline" href="#">Cancel</a><div class="button-label">outline</div></div>
+    <div class="button-item"><a class="btn-primary" href="#">Settings</a><div class="button-label">secondary</div></div>
+    <div class="button-item"><a class="btn-muted" href="#">Archive</a><div class="button-label">muted</div></div>
+    <div class="button-item"><a class="btn-ghost" href="#">Learn More</a><div class="button-label">ghost</div></div>
+    <div class="button-item"><a href="#" style="font-size:14px;color:var(--primary);text-decoration:none;text-underline-offset:4px" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">View docs</a><div class="button-label">link</div></div>
+  </div>
+
+  <div style="margin-top:40px">
+    <div class="color-group-label">Status Pills</div>
+    <div class="button-row">
+      <div class="button-item"><span style="display:inline-block;background:hsl(142 71% 45% / 0.1);color:var(--success-fg);padding:3px 10px;border-radius:9999px;font-size:12px;font-weight:500">Success</span><div class="button-label">success</div></div>
+      <div class="button-item"><span style="display:inline-block;background:hsl(38 92% 50% / 0.15);color:var(--warning);padding:3px 10px;border-radius:9999px;font-size:12px;font-weight:500">Warning</span><div class="button-label">warning</div></div>
+      <div class="button-item"><span style="display:inline-block;background:hsl(217 91% 60% / 0.15);color:var(--info);padding:3px 10px;border-radius:9999px;font-size:12px;font-weight:500">Info</span><div class="button-label">info</div></div>
+      <div class="button-item"><span style="display:inline-block;background:hsl(0 72% 51% / 0.1);color:var(--destructive);padding:3px 10px;border-radius:9999px;font-size:12px;font-weight:500">Error</span><div class="button-label">destructive</div></div>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- ==================== CARDS ==================== -->
+<section class="section" id="cards">
+  <div class="section-label">04 / Cards</div>
+  <h2 class="section-title">Card Examples</h2>
+  <div class="card-grid">
+    <div class="card">
+      <div class="card-badge" style="background:hsl(142 71% 45% / 0.1);color:var(--success-fg)">Standard</div>
+      <h3>Standard Card</h3>
+      <p>bg-card border border-border rounded-lg p-4. The workhorse container for settings panels, content sections, and list items.</p>
+    </div>
+    <div class="card" style="box-shadow:var(--shadow-card);border-radius:12px;padding:24px">
+      <div class="card-badge" style="background:hsl(217 91% 60% / 0.15);color:var(--info)">Elevated</div>
+      <h3>Elevated Card</h3>
+      <p>bg-card border border-border rounded-xl p-6 shadow-lg. For modals, dialogs, and featured content that needs to float above the surface.</p>
+    </div>
+    <div class="card" style="border-color:var(--border-hover)">
+      <div class="card-badge" style="background:hsl(38 92% 50% / 0.15);color:var(--warning)">Interactive</div>
+      <h3>Interactive Card</h3>
+      <p>hover:border-white/30. Cards that respond to hover with a subtle border brightening to indicate they are clickable.</p>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- ==================== FORMS ==================== -->
+<section class="section" id="forms">
+  <div class="section-label">05 / Forms</div>
+  <h2 class="section-title">Form Elements</h2>
+  <div class="form-group"><label class="form-label">Project Name</label><input class="form-input" type="text" placeholder="my-openhands-project"><div class="form-state-label">Default (border-border, bg-muted/40)</div></div>
+  <div class="form-group"><label class="form-label">Repository</label><input class="form-input form-input--focus" type="text" value="openhands/agent"><div class="form-state-label">Focus (ring-1, ring-ring, bg-muted/60)</div></div>
+  <div class="form-group"><label class="form-label">API Key</label><input class="form-input form-input--error" type="text" value="invalid-key-123"><div class="form-state-label">Error (border-destructive)</div></div>
+  <div class="form-group"><label class="form-label">Instructions</label><textarea class="form-textarea" placeholder="Describe the task for the agent..."></textarea></div>
+  <div class="form-group">
+    <label class="form-label">Framework</label>
+    <div style="position:relative">
+      <select class="form-input" style="appearance:none;padding-right:36px;cursor:pointer">
+        <option>React + Tailwind</option>
+        <option>Next.js</option>
+        <option>Vue</option>
+      </select>
+      <svg style="position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
+    </div>
+    <div class="form-state-label">NativeSelect (appearance: none, chevron overlay)</div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- ==================== SPACING ==================== -->
+<section class="section" id="spacing">
+  <div class="section-label">06 / Spacing</div>
+  <h2 class="section-title">Spacing Scale</h2>
+  <div class="spacing-row">
+    <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4 (gap-1)</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:6px"></div><div class="spacing-value">6 (gap-1.5)</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8 (gap-2)</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12 (gap-3)</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16 (gap-4)</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24 (gap-6)</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32 (gap-8)</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48 (gap-12)</div></div>
+  </div>
+
+  <div style="margin-top:40px">
+    <div class="color-group-label">Padding Patterns</div>
+    <div style="display:flex;flex-wrap:wrap;gap:16px;margin-top:12px">
+      <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-size:12px;color:var(--fg-muted)">px-3 py-2 <span style="color:var(--fg)">compact</span></div>
+      <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:8px 16px;font-size:12px;color:var(--fg-muted)">px-4 py-2 <span style="color:var(--fg)">standard</span></div>
+      <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:16px;font-size:12px;color:var(--fg-muted)">p-4 <span style="color:var(--fg)">card</span></div>
+      <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:24px;font-size:12px;color:var(--fg-muted)">p-6 <span style="color:var(--fg)">dialog</span></div>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- ==================== RADIUS ==================== -->
+<section class="section" id="radius">
+  <div class="section-label">07 / Radius</div>
+  <h2 class="section-title">Border Radius Scale</h2>
+  <div class="radius-row">
+    <div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">rounded-sm</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">rounded-md</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">rounded-lg</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">rounded-modal</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">rounded-2xl</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:9999px"></div><div class="radius-label">9999px</div><div class="radius-context">rounded-full</div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- ==================== ELEVATION ==================== -->
+<section class="section" id="elevation">
+  <div class="section-label">08 / Elevation</div>
+  <h2 class="section-title">Elevation &amp; Depth</h2>
+  <div class="elevation-grid">
+    <div class="elevation-card" style="border:1px solid var(--border)"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow, bg-background</div></div>
+    <div class="elevation-card" style="border:1px solid var(--border);box-shadow:0 1px 2px 0 hsl(0 0% 0% / 0.3)"><div class="elevation-label">Level 1: Surface</div><div class="elevation-desc">shadow-card + border</div></div>
+    <div class="elevation-card" style="border:1px solid var(--border);box-shadow:0 4px 6px -1px hsl(0 0% 0% / 0.3),0 2px 4px -2px hsl(0 0% 0% / 0.3)"><div class="elevation-label">Level 2: Raised</div><div class="elevation-desc">shadow-md — dropdowns, popovers</div></div>
+    <div class="elevation-card" style="border:1px solid var(--border);box-shadow:0 10px 15px -3px hsl(0 0% 0% / 0.3),0 4px 6px -4px hsl(0 0% 0% / 0.3)"><div class="elevation-label">Level 3: Floating</div><div class="elevation-desc">shadow-lg — modals, dialogs</div></div>
+    <div class="elevation-card" style="border:1px solid var(--border);box-shadow:0 20px 25px -5px hsl(0 0% 0% / 0.3),0 8px 10px -6px hsl(0 0% 0% / 0.3)"><div class="elevation-label">Level 4: Overlay</div><div class="elevation-desc">shadow-xl — full-screen overlays</div></div>
+    <div class="elevation-card" style="border:1px solid var(--border);box-shadow:0 0 0 1px var(--ring),0 0 0 3px var(--bg)"><div class="elevation-label">Focus Ring</div><div class="elevation-desc">ring-1 ring-ring ring-offset-2</div></div>
+  </div>
+</section>
+
+<footer class="footer">
+  <a href="https://github.com/FraterCCCLXIII/OpenHands-Design.md" target="_blank" rel="noopener noreferrer">OpenHands-Design.md</a> &mdash; Design tokens for the OpenHands UI
+</footer>
+
+</body>
+</html>

OpenHands-Design/src/components/ui/button.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-normal ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.97] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/85',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/85',
+        outline: 'border border-input bg-background hover:bg-muted hover:text-foreground',
+        light: 'border border-input bg-primary text-primary-foreground hover:bg-primary/85',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-muted-hover',
+        muted: 'bg-muted text-muted-foreground hover:bg-muted-hover hover:text-foreground',
+        ghost: 'hover:bg-muted hover:text-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-10 rounded-md px-3',
+        xs: 'h-10 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

OpenHands-Design/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-border bg-muted/40 px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:bg-muted/60 hover:bg-muted/60 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/30 md:text-sm',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

OpenHands-Design/src/components/ui/native-select.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const nativeSelectClassName =
+  'h-10 w-full appearance-none rounded-md border border-border bg-muted/40 py-2 pl-3 pr-10 text-sm text-foreground ring-offset-background hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-muted/30 disabled:opacity-50';
+
+export type NativeSelectProps = React.ComponentPropsWithoutRef<'select'> & {
+  wrapperClassName?: string;
+};
+
+export const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, wrapperClassName, children, ...props }, ref) => (
+    <div className={cn('relative w-full', wrapperClassName)}>
+      <select ref={ref} className={cn(nativeSelectClassName, className)} {...props}>
+        {children}
+      </select>
+      <ChevronDown
+        className="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground"
+        aria-hidden
+      />
+    </div>
+  )
+);
+NativeSelect.displayName = 'NativeSelect';

OpenHands-Design/src/components/ui/search-input.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Search, XCircle } from 'lucide-react';
+import { Input } from './input';
+import { cn } from '../../lib/utils';
+
+type InputProps = React.ComponentProps<typeof Input>;
+export type SearchInputProps = Omit<InputProps, 'type' | 'size'> & {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Size: sm (h-9), default (h-10), lg (h-11) */
+  size?: 'sm' | 'default' | 'lg';
+};
+
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    {
+      value,
+      onValueChange,
+      placeholder,
+      'aria-label': ariaLabel,
+      className,
+      size = 'default',
+      ...props
+    },
+    ref
+  ) => {
+    const sizeClasses = {
+      sm: 'h-9 pl-9 pr-9',
+      default: 'h-10 pl-10 pr-10',
+      lg: 'h-11 pl-11 pr-11 text-base',
+    };
+    const iconSizes = {
+      sm: 'h-4 w-4',
+      default: 'h-4 w-4',
+      lg: 'h-5 w-5',
+    };
+    const hasValue = value.length > 0;
+
+    return (
+      <div className={cn('relative w-full', className)}>
+        <Search
+          className={cn(
+            'absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none',
+            iconSizes[size]
+          )}
+          aria-hidden
+        />
+        <Input
+          ref={ref}
+          type="search"
+          value={value}
+          onChange={(e) => onValueChange(e.target.value)}
+          placeholder={placeholder}
+          aria-label={ariaLabel}
+          className={cn(sizeClasses[size])}
+          {...props}
+        />
+        {hasValue && (
+          <button
+            type="button"
+            onClick={() => onValueChange('')}
+            className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2"
+            aria-label="Clear search"
+          >
+            <XCircle className={cn(iconSizes[size])} strokeWidth={2} />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+SearchInput.displayName = 'SearchInput';
+
+export { SearchInput };

OpenHands-Design/src/globals.css

@@ -0,0 +1,135 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 5%;
+    --modal-background: var(--background);
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 7%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 7%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 100%;
+    --primary-foreground: 0 0% 0%;
+
+    --secondary: 0 0% 8%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 12%;
+    --muted-foreground: 0 0% 55%;
+    --muted-hover: 0 0% 18%;
+
+    --accent: 0 0% 100%;
+    --accent-foreground: 0 0% 0%;
+
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14%;
+    --input: 0 0% 14%;
+    --ring: 0 0% 80%;
+
+    --radius: 0.375rem;
+    --radius-sm: 0.25rem;
+    --radius-modal: 0.75rem;
+
+    --success: 142 71% 45%;
+    --success-foreground: 142 71% 76%;
+    --warning: 38 92% 50%;
+    --info: 217 91% 60%;
+    --gradient-card-hover: linear-gradient(180deg, hsl(0 0% 9%) 0%, hsl(0 0% 7%) 100%);
+
+    --shadow-card: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
+
+    --font-sans: 'Inter', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
+
+    --sidebar-background: 0 0% 5%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-primary: 0 0% 100%;
+    --sidebar-primary-foreground: 0 0% 0%;
+    --sidebar-accent: 0 0% 8%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 0 0% 14%;
+    --sidebar-ring: 0 0% 50%;
+  }
+
+  .dark {
+    --background: 0 0% 5%;
+    --modal-background: var(--background);
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 7%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 7%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 100%;
+    --primary-foreground: 0 0% 0%;
+
+    --secondary: 0 0% 8%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 12%;
+    --muted-foreground: 0 0% 55%;
+    --muted-hover: 0 0% 18%;
+
+    --accent: 0 0% 100%;
+    --accent-foreground: 0 0% 0%;
+
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14%;
+    --input: 0 0% 14%;
+    --ring: 0 0% 80%;
+
+    --radius: 0.375rem;
+    --radius-sm: 0.25rem;
+    --radius-modal: 0.75rem;
+
+    --success: 142 71% 45%;
+    --success-foreground: 142 71% 76%;
+    --warning: 38 92% 50%;
+    --info: 217 91% 60%;
+    --gradient-card-hover: linear-gradient(180deg, hsl(0 0% 9%) 0%, hsl(0 0% 7%) 100%);
+
+    --shadow-card: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
+
+    --font-sans: 'Inter', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
+
+    --sidebar-background: 0 0% 5%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-primary: 0 0% 100%;
+    --sidebar-primary-foreground: 0 0% 0%;
+    --sidebar-accent: 0 0% 8%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 0 0% 14%;
+    --sidebar-ring: 0 0% 50%;
+  }
+}
+
+/* Strip native search chrome so focus ring matches all other inputs */
+input[type="search"] {
+  -webkit-appearance: none;
+  appearance: none;
+}
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}

OpenHands-Design/tailwind.config.js

@@ -0,0 +1,99 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      fontFamily: {
+        sans: ["Inter", "system-ui", "sans-serif"],
+        mono: ["JetBrains Mono", "monospace"],
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        modal: "hsl(var(--modal-background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+          hover: "hsl(var(--muted-hover))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success) / <alpha-value>)",
+          foreground: "hsl(var(--success-foreground) / <alpha-value>)",
+        },
+        warning: "hsl(var(--warning) / <alpha-value>)",
+        info: "hsl(var(--info) / <alpha-value>)",
+      },
+      borderRadius: {
+        modal: "var(--radius-modal)",
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "pulse-glow": {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0.5" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "pulse-glow": "pulse-glow 2s ease-in-out infinite",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};