Headings

Heading 1 — IBM Plex Sans 28px

Heading 2 — IBM Plex Sans 24px

Heading 3 — IBM Plex Sans 20px

Heading 4 — IBM Plex Sans 18px

Heading 5 — IBM Plex Sans 16px
Heading 6 — IBM Plex Sans 15px

Body Text

Default body text uses IBM Plex Sans at 14px with 22px line height and 0.1px letter spacing. The typeface provides excellent readability for dense data-driven interfaces.

Small text (13px / 16px) used for secondary information, hints, and table data.

Large text (15px / 24px) used for emphasizing key information or introductory paragraphs.

Bold text (font-weight: 600) is used for labels, headings, and key values.

Italic text is supported via IBM Plex Sans italic variant.

Monospace / Code

Inline code uses IBM Plex Mono at 13px. Used for IDs, API endpoints, and code snippets.

GET /api/collections/posts/records?page=1&perPage=30

Text Utilities

Bold text (.txt-bold)
Normal weight text (.txt-normal)
Very long text that gets truncated with ellipsis (.txt-ellipsis)
Text that never wraps (.txt-nowrap)
Strikethrough text (.txt-strikethrough)
uppercase text (.txt-upper)
Centered text (.txt-center)

Color Palette — Semantic

Accent
#1055c9
Primary
#25272d
Secondary
#e8eaee
Success
#22a96d
Danger
#c33751
Warning
#e57534
Info
#3376e5

Color Palette — Surface (Light)

Surface
Alt1
Alt2
Alt3
Alt4
Alt5

Remixicon Examples — View all 3,058 icons →

ri-database-2-line
ri-database-2-fill
ri-settings-3-line
ri-bar-chart-box-line
ri-add-line
ri-add-circle-line
ri-close-line
ri-delete-bin-7-line
ri-edit-2-line
ri-search-line
ri-filter-line
ri-download-line
ri-upload-line
ri-refresh-line
ri-key-line
ri-lock-line
ri-lock-unlock-line
ri-user-line
ri-user-add-line
ri-group-line
ri-folder-2-line
ri-file-copy-line
ri-file-list-line
ri-image-line
ri-toggle-line
ri-list-check
ri-code-s-slash-line
ri-pushpin-line
ri-more-2-line
ri-arrow-right-line
ri-arrow-left-line
ri-arrow-up-line
ri-arrow-down-line
ri-arrow-down-s-line
ri-arrow-right-s-line
ri-checkbox-circle-line
ri-error-warning-line
ri-alert-line
ri-information-line
ri-notification-3-line
ri-sun-line
ri-moon-line
ri-eye-line
ri-eye-off-line
ri-external-link-line
ri-link
ri-table-line
ri-layout-2-line
ri-layout-3-line
ri-cursor-line
ri-input-field
ri-menu-3-line
ri-layout-top-2-line
ri-text