An open source, light-first design system and agentic workflow primitives. A monochromatic backbone with a single, restrained black accent. No bloat. Still evolving.
Every design system I've used was built for CRUD apps: forms, tables, dashboards. When I started designing AI-native products, the gaps became obvious. There were no components for approval gates where a human decides whether an agent proceeds. No reasoning traces that show users why an AI made a decision. No confidence indicators, no token counters, no execution timelines.
Teams were either building these from scratch on every project or bolting AI features onto systems that weren't designed for them. The results were inconsistent, inaccessible, and hard to maintain.
Charcoal exists because AI products have fundamentally different interaction patterns than traditional software. Agents need approval gates. Users need transparency into what the AI is doing and why. Costs need to be visible. And all of it needs to work within a cohesive design language that scales.
The system is a work in progress, built to flex as the AI landscape shifts. What matters now is getting the primitives right.
Leading this effort. Charcoal is a solo endeavor I took on to streamline AI-native design across IBM's distribution design team. The gap I saw, designers reinventing agentic UI patterns on every engagement, was as much a consistency and efficiency problem as a design one. Charcoal exists so applicable projects in the distribution sector have a shared foundation to build from without waiting for a central system to catch up to the way AI products actually need to work.
The token system is the core of Charcoal. A single source of truth defines the light-first monochromatic palette, the single black accent, spacing scale, typography, and semantic colors. Everything is organized into categories that components consume as design tokens.
Tokens are organized into semantic categories: colors (a neutral ramp, the single black accent, and status), spacing (4px base unit, 13-step scale), typography (Inter for UI, JetBrains Mono for code), radius, and motion (durations, easing functions). Elevation comes from borders and surfaces, not shadows.
The restraint is deliberate. Rather than expanding the palette for AI, the differentiation lives in the component layers. Agent state, confidence, tool status, and cost are expressed through purpose-built components that read these same tokens, not through extra colors.
Tokens are authored in the W3C DTCG format and compiled with Style Dictionary into --ch-* CSS custom properties, a Tailwind theme layer, and a typed JS module. Components consume the CSS variables directly, so theming happens at the token layer with no runtime wiring.
Components are organized into four layers. Each builds on the previous without redundancy. Layer 1 handles standard UI. Layers 2-4 are what make Charcoal different: primitives purpose-built for AI products that no other design system ships. The component inventory is actively evolving.
When an AI agent takes an action in the real world, sends an email, queries a database, writes code, there needs to be a moment where a human can see what's about to happen and decide whether to proceed. That's not a modal with an "OK" button. It's an approval gate that shows the action, the consequences of approving, the consequences of rejecting, and the confidence level of the agent making the request.
When multiple agents are working in parallel, each calling different tools, each at different stages of completion, users need a way to see the full picture without getting overwhelmed. That's Agent Status Cards and Parallel Thread Views, not a list of log entries.
When an agent hands off work to another agent, users need to see what was passed, what context was included, and what was left out. That's the Agent Handoff Chain, not an invisible backend event.
These aren't edge cases. They're the core interaction patterns of agentic products. Every team building with LLMs hits these problems. Charcoal gives them production-ready components instead of starting from scratch.
Individual components are building blocks. Patterns show how they compose into real interfaces. Each pattern uses components from multiple layers to demonstrate how the system works as a whole, not just as a parts catalog.
Charcoal is a work in progress, now structured as a monorepo: design tokens and foundation components as installable packages, with the AI-Native, Agentic, and Generative UI layers distributed as a copy-in component registry. The foundation is set across all four layers, built on a W3C DTCG token pipeline and a light-first monochromatic language with a single black accent that stays out of the way.
Next up is a hosted documentation and registry site, deeper accessibility work, and keeping the Figma library in sync with the code. What comes after that is driven by real usage and the patterns that emerge as AI products mature.