Carbon

Difficulty:
Design System
Carbon Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryCurated

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralCurated

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 1px
md · 2px
lg · 3px
full

Spacing

Prompt
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Prompt
  • Ag

    Headings 32px · bold

    IBM Plex Sans

  • Ag

    Body 16px · regular

    IBM Plex Sans

  • Ag

    Labels 13px · medium

    IBM Plex Sans

Carbon is IBM's open-source design system, building engineered rigor on the IBM Design Language: IBM Plex Sans ships productive 14px and expressive 16px type sets, blue-60 (#0F62FE) unfolds a 10-step ramp, 2px radii and crisp 1px #E0E0E0 hairlines refuse softness, and an 8px grid with dense data tables over neutral #F4F4F4/#161616 surfaces runs across the entire product line.

CarbonDesign System

Prompt Template

Base Template
Design an IBM Carbon-inspired interface. - IBM Plex Sans with 14px productive body and 16px expressive sizes; - #0F62FE blue-60 primary across a 10-step blue ramp; - 2px corner radii and crisp 1px #E0E0E0 hairlines — engineered, not soft; - 8px grid, productive/expressive type sets, and dense data tables; - Neutral #F4F4F4 and #161616 surfaces with disciplined whitespace. Colors: #0F62FE, #161616, #F4F4F4, #E0E0E0 with #0F62FE accent. Typography: IBM Plex Sans.

Variant Prompts

📱 Mobile
Design a mobile app with Carbon aesthetics. Use Carbon color identity with #0F62FE accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Carbon style. Use Carbon color identity with #0F62FE accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Carbon design language. Use Carbon color identity with #0F62FE accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Carbon visual identity. Use Carbon color identity with #0F62FE accents. Compelling, conversion-focused.

Usage Examples

IBM Carbon Dashboard

Dashboard
Build a cloud console dashboard with IBM Carbon style: dense data tables, structured panels, and #0F62FE blue-60 accents.

Carbon Data Table Page

Web
Create a resource management page with Carbon design language: productive tables, inline actions, and IBM Plex typography.

✅ Best For

  • Enterprise software
  • Data-dense consoles
  • Accessibility compliance

❌ Avoid For

  • Light playful consumer products
  • Hand-drawn illustration brands

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download