Orbex Sonar-DB Design system

Typography

One superfamily, fourteen roles. The interface is dense with figures, so sizes stay small and steady; hierarchy comes from weight and color more than from size.

Families

  • Orders, deliveries and stock

    IBM Plex Sans

    Every interface text.

    --sonar-font-family-sans

  • Mo Tu We Th Fr Sa Su

    IBM Plex Sans Condensed

    Weekday initials and the wordmark, where width is scarce.

    --sonar-font-family-condensed

  • 2,000 1,500 1,000

    IBM Plex Mono

    Chart axes and navigation overlines.

    --sonar-font-family-mono

Roles

Names follow Material 3: headline, title, body and label, from larger to smaller and from reading to scanning. Two roles are Sonar-DB’s own: caption for units in pills and data for chart axes. Each role is a font shorthand plus its tracking.

Role Sample Size / line Weight Tracking
headline-sm

Amounts in detail panels.

 30,000.00 USD 26 / 29 px Sans Semibold -0.26 px
title-lg

Card and panel titles.

 Daily shipments 18 / 22 px Sans Semibold -0.27 px
title-md

Highlighted figures and section titles inside panels.

 Total 415 plt 14 / 20 px Sans Semibold -0.21 px
title-sm

Summary lines, month names, document numbers.

 Delivery 04-127C 12 / 14 px Sans Semibold 0
body-lg

Dialog and empty-state text.

 The changes you made to this layout will be lost. 14 / 20 px Sans Regular 0
body-md

Rows, descriptions, list items.

 Recycled-fiber cases, 120 per pallet, ready for loading. 12 / 16 px Sans Regular 0
label-lg

Account selector, legend labels.

 All accounts 14 / 17 px Sans Medium 0
label-md

Figures in tables and lists, form labels, navigation items. The most used role.

 1,420 plt 12 / 14 px Sans Medium -0.18 px
label-md-condensed

Weekday initials in calendars and charts.

 Mo Tu We Th Fr Sa Su 12 / 14 px Sans Condensed Regular 0
label-sm

Status chips, inline actions such as View, tooltips.

 Delayed 11 / 13 px Sans Medium -0.17 px
button

Filled and outlined buttons.

 Create order 13 / 16 px Sans Semibold -0.13 px
caption

Units in pills (PLT, KG). Always uppercase.

 plt 10 / 12 px Sans, uppercase Regular 0
overline

Section headings in the navigation. Always uppercase.

 Operations 12 / 14 px Mono, uppercase Medium 0
data

Chart axes and scales.

 0 500 1,000 1,500 2,000 10 / 12 px Mono Regular -0.3 px

In code

Use the class for markup you control, or the two custom properties inside a component’s styles.

css 
@import '@orbex/sonar-tokens/type.css';

<h2 class="sonar-type-title-lg">Daily shipments</h2>

/* or, inside a component */
.card-title {
  font: var(--sonar-type-title-lg);
  letter-spacing: var(--sonar-type-title-lg-tracking);
}

Guidelines

  • Join a figure and its unit with a non-breaking space, 1,420&nbsp;plt, so they never wrap apart.
  • Use color, not size, to step down: a tertiary date next to a strong figure reads as secondary at the same size.
  • Keep uppercase to the two roles that define it. Everything else is sentence case.
  • Titles are short nouns (Orders, Daily shipments). Actions are verbs (Create order, Release stock).