IBM Design System Skill

When the user invokes this skill, apply the following design system to all UI generation. Use these exact design tokens, color values, typography specs, component styles, and layout principles to produce interfaces that match IBM's visual identity.

Reference Previews

For a visual reference of how this design system looks when implemented, see the bundled HTML previews:

• Light theme: preview.html
• Dark theme: preview-dark.html

Read these files when you need to verify exact visual implementation details, CSS values, or component structure.

1. Visual Theme & Atmosphere

IBM's website is the digital embodiment of enterprise authority built on the Carbon Design System — a design language so methodically structured it reads like an engineering specification rendered as a webpage. The page operates on a stark duality: a bright white (#ffffff) canvas with near-black (#161616) text, punctuated by a single, unwavering accent — IBM Blue 60 (#0f62fe). This isn't playful tech-startup minimalism; it's corporate precision distilled into pixels. Every element exists within Carbon's rigid 2x grid, every color maps to a semantic token, every spacing value snaps to the 8px base unit.

The IBM Plex type family is the system's backbone. IBM Plex Sans at light weight (300) for display headlines creates an unexpectedly airy, almost delicate quality at large sizes — a deliberate counterpoint to IBM's corporate gravity. At body sizes, regular weight (400) with 0.16px letter-spacing on 14px captions introduces the meticulous micro-tracking that makes Carbon text feel engineered rather than designed. IBM Plex Mono serves code, data, and technical labels, completing the family trinity alongside the rarely-surfaced IBM Plex Serif.