We rebuilt the C3.ai design system (C3 Ion) from the ground up on Storybook so AI features feel native, not bolted on. One token source, one component library, and every pattern designed for AI signal — alerts, search, multi-agent plans, and assistants — at enterprise scale.
Enterprise design systems were optimized for forms, tables, and reports — humans entering data, humans reading it back. Our customers now lean on AI for every step: detecting anomalies, surfacing insights, drafting documents, answering questions. The interface needs to communicate signal vs. noise, confidence, provenance, and next best action — natively, at every layer of the stack.
Every color, spacing value, radius, and shadow lives in Figma's Mode collection and flows downstream through a single generator. Designers and engineers ship against the same atoms. Dark mode, accessibility, and density tweaks happen once, propagate everywhere.
Figma
Mode collection
tokens.json
extracted spec
tokens.css
--theme-* vars
Tailwind preset
semantic classes
React + Radix
40 primitives
The Alerts page in C3 Reliability — rebuilt entirely from our new primitives. NavRail for module switching, PageHeader for context, MetricCards with sparkline trends for at-a-glance state, a DataGrid with column-level filters and faceted chips for fast triage. Every AI signal has a path to action in three clicks or fewer.
A dedicated "Gen AI" item leads the NavRail with a Sparkles icon — AI capabilities aren't buried in a settings menu.
1,174 AI-detected alerts are surfaced as a delta + sparkline trend. The user sees direction and magnitude before reading a single row.
Faceted chips for Status and Importance live in the toolbar; per-column filters live in the header row. No separate filter sidebar to context-switch through.
An Alert Category column captures True Positive vs. False Positive — the labels feed back into the model, closing the loop between user judgement and AI training.
Not retrofitted. Designed in from the first commit, validated against real C3 products.
Right-docked assistant pattern. Title bar, suggestion pills, message bubbles, expandable "thinking" steps, follow-up actions, prompt input.
Header, value, tone-aware delta, optional sparkline, caption. KPI tiles that read at a glance and trend at a longer look.
Tone variants for success/warning/danger plus muted/info for neutral state. Outline + soft + solid appearances for different emphasis levels.
Toolbar chips, inline header-row filters, global search, active-filter pills. Built for triaging hundreds of AI-flagged items quickly.
Jason Bedient
AI Chat To Do List), parallel Sub Agents and execution traces (AI Chat Processes), queued user prompts, file attachments, and context pills—working identically in both full-page workspaces and the global right-hand side panel.
Defined in C3 Ion's screen anatomy as Region C, the Side Nav Panel expands to a 256 px hierarchical page and folder tree or collapses to a 48 px icon rail so users reclaim horizontal canvas for dense tables and maps—and automatically switches context when entering an object or workflow.
Every screen anatomy rule, role token (--c3-style-*), and component guideline lives inside Storybook alongside dedicated Agent Workflows—so designers, engineers, and AI coding agents can build local demos, add Storybook page templates, and audit Figma parity from a single playbook.
Product teams can ask an agent to "build a demo, prototype, or mockup" and get a clickable screen assembled strictly from C3 Ion library components.
Built-in workflows let agents audit any component against its Figma node, fix token or spacing drift, and verify visual & accessibility tests.
Screen construction guides define Regions A–E (top bar, action header, side nav, content, side panel) so teams stop re-litigating layout per app.
New page templates, token updates, and component docs follow structured playbooks—keeping Storybook, Figma, and production code in lockstep.