Loading Helios UI…

Skip to content

HeliosUIDESIGN SYSTEM

Let’s begin Installation MCP Server Agent SkillsNew RTL SupportNew

Color Typography Components Templates

Announcement Avatar Badge Breadcrumb Button Button Group CarouselNew Checkbox Chip Close Button Date Picker Divider Dropdown File Upload Icon Button Input Input OTP Link Button Notification Pagination Radio Segmented Control Select Slider Social Button Switch Table Tabs TextareaNew Tooltip Tree ViewNew

Agent CreatorNew Agent LimitsNew Agent Progress Agent ThinkingNew Auth CardNew Calendar ComposerNew Composer AttachmentsNew Composer LoaderNew Composer PanelNew Data GridNew Data Table Notification Center QuestionnaireNew Settings Modal Sidebar Stat CardsNew Task ListNew Web SearchNew

Activity Rings Area ChartNew Bar ListNew Combo ChartNew Contributions Earnings Chart Funnel ChartNew Heatmap ChartNew Line Chart Most Active Days Orders ChartNew Radar ChartNew Radial ChartNew Revenue ChartNew Sankey ChartNew Scatter ChartNew Sleep Score Stage BarsNew Steps Chart

AI Chat AI Image Generation AI Profile Chat StarterNew Finance DashboardNew Home Dashboard Marketing DashboardNew Medical Profile Multi-agent ChatNew Project BoardNew

HeliosUIDESIGN SYSTEM

Components Templates Docs

Helios UI ComponentsFoundations

HELIOS UI · FOUNDATIONS

Foundations

Six foundation areas connect the visual language to reusable React interfaces.

Overview Color Typography Icons Miscellaneous icons Effects Spacing, radius & grids

Color, spacing and radius values come from the existing resolved token snapshot recorded on 25 October 2026. Typography, icon and effect references come from the existing website foundation implementation; they are identified separately below. These pages do not create or edit Figma variables.

Color

Audited website palettes and semantic roles for light and dark mode.

Explore area ↗

Typography

Reference type roles with live text, size and weight controls.

Explore area ↗

Icons

Actual line icons from the website SVG sprite, ready to copy.

Explore area ↗

Miscellaneous icons

Utility icons, status indicators and keyboard shortcut examples.

Explore area ↗

Effects

Layer and focus examples with copyable CSS recipes.

Explore area ↗

Spacing, radius & grids

Resolved dimensions and interactive layout previews.

Explore area ↗

Local reference snapshot · no live Figma synchronizationOpen Helios foundations in Figma

Search Helios UI

Search components and pages

Let's beginGetting started InstallationGetting started MCP ServerGetting started Agent SkillsGetting started RTL SupportGetting started ColorFoundations TypographyFoundations ComponentsFoundations TemplatesFoundations AnnouncementBase AvatarBase BadgeBase BreadcrumbBase ButtonBase Button GroupBase CarouselBase CheckboxBase ChipBase Close ButtonBase Date PickerBase DividerBase DropdownBase File UploadBase Icon ButtonBase InputBase Input OTPBase Link ButtonBase NotificationBase PaginationBase RadioBase