# IBM — Design System
> Global technology innovator in AI, automation, and hybrid cloud solutions.
- **Canonical:** https://uiuxskills.com/library/ibm
- **Source:** https://www.ibm.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:10:57.170Z

---

---
version: alpha
name: IBM
description: Global technology innovator in AI, automation, and hybrid cloud solutions.
tone: Authoritative, innovative, clear, and professional.
color-scheme: light
colors:
  primary: "#0F62FE"
  surface: "#FFFFFF"
  surface-dim: "#F4F4F4"
  on-surface: "#161616"
  on-primary: "#FFFFFF"
  error: "#DA1E28"
  success: "#24A148"
  outline: "#E0E0E0"
  focus-ring: "#0F62FE"
  neutral: "#525252"
typography:
  display-lg:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#0353E9"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    padding: "{spacing.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#0353E9"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.neutral}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FFF1F1"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

IBM maintains a professional, authoritative, and high-tech visual identity. The brand uses a clean, grid-based layout with a focus on clarity, technical precision, and enterprise-grade reliability.

## Colors

The color strategy focuses on high-contrast, functional utility, anchored by the iconic IBM Blue to signify innovation and trust.

*   Primary (#0F62FE): The core brand color used for primary actions and branding.
*   Surface (#FFFFFF): Standard white background for high-contrast content readability.
*   Surface-dim (inferred) (#F4F4F4): Light gray for section backgrounds and subtle separation.
*   On-surface (inferred) (#161616): Primary text color for high readability on light surfaces.
*   On-primary (inferred) (#FFFFFF): White text for use on primary blue backgrounds.
*   Error (inferred) (#DA1E28): Standard error state color for alerts and validation.
*   Success (inferred) (#24A148): Standard success state color.
*   Outline (inferred) (#E0E0E0): Subtle border color for dividers and input fields.
*   Focus-ring (inferred) (#0F62FE): High-visibility focus state for accessibility.
*   Neutral (inferred) (#525252): Secondary text and muted UI elements.

## Typography

Typography is strictly utilitarian, utilizing a consistent Helvetica/Arial sans-serif stack to ensure maximum legibility across enterprise applications.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for section titles.
*   Headline-lg (inferred): Used for feature headers.
*   Headline-md (inferred): Used for sub-headers.
*   Headline-sm (inferred): Used for card titles.
*   Body-md (inferred): Standard body text.
*   Label-sm (inferred): Used for small UI labels and metadata.

## Layout

IBM utilizes a strict, grid-based layout system designed for high-density information. The site features a consistent header height of 49px and employs a wide-container approach to maximize screen real estate on desktop. The page structure follows this sequence: nav, hero, news-ticker, recommended-content, product-announcements, social-proof, and footer. The design is mobile-first, with navigation collapsing into a drawer and grid layouts stacking vertically on smaller viewports.

## Elevation & Depth

Depth is used sparingly, primarily through subtle shadows on interactive cards to distinguish them from the background. Elevation values are inferred based on the brand's minimalist aesthetic: `elevation.sm` provides card lift; `elevation.md` is reserved for dropdowns or popovers; `elevation.lg` is used for modal or drawer overlays.

## Shapes

The design language is intentionally sharp and industrial, reflecting a philosophy of technical precision. All containers and components, including cards and input fields, utilize 0px border-radius to maintain a clean, rigid, and professional appearance.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with `{typography.label-sm}`. Use these for main calls to action; they are designed to be imperative and clear. Secondary buttons use a transparent background with a `{colors.primary}` border.

### Card
Cards are strictly rectangular with 0px radius. They use `{colors.surface}` and are often paired with `{elevation.sm}` to create subtle separation from the background. Use `{spacing.md}` for internal padding to maintain density.

### Input Field
Input fields feature `{colors.outline}` borders that transition to `{colors.focus-ring}` on focus. They should remain sharp-edged and use `{spacing.sm}` for internal padding.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Avoid using `{colors.primary}` for secondary text. |
| Maintain a sharp, 0px border-radius for all `{card}` components. | Do not use rounded corners on `{card}` or `{input-field}`. |
| Use `{typography.headline-lg}` for main section headers. | Do not use `{typography.display-lg}` for body copy. |
| Apply `{spacing.md}` for consistent internal padding in `{card}`. | Avoid excessive use of shadows; keep elevation minimal. |
| Use `{colors.outline}` for all structural dividers. | Never use low-contrast text colors on `{colors.surface}`. |
| Ensure all `{button-primary}` elements have sufficient contrast. | Do not mix font families; stick to the Helvetica/Arial stack. |
| Use `{colors.focus-ring}` for interactive focus states. | Never use non-standard border-radius on `{input-field}`. |
| Apply `{typography.label-sm}` for small UI metadata. | Do not use decorative fonts for UI labels. |

## Content Style

CTA style is imperative and action-oriented, utilizing direct verbs like "Try," "Download," or "Join" to drive user engagement.

Heading tone is benefit-driven, professional, and declarative, ensuring the user understands the value proposition immediately.

Copy density is concise and scannable. Paragraphs are kept short, utilizing frequent links and clear headings to maintain a high-information, low-friction rhythm.

## Imagery & Icons

The imagery style is a mix of high-quality professional photography and abstract 3D geometric illustrations. Photography should feel grounded and corporate, while illustrations represent technical concepts like scalability and speed through clean, sharp forms. Logo lockups must remain consistent with the brand's established visual identity.