Components

One selection control arranged along a draggable arc.

A changing text label with a static reduced-motion fallback.

One dashboard statistic, including numeric, text and unavailable values.

A shared action control with visual variants, sizes and pending states.

A single-line native text field with focus, invalid and disabled states.

Multiline text fields for instructions, descriptions, messages and Markdown.

A semantic label associated with one form control.

One binary-setting control with shared geometry, small sizing and compatibility import paths.

Independent selections and indeterminate controls for tables and settings.

One choice from a labelled set, including hints and unavailable options.

Single and multiple selection menus, grouped options and supporting descriptions.

Compact labelled selectors for list, conversation and analytics filters.

Segmented navigation with a sliding active pill, links and animated content panels.

Compact labels in neutral variants and six semantic tones.

One content surface with matching header, body and footer parts.

A modal surface with accessible titles, descriptions and action slots.

Anchored content with consistent placement and focus management.

A trigger and action menu with groups, separators and selected items.

A short explanation connected to an interactive control.

Expandable question-and-answer rows with animated disclosure content.

A direction-aware transition between panels and route content.

A draggable mobile surface with viewport snap points and gesture-aware dismissal.

A shared date-selection contract for single dates and ranges.

Colour swatches, a picker surface and editable hex values for widget styling.

Drop files, review the queue and show progress, completion or retry states.

Reorder flow steps and starter buttons with an explicit drag handle.

A text field that preserves typing while producing a list of values.

A deterministic identity mark with static and animated variants.

A consistent hover animation contract for package and local glyphs.

A shared illustrated mark, guidance and an optional action when a list has no content.

Neutral placeholders shaped as text, avatars or cards.

Clipboard acknowledgement that keeps the control stable during copied and failed states.

Draggable width controls for the sidebar, chat preview and operational detail rails.

Changing labels roll in place while static copy keeps its normal typography.

A transition from a placeholder to content once loading completes.

A label transitions in place as a task or tool changes state.

Pointer-responsive depth for an infrequent marketing interaction.

An animated grid surface that gives the pricing page its background structure.

A compact rail of selectable previews for sections and messages.

A compact choice between light, dark and system appearance.

Layered background blur that softens an edge of the marketing scene.

Time-series lines with hover and keyboard-readable values.

One metric with its value, context, change and an optional trend slot.

A single progress gauge with compact and semantic-threshold variants.

The role-alignment context and content parts for a single chat message.

An expandable source summary with named references and source counts.

A turn-level progress summary that expands to its execution trace.

One tool call with status, expandable output and a copy action.

The attached-file strip with reading, ready, failed and removal states.

One answer’s useful-or-not feedback selection.

A plan's pending, running, completed and cancelled steps in one collapsible list.

Stacked notices with expansion, dismissal and semantic status.

Nested folders and resources with active selection in chat and preview sidebars.

A hierarchical path with compact overflow for long navigation trails.

The Ciele AI identity mark at different sizes.

A password field with an accessible visibility control.

A labelled field that shares the console input geometry and owns focus and error feedback.

A field title and hint with the same typographic weight as other form labels.

A page or group heading with an operational console variant and a marketing variant.

A status dot and label for a live, idle or failed operation.

A knowledge source status with indexing and failure states.

An assistant flow trust tier in one compact marker.

A content surface with a pointer-following highlight.

The title, description and icon face reused by a feature card.

An accessible modal whose content can transition between views.

A shared-layout dialog that grows from its own trigger.

An anchored menu that transitions between related content views.

A command menu opened from a surface context action.

A shared active background for menu items and selectable rows.

A compact overflow control for one row’s actions.

A collapsible side rail for details alongside a chat.

Native semantic table parts for a simple read-only tabular layout.

A sortable and filterable column control with a stable heading.

Page navigation and a page-size control for a result set.

A row-opening link that preserves normal link and keyboard behavior.

The shared row-checkbox and bulk-action contract.

A person’s image with a deterministic fallback when no image is available.

A Teammate identity mark with its own configured seed.

A compact group identity built from its member faces.

A drawn feather glyph with a pointer-triggered animation.

The icon contract used by configured flow buttons.

A control glyph that reflects an expanded or collapsed sidebar.

A local assistant glyph with the shared icon animation contract.

A code snippet with optional language tabs and clipboard feedback.

Syntax-highlighted code lines shared by agent tool output.

A complete syntax-highlighted chat code surface with language metadata and clipboard feedback.

Numeric updates animate in place with a stable tabular layout.

A subtle moving highlight for text that represents active work.

A row context that limits initial text entrances and preserves later value updates.

A restrained entrance for an infrequent page or section change.

A transition that reveals content after its shaped placeholder.

A compact device preference for interface audio.

A pointer-responsive wrapper for an infrequent marketing target.

A deliberate drag gesture for a destructive action.

Categorical values as bars.

Parts of a whole as labelled ring segments.

A part-to-whole distribution rendered as a grid.

Changes in multiple categories across a shared time axis.

A comparison between two periods for each category.

The distribution of values for each compared category.

Hierarchical category values within one area.

A time series with an interactive selection window.

Daily intensity with focus and date selection.

A compact trend with value and change context.

Rank changes across multiple periods.

The shared configuration and tooltip adapter for a Recharts chart.

A local chart theme scope that connects charts to the app’s theme tokens.

A numeric value that transitions between updates.

A chart surface whose caption and controls share one footer.

Concentric SVG rings showing progress across measured windows.

One chat bubble with matching content parts.

An assistant answer surface with sources, copy and feedback.

The rich-text renderer used for assistant answers and previews.

A transcript viewport with pinned scrolling and a message navigation rail.

A chat’s identity and history, new-chat and fullscreen controls.

A sign-in surface with ready, loading and unavailable states.

The visual busy-state wrapper for a prompt composer.

The Flow Canvas text-command entry control.

Keyboard-selectable suggestions anchored to a composer input.

One model’s credential-source choice with an automatic fallback.

The models offered to a person while composing a message.

A compact overlap of source marks beside a source summary.

Named source rows with document or external-link presentation.

An inline source marker with a hover or focus preview.

One turn’s ordered tool calls, thoughts and plan stages.

A small animated state mark for active assistant work.

The label presentation used while a reasoning segment is active.

A single student-readable line describing the current work.

A collapsible reasoning segment with active and completed states.

A tool operation’s pending, approved or denied decision control.

A shared reveal surface for collapsible agent content.

The transient target hint shown while a file is above the composer.

A transcript summary of the people who reacted to a message.

A searchable palette of emoji with selected and disabled states.

The format-choice menu that inserts a study command in a composer.

Transient success, error, warning and informational feedback.

The canvas’s tool, add-step and zoom controls.

A compact fan of canvas commands with pointer and keyboard selection.

The graph backdrop rendered inside its canvas root.

A compact section navigation with one active destination.

One selectable search result with its icon, label and metadata.

The app link wrapper that preserves the user’s navigation intent.

Connector marks keyed by the application provider.

The provider-connection identity used in settings.

The compact provider identity used by composer model choices.

A monochrome GitHub identity glyph for website links.

The illustrated Ciele ghost identity used by authentication surfaces.

Expandable source chips with concept, collection and original-source metadata.

The contextual Ciele mark that peeks from a hovered or focused action.

A recording control that submits audio to a configured transcription endpoint.

An answer’s read-aloud control with playback, pause and cancellation.