IBM

Overview

IBM's design system embodies **Enterprise Clarity**—a refined aesthetic that prioritizes accessibility, precision, and trust through a carefully calibrated palette of deep blues (#0f62fe primary, #000579 accent) against clean white surfaces (#ffffff). The brand serves global enterprises navigating AI transformation, hybrid cloud adoption, and digital governance. The visual language combines IBM Plex Sans typography (light 300 weight for headlines, regular 400 for body) with structured layouts and minimal ornamentation, evoking competence and forward-thinking innovation without excess. The UI conveys calm authority: every interaction is deliberate, every color choice purposeful.

Voice and personality: precise, measured, and solution-focused. IBM speaks in declarative statements grounded in data and outcomes—never breathless marketing speak. Vocabulary favors concrete nouns ("governance," "transformation," "architecture") over abstractions. Example sentence in brand voice: "Scale AI through governance—unified data, governed systems, integrated architecture." The tone is respectful of the user's time and intelligence; CTAs are action-oriented ("Download the full report," "Drive smarter transformation") rather than curiosity-bait.

Colors

IBM's color system is anchored in **Enterprise Blue**, a strategic accent palette designed for clarity and trust in high-stakes environments. **Primary (#0f62fe)** is the signature brand blue used exclusively on primary CTAs, focus states, and key interactive elements—it commands attention without aggression. Applied at 100% opacity on white backgrounds, it achieves WCAG AAA contrast (21:1 ratio). **Secondary (#3699f1)** and **Tertiary (#4589ff)** provide supporting accent layers for secondary actions, badges, and data visualization; these are never used for primary CTAs to maintain hierarchy. **On-surface (#161616)** is the dominant text color, a near-black that ensures readability at 12px+ (contrast ratio 17.5:1 against white). **Surface stack** progresses from white (#ffffff) through gr

Typography

IBM Plex Sans is the sole typeface family, chosen for its geometric clarity and multilingual support (Arabic, Hebrew, Japanese, Korean variants included). The type hierarchy is built on **weight contrast** rather than size alone: **Display (60px, 300 weight)** and **Headline-lg (40px, 400 weight)** establish page structure with generous line-height (68px, 48px respectively) and negative letter-spacing (-0.04em, -0.02em) to tighten visual density. **Body-md (16px, 400 weight, 24px line-height)** is the baseline for all running text, ensuring 1.5x line-height for readability. **Label-md (14px, 600 weight, 20px line-height, 0.16px letter-spacing)** is reserved for button text and form labels, where the heavier weight and tight tracking provide tactile emphasis. On small labels (12px) over bus

Layout

IBM's layout system uses a **12-column fluid grid** with a max-width of 1280px (1280px container, 24px gutter). Page rhythm is established through **lg spacing (40px)** for section separation and **md spacing (24px)** for component padding. The hero section spans full-width with a 2-column asymmetric layout: headline and CTAs occupy the left 40% (5 columns), while hero imagery fills the right 60% (7 columns). Cards and content blocks use **md padding (24px)** internally and are separated by **lg spacing (40px)** vertically. Whitespace is treated as a design material—never compress spacing below the semantic scale (xs 4px, sm 12px, md 24px, lg 40px, xl 64px). On mobile (< 768px), switch to single-column layout with full-width cards and increased vertical spacing (lg 40px between sections).

Elevation & Depth

IBM's depth model is **shadow-based and minimal**, avoiding glassmorphism or excessive layering. Three elevation levels are defined: **Level 1 (sm, 0 1px 2px rgba(0,0,0,0.06))** for subtle separation of interactive elements like buttons and form inputs. **Level 2 (md, 0 3px 8px rgba(0,0,0,0.15))** for cards, modals, and secondary containers that require clear visual separation from the background. **Level 3 (lg, 0px 2px 12px 2px rgba(0,0,0,0.25))** for overlays, dropdowns, and highest-priority modals. Shadows are always soft (blur 8-12px, spread 0-2px) and use black at 6-25% opacity—never pure

Shapes

IBM employs **Architectural Minimalism** in its border-radius strategy: sharp, intentional, and purposeful. **Buttons use 0.5rem (8px)** for a subtle, professional appearance—not fully rounded, maintaining geometric precision. **Cards and containers use 0.75rem (12px)** to provide slightly more visual softness while preserving the structured aesthetic. **Inputs and form fields use 0.5rem (8px)** to align with buttons and maintain visual consistency. **Badges and pills use full (9999px)** for maximum roundness, signaling secondary or supplementary information. **No element uses border-radius: 0

Components

Action Elements **Button-primary** (#0f62fe, 48px height, 15px 16px padding, 0.5rem radius) is the dominant CTA. Apply `box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2)` to all button states. On hover, maintain the same background color but increase shadow to `0px 2px 3px 0px rgba(0,0,0,0.2)` (no change in this case, but ensure no flattening). On focus, apply the outline pattern: `0px 0px 0px 1px rgba(255,255,255,1), 0px 0px 0px 4px #3699f1`. On active, shift background to #000579 (dark blue). On disabled, use surface-container-high (#c6c6c6) background with cursor: not-allowed and no shadow.

**Button-secondary** (white background, primary blue border, 40px border-radius for pill shape, 3.5px padding) is used for secondary actions and navigation. Hover state shifts background to primary-co

Do's and Don'ts

**Do**

• Do use primary blue (#0f62fe) exclusively for primary CTAs, focus states, and key interactive affordances—never for body text or backgrounds.
• Do maintain 1.5x line-height (24px for 16px body text) and never compress line-height below 1.4 for readability.
• Do apply the focus outline pattern (1px white inner border + 4px secondary blue outer border) to all interactive elements for accessibility.
• Do use IBM Plex Sans at 300 weight for display headlines and 400 weight for body—never use weights outside the 300–600 range.
• Do respect the spacing scale (4px, 12px, 24px, 40px, 64px) and never introduce arbitrary spacing values.
• Do apply exactly one shadow per element from the elevation scale (sm, md, lg)—never stack multiple shadows.

**Don't**

• Don't use primary blue for body text, backgrounds, or decorative elements—reserve it for interactive affordances only.
• Don't mix border-radius values within a component family (e.g., use 8px for all buttons, not 4px on some and 12px on others).
• Don't apply shadows and borders simultaneously on the same element; use one or the other for visual clarity.
• Don't use color alone to convey state changes—always pair color shifts with shadow elevation or outline patterns for accessibility.
• Don't compress line-height below 1.4 or use font-size below 16px on mobile without explicit accessibility testing.
• Don't introduce new colors outside the defined palette; all UI elements must map to the Material 3 color token system.