Style with the C3 Design System
This page binds your application to the C3 look so it reads as a genuine product rather than a generic site. You add the design tokens and fonts, map them into your component library's theme, and register a chart theme. When you finish, your components render in the C3 palette, typeface, and density.
The sanctioned design-token package is still being finalized. Until it ships, styling means reproducing the token values in this page by hand, because depending on the C3 Agentic AI Platform styling packages pulls in a dependency chain that breaks the artifact build. If the sanctioned package ships on the documentation timeline, this page changes to consume it instead.
Before you begin
Have the application running and a component library chosen. The steps reproduce the values in the following palette, which carry the C3 look:
| Role | Value |
|---|---|
| Accent (blue-60) | #2266F0 |
| Status, green-60 | #008066 |
| Status, yellow-60 | #A65E00 |
| Status, red-60 | #DB1C3C |
| Page surface | #F7F8FA |
| Cards | #FFFFFF (white) |
| Text typeface | Inter |
| Data typeface | Roboto Mono |
| Corner radius | 4px |
| Chart series palette | #2266F0, #008066, #ED6921, #8D4BE3, #0CA0AB, #A65E00, #DB1C3C, #4F8DFF |
Step 1: Add the tokens and fonts
In your global stylesheet (index.css), declare the C3 design tokens as CSS custom properties, import the Inter and Roboto Mono web fonts, and set the page background to #F7F8FA. A component then reads a token directly:
<button
style={{
backgroundColor: 'var(--c3-style-colorBgSecondary)',
padding: 'var(--c3-style-space05)',
color: 'var(--c3-style-colorFgPrimary)',
}}
>End state: the --c3-style-* variables and the fonts load, and the page surface is the C3 gray.
Step 2: Map the tokens into your component library theme
In your theme file (theme.ts), map the C3 ramps onto your component library's theme, setting the accent to blue-60 #2266F0, the default radius to the tight 4px, and the font to Inter. A component library exposes a theme object for this, so you set the values once and every component follows.
End state: the library's components render with the C3 accent, radius, and font.
Step 3: Register the chart theme
Register a chart theme with the C3 series palette plus gray axis and text colors, so charts match the application rather than using the charting library's defaults. The exact registration call is specific to your charting library: with ECharts, the intended default, you pass a theme object to echarts.registerTheme and name it on the chart; another library exposes its own theme API. Set the series colors to the palette values above so every chart shares the C3 look.
End state: charts render in the C3 series palette.
Step 4: Confirm the C3 look
Load the application and confirm the accent is blue-60 rather than the library default, the corners are the tight 4px radius, the text is Inter, and any chart uses the C3 palette.
End state: the application reads as a C3 product.
Reproduce the values, do not depend on the packages
Reproduce the token values rather than depend on the C3 Agentic AI Platform styling packages, because the dependency breaks the build. Importing the cssLibrary JavaScript package pulls in a units dependency that fails the artifact build, whereas the token values as plain CSS carry no such chain. So the safe route today is to consume the values as CSS, which is why this page lists them rather than pointing at a package to install.
Decisions on this page
The two choices are where the tokens come from and which color scheme to build for.
| Decision | Options | Recommendation |
|---|---|---|
| Token source | reproduce the token values, or depend on cssLibrary | Reproduce the values until the sanctioned package ships |
| Color scheme | light or dark | Light, which is the canonical C3 product look |