Components

Human’s UI is built with Lit web components. Each component uses design tokens exclusively — no hardcoded colors, sizes, or durations.

Component Library

Interactive Components

Component	Tag	Description
Button	`<hu-button>`	Primary, secondary, ghost, danger variants
Badge	`<hu-badge>`	Status indicators with semantic colors
Tooltip	`<hu-tooltip>`	Contextual help on hover/focus
Toggle	`<hu-toggle>`	On/off switches with micro-physics
Command Palette	`<hu-command-palette>`	CMD+K global search

Layout Components

Component	Tag	Description
Card	`<hu-card>`	Elevated surface with glass option
Sheet	`<hu-sheet>`	Slide-in panel from edge
Modal	`<hu-modal>`	Centered dialog with backdrop
Dialog	`<hu-dialog>`	Confirmation/action dialogs
Sidebar	`<hu-sidebar>`	Navigation sidebar

Display Components

Component	Tag	Description
Avatar	`<hu-avatar>`	User avatars with fallback initials
Floating Mic	`<hu-floating-mic>`	Voice input indicator

Token Integration

Every component consumes tokens through CSS custom properties. Example from hu-card:

:host {
  background: var(--hu-bg-surface);
  border: 1px solid var(--hu-border-subtle);
  border-radius: var(--hu-radius-lg);
  box-shadow: var(--hu-shadow-card);
  padding: var(--hu-space-lg);
}

:host(:hover) {
  box-shadow: var(--hu-shadow-lg);
  transition: box-shadow var(--hu-duration-normal) var(--hu-ease-default);
}

Component Variants

Button Variants

<hu-button variant="primary">Save</hu-button>
<hu-button variant="secondary">Cancel</hu-button>
<hu-button variant="ghost">More info</hu-button>
<hu-button variant="danger">Delete</hu-button>

Primary: Accent background, on-accent text, gradient overlay, physics press
Secondary: Surface background, accent text, subtle border
Ghost: Transparent background, accent text, hover overlay
Danger: Error background, on-error text

Badge Variants

<hu-badge variant="success">Online</hu-badge>
<hu-badge variant="warning">Pending</hu-badge>
<hu-badge variant="error">Failed</hu-badge>
<hu-badge variant="info">New</hu-badge>

Accessibility Patterns

All components implement:

Focus management: Visible focus rings using --hu-focus-ring token
Keyboard navigation: Full keyboard support (Enter, Space, Escape, Arrow keys)
ARIA attributes: Proper roles, states, and properties
Screen reader text: Hidden labels where visual indicators are insufficient

Focus Ring Standard

:host(:focus-visible) {
  outline: var(--hu-focus-ring-width) solid var(--hu-focus-ring);
  outline-offset: var(--hu-focus-ring-offset);
}

Motion Patterns

Components apply micro-physics contextually:

Component	Interaction	Physics Preset
`hu-button`	Click	`button-press` / `button-release`
`hu-card`	Hover	`card-hover`
`hu-modal`	Open	`modal-anticipation`
`hu-toggle`	Toggle	`toggle-squash`
`hu-command-palette`	Open	`dropdown-anticipation`

Glass Integration

Components can opt into glass tiers:

<hu-card class="glass">Standard glass card</hu-card>
<hu-card class="glass-prominent">Prominent glass card</hu-card>

View Catalog

The full component catalog with interactive examples is available at /catalog.html in the UI development server:

cd ui && npm run dev