Orbex Sonar‑DB Design System

The design language of Sonar-DB, the Orbex dashboard where logistics teams follow orders, deliveries and stock on desktop, tablet and phone. Built on Material 3 Expressive and measured for dense figures.

4.5:1 for text 3:1 for marks

Tone 5 #0B130B, 18.4:1
Tone 6 #0E150E, 18.1:1
Tone 10 #171D17, 16.7:1
Tone 12 #1B211B, 16.0:1
Tone 14 #1F251E, 15.3:1
Tone 16 #232A22, 14.4:1
Tone 18 #272E26, 13.6:1
Tone 21 #2D352C, 12.4:1
Tone 22 #2F372E, 12.0:1
Tone 24 #333B32, 11.3:1
Tone 27 #3A4239, 10.1:1
Tone 28 #3C443B, 9.8:1
Tone 31 #424B42, 8.8:1
Tone 33 #475046, 8.2:1
Tone 34 #495348, 7.8:1
Tone 43 #5E685D, 5.7:1
Tone 46 #667064, 5.0:1
Tone 47 #687266, 4.9:1
Tone 48 #6B7569, 4.7:1
Tone 57 #828C7F, 3.4:1
Tone 59 #879184, 3.2:1
Tone 60 #899487, 3.1:1
Tone 65 #97A194, 2.6:1
Tone 67 #9CA699, 2.5:1
Tone 72 #AAB3A7, 2.1:1
Tone 74 #AFB9AC, 2.0:1
Tone 76 #B5BEB2, 1.9:1
Tone 78 #BAC4B7, 1.8:1
Tone 80 #C0C9BD, 1.7:1
Tone 84 #CBD4C8, 1.5:1
Tone 85 #CED7CB, 1.4:1
Tone 88 #D7DFD4, 1.3:1
Tone 90 #DDE5D9, 1.3:1
Tone 91 #E0E8DC, 1.2:1
Tone 92 #E3EADF, 1.2:1
Tone 93 #E5EDE2, 1.2:1
Tone 95 #EBF3E8, 1.1:1
Tone 96 #EEF6EB, 1.1:1

strong
default
tertiary

4.5:1 for text 3:1 for marks

Tone 5 #0B130B, 1.2:1
Tone 6 #0E150E, 1.2:1
Tone 10 #171D17, 1.1:1
Tone 12 #1B211B, 1.0:1
Tone 14 #1F251E, 1.0:1
Tone 16 #232A22, 1.1:1
Tone 18 #272E26, 1.1:1
Tone 21 #2D352C, 1.2:1
Tone 22 #2F372E, 1.3:1
Tone 24 #333B32, 1.3:1
Tone 27 #3A4239, 1.5:1
Tone 28 #3C443B, 1.6:1
Tone 31 #424B42, 1.7:1
Tone 33 #475046, 1.9:1
Tone 34 #495348, 1.9:1
Tone 43 #5E685D, 2.7:1
Tone 46 #667064, 3.0:1
Tone 47 #687266, 3.1:1
Tone 48 #6B7569, 3.3:1
Tone 57 #828C7F, 4.5:1
Tone 59 #879184, 4.8:1
Tone 60 #899487, 5.0:1
Tone 65 #97A194, 5.8:1
Tone 67 #9CA699, 6.2:1
Tone 72 #AAB3A7, 7.2:1
Tone 74 #AFB9AC, 7.7:1
Tone 76 #B5BEB2, 8.2:1
Tone 78 #BAC4B7, 8.7:1
Tone 80 #C0C9BD, 9.2:1
Tone 84 #CBD4C8, 10.3:1
Tone 85 #CED7CB, 10.6:1
Tone 88 #D7DFD4, 11.5:1
Tone 90 #DDE5D9, 12.1:1
Tone 91 #E0E8DC, 12.5:1
Tone 92 #E3EADF, 12.7:1
Tone 93 #E5EDE2, 13.1:1
Tone 95 #EBF3E8, 13.8:1
Tone 96 #EEF6EB, 14.2:1

tertiary
default
strong

Every neutral comes from one formula: the brand green’s hue at a chroma that fades towards black and white. Each bar is a tone, placed by its lightness and raised by its contrast on a card. Text roles sit on the tones that clear their threshold, in either theme.

What’s inside

Installation

Install the packages, set the cascade layers, import the tokens and use a component.
Foundations

The principles and the accessibility commitments, and the tokens every component is drawn with.
Layout

Window size classes, the grid of the overview, and how navigation changes from phone to desktop.
- Breakpoints and grid
- Navigation by device
Components

React components, native HTML first: how they are built and tested, and each one live with its API.
Patterns

The overview of Sonar-DB and what it is made of: its cards, charts, search, editing and feedback, live.
Resources

What changed in each release, files to download, the system for coding agents, and how to contribute.

Start here

Installation takes an app from nothing to a first component in five steps: the packages, the cascade layers, the tokens, a component, and the data behind them.

This release

1.1.6, October 29, 2026. 272 tokens, 9 foundation pages, the layout, 24 components with their sizes, variants and states, and the patterns of the overview. Restaurado estado de clic cuadrado en botones: the press shape of the approved videos (v38) is back on the two pills that had lost it. Nothing else changes; 1.1.5 and earlier are unchanged and their zips stay as they were. Every change is in the changelog.