IBM

Overview

IBM's marketing system is a faithful application of **Carbon Design System** — IBM's open-source enterprise design system. The dominant surface is `{colors.canvas}` pure white with `{colors.surface-1}` light gray for elevation, charcoal `{colors.ink}` (#161616) for text, and IBM Blue `{colors.primary}` (#0f62fe) as the single brand accent.

The defining choice is **flat geometry**: every CTA, every card, every input, every container uses square corners (`{rounded.none}` 0px) with thin 1px borders. There are no rounded pills, no soft shadows, no atmospheric gradients. The system is engineered, not stylized.

**IBM Plex Sans** carries the entire type hierarchy. Display sizes (76 / 60 / 42px) run at weight **300** — IBM's signature light display treatment that makes 76px feel calmer than competing brands' 700-weight display. Body type sits at weight 400 with `letter-spacing: 0.16px` (a Carbon precision detail) and line-height 1.50. The voice reads as careful, technical, and trustworthy.

The system reaches for color rarely — IBM Blue marks links, primary CTAs, and the rare full-bleed CTA banner. Charcoal carries every other surface that isn't white. The result is enterprise gravitas without the enterprise stiffness: rigorous, light-weighted, and intentionally restrained.

**Key Characteristics:**

• **Carbon Design System** — IBM's marketing chrome IS Carbon. Buttons are square, inputs are square-with-bottom-rule, corners stay at 0px.
• **Light-weight display type**: Plex Sans at weight 300 for 42–76px headlines is the brand's typographic signature.
• **One accent color**: `{colors.primary}` IBM Blue carries every link, primary CTA, and CTA banner. There is no second brand color.
• White canvas + light gray (`{colors.surface-1}`) + charcoal (`{colors.ink}`) cover 95% of surfaces.
• Footer inverts to charcoal (`{colors.inverse-canvas}` #161616) — the only dark surface above the page break.
• Card hierarchy is carried by 1px hairlines and surface change, never by drop shadow.
• `letter-spacing: 0.16px` on body is a Carbon precision detail — the small positive tracking is part of the brand voice.
• Page rhythm: utility bar → top nav → hero with light-weight headline → feature card grid → customer logo marquee → enterprise feature row → training section → newsletter / sign-in CTA → dark footer.

Colors

> Source pages: ibm.com (home), /software/ai-productivity, /consulting, /products/cloud-pak-for-aiops, /products/bare-metal-servers, community.ibm.com.

Brand & Accent

• **IBM Blue** ({colors.primary}): The single brand accent. Links, primary CTAs, CTA banner backgrounds, focus rings.
• **Blue 60** ({colors.blue-60}): Hovered link state.
• **Blue 80** ({colors.blue-80}): Pressed primary button.
• **Blue Hover** ({colors.blue-hover}): Hover state for primary buttons.

Surface

• **Canvas** ({colors.canvas}): Default page background.
• **Surface 1** ({colors.surface-1}): Light gray (#f4f4f4) — input fields, alternate-row stripes, subtle section bands.
• **Surface 2** ({colors.surface-2}): Slightly darker gray (#e0e0e0) — disabled fields, hairline-as-fill for separators.
• **Hairline** ({colors.hairline}): 1px borders on cards, inputs, dividers.
• **Hairline Strong** ({colors.hairline-strong}): 1px charcoal underline on focused inputs (Carbon's signature focus treatment).
• **Inverse Canvas** ({colors.inverse-canvas}): Charcoal #161616 — footer surface.
• **Inverse Surface 1** ({colors.inverse-surface-1}): One step lighter than inverse canvas — footer column dividers, hovered footer items.

Text

• **Ink** ({colors.ink}): All headlines and emphasized body type — charcoal #161616.
• **Ink Muted** ({colors.ink-muted}): Secondary type at #525252 — meta, sub-headlines, footer body.
• **Ink Subtle** ({colors.ink-subtle}): Tertiary type at #8c8c8c — disabled, helper text, captions.
• **Inverse Ink** ({colors.inverse-ink}): White on charcoal — footer headings.
• **Inverse Ink Muted** ({colors.inverse-ink-muted}): Light gray on charcoal — footer body.

Semantic

• **Success Green** ({colors.semantic-success}): Carbon green-50 — success states.
• **Warning Yellow** ({colors.semantic-warning}): Carbon yellow-30 — warning states.
• **Error Red** ({colors.semantic-error}): Carbon red-60 — error states; danger button background.
• **Info Blue** ({colors.semantic-info}): Identical to primary — informational badges.

Typography

Font Family

• **IBM Plex Sans** — IBM's open-source proprietary typeface (free for any use). Geometric, slightly humanist, designed specifically for enterprise UI. Fallback: `Helvetica Neue, Arial, sans-serif`.

The same family carries display, body, and caption — there is no display + body pairing. Hierarchy is carried by **size + weight** rather than by family change. Plex Sans is also free / open-source under the SIL Open Font License — making it the easiest custom face on this list to substitute for in implementation.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 76px | 300 | 1.17 | -0.5px | Largest hero headline |

| `{typography.display-lg}` | 60px | 300 | 1.17 | -0.4px | Section opener headlines |

| `{typography.display-md}` | 42px | 300 | 1.20 | 0 | Sub-section headlines, hero card title |

| `{typography.headline}` | 32px | 400 | 1.25 | 0 | Card collection heading, FAQ category |

| `{typography.card-title}` | 24px | 400 | 1.33 | 0 | Feature card title |

| `{typography.subhead}` | 20px | 400 | 1.40 | 0 | Lead body next to display headlines |

| `{typography.body-lg}` | 18px | 400 | 1.50 | 0 | Hero subhead, lead paragraphs |

| `{typography.body}` | 16px | 400 | 1.50 | 0.16px | Default body |

| `{typography.body-sm}` | 14px | 400 | 1.29 | 0.16px | Card body, footer columns |

| `{typography.body-emphasis}` | 14px | 600 | 1.29 | 0.16px | Selected tab label, emphasized body line |

| `{typography.caption}` | 12px | 400 | 1.33 | 0.32px | Captions, meta, utility bar |

| `{typography.button}` | 14px | 400 | 1.29 | 0.16px | All button labels |

| `{typography.eyebrow}` | 14px | 400 | 1.29 | 0.16px | Section eyebrows (Carbon avoids strong eyebrows; uses sentence case 14px) |

Principles

• **Light-weight display is the brand voice.** Plex Sans at weight 300 for 76px headlines reads as quietly authoritative — switching to 700 would make it look like every other enterprise site.
• **Carbon's `letter-spacing: 0.16px`** on body sizes is a precision detail. Don't remove it.
• **No mono** on marketing surfaces (Plex Mono exists but lives in product surfaces only).
• **Eyebrow typography uses sentence case 14px** — Carbon resists the all-caps tracked eyebrow common to other enterprise brands.
• **Line-heights tighten on display, relax on body**: 1.17 at display-xl, 1.50 at body — proportional to size.

Note on Font Substitutes

IBM Plex Sans is **free and open-source** (SIL OFL license) and available on Google Fonts. It is the recommended implementation. The Plex family also includes Plex Mono and Plex Serif if expanded typographic needs arise.

Layout

Spacing System

• **Base unit**: 4px (Carbon's signature 4-pixel grid).
• **Tokens (front matter)**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
• Card interior padding: `{spacing.lg}` 24px on feature cards; `{spacing.xl}` 32px on product cards; `{spacing.xxl}` 48px on hero cards and CTA banners.
• Button padding: 12px vertical · 16px horizontal — Carbon spec.
• Form input padding: 11px vertical · 16px horizontal.

Grid & Container

• Carbon's 16-column grid at desktop, scaling to 8 / 4 columns at tablet / mobile.
• Max content width sits around 1584px (Carbon's max-grid breakpoint).
• Card grids are 4-up at desktop, 2-up at tablet, 1-up at mobile.
• The customer logo marquee uses fixed-width tiles in a flex row, scrolling horizontally on smaller viewports.

Whitespace Philosophy

Carbon uses precise alignment to a 4-pixel grid as its whitespace system. Sections separate via thin gray rows (`{colors.surface-1}`) rather than via large vertical gaps. Content is dense by design — IBM's customers expect to see a lot on a page, not a lot of air.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow, no border | Default for body type, hero text, footer body |

| 1 (hairline) | 1px `{colors.hairline}` border on canvas | Feature cards, inputs, list items |

| 2 (surface lift) | `{colors.surface-1}` background on canvas | Alternate-row banners, hovered cards |

| 3 (focus ring) | 2px `{colors.primary}` outline + 1px `{colors.hairline-strong}` underline | Focused input, focused button |

Carbon resists drop shadows on marketing — depth is carried by surface change and 1px hairlines. The exception is product / app surfaces (Carbon documents shadow tokens for elevated panels), but the marketing site barely uses them.

Decorative Depth

• **Soft blue gradient backdrops** appear behind some hero illustrations — a faint blue-to-white wash that warms the canvas without competing with the headline.
• **No atmospheric depth.** No spotlight cards, no pastel section blocks, no gradient panels.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Default — every button, card, input, container |

| `{rounded.xs}` | 2px | Small badges (rare exception) |

| `{rounded.sm}` | 4px | Avatar circles squared, dropdown menus |

| `{rounded.md}` | 6px | (Used rarely; documented for completeness) |

| `{rounded.lg}` | 8px | (Used rarely; documented for completeness) |

| `{rounded.pill}` | 9999px | Status pills, badges in product UI (rare on marketing) |

The brand commits to flat 0px corners. The other tokens exist for product / mobile surfaces but rarely surface on marketing.

Photography & Illustration Geometry

• IBM uses photography (people, hardware, sports cars) and abstract illustration (geometric mesh, dotted patterns) interchangeably.
• Image frames are flat — no rounded corners.
• Customer logo tiles sit on `{rounded.none}` 0px tiles with thin 1px borders.

Components

Buttons

**`button-primary`** — Blue solid CTA. The default primary across all pages.

• Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}`, padding 12px 16px, rounded `{rounded.none}`.
• Pressed state lives in `button-primary-pressed` (background shifts to `{colors.blue-80}`).

**`button-secondary`** — Charcoal solid button — Carbon's "secondary" treatment.

• Background `{colors.ink}`, text `{colors.inverse-ink}`, type `{typography.button}`, padding 12px 16px, rounded `{rounded.none}`.

**`button-tertiary`** — White button with blue 1px border + blue text. Used for tertiary CTAs.

• Background `{colors.canvas}`, text `{colors.primary}`, type `{typography.button}`, rounded `{rounded.none}`, padding 12px 16px. (Border in implementation: 1px `{colors.primary}`.)

**`button-ghost`** — Plain text + chevron, no background until hover.

• Background `{colors.canvas}`, text `{colors.primary}`, type `{typography.button}`, rounded `{rounded.none}`, padding 12px 16px.

**`button-danger`** — Carbon's destructive variant.

• Background `{colors.semantic-error}`, text `{colors.on-primary}`, type `{typography.button}`, rounded `{rounded.none}`, padding 12px 16px.

Cards & Containers

**`feature-card`** — Default feature highlight tile on the home and product pages.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.none}`, padding 24px. Stroked with 1px `{colors.hairline}`.

**`feature-card-elevated`** — Same shape on `{colors.surface-1}` ground — used for "Recommended" cards in the latest-content carousel.

• Background `{colors.surface-1}`, otherwise identical structure.

**`product-card`** — Larger product showcase tile.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.none}`, padding 32px.

**`hero-card`** — Hero composition card with light-weight title, body, and CTA.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.display-md}`, rounded `{rounded.none}`, padding 48px.

**`cta-banner`** — Full-width blue CTA panel near the bottom of the page.

• Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.headline}`, rounded `{rounded.none}`, padding 48px.

**`resource-tile`** — Smaller article / case-study tile.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, rounded `{rounded.none}`, padding 16px.

**`customer-logo-tile`** — Single tile in the customer marquee on the home page (Ferrari, Pfizer, etc.).

• Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, rounded `{rounded.none}`, padding 24px. 1px hairline border.

Inputs & Forms

**`text-input`** + **`text-input-focused`** + **`text-input-error`** — Carbon's input chrome.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.none}`, padding 11px 16px.
• Focus state replaces the bottom 1px hairline with a 2px `{colors.primary}` underline (Carbon's signature focus treatment).
• Error state adds 2px `{colors.semantic-error}` bottom underline.

**`newsletter-input`** — The "Stay connected" newsletter capture on the home page.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.none}`, padding 11px 16px. Adjacent submit is `button-primary`.

Tabs

**`product-tab`** + **`product-tab-selected`** — The horizontal tab strip on product pages and the home "Recommended" carousel.

• Default: `{colors.canvas}` background, `{colors.ink-muted}` text, rounded `{rounded.none}`, padding 16px 20px. Bottom 1px hairline.
• Selected: `{colors.canvas}` background, `{colors.ink}` text, `{typography.body-emphasis}` weight, bottom 2px `{colors.primary}` underline. Same padding / rounding.

Navigation

**`top-nav`** — Sticky white bar with the IBM logomark left, nav categories center, and search / sign-in icons right.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 48px. 1px bottom hairline.

**`utility-bar`** — Slim gray ribbon above the top nav with location switch, contact, search shortcuts.

• Background `{colors.surface-1}`, text `{colors.ink-muted}`, type `{typography.caption}`, height 32px.

Footer

**`footer`** — Charcoal footer (`{colors.inverse-canvas}`) with the IBM wordmark left and 5–6 columns of caption-sized links. The only inverted surface above the page break.

• Background `{colors.inverse-canvas}`, text `{colors.inverse-ink-muted}`, type `{typography.body-sm}`, padding 64px 32px.

Do's and Don'ts

Do

• Use `{rounded.none}` 0px on every CTA, card, input, and container. The flat-square aesthetic is the brand.
• Pair Plex Sans weight 300 for display sizes (42px+) with weight 400 for body. Resist the urge to bold the headline.
• Reserve `{colors.primary}` IBM Blue for primary CTAs, links, focused-input underlines, and CTA banner. Do not use it as a card background or eyebrow color.
• Apply `letter-spacing: 0.16px` to body sizes. It's a Carbon precision detail and part of the typographic voice.
• Use surface change (`canvas` → `surface-1`) and 1px hairlines for card hierarchy. Skip drop shadows.
• Stick to sentence case for eyebrows and section labels — Carbon resists all-caps tracking.
• Invert to `{colors.inverse-canvas}` only at the footer; the rest of the page stays light.

Don't

• Don't round corners on buttons, cards, or inputs. Even 4px rounded corners break the Carbon look.
• Don't bold display headlines. Plex Sans at weight 300 is the brand voice; weight 700 makes it look generic.
• Don't add atmospheric depth (gradient backdrops, drop shadows, atmospheric overlays) outside the documented soft-blue hero gradient.
• Don't introduce a second brand color. IBM Blue is the only chromatic accent; status semantics use the documented green / yellow / red.
• Don't replace IBM Plex Sans with Inter or Helvetica without preserving the `letter-spacing: 0.16px` and weight-300 display treatment.
• Don't use pill-shaped buttons. Carbon uses square corners; pills read as a different brand.
• Don't write all-caps tracked eyebrows. Carbon's eyebrows are sentence case at 14px.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Max | 1584px | Carbon max grid; gutters expand |

| Desktop-XL | 1312px | Default desktop layout |

| Desktop | 1056px | Card grid 4-up maintained |

| Tablet | 672px | Card grid 4-up → 2-up; nav becomes hamburger |

| Mobile | 320px | Single-column; display-xl scales 76px → ~32px |

Touch Targets

• Carbon spec: 48px minimum tap target. Buttons and inputs hold 48px on touch viewports.
• Top-nav links grow from 36px to 48px tap height on touch.
• Tab strip rows hold 48px tap height.

Collapsing Strategy

• **Top nav**: links collapse to a hamburger overlay below 672px. Logomark and search icon stay on the bar.
• **Utility bar**: hides below 672px to reclaim vertical space.
• **Card grid**: 4-up → 2-up at 1056px → 1-up below 672px.
• **Display type**: `{typography.display-xl}` 76px scales toward 42px on mobile while preserving the weight-300 treatment.
• **Footer**: 6-column link grid → 3-column at tablet → 1-column at mobile.

Image Behavior

• Customer logos in the marquee maintain aspect ratio and may collapse to 2-row scroll below 672px.
• Hero illustrations scale proportionally; below 672px they may stack above the headline rather than sit beside it.

Iteration Guide

1. Focus on ONE component at a time and reference it by its `components:` token name.

2. Default body to `{typography.body}` at weight 400 with `letter-spacing: 0.16px`. Don't remove the tracking.

3. When introducing a new section, decide whether it sits on `{colors.canvas}` (default) or on `{colors.surface-1}` (alternate band). The two-surface rhythm is the rhythm.

4. Run `npx @google/design.md lint DESIGN.md` after edits.

5. Add new variants as separate component entries (`button-primary-pressed`, `text-input-error`, `text-input-focused`).

6. Treat IBM Blue as scarce: links, primary CTA, CTA banner, focus underline. Anything beyond that is drift.

7. Resist rounded corners. If a designer pushes for 4px rounding, the brand is shifting away from Carbon.

Known Gaps

• IBM's product surfaces (cloud-pak, watson, datacap) have richer Carbon component usage (data tables, graph cells, breadcrumbs, contextual menus) that aren't present on the marketing pages inspected — those components live in Carbon's documentation rather than in the marketing extraction.
• Form-field error and validation styling is documented in Carbon docs; the inspected pages didn't render error states.
• Dark mode is documented in Carbon as Gray-100 theme but isn't exposed on these marketing pages — only the footer inverts. The full dark theme is a separate Carbon palette not extracted here.
• The community.ibm.com sub-domain uses a different chrome (community-platform white-label) that approximates Carbon but isn't strict — the documented system applies to ibm.com proper.

개요

IBM의 마케팅 시스템은 IBM의 오픈 소스 엔터프라이즈 디자인 시스템인 **Carbon Design System**을 충실하게 적용한 것입니다. 주요 표면은 `` 순백색으로 입면도는 `` 밝은 회색, 텍스트는 차콜색 ``(#161616), 단일 브랜드 액센트는 IBM Blue ``(#0f62fe)입니다.

정의적인 선택은 **평평한 기하학**입니다. 모든 CTA, 모든 카드, 모든 입력, 모든 컨테이너는 얇은 1px 테두리가 있는 정사각형 모서리(`` 0px)를 사용합니다. 둥근 알약도, 부드러운 그림자도, 대기 그라데이션도 없습니다. 시스템은 양식화된 것이 아니라 엔지니어링된 것입니다.

**IBM Plex Sans**는 전체 유형 계층 구조를 전달합니다. 디스플레이 크기(76 / 60 / 42px)는 무게 **300**으로 실행됩니다. IBM의 시그니처 조명 디스플레이 처리 방식으로 경쟁 브랜드의 700 무게 디스플레이보다 76px가 차분한 느낌을 줍니다. 체형은 `letter-spacing: 0.16px`(Carbon 정밀 디테일) 및 라인 높이 1.50의 무게 400입니다. 목소리는 조심스럽고 기술적이며 신뢰할 수 있다는 느낌을 줍니다.

시스템에서 색상이 거의 표시되지 않습니다. IBM Blue 마크 링크, 기본 CTA 및 드물게 풀블리드 CTA 배너가 표시됩니다. 숯은 흰색이 아닌 다른 모든 표면을 담고 있습니다. 그 결과 기업의 경직성이 없고 엄격하고 가벼우며 의도적으로 제한되는 기업 중력이 탄생합니다.

**주요 특성:**

• **Carbon Design System** — IBM의 마케팅 크롬 IS Carbon입니다. 버튼은 정사각형이고 입력은 하단 규칙이 있는 정사각형이며 모서리는 0px에 유지됩니다.
• **경량 디스플레이 유형**: 42~76px 헤드라인을 위한 무게 300의 Plex Sans는 브랜드의 활자체 시그니처입니다.
• **단일 강조 색상**: `` IBM Blue는 모든 링크, 기본 CTA 및 CTA 배너를 전달합니다. 두 번째 브랜드 색상은 없습니다.
• 흰색 캔버스 + 밝은 회색(``) + 차콜색(``)이 표면의 95%를 덮습니다.
• 바닥글이 목탄색으로 반전됩니다(`` #161616) — 페이지 나누기 위의 유일한 어두운 표면입니다.
• 카드 계층 구조는 그림자가 아닌 1px 가는선과 표면 변경으로 전달됩니다.
• `letter-spacing: 0.16px`는 Carbon 정밀 디테일입니다. 작은 포지티브 트래킹은 브랜드 보이스의 일부입니다.
• 페이지 리듬: 유틸리티 막대 → 상단 탐색 → 가벼운 헤드라인이 있는 히어로 → 기능 카드 그리드 → 고객 로고 윤곽선 → 기업 기능 행 → 교육 섹션 → 뉴스레터/로그인 CTA → 어두운 바닥글.

색상

> 소스 페이지: ibm.com(홈), /software/ai-productivity, /consulting, /products/cloud-pak-for-aiops, /products/bare-metal-servers, Community.ibm.com.

브랜드 및 액센트

• **IBM Blue** ({colors.primary}): 단일 브랜드 액센트. 링크, 기본 CTA, CTA 배너 배경, 포커스 링.
• **파란색 60** ({colors.blue-60}): 마우스를 올린 링크 상태.
• **파란색 80** ({colors.blue-80}): 기본 버튼을 눌렀습니다.
• **파란색 마우스 오버**({colors.blue-hover}): 기본 버튼의 마우스 오버 상태.

표면

• **캔버스** ({colors.canvas}): 기본 페이지 배경.
• **표면 1** ({colors.surface-1}): 밝은 회색(#f4f4f4) — 입력 필드, 대체 행 줄무늬, 미묘한 섹션 밴드.
• **표면 2**({colors.surface-2}): 약간 더 어두운 회색(#e0e0e0) — 비활성화된 필드, 구분 기호에 가는선 채우기.
• **가는 선** ({colors.hairline}): 카드, 입력, 구분선의 1px 테두리.
• **헤어라인 스트롱** ({colors.hairline-strong}): 포커스 입력에 1px 목탄 밑줄(Carbon의 시그니처 포커스 처리).
• **역 캔버스** ({colors.inverse-canvas}): 차콜색 #161616 — 바닥글 표면.
• **역 표면 1**({colors.inverse-surface-1}): 역 캔버스보다 한 단계 더 가벼움 — 바닥글 열 구분선, 마우스 오버 바닥글 항목.

텍스트

• **잉크** ({colors.ink}): 모든 헤드라인 및 강조된 신체 유형 — 차콜색 #161616.
• **잉크 음소거**({colors.ink-muted}): #525252의 보조 유형 — 메타, 하위 헤드라인, 바닥글 본문.
• **잉크 미묘함**({colors.ink-subtle}): #8c8c8c의 3차 유형 — 비활성화됨, 도우미 텍스트, 캡션.
• **역 잉크**({colors.inverse-ink}): 목탄색 바탕에 흰색 — 바닥글 제목.
• **역 잉크 음소거**({colors.inverse-ink-muted}): 차콜색 바탕에 밝은 회색 — 바닥글 본문.

의미

• **성공 그린**({colors.semantic-success}): 카본 그린-50 — 성공 상태.
• **경고 노란색**({colors.semantic-warning}): 카본 옐로우-30 — 경고 상태.
• **오류 빨간색**({colors.semantic-error}): 카본 레드-60 — 오류 상태; 위험 버튼 배경.
• **정보 파란색**({colors.semantic-info}): 기본 — 정보 배지와 동일합니다.

타이포그래피

글꼴군

• **IBM Plex Sans** — IBM의 오픈 소스 독점 서체(무료). 기업 UI를 위해 특별히 설계된 기하학적이고 약간 인본주의적입니다. 대체: `Helvetica Neue, Arial, sans-serif`.

동일한 제품군에는 디스플레이, 본문, 캡션이 포함되어 있으며 디스플레이 + 본문 페어링은 없습니다. 계층 구조는 계열 변경보다는 **크기 + 무게**에 따라 결정됩니다. Plex Sans는 SIL Open Font License에 따라 무료/오픈 소스이므로 구현 시 이 목록에서 대체할 수 있는 가장 쉬운 사용자 정의 얼굴입니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

|---|---|---|---|---|---|

| _`` | 76px | 300 | 1.17 | -0.5px | 가장 큰 영웅 헤드라인 |

| _`` | 60px | 300 | 1.17 | -0.4px | 섹션 오프너 헤드라인 |

| _`` | 42px | 300 | 1.20 | 0 | 하위 섹션 헤드라인, 영웅 카드 제목 |

| _`` | 32px | 400 | 1.25 | 0 | 카드 컬렉션 제목, FAQ 카테고리 |

| _`` | 24px | 400 | 1.33 | 0 | 기능 카드 제목 |

| _`` | 20픽셀 | 400 | 1.40 | 0 | 디스플레이 헤드라인 옆의 리드 본문 |

| _`` | 18px | 400 | 1.50 | 0 | 주요 부제목, 리드 단락 |

| _`` | 16px | 400 | 1.50 | 0.16px | 기본 본문 |

| _`` | 14px | 400 | 1.29 | 0.16px | 카드 본문, 바닥글 열 |

| _`` | 14px | 600 | 1.29 | 0.16px | 선택된 탭 라벨, 강조된 본문 라인 |

| _`` | 12px | 400 | 1.33 | 0.32px | 캡션, 메타, 유틸리티 막대 |

| _`` | 14px | 400 | 1.29 | 0.16px | 모든 버튼 라벨 |

| _`` | 14px | 400 | 1.29 | 0.16px | 단면 눈썹 (카본은 강한 눈썹을 피하고 문장 대소 문자 14px 사용) |

원칙

• **경량 디스플레이는 브랜드의 목소리입니다.** 76px 헤드라인에 대해 무게 300의 Plex Sans는 조용히 권위 있는 것으로 읽힙니다. 700으로 전환하면 다른 모든 기업 사이트처럼 보이게 됩니다.
• **Carbon의 바디 사이즈에 대한 `letter-spacing: 0.16px`**은 정밀한 디테일입니다. 삭제하지 마세요.
• **마케팅 표면에는 모노가 없습니다**(Plex Mono는 존재하지만 제품 표면에만 존재합니다).
• **눈썹 타이포그래피는 문장 대소문자 14px를 사용합니다** — Carbon은 다른 기업 브랜드에서 흔히 볼 수 있는 대문자 추적 눈썹에 저항합니다.
• **줄 높이는 디스플레이에서 조여지고 본체에서는 완화됩니다**: 디스플레이-xl에서 1.17, 본체에서 1.50 — 크기에 비례합니다.

글꼴 대체에 대한 참고사항

IBM Plex Sans는 **무료 오픈 소스**(SIL OFL 라이센스)이며 Google Fonts에서 사용할 수 있습니다. 권장되는 구현입니다. 확장된 인쇄상의 요구가 발생할 경우 Plex 제품군에는 Plex Mono 및 Plex Serif도 포함됩니다.

레이아웃

간격 시스템

• **기본 단위**: 4px(Carbon의 시그니처 4픽셀 그리드).
• **토큰(머리말)**: `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• 카드 내부 패딩: `` 기능 카드의 경우 24px; `` 제품 카드의 32px; `` 영웅 카드 및 CTA 배너의 48px.
• 버튼 패딩: 세로 12px · 가로 16px — 탄소 사양
• 양식 입력 패딩: 세로 11픽셀 · 가로 16픽셀.

그리드 및 컨테이너

• Carbon의 데스크톱 16열 그리드는 태블릿/모바일에서 8/4열로 확장됩니다.
• 최대 콘텐츠 너비는 약 1584px입니다(Carbon의 최대 그리드 중단점).
• 카드 그리드는 데스크톱에서 4업, 태블릿에서 2업, 모바일에서 1업입니다.
• 고객 로고 윤곽은 플렉스 행의 고정 너비 타일을 사용하며 더 작은 뷰포트에서 가로로 스크롤됩니다.

공백 철학

Carbon은 공백 시스템으로 4픽셀 격자에 대한 정확한 정렬을 사용합니다. 섹션은 큰 수직 간격이 아닌 얇은 회색 행(``)을 통해 분리됩니다. 컨텐츠는 밀도 있게 설계되었습니다. IBM 고객은 많은 내용이 아닌 한 페이지에서 많은 내용을 보기를 기대합니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

|---|---|---|

| 0(플랫) | 그림자 없음, 테두리 없음 | 본문 유형, 영웅 텍스트, 바닥글 본문 기본값 |

| 1(가는선) | 캔버스에 1px `` 테두리 | 기능 카드, 입력, 목록 항목 |

| 2(표면 리프트) | _`` 캔버스에 배경 | 대체 행 배너, 마우스 오버 카드 |

| 3(포커스 링) | 2px `` 윤곽선 + 1px `` 밑줄 | 집중 입력, 집중 버튼 |

Carbon은 마케팅의 그림자에 강합니다. 깊이는 표면 변화와 1px 헤어라인을 통해 전달됩니다. 제품/앱 표면(상단 패널에 대한 Carbon 문서 섀도우 토큰)은 예외이지만 마케팅 사이트에서는 이를 거의 사용하지 않습니다.

장식적 깊이

• **부드러운 파란색 그라데이션 배경**은 일부 영웅 일러스트레이션 뒤에 표시됩니다. 이는 헤드라인과 경쟁하지 않으면서 캔버스를 따뜻하게 하는 희미한 파란색과 흰색 워시입니다.
• **대기 깊이 없음.** 스포트라이트 카드 없음, 파스텔 섹션 블록 없음, 그라데이션 패널 없음.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

|---|---|---|

| _`` | 0픽셀 | 기본값 — 모든 버튼, 카드, 입력, 컨테이너 |

| _`` | 2픽셀 | 작은 배지(드물게 예외) |

| _`` | 4픽셀 | 아바타 원 제곱, 드롭다운 메뉴 |

| _`` | 6픽셀 | (거의 사용되지 않음, 완전성을 위해 문서화됨) |

| _`` | 8픽셀 | (거의 사용되지 않음, 완전성을 위해 문서화됨) |

| _`` | 9999px | 제품 UI의 상태 알약, 배지(마케팅에서는 드물게) |

브랜드는 0px 모서리를 평평하게 만들기 위해 노력합니다. 다른 토큰은 제품/모바일 표면용으로 존재하지만 마케팅에는 거의 표시되지 않습니다.

사진 및 일러스트레이션 기하학

• IBM은 사진(사람, 하드웨어, 스포츠카)과 추상 일러스트레이션(기하학적 메시, 점선 패턴)을 같은 의미로 사용합니다.
• 이미지 프레임은 편평하며 모서리가 둥글지 않습니다.
• 고객 로고 타일은 얇은 1px 테두리가 있는 `` 0px 타일에 배치됩니다.

구성요소

버튼

**`button-primary`** — 파란색 실선 CTA. 모든 페이지의 기본 기본입니다.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 12px 16px, 반올림 ``.
• 누른 상태는 `button-primary-pressed`에 있습니다(백그라운드는 ``로 전환됩니다).

**`button-secondary`** — 차콜 솔리드 버튼 — 카본의 "2차" 처리.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 12px 16px, 반올림 ``.

**`button-tertiary`** — 파란색 1px 테두리 + 파란색 텍스트가 있는 흰색 버튼. 3차 CTA에 사용됩니다.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 12px 16px. (구현 시 테두리: 1px ``.)

**`button-ghost`** — 일반 텍스트 + 갈매기 모양, 마우스를 올리기 전까지 배경 없음.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 12px 16px.

**`button-danger`** — 카본의 파괴적인 변종.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 12px 16px.

카드 및 용기

**`feature-card`** — 홈 및 제품 페이지의 기본 기능 강조 타일.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px. 1px ``.
로 스트로크됨

_**`feature-card-elevated`** — `` 지면의 동일한 모양 — 최신 콘텐츠 캐러셀의 '추천' 카드에 사용됩니다.

• 배경 ``, 그 외에는 동일한 구조.

**`product-card`** — 더 큰 제품 쇼케이스 타일.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 32px.

**`hero-card`** — 가벼운 제목, 본문, CTA가 포함된 영웅 구성 카드.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 48px.

**`cta-banner`** — 페이지 하단 근처의 전체 너비 파란색 CTA 패널.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 48px.

**`resource-tile`** — 더 작은 기사/사례 연구 타일.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 16px.

**`customer-logo-tile`** — 홈 페이지의 고객 선택 윤곽에 있는 단일 타일(Ferrari, Pfizer 등).

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px. 가는선 테두리 1px.

입력 및 양식

**`text-input`** + **`text-input-focused`** + **`text-input-error`** — Carbon의 입력 크롬.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 11px 16px.
• 포커스 상태는 하단 1픽셀 가는선을 2픽셀 `` 밑줄(Carbon의 시그니처 포커스 처리)로 대체합니다.
• 오류 상태는 2px `` 하단 밑줄을 추가합니다.

**`newsletter-input`** — 홈 페이지의 "연결 유지" 뉴스레터 캡처

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 11px 16px. 인접 제출은 `button-primary`.
입니다.

탭

**`product-tab`** + **`product-tab-selected`** — 제품 페이지의 가로 탭 표시줄과 홈 "권장" 캐러셀.

• 기본값: `` 배경, `` 텍스트, 반올림 ``, 패딩 16px 20px. 하단 1픽셀 가는선.
• 선택됨: `` 배경, `` 텍스트, `` 무게, 하단 2px `` 밑줄. 동일한 패딩/반올림.

탐색

**`top-nav`** — 왼쪽에 IBM 로고 마크가 있는 흰색 끈끈한 막대, 탐색 카테고리 중앙, 오른쪽에 검색/로그인 아이콘이 있습니다.

• 배경 ``, 텍스트 ``, 유형 ``, 높이 48px. 하단 가는선 1px.

_**`utility-bar`** — 위치 스위치, 연락처, 검색 바로가기가 있는 상단 탐색 메뉴 위의 슬림한 회색 리본.

• 배경 ``, 텍스트 ``, 유형 ``, 높이 32px.

바닥글

_**`footer`** — IBM 워드마크가 왼쪽에 있고 5~6열의 캡션 크기 링크가 포함된 목탄 바닥글(``). 페이지 나누기 위의 유일한 반전된 표면입니다.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 64px 32px.

해야 할 일과 하지 말아야 할 일

하라

• 모든 CTA, 카드, 입력 및 컨테이너에 `` 0px를 사용하세요. 평평한 사각형의 미학이 바로 브랜드입니다.
• 디스플레이 크기(42px+)에 Plex Sans 무게 300을 본문에 무게 400으로 페어링합니다. 제목을 굵게 표시하고 싶은 충동을 억제하세요.
• 기본 CTA, 링크, 집중 입력 밑줄 및 CTA 배너용으로 `` IBM Blue를 예약합니다. 카드 배경이나 눈썹 컬러로 사용하지 마세요.
• 신체 크기에 `letter-spacing: 0.16px`을 적용하세요. Carbon의 정밀한 디테일과 타이포그래피 음성의 일부입니다.
• 카드 계층 구조에 표면 변경(`canvas` → `surface-1`) 및 1px 헤어라인을 사용합니다. 그림자를 건너뜁니다.
• 눈썹 및 섹션 레이블에 대한 문장 케이스를 고수합니다. Carbon은 모두 대문자 추적에 저항합니다.
• 바닥글에서만 ``로 전환합니다. 페이지의 나머지 부분은 밝게 유지됩니다.

하지 마세요

• 버튼, 카드 또는 입력의 모서리를 둥글게 하지 마세요. 4픽셀의 둥근 모서리도 카본 모양을 깨뜨립니다.
• 표시 헤드라인을 굵게 표시하지 마세요. 무게 300의 Plex Sans는 브랜드의 목소리입니다. 무게가 700이면 일반적으로 보입니다.
• 문서화된 연청색 히어로 그라데이션 외부에 대기 깊이(그라디언트 배경, 그림자, 대기 오버레이)를 추가하지 마세요.
• 두 번째 브랜드 색상을 소개하지 마세요. IBM Blue는 유일한 색채 악센트입니다. 상태 의미론은 문서화된 녹색/노란색/빨간색을 사용합니다.
• `letter-spacing: 0.16px` 및 Weight-300 디스플레이 처리를 유지하지 않고 IBM Plex Sans를 Inter 또는 Helvetica로 교체하지 마십시오.
• 알약 모양의 버튼을 사용하지 마세요. 카본은 사각형 모서리를 사용합니다. 알약은 다른 브랜드로 읽혀집니다.
• 모두 대문자로 추적된 눈썹을 쓰지 마세요. 카본의 눈썹은 14px의 문장 케이스입니다.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

|---|---|---|

| 맥스 | 1584px | 탄소 최대 그리드; 홈통 확장 |

| 데스크탑-XL | 1312px | 기본 데스크탑 레이아웃 |

| 데스크탑 | 1056px | 카드 그리드 4업 유지 |

| 태블릿 | 672px | 카드 그리드 4-up → 2-up; nav가 햄버거가 됩니다 |

| 모바일 | 320px | 단일 열; display-xl 크기는 76px → ~32px |

터치 대상

• 탄소 사양: 48px 최소 탭 타겟. 버튼과 입력은 터치 뷰포트에서 48px를 유지합니다.
• 상위 탐색 링크는 터치 시 탭 높이가 36픽셀에서 48픽셀로 커집니다.
• 탭 스트립 행은 48px 탭 높이를 유지합니다.

축소 전략

• **상단 탐색**: 링크가 672px 미만의 햄버거 오버레이로 축소됩니다. 로고마크와 검색 아이콘이 표시줄에 그대로 유지됩니다.
• **유틸리티 바**: 수직 공간을 확보하기 위해 672px 아래로 숨겨집니다.
• **카드 그리드**: 4등분 → 1056px에서 2등분 → 672px 이하 1등분.
• **디스플레이 유형**: `` 76px는 가중치 300 처리를 유지하면서 모바일에서 42px로 확장됩니다.
• **바닥글**: 6열 링크 그리드 → 태블릿의 3열 → 모바일의 1열.

이미지 동작

• 선택 윤곽의 고객 로고는 가로 세로 비율을 유지하며 672픽셀 아래의 2행 스크롤로 축소될 수 있습니다.
• 영웅 일러스트는 비례적으로 확장됩니다. 672px 미만에서는 헤드라인 옆에 위치하지 않고 위에 쌓일 수 있습니다.

반복 가이드

1. 한 번에 하나의 구성 요소에 집중하고 `components:` 토큰 이름으로 참조하세요.

2. 기본 본문은 __CODEBCK_800___의 무게 400에서 ``입니다. 추적을 제거하지 마세요.

3. 새 섹션을 도입할 때 ``(기본값) 또는 ``(대체 밴드)에 배치할지 결정하세요. 양면리듬이 바로 리듬입니다.

4. 편집 후 _`npx @google/design.md lint DESIGN.md`을 실행합니다.

5. 새 변형을 별도의 구성요소 항목(`button-primary-pressed`, `text-input-error`, `text-input-focused`)으로 추가합니다.

6. IBM Blue를 부족한 것으로 취급하십시오: 링크, 기본 CTA, CTA 배너, 초점 밑줄. 그 이상은 드리프트입니다.

7. 둥근 모서리에 저항하십시오. 디자이너가 4px 반올림을 요구하면 브랜드는 Carbon에서 멀어지는 것입니다.

알려진 격차

• IBM의 제품 표면(cloud-pak, watson, datacap)에는 검사한 마케팅 페이지에 없는 Carbon 구성 요소 사용(데이터 테이블, 그래프 셀, 이동 경로, 상황별 메뉴)이 더 풍부합니다. 이러한 구성 요소는 마케팅 추출이 아닌 Carbon의 문서에 있습니다.
• 양식 필드 오류 및 유효성 검사 스타일은 Carbon 문서에 문서화되어 있습니다. 검사한 페이지가 오류 상태를 렌더링하지 않았습니다.
• 다크 모드는 Carbon에서 Gray-100 테마로 문서화되어 있지만 이러한 마케팅 페이지에는 노출되지 않습니다. 바닥글만 반전됩니다. 풀 다크 테마는 여기서 추출되지 않은 별도의 Carbon 팔레트입니다.
• community.ibm.com 하위 도메인은 Carbon과 유사하지만 엄격하지는 않은 다른 크롬(커뮤니티 플랫폼 화이트 라벨)을 사용합니다. 문서화된 시스템은 ibm.com에 적절하게 적용됩니다.

概要

IBM のマーケティング システムは、IBM のオープンソース エンタープライズ デザイン システムである **Carbon Design System** を忠実に応用したものです。主な表面は__CODEBCK_642___ ピュアホワイトで、立面部分は__CODEBCK_643___ ライトグレー、文字部分はチャコール__CODEBCK_644___ (#161616)、単一ブランドアクセントとして IBM ブルー__CODEBCK_645___ (#0f62fe) です。

決定的な選択は **フラット ジオメトリ**です。すべての CTA、すべてのカード、すべての入力、すべてのコンテナで、細い 1 ピクセルの境界線を持つ四角い角 (`` 0px) が使用されます。丸い錠剤も、柔らかい影も、雰囲気のあるグラデーションもありません。このシステムは設計されたものであり、様式化されたものではありません。

**IBM Plex Sans** は型階層全体を保持します。ディスプレイ サイズ (76 / 60 / 42px) は重量 **300** で動作します。IBM 独自のライト ディスプレイ処理により、競合ブランドの 700 重量のディスプレイよりも 76 ピクセルの方が落ち着いた印象を与えます。ボディタイプはウェイト 400、__CODEBCK_647___ (カーボン精密ディテール)、ラインハイト 1.50 です。声は注意深く、技術的で、信頼できるものであると読み取れます。

システムが色に到達することはめったにありません。IBM ブルーは、リンク、プライマリ CTA、および珍しいフルブリード CTA バナーをマークします。木炭は白以外のすべての表面を保持します。その結果、企業の硬直性のない企業の重力が生まれます。つまり、厳格で、軽量で、意図的に抑制されています。

_**主な特徴:**

• **Carbon Design System** — IBM のマーケティングクロムは Carbon です。ボタンは正方形、入力は下段ルール付きの正方形、角は 0px のままです。
• **軽量ディスプレイ タイプ**: 42 ～ 76 ピクセルの見出しのウェイト 300 の Plex Sans は、ブランドのタイポグラフィーの特徴です。
• **1 つのアクセント カラー**: `` IBM Blue には、すべてのリンク、プライマリ CTA、および CTA バナーが含まれます。 2 番目のブランド カラーはありません。
• 白のキャンバス + ライトグレー (``) + チャコール (``) が表面の 95% をカバーします。
• フッターが木炭色 (`` #161616) に反転します。改ページの上の唯一の暗い表面です。
• カード階層は、ドロップ シャドウではなく、1 ピクセルのヘアラインと表面の変化によって伝えられます。
• `letter-spacing: 0.16px` ボディのカーボン精密ディテールです。小さなポジティブなトラッキングはブランド ボイスの一部です。
• ページのリズム: ユーティリティ バー → トップ ナビゲーション → 軽量見出し付きヒーロー → フィーチャー カード グリッド → 顧客ロゴ マーキー → エンタープライズ機能行 → トレーニング セクション → ニュースレター/サインイン CTA → ダーク フッター。

色

> ソース ページ: ibm.com (home)、/software/ai-productivity、/consulting、/products/cloud-pak-for-aiops、/products/bare-metal-servers、community.ibm.com.

ブランドとアクセント

• **IBM ブルー** ({colors.primary}): 単一ブランドのアクセント。 リンク、プライマリ CTA、CTA バナーの背景、フォーカス リング。
• **青 60** ({colors.blue-60}): ホバーされたリンクの状態。
• **青 80** ({colors.blue-80}): 主ボタンが押されました。
• **青いホバー** ({colors.blue-hover}): 主ボタンのホバー状態。

サーフェス

• **キャンバス** ({colors.canvas}): デフォルトのページの背景。
• **サーフェス 1** ({colors.surface-1}): ライト グレー (#f4f4f4) — 入力フィールド、交互行ストライプ、微妙なセクション バンド。
• **サーフェス 2** ({colors.surface-2}): わずかに濃いグレー (#e0e0e0) — 無効なフィールド、セパレーターの塗りつぶしとしてヘアライン。
• **ヘアライン** ({colors.hairline}): カード、入力、仕切りの 1 ピクセルの境界線。
• **ヘアライン ストロング** ({colors.hairline-strong}): フォーカスされた入力に 1 ピクセルの木炭の下線 (Carbon の特徴的なフォーカス処理)。
• **反転キャンバス** ({colors.inverse-canvas}): 木炭 #161616 — フッター表面。
• **反転サーフェス 1** ({colors.inverse-surface-1}): 反転キャンバスよりも 1 段階軽い — フッター列分割線、ホバーされたフッター項目。

テキスト

• **インク** ({colors.ink}): すべての見出しと強調された体型 — 木炭 #161616.
• **インクミュート** ({colors.ink-muted}): #525252 のセカンダリ タイプ — メタ、サブ見出し、フッター本文。
• **インク微妙** ({colors.ink-subtle}): #8c8c8c の第 3 タイプ — 無効、ヘルパー テキスト、キャプション。
• **反転インク** ({colors.inverse-ink}): 木炭に白 — フッター見出し。
• **反転インクミュート** ({colors.inverse-ink-muted}): 木炭地にライトグレー — フッター本文。

セマンティック

• **サクセス グリーン** ({colors.semantic-success}): カーボン グリーン-50 — 成功状態。
• **警告イエロー** ({colors.semantic-warning}): カーボンイエロー-30 — 警告状態。
• **エラー レッド** ({colors.semantic-error}): カーボン レッド-60 — エラー状態。危険ボタンの背景。
• **情報青** ({colors.semantic-info}): プライマリ — 情報バッジと同じです。

タイポグラフィ

フォント ファミリー

• **IBM Plex Sans** — IBM のオープンソースの独自書体 (自由に使用できます)。幾何学的で少し人間味のあるデザインで、エンタープライズ UI 向けに特別に設計されています。フォールバック: `Helvetica Neue, Arial, sans-serif`.

同じファミリーにはディスプレイ、本文、キャプションが含まれます。ディスプレイと本文の組み合わせはありません。階層は、ファミリーの変更ではなく、**サイズ + 重量**によって決まります。 Plex Sans は、SIL オープン フォント ライセンスの下で無料/オープンソースでもあり、このリストの中で実装時に置き換えるのが最も簡単なカスタム フェイスとなっています。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

|---|---|---|---|---|---|

| `` | 76ピクセル | 300 | 1.17 | -0.5ピクセル |最大のヒーローの見出し |

| `` | 60ピクセル | 300 | 1.17 | -0.4ピクセル |セクション冒頭の見出し |

| `` | 42ピクセル | 300 | 1.20 | 0 |サブセクションの見出し、ヒーロー カードのタイトル |

| `` | 32ピクセル | 400 | 1.25 | 0 |カード コレクションの見出し、FAQ カテゴリ |

| `` | 24ピクセル | 400 | 1.33 | 0 |フィーチャー カードのタイトル |

| `` | 20ピクセル | 400 | 1.40 | 0 |表示見出しの隣に本文を表示 |

| `` | 18ピクセル | 400 | 1.50 | 0 |ヒーローの小見出し、先頭段落 |

| `` | 16ピクセル | 400 | 1.50 | 0.16ピクセル |デフォルトの本文 |

| `` | 14ピクセル | 400 | 1.29 | 0.16ピクセル |カード本文、フッター列 |

| `` | 14ピクセル | 600 | 1.29 | 0.16ピクセル |選択されたタブのラベル、強調されたボディライン |

| `` | 12ピクセル | 400 | 1.33 | 0.32ピクセル |キャプション、メタ、ユーティリティ バー |

| `` | 14ピクセル | 400 | 1.29 | 0.16ピクセル |すべてのボタンのラベル |

| `` | 14ピクセル | 400 | 1.29 | 0.16ピクセル |セクション眉毛 (カーボンは強い眉毛を回避します。文例 14 ピクセルを使用します) |

原則

• _**軽量ディスプレイはブランドの声です。** 76 ピクセルの見出しに対してウェイト 300 の Plex Sans は、静かに権威があるように見えます。700 に切り替えると、他のすべてのエンタープライズ サイトと同じように見えます。
• **Carbon のボディサイズに関する `letter-spacing: 0.16px`** は精密な詳細です。削除しないでください。
• **マーケティング サーフェスにはモノはありません** (Plex Mono は存在しますが、製品サーフェスにのみ存在します)。
• **眉のタイポグラフィは文例 14px を使用しています** — カーボンは、他の企業ブランドによくあるすべて大文字で追跡された眉に抵抗します。
• **行の高さはディスプレイでは引き締められ、本体では緩められます**: ディスプレイ xl で 1.17、本体で 1.50 — サイズに比例します。

_フォントの代替に関する注意

IBM Plex Sans は **無料かつオープンソース** (SIL OFL ライセンス) で、Google Fonts で入手できます。推奨される実装です。 Plex ファミリには、拡張されたタイポグラフィーのニーズが生じた場合に備えて、Plex Mono および Plex Serif も含まれています。

レイアウト

間隔システム

• **基本単位**: 4px (Carbon の特徴的な 4 ピクセル グリッド)。
• **トークン (前付)**: `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• カード内部のパディング: `` フィーチャー カードでは 24 ピクセル。 `` 製品カードでは 32 ピクセル。 `` ヒーロー カードと CTA バナーでは 48 ピクセル。
• ボタン パディング: 縦 12 ピクセル · 横 16 ピクセル — カーボン仕様
• フォーム入力パディング: 縦 11 ピクセル、横 16 ピクセル。

グリッドとコンテナ

• Carbon のデスクトップでは 16 列のグリッド、タブレット/モバイルでは 8 / 4 列に拡大縮小します。
• コンテンツの最大幅は約 1584 ピクセル (Carbon の最大グリッド ブレークポイント) です。
• カード グリッドはデスクトップでは 4 アップ、タブレットでは 2 アップ、モバイルでは 1 アップです。
• 顧客ロゴ マーキーは、フレックス行で固定幅のタイルを使用し、小さなビューポートで水平にスクロールします。

ホワイトスペースの哲学

_Carbon は、ホワイトスペース システムとして 4 ピクセル グリッドへの正確な位置合わせを使用します。セクションは、大きな垂直方向のギャップではなく、薄い灰色の行 (``) によって分離されます。コンテンツは設計上高密度です。IBM の顧客は、ページ内に多くの内容が表示されることを期待しており、多くの内容が表示されることは期待していません。

標高と深さ

|レベル |治療 | |

を使用します

|---|---|---|

| 0 (フラット) |影も境界線もありません |本文タイプ、ヒーロー テキスト、フッター本文のデフォルト |

| 1 (生え際) |キャンバス上の 1px `` 境界線 |フィーチャー カード、入力、リスト項目 |

| 2 (表面リフト) | `` キャンバスの背景 |交互行バナー、ホバーカード |

| 3（フォーカスリング） | 2 ピクセル `` アウトライン + 1 ピクセル `` 下線 |フォーカスされた入力、フォーカスされたボタン |

_カーボンはマーケティング上のドロップ シャドウに耐性があります。深さは表面の変化と 1 ピクセルのヘアラインによって伝えられます。 例外は製品/アプリの表面 (高架パネル用のカーボン ドキュメント シャドウ トークン) ですが、マーケティング サイトではそれらをほとんど使用しません。

装飾の深さ_

• **柔らかい青のグラデーションの背景**がいくつかのヒーローのイラストの背後に表示されます。これは、見出しと競合することなくキャンバスを暖める、淡い青から白の淡い色合いです。
• **大気深度はありません。** スポットライト カード、パステル セクション ブロック、グラデーション パネルはありません。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

|---|---|---|

| `` | 0ピクセル |デフォルト — すべてのボタン、カード、入力、コンテナ |

| `` | 2ピクセル |小さなバッジ (まれな例外) |

| `` | 4ピクセル |アバターの四角形の円、ドロップダウン メニュー |

| `` | 6ピクセル | (めったに使用されません。完全を期すために文書化されています) |

| `` | 8ピクセル | (めったに使用されません。完全を期すために文書化されています) |

| `` | 9999ピクセル |製品 UI のステータス ピル、バッジ (マーケティングでは珍しい) |

_このブランドは、コーナーを 0px でフラットにすることに取り組んでいます。他のトークンは製品/モバイルの表面に存在しますが、マーケティングに現れることはほとんどありません。

写真とイラストの幾何学

• IBM は、写真 (人物、ハードウェア、スポーツ カー) と抽象的なイラスト (幾何学的なメッシュ、点線のパターン) を同じ意味で使用します。
• 画像フレームは平らで、角が丸くなっていません。
• 顧客のロゴ タイルは、__CODEBCK_690___ 細い 1 ピクセルの境界線を持つ 0 ピクセルのタイル上に配置されます。

コンポーネント

ボタン

**`button-primary`** — 青色の実線 CTA。すべてのページにわたるデフォルトのプライマリ。

• 背景__CODEBCK_692___、テキスト__CODEBCK_693___、入力__CODEBCK_694___、パディング12px 16px、丸め__CODEBCK_695___.
• 押された状態は__CODEBCK_696___にあります(背景は__CODEBCK_697___に移動します)。

_**`button-secondary`** — チャコールソリッドボタン — Carbon の「二次」処理。

• 背景__CODEBCK_699___、テキスト__CODEBCK_700___、入力__CODEBCK_701___、パディング12px 16px、丸め__CODEBCK_702___.

**`button-tertiary`** — 青い 1 ピクセルの枠線と青いテキストが付いた白いボタン。三次 CTA に使用されます。

• 背景__CODEBCK_704___、テキスト__CODEBCK_705___、入力__CODEBCK_706___、丸め__CODEBCK_707___、パディング12ピクセル16ピクセル。 (実装時の境界線: 1px ``。)

**`button-ghost`** — プレーン テキスト + シェブロン、ホバーするまで背景なし。

• 背景__CODEBCK_710___、テキスト__CODEBCK_711___、入力__CODEBCK_712___、丸め__CODEBCK_713___、パディング12ピクセル16ピクセル。

**`button-danger`** — Carbon の破壊的な亜種。

• 背景__CODEBCK_715___、テキスト__CODEBCK_716___、入力__CODEBCK_717___、丸め__CODEBCK_718___、パディング12ピクセル16ピクセル。

カードとコンテナ

**`feature-card`** — ホーム ページと製品ページのデフォルトの機能ハイライト タイル。

• 背景__CODEBCK_720___、テキスト__CODEBCK_721___、入力__CODEBCK_722___、丸め__CODEBCK_723___、パディング24ピクセル。 1px でストローク__CODEBCK_724___.

**`feature-card-elevated`** — `` 地面と同じ形状 — 最新コンテンツ カルーセルの「おすすめ」カードに使用されます。

• 背景__CODEBCK_727___、それ以外は同一構造

**`product-card`** — より大きな製品ショーケース タイル。

• 背景__CODEBCK_729___、テキスト__CODEBCK_730___、入力__CODEBCK_731___、丸め__CODEBCK_732___、パディング32ピクセル。

**`hero-card`** — 軽量のタイトル、本文、CTA を備えたヒーロー構成カード。

• 背景__CODEBCK_734___、テキスト__CODEBCK_735___、入力__CODEBCK_736___、丸め__CODEBCK_737___、パディング48ピクセル。

**`cta-banner`** — ページの下部近くにある全幅の青色の CTA パネル。

• 背景__CODEBCK_739___、テキスト__CODEBCK_740___、入力__CODEBCK_741___、丸め__CODEBCK_742___、パディング48ピクセル

**`resource-tile`** — 小さな記事/ケーススタディ タイル。

• 背景__CODEBCK_744___、テキスト__CODEBCK_745___、入力__CODEBCK_746___、丸め__CODEBCK_747___、パディング16ピクセル。

**`customer-logo-tile`** — ホーム ページの顧客マーキーの 1 つのタイル (フェラーリ、ファイザーなど)。

• 背景__CODEBCK_749___、テキスト__CODEBCK_750___、入力__CODEBCK_751___、丸め__CODEBCK_752___、パディング24ピクセル。 1 ピクセルのヘアライン境界線。

入力とフォーム

**`text-input`** + **`text-input-focused`** + **`text-input-error`** — Carbon の入力クロム。

• 背景__CODEBCK_756___、テキスト__CODEBCK_757___、入力__CODEBCK_758___、丸め__CODEBCK_759___、パディング11ピクセル16ピクセル。
• フォーカス状態は、下部の 1 ピクセルのヘアラインを 2 ピクセルの__CODEBCK_760___ 下線に置き換えます (Carbon の特徴的なフォーカス処理)。
• エラー状態により 2 ピクセル__CODEBCK_761___ 下部の下線が追加されます。

**`newsletter-input`** — ホーム ページの「接続を維持」ニュースレターのキャプチャ。

• 背景__CODEBCK_763___、テキスト__CODEBCK_764___、入力__CODEBCK_765___、丸め__CODEBCK_766___、パディング11ピクセル16ピクセル。 隣接する送信は__CODEBCK_767___.
です

タブ

_**`product-tab`** + **`product-tab-selected`** — 製品ページとホームの「おすすめ」カルーセルの水平タブ ストリップ。

• デフォルト: `` 背景、__CODEBCK_771___ テキスト、角丸 ``、パディング 16 ピクセル 20 ピクセル。下部 1 ピクセルのヘアライン。
• 選択済み: `` 背景、__CODEBCK_774___ テキスト、__CODEBCK_775___ ウェイト、下部 2 ピクセル `` 下線。同じパディング/丸め。

ナビゲーション

**`top-nav`** — 左側に IBM ロゴマーク、中央にナビゲーション カテゴリ、右側に検索/サインイン アイコンが表示された白いバーです。

• 背景__CODEBCK_778___、テキスト__CODEBCK_779___、入力__CODEBCK_780___、高さ48ピクセル。 1 ピクセルの下部ヘアライン。

**`utility-bar`** — 上部ナビゲーションの上にあるスリムなグレーのリボンに、場所の切り替え、連絡先、検索のショートカットが付いています。

• 背景__CODEBCK_782___、テキスト__CODEBCK_783___、タイプ__CODEBCK_784___、高さ32ピクセル

フッター

**`footer`** — IBM ワードマークが左にあり、キャプション サイズのリンクが 5 ～ 6 列ある木炭フッター (``)。改ページの上の唯一の反転サーフェス。

• 背景__CODEBCK_787___、テキスト__CODEBCK_788___、入力__CODEBCK_789___、パディング64ピクセル32ピクセル。

推奨事項と禁止事項

_実行

• すべての CTA、カード、入力、コンテナで `` 0px を使用します。平面的な正方形の美学がブランドです。
• ディスプレイ サイズ (42px+) の Plex Sans ウェイト 300 と本体のウェイト 400 をペアにします。見出しを太字にしたい衝動を抑えてください。
• __CODEBCK_791___ プライマリ CTA、リンク、集中入力の下線、および CTA バナー用に IBM Blue を予約します。カードの背景や眉毛の色として使用しないでください。
• __CODEBCK_792___ をボディ サイズに適用します。これは、Carbon の精密なディテールであり、タイポグラフィーの音声の一部です。
• サーフェス変更 (_`canvas` → `surface-1`) とカード階層に 1 ピクセルのヘアラインを使用します。ドロップ シャドウをスキップします。
• 眉毛とセクションのラベルは文の大文字と小文字を区別するようにしてください — Carbon はすべて大文字の追跡に抵抗します。
• フッターのみ_``に反転します。ページの残りの部分は明るいままです。

しないでください

• _ボタン、カード、入力の角を丸めないでください。 4 ピクセルの丸い角でも、Carbon の外観は損なわれます。
• 見出しを太字で表示しないでください。重量 300 の Plex Sans がブランドの声です。ウェイト 700 により、一般的に見えます。
• 文書化されたソフトブルーのヒーローグラデーションの外側に大気の深さ(グラデーション背景、ドロップシャドウ、大気オーバーレイ)を追加しないでください。
• 2番目のブランドカラーを導入しないでください。 IBM ブルーは唯一の色のアクセントです。ステータスのセマンティクスは、文書化された緑/黄/赤を使用します。
• __CODEBCK_796___ およびウェイト 300 の表示処理を維持せずに、IBM Plex Sans を Inter または Helvetica に置き換えないでください。
• 錠剤の形のボタンは使用しないでください。カーボンは直角のコーナーを使用しています。錠剤は別のブランドとして読み取られます。
• 追跡された眉毛をすべて大文字で書かないでください。 Carbon の眉毛は 14px の文例です。

応答動作

ブレークポイント

|名前 |幅 |主な変更点 |

|---|---|---|

|マックス | 1584ピクセル |カーボンマックスグリッド。溝を拡張 |

|デスクトップXL | 1312ピクセル |デフォルトのデスクトップ レイアウト |

|デスクトップ | 1056ピクセル |カード グリッド 4 アップを維持 |

|タブレット | 672ピクセル |カードグリッド 4-up → 2-up;ナビがハンバーガーになります |

|モバイル | 320ピクセル |単一列。 display-xl は 76 ピクセル → ~32 ピクセルにスケールします |

タッチターゲット_

• Carbon 仕様: 最小タップ ターゲット 48 ピクセル。ボタンと入力はタッチ ビューポートで 48 ピクセルを保持します。
• トップナビゲーションのリンクは、タッチするとタップの高さが 36 ピクセルから 48 ピクセルに増加します。
• タブ ストリップの行には 48 ピクセルのタップ高さが保持されます。

戦略の崩壊

• **トップナビゲーション**: リンクは 672 ピクセル未満のハンバーガー オーバーレイに折りたたまれます。ロゴマークと検索アイコンはバー上に残ります。
• **ユーティリティ バー**: 垂直方向のスペースを確保するために 672 ピクセル未満を非表示にします。
• **カード グリッド**: 4 アップ → 1056 ピクセルで 2 アップ → 672 ピクセル未満で 1 アップ。
• **表示タイプ**: `` ウェイト 300 の処理を維持しながら、モバイルでは 76 ピクセルが 42 ピクセルにスケールされます。
• **フッター**: 6 列のリンク グリッド → タブレットでは 3 列 → モバイルでは 1 列。

画像の動作

• マーキー内の顧客のロゴはアスペクト比を維持し、672 ピクセル未満では 2 行スクロールに折りたたまれる場合があります。
• ヒーローのイラストは比例して拡大縮小します。 672 ピクセル未満では、見出しの横に配置されるのではなく、見出しの上に重ねて配置される場合があります。

_反復ガイド

1.一度に 1 つのコンポーネントに注目し、__CODEBCK_798___ トークン名で参照します。

2.デフォルトのボディは__CODEBCK_799___、ウェイト400、__CODEBCK_800___です。追跡を削除しないでください。

3.新しいセクションを導入するときは、__CODEBCK_801___ (デフォルト) に配置するか、__CODEBCK_802___ (代替バンド) に配置するかを決定します。両面のリズムがリズムです。

4.編集後に__CODEBCK_803___を実行します。

5.新しいバリアントを個別のコンポーネント エントリとして追加します (`button-primary-pressed`、__CODEBCK_805___、__CODEBCK_806___)。

6. IBM Blue を希少なものとして扱います: リンク、プライマリ CTA、CTA バナー、フォーカスの下線。それを超えるものはすべてドリフトです。

7.角を丸くするのはやめましょう。デザイナーが 4px の丸めを推進すると、ブランドは Carbon から離れていくことになります。

既知のギャップ

• IBM の製品サーフェス (cloud-pak、watson、datacap) には、調査したマーケティング ページには存在しない、より豊富な Carbon コンポーネントの使用法 (データ テーブル、グラフ セル、パンくずリスト、コンテキスト メニュー) が含まれています。これらのコンポーネントは、マーケティング抽出ではなく Carbon のドキュメントに存在します。
• フォームフィールドのエラーと検証スタイルについては、Carbon のドキュメントに記載されています。検査されたページではエラー状態が表示されませんでした。
• _ダーク モードは、Carbon では Gray-100 テーマとして文書化されていますが、これらのマーケティング ページでは公開されておらず、フッターが反転するだけです。 完全なダークテーマは、ここでは抽出されていない別の Carbon パレットです。
• _community.ibm.com サブドメインは、Carbon に似ていますが厳密ではない別のクロム (コミュニティ プラットフォーム ホワイトラベル) を使用します。文書化されたシステムは ibm.com に適切に適用されます。

Practical Takeaways for Designers

Studying Ibm's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Ibm applies its tokens at ibm.com.

Practical Takeaways for Designers

Studying Ibm's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Ibm applies its tokens at ibm.com.

Practical Takeaways for Designers

Studying Ibm's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Ibm applies its tokens at ibm.com.

Related Design Systems

Explore similar design languages from the same category:

• Hashicorp Design System
• Mongodb Design System
• Sentry Design System