---

name: carbon-design description: Use this skill to generate well-branded interfaces and assets for IBM Carbon Design System, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping. user-invocable: true

Read the README.md file within this skill, and explore the other available files. If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand. If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.

Carbon Design System

Overview

The Carbon Design System is IBM's open-source design system for products and digital experiences. It is built on the IBM Design Language and provides developers and designers with tools to create consistent, accessible, and high-quality products across IBM's ecosystem.

Source: Figma file "(v11) Carbon Design System (Community).fig" — mounted as VFS at /

---

Products / Surfaces

Carbon targets several surface types:

• Web applications (data-dense admin/enterprise UIs)
• Marketing/presentation websites (IBM.com, product landing pages)
• Documentation sites (carbon.ibm.com)
• AI-augmented interfaces (AI label, AI layer, AI explainability popovers — v11 additions)

---

Content Fundamentals

Tone & Voice

• Professional, clear, concise. IBM speaks directly, without jargon or fluff.
• Sentences are short. Active voice preferred.
• No emoji in UI copy. No exclamation points.
• Technical accuracy is prioritized over personality.
• Second-person ("you") for instructional copy; first-person avoided in UI labels.
• Label copy is sentence case (e.g. "Save as draft", not "Save As Draft").
• Button labels are imperative verbs ("Submit", "Delete", "Add new").
• Placeholder text is lowercase, descriptive, and non-instructional.

Casing

• Labels, headings: Sentence case
• Buttons: Short verb phrases, sentence case
• Navigation items: Title case at top level, sentence case nested

---

Visual Foundations

Color System

Carbon uses a token-based color system with four themes: White, Gray 10 (light), Gray 90 (dark), and Gray 100 (darkest).

Gray scale:

Name	Hex
White	#ffffff
Gray 10	#f4f4f4
Gray 20	#e0e0e0
Gray 30	#c6c6c6
Gray 40	#a8a8a8
Gray 50	#8d8d8d
Gray 60	#6f6f6f
Gray 70	#525252
Gray 80	#393939
Gray 90	#262626
Gray 100	#161616

Brand / Interactive:

• Blue 60: #0f62fe — primary interactive color
• Blue 70: #0043ce — hover on blue
• Blue 50: #4589ff
• Blue 40: #78a9ff

Support:

• Red 60: #da1e28 — error/danger
• Red 40: #ff8389 — error on dark
• Teal 50: #009d9a — success tones
• Purple 60: #6929c4 — AI / purple accent
• Purple 50: #8a3ffc

Typography

• Primary font: IBM Plex Sans — Regular (400), SemiBold (600), Bold (700)
• Mono font: IBM Plex Mono — Regular (400)
• Available on Google Fonts: IBM+Plex+Sans and IBM+Plex+Mono
• Type scale: 12, 14, 16, 20, 24, 28, 32, 54px
• Line heights: 16, 18, 20, 22, 24, 28, 32, 40, 64px
• Body text: 14px / Regular — dominant UI size
• Labels: 12px / Regular
• Section headers: 16px / SemiBold
• Page titles: 20–32px / Light or Regular

Spacing Scale

4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | 80 | 96 | 160 (px)

Layout & Borders

• No border-radius on most components (0px). Tags/badges use 100px pill or 2px.
• Borders are implemented via box-shadow: inset 0 0 0 1px <color> not border.
• Grid: 16-column, 8px base unit.
• Header height: 48px.
• Sidebar/left panel widths: 256px (expanded), 48px (collapsed).

Shadows

• Elevation is expressed via subtle box-shadow offsets with rgba(0,0,0,0.3) and rgba(0,0,0,0.2).
• No aggressive drop shadows; mostly border-replacement shadows.

Animation

• Transitions: 100–300ms, cubic-bezier(0.2, 0, 0.38, 0.9) (Carbon's standard easing).
• Fades and height-based reveals; no bounce or spring.

Hover / Press States

• Hover: Slightly lighter/darker shade (e.g. Blue 70 hover on Blue 60 backgrounds).
• Active: Alpha overlays using Gray 50 at 40–50%.
• Selected: Gray 50 at 20–24%.
• Ghost/tertiary buttons show text/border in brand blue; hover fills with light blue.

Backgrounds & Imagery

• Flat color backgrounds only. No gradients (except AI feature accents).
• No decorative illustrations or hand-drawn elements.
• Photography is used on IBM.com but not in UI components.
• AI features use a purple gradient accent (#6929c4 → #8a3ffc).

Component Visual Language

• Cards: white/gray bg, box-shadow: inset 0 0 0 1px #e0e0e0. No drop shadow by default.
• Modals: white bg with box-shadow: 0 4px 12px rgba(0,0,0,0.3).
• Tags: rounded pill (border-radius: 100px), small 12px text, gray/colored fill.
• Icons: 16×16px and 20×20px. Stroke-based, monochromatic.

---

Iconography

Carbon uses Carbon Icons — an IBM-maintained SVG icon set. Key points:

• Icons are always 16×16px or 20×20px (occasionally 24/32px for featured use).
• Stroke-based, monochromatic (inherits currentColor).
• Available as @carbon/icons npm package or @carbon/icons-react.
• CDN-available via unpkg: https://unpkg.com/@carbon/icons/
• Common icons used: Add, Close, ChevronDown, ChevronRight, Menu, Search, Notification, User, Settings, Information, CheckmarkFilled, Warning, ErrorFilled.
• No emoji used as icons in Carbon UI.
• Substitution note: Carbon Icons are used directly. No CDN bundle is available as a complete icon font — SVG icons are recommended.

---

File Index

README.md                   ← This file
SKILL.md                    ← Agent skill definition
colors_and_type.css         ← CSS custom properties (tokens)
assets/                     ← Logos, icons, brand assets
preview/                    ← Design system card previews
  colors-brand.html
  colors-gray.html
  colors-semantic.html
  type-scale.html
  type-specimens.html
  spacing-tokens.html
  shadows-borders.html
  buttons.html
  forms.html
  navigation.html
  data-display.html
  feedback.html
ui_kits/
  admin/
    index.html              ← Admin dashboard UI kit
  website/
    index.html              ← Presentation website UI kit