IBM Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

21tokens

10type steps

5radius steps

4pxspacing base

IBM, in one page

IBM's marketing system is a faithful application of Carbon Design System — IBM's open-source enterprise design system. The dominant surface is {colors.canvas} pure white with {colors.surface-1} light gray for elevation, charcoal {colors.ink} (#161616) for text, and IBM Blue {colors.primary} (#0f62fe) as the single brand accent.

The defining choice is flat geometry: every CTA, every card, every input, every container uses square corners ({rounded.none} 0px) with thin 1px borders. There are no rounded pills, no soft shadows, no atmospheric gradients. The system is engineered, not stylized.

IBM Plex Sans carries the entire type hierarchy. Display sizes (76 / 60 / 42px) run at weight 300 — IBM's signature light display treatment that makes 76px feel calmer than competing brands' 700-weight display. Body type sits at weight 400 with letter-spacing: 0.16px (a Carbon precision detail) and line-height 1.50. The voice reads as careful, technical, and trustworthy.

The system reaches for color rarely — IBM Blue marks links, primary CTAs, and the rare full-bleed CTA banner. Charcoal carries every other surface that isn't white. The result is enterprise gravitas without the enterprise stiffness: rigorous, light-weighted, and intentionally restrained.

Key Characteristics:

Carbon Design System — IBM's marketing chrome IS Carbon. Buttons are square, inputs are square-with-bottom-rule, corners stay at 0px.
Light-weight display type: Plex Sans at weight 300 for 42–76px headlines is the brand's typographic signature.
One accent color: {colors.primary} IBM Blue carries every link, primary CTA, and CTA banner. There is no second brand color.
White canvas + light gray ({colors.surface-1}) + charcoal ({colors.ink}) cover 95% of surfaces.
Footer inverts to charcoal ({colors.inverse-canvas} #161616) — the only dark surface above the page break.
Card hierarchy is carried by 1px hairlines and surface change, never by drop shadow.
letter-spacing: 0.16px on body is a Carbon precision detail — the small positive tracking is part of the brand voice.
Page rhythm: utility bar → top nav → hero with light-weight headline → feature card grid → customer logo marquee → enterprise feature row → training section → newsletter / sign-in CTA → dark footer.

Do's and don'ts

Do

Use {rounded.none} 0px on every CTA, card, input, and container. The flat-square aesthetic is the brand.
Pair Plex Sans weight 300 for display sizes (42px+) with weight 400 for body. Resist the urge to bold the headline.
Reserve {colors.primary} IBM Blue for primary CTAs, links, focused-input underlines, and CTA banner. Do not use it as a card background or eyebrow color.
Apply letter-spacing: 0.16px to body sizes. It's a Carbon precision detail and part of the typographic voice.
Use surface change (canvas → surface-1) and 1px hairlines for card hierarchy. Skip drop shadows.
Stick to sentence case for eyebrows and section labels — Carbon resists all-caps tracking.
Invert to {colors.inverse-canvas} only at the footer; the rest of the page stays light.

Don't

Don't round corners on buttons, cards, or inputs. Even 4px rounded corners break the Carbon look.
Don't bold display headlines. Plex Sans at weight 300 is the brand voice; weight 700 makes it look generic.
Don't add atmospheric depth (gradient backdrops, drop shadows, atmospheric overlays) outside the documented soft-blue hero gradient.
Don't introduce a second brand color. IBM Blue is the only chromatic accent; status semantics use the documented green / yellow / red.
Don't replace IBM Plex Sans with Inter or Helvetica without preserving the letter-spacing: 0.16px and weight-300 display treatment.
Don't use pill-shaped buttons. Carbon uses square corners; pills read as a different brand.
Don't write all-caps tracked eyebrows. Carbon's eyebrows are sentence case at 14px.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the IBM design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #0f62fe
- on-primary: #ffffff
- ink: #161616
- ink-muted: #525252
- ink-subtle: #8c8c8c
- canvas: #ffffff
- surface-1: #f4f4f4
- surface-2: #e0e0e0
- inverse-canvas: #161616
- inverse-surface-1: #262626

Type:
- families: IBM Plex Sans
- scale: 12, 14, 16, 18, 20, 24, 32, 42, 60
- weights: 300, 400, 600

Shape:
- radius: 0, 2, 4, 6, 8

Spacing: 4, 8, 11, 12, 16, 24, 32, 48, 64, 96

Rules:
- Use `{rounded.none}` 0px on every CTA, card, input, and container. The flat-square aesthetic is the brand.
- Pair Plex Sans weight 300 for display sizes (42px+) with weight 400 for body. Resist the urge to bold the headline.
- Reserve `{colors.primary}` IBM Blue for primary CTAs, links, focused-input underlines, and CTA banner. Do not use it as a card background or eyebrow color.
- Apply `letter-spacing: 0.16px` to body sizes. It's a Carbon precision detail and part of the typographic voice.
- Use surface change (`canvas` → `surface-1`) and 1px hairlines for card hierarchy. Skip drop shadows.
- Stick to sentence case for eyebrows and section labels — Carbon resists all-caps tracking.

Avoid:
- Don't round corners on buttons, cards, or inputs. Even 4px rounded corners break the Carbon look.
- Don't bold display headlines. Plex Sans at weight 300 is the brand voice; weight 700 makes it look generic.
- Don't add atmospheric depth (gradient backdrops, drop shadows, atmospheric overlays) outside the documented soft-blue hero gradient.
- Don't introduce a second brand color. IBM Blue is the only chromatic accent; status semantics use the documented green / yellow / red.
- Don't replace IBM Plex Sans with Inter or Helvetica without preserving the `letter-spacing: 0.16px` and weight-300 display treatment.
- Don't use pill-shaped buttons. Carbon uses square corners; pills read as a different brand.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages: ibm.com (home), /software/ai-productivity, /consulting, /products/cloud-pak-for-aiops, /products/bare-metal-servers, community.ibm.com.

Brand & Accent

IBM Blue ({colors.primary}): The single brand accent. Links, primary CTAs, CTA banner backgrounds, focus rings.
Blue 60 ({colors.blue-60}): Hovered link state.
Blue 80 ({colors.blue-80}): Pressed primary button.
Blue Hover ({colors.blue-hover}): Hover state for primary buttons.

Surface

Canvas ({colors.canvas}): Default page background.
Surface 1 ({colors.surface-1}): Light gray (#f4f4f4) — input fields, alternate-row stripes, subtle section bands.
Surface 2 ({colors.surface-2}): Slightly darker gray (#e0e0e0) — disabled fields, hairline-as-fill for separators.
Hairline ({colors.hairline}): 1px borders on cards, inputs, dividers.
Hairline Strong ({colors.hairline-strong}): 1px charcoal underline on focused inputs (Carbon's signature focus treatment).
Inverse Canvas ({colors.inverse-canvas}): Charcoal #161616 — footer surface.
Inverse Surface 1 ({colors.inverse-surface-1}): One step lighter than inverse canvas — footer column dividers, hovered footer items.

Text

Ink ({colors.ink}): All headlines and emphasized body type — charcoal #161616.
Ink Muted ({colors.ink-muted}): Secondary type at #525252 — meta, sub-headlines, footer body.
Ink Subtle ({colors.ink-subtle}): Tertiary type at #8c8c8c — disabled, helper text, captions.
Inverse Ink ({colors.inverse-ink}): White on charcoal — footer headings.
Inverse Ink Muted ({colors.inverse-ink-muted}): Light gray on charcoal — footer body.

Semantic

Success Green ({colors.semantic-success}): Carbon green-50 — success states.
Warning Yellow ({colors.semantic-warning}): Carbon yellow-30 — warning states.
Error Red ({colors.semantic-error}): Carbon red-60 — error states; danger button background.
Info Blue ({colors.semantic-info}): Identical to primary — informational badges.

Type scaleRead the full spec

Font Family

IBM Plex Sans — IBM's open-source proprietary typeface (free for any use). Geometric, slightly humanist, designed specifically for enterprise UI. Fallback: Helvetica Neue, Arial, sans-serif.

The same family carries display, body, and caption — there is no display + body pairing. Hierarchy is carried by size + weight rather than by family change. Plex Sans is also free / open-source under the SIL Open Font License — making it the easiest custom face on this list to substitute for in implementation.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xl}`	76px	300	1.17	-0.5px	Largest hero headline
`{typography.display-lg}`	60px	300	1.17	-0.4px	Section opener headlines
`{typography.display-md}`	42px	300	1.20	0	Sub-section headlines, hero card title
`{typography.headline}`	32px	400	1.25	0	Card collection heading, FAQ category
`{typography.card-title}`	24px	400	1.33	0	Feature card title
`{typography.subhead}`	20px	400	1.40	0	Lead body next to display headlines
`{typography.body-lg}`	18px	400	1.50	0	Hero subhead, lead paragraphs
`{typography.body}`	16px	400	1.50	0.16px	Default body
`{typography.body-sm}`	14px	400	1.29	0.16px	Card body, footer columns
`{typography.body-emphasis}`	14px	600	1.29	0.16px	Selected tab label, emphasized body line
`{typography.caption}`	12px	400	1.33	0.32px	Captions, meta, utility bar
`{typography.button}`	14px	400	1.29	0.16px	All button labels
`{typography.eyebrow}`	14px	400	1.29	0.16px	Section eyebrows (Carbon avoids strong eyebrows; uses sentence case 14px)

Principles

Light-weight display is the brand voice. Plex Sans at weight 300 for 76px headlines reads as quietly authoritative — switching to 700 would make it look like every other enterprise site.
Carbon's letter-spacing: 0.16px on body sizes is a precision detail. Don't remove it.
No mono on marketing surfaces (Plex Mono exists but lives in product surfaces only).
Eyebrow typography uses sentence case 14px — Carbon resists the all-caps tracked eyebrow common to other enterprise brands.
Line-heights tighten on display, relax on body: 1.17 at display-xl, 1.50 at body — proportional to size.

Note on Font Substitutes

IBM Plex Sans is free and open-source (SIL OFL license) and available on Google Fonts. It is the recommended implementation. The Plex family also includes Plex Mono and Plex Serif if expanded typographic needs arise.

Components and layoutRead the full spec

Buttons

button-primary — Blue solid CTA. The default primary across all pages.

Background {colors.primary}, text {colors.on-primary}, type {typography.button}, padding 12px 16px, rounded {rounded.none}.
Pressed state lives in button-primary-pressed (background shifts to {colors.blue-80}).

button-secondary — Charcoal solid button — Carbon's "secondary" treatment.

Background {colors.ink}, text {colors.inverse-ink}, type {typography.button}, padding 12px 16px, rounded {rounded.none}.

button-tertiary — White button with blue 1px border + blue text. Used for tertiary CTAs.

Background {colors.canvas}, text {colors.primary}, type {typography.button}, rounded {rounded.none}, padding 12px 16px. (Border in implementation: 1px {colors.primary}.)

button-ghost — Plain text + chevron, no background until hover.

Background {colors.canvas}, text {colors.primary}, type {typography.button}, rounded {rounded.none}, padding 12px 16px.

button-danger — Carbon's destructive variant.

Background {colors.semantic-error}, text {colors.on-primary}, type {typography.button}, rounded {rounded.none}, padding 12px 16px.

Cards & Containers

feature-card — Default feature highlight tile on the home and product pages.

Background {colors.canvas}, text {colors.ink}, type {typography.body}, rounded {rounded.none}, padding 24px. Stroked with 1px {colors.hairline}.

feature-card-elevated — Same shape on {colors.surface-1} ground — used for "Recommended" cards in the latest-content carousel.

Background {colors.surface-1}, otherwise identical structure.

product-card — Larger product showcase tile.

Background {colors.canvas}, text {colors.ink}, type {typography.body}, rounded {rounded.none}, padding 32px.

hero-card — Hero composition card with light-weight title, body, and CTA.

Background {colors.canvas}, text {colors.ink}, type {typography.display-md}, rounded {rounded.none}, padding 48px.

cta-banner — Full-width blue CTA panel near the bottom of the page.

Background {colors.primary}, text {colors.on-primary}, type {typography.headline}, rounded {rounded.none}, padding 48px.

resource-tile — Smaller article / case-study tile.

Background {colors.canvas}, text {colors.ink}, type {typography.body-sm}, rounded {rounded.none}, padding 16px.

customer-logo-tile — Single tile in the customer marquee on the home page (Ferrari, Pfizer, etc.).

Background {colors.canvas}, text {colors.ink-muted}, type {typography.caption}, rounded {rounded.none}, padding 24px. 1px hairline border.

Inputs & Forms

text-input + text-input-focused + text-input-error — Carbon's input chrome.

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.none}, padding 11px 16px.
Focus state replaces the bottom 1px hairline with a 2px {colors.primary} underline (Carbon's signature focus treatment).
Error state adds 2px {colors.semantic-error} bottom underline.

newsletter-input — The "Stay connected" newsletter capture on the home page.

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.none}, padding 11px 16px. Adjacent submit is button-primary.

Tabs

product-tab + product-tab-selected — The horizontal tab strip on product pages and the home "Recommended" carousel.

Default: {colors.canvas} background, {colors.ink-muted} text, rounded {rounded.none}, padding 16px 20px. Bottom 1px hairline.
Selected: {colors.canvas} background, {colors.ink} text, {typography.body-emphasis} weight, bottom 2px {colors.primary} underline. Same padding / rounding.

Navigation

top-nav — Sticky white bar with the IBM logomark left, nav categories center, and search / sign-in icons right.

Background {colors.canvas}, text {colors.ink}, type {typography.body-sm}, height 48px. 1px bottom hairline.

utility-bar — Slim gray ribbon above the top nav with location switch, contact, search shortcuts.

Background {colors.surface-1}, text {colors.ink-muted}, type {typography.caption}, height 32px.

Footer

footer — Charcoal footer ({colors.inverse-canvas}) with the IBM wordmark left and 5–6 columns of caption-sized links. The only inverted surface above the page break.

Background {colors.inverse-canvas}, text {colors.inverse-ink-muted}, type {typography.body-sm}, padding 64px 32px.

Spacing System

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
Max	1584px	Carbon max grid; gutters expand
Desktop-XL	1312px	Default desktop layout
Desktop	1056px	Card grid 4-up maintained
Tablet	672px	Card grid 4-up → 2-up; nav becomes hamburger
Mobile	320px	Single-column; display-xl scales 76px → ~32px

Touch Targets

Carbon spec: 48px minimum tap target. Buttons and inputs hold 48px on touch viewports.
Top-nav links grow from 36px to 48px tap height on touch.
Tab strip rows hold 48px tap height.

Collapsing Strategy

Top nav: links collapse to a hamburger overlay below 672px. Logomark and search icon stay on the bar.
Utility bar: hides below 672px to reclaim vertical space.
Card grid: 4-up → 2-up at 1056px → 1-up below 672px.
Display type: {typography.display-xl} 76px scales toward 42px on mobile while preserving the weight-300 treatment.
Footer: 6-column link grid → 3-column at tablet → 1-column at mobile.

Image Behavior

Customer logos in the marquee maintain aspect ratio and may collapse to 2-row scroll below 672px.
Hero illustrations scale proportionally; below 672px they may stack above the headline rather than sit beside it.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-ibm {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #161616;
  --heading-color: #161616;
  --link-color: #0f62fe;
  --link-hover-color: #014cd9;
  --border-color: #d5d5d5;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(22,22,22,0.06);
  --card-hover-shadow: 0 6px 18px rgba(22,22,22,0.12);
  --header-bg: #161616;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #686868;
  --button-bg: #0f62fe;
  --button-text-color: #ffffff;
  --button-hover-bg: #014cd9;
  --button-border: none;
  --button-border-radius: 4px;
  --button-secondary-bg: #f1f1f1;
  --button-secondary-text-color: #161616;
  --button-secondary-hover-bg: #e3e3e3;
  --button-secondary-border: 1px solid #d5d5d5;
  --prompt-bg: #f3f3f3;
  --prompt-text-color: #161616;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 4px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

expo 78.7%
bmw m 78.3%
bmw 77.7%
coinbase 77.2%
sony 75.9%

Where this came from

Source document: volt/design-md/ibm/DESIGN.md · 25.7 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.