Most design systems were built for forms, tables, and dashboards. Charcoal is built for agent products, on a calm monochromatic backbone with a single black accent.
Guidelines, tokens, and components across four layers, documented and ready to install.
Install the packages, load the tokens, and drop your first Charcoal component into an app.
Learn more →71 token-driven, accessible primitives, from buttons and forms to trees, tables, and overlays.
Learn more →W3C DTCG design tokens compiled to CSS variables, a Tailwind theme, and typed JS.
Learn more →Conversational surfaces: prompt inputs, streaming text, citations, and message actions.
Learn more →Coordination and control for agents: approval gates, tool calls, plans, and run history.
Learn more →Runtime-composed interfaces: adaptive cards, dynamic forms, and schema-driven displays.
Learn more →A stable foundation you install, and three fast-evolving AI layers you copy into your repo and own. Every layer reads the same tokens, so it all looks like one product.
The stable base. Installed from npm so every adopter stays in sync.
The vocabulary of chat and conversation. Copy-in and own it.
Making autonomous work legible: state, cost, permission, and review.
Interfaces the model assembles at runtime from your data and schema.
Tokens and foundations are versioned npm packages so upgrades stay in sync. The AI layers are a copy-in registry: run one command, the source lands in your repo, and you fork it freely.
Start from a design system that already speaks the language of AI products.