Ciele design system
Complete features composed from the same components: tables, conversations, editors, and settings. Try the full interaction before reading the implementation.
Explore individual componentsA complete operational list with sorting, filtering, column resizing, selection, row actions and pagination.
Data displayA complete message-entry control with model and action menus, submit and stop states.
AI & chatThe full self-assessment card and saved result for each supported study format.
AI & chatA complete canvas control surface with selection, pan, zoom and radial commands.
FormsA marketing feature with a preview, expanded content and related navigation.
SurfacesA destructive-action dialog with a deliberate confirmation step.
SurfacesA sortable operational table with animated row values and an empty-state slot.
Data displayA weekly opening-hours editor with enabled days and multiple time ranges.
FormsMember faces and a searchable add-person picker presented as one operation.
FormsTheme, avatar and interface-feedback settings presented as one coherent form.
FormsA complete group of metrics with comparison periods, trends and loading states.
Data displayRuntime-generated tables and study results inside the shared chat reply contract.
AI & chatA complete chat transcript that connects header, messages, answers, sources and feedback.
AI & chatA configured model, credential source and composer allow-list in one connected form.
FormsA connected Markdown draft and rendered answer preview.
FormsA keyboard-navigable search field with selectable result rows.
NavigationA complete settings form with group navigation, field hints, a toggle and a local save action.
FormsThe site’s complete desktop navigation and expandable feature menu.
NavigationThe complete Overview activity card, with three metrics, sparklines, deltas and its destination.
OverviewSetup steps, completion marks, progress and a link to the next unfinished step.
OverviewQuality rings, supporting counts, prior-period comparisons and estimated spend in one card.
OverviewRouting order, built-in and default markers, enabled states and the destination in one Overview block.
OverviewSource icons, ingestion states, relative timestamps and collection totals within an Overview card.
OverviewRecent conversation titles, visitor identities, flow badges, ratings, counts and timestamps.
OverviewA responsive group of related dashboard metrics, with sparklines, context and comparisons.
AnalyticsThe complete Insights chart: metrics, assistant and channel breakdowns, legends, zoom and a data table.
AnalyticsConversation duration and questions per conversation, with separate axes and summary statistics.
AnalyticsDaily estimated spend, chart interactions and a caption identifying the selected surface.
AnalyticsAn input-token share gauge and token heat calendar with peak-day, daily-average and weekday summaries.
AnalyticsDaily spend mix with surface colors, totals, shares, calls and token counts.
AnalyticsA provider-to-model treemap with drill-down, contextual totals and its card caption.
AnalyticsThe full model table, including provider, spend, calls, input/output tokens and share bars.
AnalyticsPipeline-stage spend with labelled bars, proportions and the dashboard card frame.
AnalyticsLatency distribution and trend, grouped as variations of the same analysis block.
AnalyticsCurrent and prior rates, percentage-point changes and comparison context in a complete card.
AnalyticsA ranked flow chart, selection, legend and time-granularity caption in one block.
AnalyticsComplete Reliability, Answer accuracy and Autonomy cards with rate visuals, counts and supporting charts.
Analytics