prism·mdthe design press
EXTRACTED · 10 SECTIONS · 17 COLORS · GRADE C 68/100

ibm.com

17 colours · IBM Plex Sans woff2 captured · real motion · desktop + mobile shots — every number measured, never written.

17
colors
15
faces
7
shadows
76
keyframes
01

Color — roles, semantics & the full census

17 colors measured · click any swatch to copy

Canvas
#ffffff
AAA 18.1:1
Ink
#161616
AAA 18.1:1
Accent
#c6c6c6
Fail 1.71:1
Line
#525252
AAA 7.81:1
Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

17 colors mined from the live renderexpand
02

Type — the ladder, in the real face

7 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl
display-xl53.6469px · 300
headline
headline16px · 600 · ×3.35
body
body16px · 400 · ×1.00
body sm
body-sm21.8824px · 400 · ×0.73
caption
caption12px · 400 · ×1.82
button
button14px · 600 · ×0.86
mono
mono14px · 400 · ×1.00
03

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale
xxs · 2px
xs · 8px
sm · 16px
md · 20px
base · 24px
lg · 28px
xl · 32px
2xl · 48px
3xl · 64px
Radius
none
0px
xs
4px
sm
8px
md
28px
lg
36px
xl
44px
full
9999px
04

Depth — elevation is extracted, not invented

7 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
05

Motion — easings, transitions & live keyframes

2 easing curves · 76 keyframes · hover a tile to preview

Easing & transitions
transition-2ease-in-out
transition-4cubic-bezier(0.2, 0, 0.38, 0.9)
76 keyframe animations extracted
cds--hide-feedback
cds--show-feedback
cds--skeleton
cds--tooltip-fade
expand
collapse
loading-animation
sticky-header-slide-in
loadingAnimation
spin
ajo-jc-skeleton-pulse
ajo-tc-skeleton-pulse
06

Components — the closed vocabulary

8 component families · 38 variants counted on the live DOM

ComponentVariants found
buttons×10
cards×10
links×9
heading H2×3
badges×2
cta Banner×2
heading H1×1
heading H5×1
Component style specs (§4)expand

Buttons

Ghost

  • Background: transparent
  • Text: #525252 {colors.hairline}
  • Padding: 16px
  • Radius: 0px
  • Font: 16px weight 400
  • Use: Subtle action, toolbar, nav button

Icon Button

  • Background: transparent
  • Text: #161616 {colors.ink-subtle}
  • Padding: 1px 4px
  • Radius: 0px
  • Font: 14px weight 600
  • Use: Toolbar/UI icons

Secondary

  • Background: #c6c6c6 {colors.primary}
  • Text: #8d8d8d
  • Padding: 14px 63px 14px 15px
  • Radius: 4px
  • Border: 1px solid rgb(198, 198, 198)
  • Font: 14px weight 400
  • Use: Secondary action

Secondary

  • Background: #393939
  • Text: #ffffff {colors.background}
  • Padding: 1px 0px 1px 16px
  • Radius: 0px
  • Font: 14px weight 400
  • Use: Secondary action

Primary Brand

  • Background: #0f62fe {colors.primary-hover}
  • Text: #ffffff {colors.background}
  • Padding: 1px 0px 1px 16px
  • Radius: 0px
  • Border: 1px solid rgba(0, 0, 0, 0)
  • Font: 14px weight 400
  • Use: Primary CTA / brand action

Inputs & Forms

Text Input

  • Background: #f4f4f4 {colors.surface-2}
  • Text: #161616 {colors.ink-subtle}
  • Padding: 0px 16px
  • Radius: 0px
  • Border: 1px solid border-color
  • Font: 14px weight 400
  • Use: Text fields, search inputs
  • Focus: outline: rgba(15, 98, 254, 0.886) solid 2px
07

Layout — structure & dimensions

5 layout metrics measured

header 0px 1200px max-width
max Width1200px
header Height0px
sidebar Width325px
gap16px
container Padding24px
08

Responsive — real breakpoints

38 media-query stops read from the live CSS

20px
22px
41px
42px
65px
66px
75px
81px
82px
98px
99px
320px
410px
480px
550px
575px
600px
640px
671px
672px
760px
767px
768px
799px
800px
991px
1023px
1024px
1055px
1056px
1099px
1100px
1200px
1311px
1312px
1583px
1584px
1585px
09

Do's & Don'ts

13 enforceable rules pulled verbatim from the spec

Do
Use Near-Black (`#161616`) for text — not pure black, it's warmer and more readable
Use IBM Plex Sans as the primary typeface — it defines the brand personality
Keep font weights between 300-400 — the system uses a narrow weight range for subtle hierarchy
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use Light Grey (`#c6c6c6`) as the primary accent — it's the brand's signature interactive color
Each card includes a top image — imagery is part of the card identity, not optional
Use a 4-column grid on desktop — density matters for this content type
Don't
Don't use pure black (`#000000`) for text — the near-black adds warmth
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't use weight 700 (bold) or above — 400 is the maximum weight in this system
Don't invent new shadow values — use only the extracted shadow levels
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't over-build the footer — this design keeps it minimal (2 cols, 0 links)
10

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the ibm.com design system. Canvas #ffffff · ink #161616 · accent #c6c6c6. Type: IBM Plex Sans — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.
Every value above was getComputedStyle-verified.
A · InstrumentB · Press