IBM
Identity
Media & Consumer
Bundled OpenDesign package for IBM, derived from curated DESIGN.md, tokens.css, and components.html fixtures.
Typography
Ag
Ag
Ag
--text-4xl · 60pxThe quick brown fox--text-3xl · 42pxThe quick brown fox--text-2xl · 32pxThe quick brown fox--text-xl · 20pxThe quick brown fox--text-lg · 18pxThe quick brown fox--text-base · 16pxThe quick brown fox--text-sm · 14pxThe quick brown fox--text-xs · 12pxThe quick brown foxPalette
#ffffffPage background — defines the brand canvas.#f4f4f4Card / lifted container background.#edf5ffTertiary surface tier (kami warm-sand).#161616Primary text color.#525252Secondary text tier (kami dark-warm).#6f6f6fSubtext / captions.#8d8d8dTertiary FG / metadata tier (kami stone).#c6c6c6Default border / card edge.#e0e0e0Inner row separator that should not visually compete.#0f62feBrand accent. ≤2 visible uses per screen (lint enforced).#ffffffFG when --accent is the bg.#24a148Success state.#f1c21bWarning state.#da1e28Danger state.Also named in DESIGN.md
#262626Secondary dark surfaces, hover states on dark backgrounds.#393939Tertiary dark, active states.#e8e8e8Hover state for Gray 10 surfaces.Imagery & layout
Radius
0px0px0px9999pxSpacing
--space-1 · 4px--space-2 · 8px--space-3 · 12px--space-4 · 16px--space-5 · 20px--space-6 · 24px--space-8 · 32px--space-12 · 48pxElevation
--elev-raisedLayout
Layout rules
- Base unit: 8px (Carbon 2x grid)
- Component spacing scale: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
- Layout spacing scale: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px
- Mini unit: 8px (smallest usable spacing)
- Padding within components: typically 16px
- Gap between cards/tiles: 1px (hairline) or 16px (standard)