### IBM - Enterprise technology. - Carbon design system, structured blue palette - description: "An enterprise-marketing canvas faithful to Carbon Design Sys…
Real data. Real impact.
Emerging
Developers
Per week
Excellent
Skills give you superpowers. Install in 30 seconds.
version alpha
name IBM
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 fontWeight: 400 lineHeight: 1.29 letterSpacing: 0.16px body-emphasis: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 600 lineHeight: 1.29 letterSpacing: 0.16px caption: fontFamily: IBM Plex Sans fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0.32px button: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 400 lineHeight: 1.29 letterSpacing: 0.16px eyebrow: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 400 lineHeight: 1.29 letterSpacing: 0.16px
rounded none: 0px xs: 2px sm: 4px md: 6px lg: 8px pill: 9999px full: 9999px
spacing xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px
components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 12px 16px button-primary-pressed: backgroundColor: "{colors.blue-80}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" button-secondary: backgroundColor: "{colors.ink}" textColor: "{colors.inverse-ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 12px 16px button-tertiary: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 12px 16px button-ghost: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 12px 16px button-danger: backgroundColor: "{colors.semantic-error}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 12px 16px feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 24px feature-card-elevated: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 24px product-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 32px hero-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.none}" padding: 48px cta-banner: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.headline}" rounded: "{rounded.none}" padding: 48px text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 11px 16px text-input-focused: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 11px 16px text-input-error: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 11px 16px newsletter-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 11px 16px product-tab: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 16px 20px product-tab-selected: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-emphasis}" rounded: "{rounded.none}" padding: 16px 20px resource-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 16px customer-logo-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 24px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" height: 48px utility-bar: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.none}" height: 32px footer: backgroundColor: "{colors.inverse-canvas}" textColor: "{colors.inverse-ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 64px 32px
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.
Source pages: ibm.com (home), /software/ai-productivity, /consulting, /products/cloud-pak-for-aiops, /products/bare-metal-servers, community.ibm.com.
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.
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.
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.
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.
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.
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 Sect
proprietary
Source: https://github.com/VoltAgent/awesome-design-md?ref=explainx
1,500+ AI skills, agents & workflows. Install in 30 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.