ibm
An enterprise-marketing canvas faithful to Carbon Design System: white surfaces, charcoal type, IBM Blue (#0f62fe) as the single confident accent, and a deliberately flat-square aesthetic where corners stay at 0–4px. Type runs IBM Plex Sans at light weight 300 for display sizes (
colors
#0f62fe #ffffff typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
design.md source
---
version: alpha
name: IBM-design-analysis
description: "An enterprise-marketing canvas faithful to Carbon Design System: white surfaces, charcoal type, IBM Blue (#0f62fe) as the single confident accent, and a deliberately flat-square aesthetic where corners stay at 0–4px. Type runs IBM Plex Sans at light weight 300 for display sizes (a brand signature) and 400/600 for body and emphasis. Cards live as thin-bordered tiles with no shadow; sections separate via subtle gray rows. The chrome is square, the typography is light, and the only color in the system is one assertive blue — the result reads as old-world enterprise gravitas reframed for the cloud era."
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"
inverse-ink: "#ffffff"
inverse-ink-muted: "#c6c6c6"
hairline: "#e0e0e0"
hairline-strong: "#161616"
blue-60: "#0043ce"
blue-80: "#002d9c"
blue-hover: "#0050e6"
semantic-success: "#24a148"
semantic-warning: "#f1c21b"
semantic-error: "#da1e28"
semantic-info: "#0f62fe"
typography:
display-xl:
fontFamily: IBM Plex Sans
fontSize: 76px
fontWeight: 300
lineHeight: 1.17
letterSpacing: -0.5px
display-lg:
fontFamily: IBM Plex Sans
fontSize: 60px
fontWeight: 300
lineHeight: 1.17
letterSpacing: -0.4px
display-md:
fontFamily: IBM Plex Sans
fontSize: 42px
fontWeight: 300
lineHeight: 1.20
letterSpacing: 0
headline:
fontFamily: IBM Plex Sans
fontSize: 32px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0
card-title:
fontFamily: IBM Plex Sans
fontSize: 24px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0
subhead:
fontFamily: IBM Plex Sans
fontSize: 20px
fontWeight: 400
lineHeight: 1.40
letterSpacing: 0
body-lg:
fontFamily: IBM Plex Sans
fontSize: 18px
fontWeight: 400
lineHeight: 1.50
letterSpacing: 0
body:
fontFamily: IBM Plex Sans
fontSize: 16px
fontWeight: 400
lineHeight: 1.50
letterSpacing: 0.16px
body-sm:
fontFamily: IBM Plex Sans
fontSize: 14px
… components
display headline
body copy from ibm tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#0f62fe",
font: ""IBM Plex Sans", system-ui, sans-serif",
}; extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on ibm's visual identity.