IBM Carbon Aesthetic

Clinical, precise, enterprise-ready Bootstrap 5 theme.

Navbar example

Buttons & Button Groups

Typography example

Heading 1 (300/400)

Heading 2

Heading 3

Lead paragraph: precise and legible.

Body text: 'IBM Plex Sans', 14px, 1.5 line height. letter-spacing: 0.16px.

Design is a way of thinking, a way of looking at the world.

IBM Design

Tables example

Resource Name Status Type Location
cloud-server-01 Active Virtual Server us-south-1
db-instance-prod Pending Database eu-de-2
storage-bucket-backup Maintenance Object Storage jp-tok-3

Forms example

@

Navs, Tabs & Pagination

Alerts example

Badges example

Primary Secondary Success Danger Warning Info

Progress & Spinners

List Groups

  • Active item
  • Second item
  • Third item

Cards example

Node Details
Compute Cluster A

Status: Operational. Health: 98%.

View Metrics
Focused Card

Highlighting specific content.

Accordions example

Enterprise grade hardware required.

Carousel example

Modals example

Offcanvas example

Resource Panel
Detailed resource information goes here.

Popovers & Tooltips

Toasts example

Placeholders example

Misc example