Prism prismd.fr

Extracted · 10 sections · 17 colors · grade C

ibm.com

Accent #5e6ad2 · IBM Plex Sans — chaque valeur ci-dessous est mesurée via getComputedStyle(), jamais affirmée à la main.

colors

faces

shadows

keyframes

Get DESIGN.md tokens.json Repeindre ce design

rendu réel · source de vérité

ibm.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(198, 198, 198) as the singular interactive color. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside IBM Plex Sans as the primary typeface. A layered elevation system (7 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 76 keyframe animations plus transition-driven interactions.

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

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

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

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

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

Components — the closed vocabulary

8 component families · 38 variants counted on the live DOM

Component	Variants 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

Layout — structure & dimensions

5 layout metrics measured

max Width1200px

header Height0px

sidebar Width325px

gap16px

container Padding24px

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

Do's & Don'ts

13 enforceable rules pulled verbatim from the spec

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)

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.

$ npx prismd add ibm

DESIGN.md · narrative spec tokens.json