Vrum Design System

An action that opens or triggers an AI interaction.

Keep media at a consistent width-to-height ratio.

Represent people with images, initials, and availability.

Compact status labels and contextual indicators.

An icon or short label on a small semantic surface.

Actions with clear hierarchy and accessible interaction states.

Select an option, including a mixed selection state.

Readable, copyable code with line numbers and wrapping.

A helpful explanation when content is unavailable.

Link a statement to its source.

Accessible text entry with size, state, and appearance controls.

A selectable surface for grouped content.

A compact keyboard shortcut hint.

Pair a readable label with its corresponding value.

An accessible label linked to a form control.

Vrum’s identity with a configurable product label.

Vrum uses Lucide SVG icons, with consistent size and stroke.

Set shared size and stroke defaults for Vrum SVG icons.

A loading placeholder that follows text rhythm.

A compact category or removable selection.

Choose one value from a related set.

Separate sections without adding visual weight.

A subtle placeholder while a region loads.

An accessible indicator for ongoing work.

A small availability or activity indicator.

Turn a setting on or off.

A loading placeholder for one line of text.

An action with a persistent pressed state.

Choose a single or multiple formatting options.

A labeled option with an optional note and lock.

Contextual text on hover or keyboard focus.

Consistent text hierarchy, rhythm, and color.

Reveal related sections one at a time.

A suggested next step for an AI conversation.

An assistant response with streaming and feedback states.

Compose a message with attachments, models, and optional tools.

Display an important message in context.

Show the current location in a navigation hierarchy.

Keep related actions together.

A reusable surface for grouped content and actions.

A compact, determinate progress indicator.

A source preview with a title, excerpt, and destination.

Expand optional details without leaving the page.

Search and select a value, with optional grouping and creation.

A searchable action menu with arrow-key navigation.

A contextual action menu for pointer and keyboard users.

An accessible menu of actions and settings.

A preview of linked content on hover or focus.

Review, edit, approve, or reject an AI-proposed action.

Enter a one-time verification code with paste support.

Adjust a number within a defined range.

A composable row with leading content and trailing actions.

A metric with trend and explanatory context.

Navigate through pages of content.

Display interactive details anchored to a control.

Show completion relative to a maximum value.

Show the status and steps of an AI reasoning process.

Select one value from a keyboard-accessible list.

Adjust one or more numeric values with keyboard support.

A service or workflow status with context.

Switch between accessible panels using arrow keys.

Multi-line text entry with optional automatic sizing.

Inspect a proposed or completed tool invocation.

A user’s message with optional attachments.

Compose structured prompts with a reusable rich text editor.

Ask for a deliberate response before an important action.

Select dates, ranges, or multiple dates in an accessible calendar.

A draggable carousel with controls and keyboard navigation.

A flexible list with selection, details, and row actions.

A typed table with selection, sorting, filtering, grouping, and pagination.

A date or range picker with a calendar popover.

A focused modal with accessible naming and dismissal.

Reusable building blocks for thoughtful products.

Zoom, orientation, fullscreen, and optional location controls.

A map overlay explaining markers or data layers.

A labeled geographic marker with optional drag interactions.

A geographic popup with controlled visibility.

Search supplied places or connect an asynchronous geocoding adapter.

An interactive map with configurable styles and extent callbacks.

A light, responsive navigation bar for product destinations.

A collapsible navigation system with groups and nested destinations.

Adjust panel sizes with pointer and keyboard controls.

A scrollable region with consistent, accessible scrollbars.

Reusable building blocks for thoughtful products.

Build interactive node-and-edge workflows in Vrum’s visual language.

Semantic table primitives for simpler tabular data.

Show chronological stages and milestones.

A timed notification with keyboard dismissal and accessible announcements.

Encode intensity or deviation with sequential and divergent color scales.

Compare categories with bars, columns, or stacked series.

Show trends with lines, splines, and area series.

Show proportions with pie, donut, and semi-donut shapes.

A compact line or area trend for tables and cards.

Compare several metrics across line, area, or polar column series.