novusedge/polished-artifacts/carbon

Carbon look

Paste tokens.css (this folder) at the top of the page's <style>. Use only its --pa-* tokens. Its @import is the Google Fonts stylesheet for IBM Plex, which the artifact CSP allows.

Type

• IBM Plex Sans for everything except code, which uses IBM Plex Mono. Weights: 300 for h1, 400 for body, 600 for emphasis. No Plex Serif.
• Scale (Carbon productive): h1 42/50 light, h2 28/36, h3 20/28, body 16/24, labels and captions 12/16 at the smallest. Use --pa-fs-* and --pa-lh-*.

Layout

• Core's page grid (layout.css) with --pa-col 1056px, the content width of Carbon's 2x grid at its lg breakpoint, and --pa-col-wide 1184px. Prose and data share the column.
• Inside the column, data regions may split into Carbon's 16 columns on wide screens, 4 under 672px.
• Spacing only from --pa-space-* (4, 8, 16, 24, 32, 48, 64, 96).
• Motion tokens are Carbon's productive curves (standard, entrance, exit) and its fast-02, moderate-02, slow-01 and slow-02 durations (110, 240, 400, 700ms), from @carbon/motion.

Surfaces

• Flat. --pa-radius is 0: square corners everywhere.
• Two layers only: --pa-bg for the page, --pa-surface for a data region that needs grouping (a table, a chart area). Never a surface inside a surface.
• 1px --pa-border dividers only where two groups would otherwise merge. No shadows, no coloured borders.

Components

• "Show all": a ghost button. <summary> text in --pa-interactive, no border, no background.
• Tables: header labels 12px or larger in --pa-text-2, sentence case; rows separated by 1px --pa-border; numbers right-aligned with tabular numerals.
• Key figure: the number at --pa-fs-h2 weight 300, a label of 12px or larger below it in --pa-text-2. No box around it.
• No tags or chips. A category goes in a table column as text.

Charts

• Bar charts use Recharts with square bar ends (radius 0), because Carbon Charts cannot print values on bars and caps bar width at 16px, which leaves thin bars floating in wide empty bands.
• Other chart types use Carbon Charts with theme: "white" (light) or "g100" (dark), toolbar off, legend top-left, plus vendor/carbon-charts.css from core (published alongside the page).
• Turn Carbon Charts' grid off with grid: { x: { enabled: false }, y: { enabled: false } }, and stop it shortening category labels with truncation: { type: "none" } on the category axis.
• Series colours in --pa-cat-1…5 order; the focal series takes --pa-cat-1.
• Carbon Charts draws axis ticks at 10px. Raise them: .chart svg text { font-size: 12px !important; } (with the chart's container carrying class="chart").
• Horizontal bars (Recharts layout="vertical") plot the data top to bottom in array order, so sort it largest first.
• A log-scale axis needs an explicit domain whose lower bound sits below the smallest value, or that bar draws with zero length.
• Without React, use @carbon/charts (the same library, vanilla): new SimpleBarChart(el, { data, options }).

Diagrams

Paste core's mermaid.css after this look's tokens; it colours every diagram from --pa-* in both themes. Nodes stay square rectangles (Carbon's radius is 0), which is Mermaid's default flowchart shape.

References

Check these before inventing a pattern the look doesn't cover:

• Carbon Design System
• Color and color tokens
• Typography and type sets
• 2x Grid and spacing
• Data visualization and color palettes
• Carbon Charts
• Accessibility