Carbon

Overview

Carbon is a dense information UI. Geometry stays square, type stays productive, and the pieces that make a screen feel like Carbon are the data table and the UI shell.

This file is the white theme. Gray 10, Gray 90, and Gray 100 are the other public themes and are not tokenized here. The type is IBM Plex Sans for UI and IBM Plex Mono for code. Productive styles are the default. Expressive display type is a separate set.

Colors

White theme roles from the published theme. Primary is Blue 60.

• Primary (#0F62FE): Primary buttons, links, and selected controls. Hover is #0050E6. Active is #002D9C.
• On primary (#FFFFFF): Text on primary and on the shell.
• Secondary (#393939): Secondary buttons and tooltips, with white text.
• Text (#161616) and text secondary (#525252): Primary copy and metadata.
• Surface (#FFFFFF): Pages and table bodies.
• Layer (#F4F4F4): Fields.
• Layer accent (#E0E0E0): Table headers.
• Shell (#161616): The UI shell header.
• Error (#DA1E28): Error text.

Typography

Productive styles. Sizes follow the Carbon type scale. Weights are light 300, regular 400, and semibold 600.

• Heading compact 01: 14px semibold, for table headers.
• Heading 03, 04, and 05: 20px, 28px, and 32px regular, for page titles.
• Body 01 and 02: 14px and 16px regular. Body 01 is the default UI text.
• Label 01: 12px, for helper text.
• Code 01: IBM Plex Mono at 12px.

Layout

The mini unit is 8px. Spacing steps used here are 4, 8, 16, 24, and 32px. From the large breakpoint the grid is 16 columns with a 16px margin. Keep density even. Do not loosen a data table to look like a marketing page.

Elevation & Depth

Depth is a layer change. A field is layer on surface. A table header is layer-accent. Menus may use the theme shadow. Do not add a soft card shadow under every panel.

Shapes

Controls in this file are square. The published scale also has 2px and 4px radii for rarer cases. Buttons, fields, tables, and the shell stay at 0.

Components

• Buttons: Primary, secondary, and the primary hover and active fills. Height 40px, horizontal padding 16px, body-01 type, square corners.
• Input fields: 40px on layer, square. Errors use the error color for the message.
• Checkboxes and radio buttons: Selected fill is primary with an on-primary mark. The box is 16px and square.
• Lists: Rows on surface. Metadata uses text secondary and label-01.
• Data table: Body on surface in body-01. Header on layer-accent in heading-compact-01.
• UI shell: Header is 48px, shell background, on-primary text.
• Tooltips: Secondary fill, on-secondary text, square.

Do’s and Don’ts

• Do keep one primary button in a toolbar or form footer.
• Do use the productive type set for product UI.
• Don’t round buttons or fields in this theme.
• Don’t put body text on primary blue. Primary is a fill, and the label is on-primary.
• Do meet WCAG AA. White on primary blue does.