Projects

Design System

2023 · Senior UX Designer · Onomondo

The component library behind the Onomondo IoT platform. Foundations, core components and the SIM-specific patterns built on them.

Foundations

Colour

Brand copper scale, 50 to 900, with use for each step

Typography

Type scale from 28px Display to 10px Mono Small, even sizes only, each with its use

Spacing

Spacing scale: 2, 4, 6 and 8, then 12, 16, 20, 24, 28 and 32, plus a 64px page gutter, each with its use

Shadow

Inputs, country cards

shadow-xs

Offset
0, 1
Blur
2
Colour
Black 4%
Cards, stat cards

shadow-sm

Offset
0, 1 · 0, 2
Blur
3 · 6
Colour
Black 4% · 6%
Card hover

shadow-md

Offset
0, 2 · 0, 4
Blur
4 · 16
Colour
Black 4% · 8%
Toasts

shadow-lg

Offset
0, 4 · 0, 8
Blur
8 · 24
Colour
Black 5% · 10%
Dropdown menus

shadow-dropdown

Offset
0, 4 · 0, 16
Blur
12 · 40
Colour
Copper 12% · Black 10%
Modals

shadow-modal

Offset
0, 12 · 0, 32
Blur
32 · 72
Colour
Black 12% · 16%

Radius

radius-sm

Value
4
Use
Badges, checkboxes

radius-md

Value
6
Use
Buttons, fields, notifications, tooltips

radius-lg

Value
8
Use
Tables, menus, calendar, country cards

radius-xl

Value
12
Use
Cards, modals

radius-full

Value
Full
Use
Pills, tags, switches, status dots, avatars

States

Hover. Neutral-100 fill, text darkens. Never a brand tint, so it cannot be read as selected.

Selected. The background and the text colour change. Menus, tabs, list options, table rows and cards: brand-100 fill, brand-900 text. Controls that hold a value, such as checkbox, radio, switch, segmented control and calendar day: brand-700 fill, white mark or text. Size and weight stay the same.

Focus. A 2px brand-500 ring with a 2px gap, on keyboard focus only. Outside the element, or inside it when items sit edge to edge, such as menu items and tabs.

Disabled. Neutral-100 fill, neutral-400 text. Not focusable.

Controls

Button

Button states, labelled: solid for the main action, soft for secondary, outline for alternative, ghost for low emphasis. Primary, highlight and error groups in default, hover and focus, sizes M, S and L, plus one shared disabled row
Buttons with icons in solid, soft, outline and ghost, primary and highlight: leading plus icon on Add SIM, trailing arrow on Next, trailing chevron on Actions, shown at S, M and L, with icon size 16 or 14, gap 6, and icons on one side only

Text input

Single line text input with label and helper text in seven states: default, hover, focus, filled, error, disabled, read-only

Checkbox

Checkbox with label and supporting text in eight states: default, hover, focus, checked, indeterminate, error, disabled, disabled checked

Radio

Radio with label and supporting text in seven states: default, hover, focus, selected, error, disabled, disabled selected

Switch

Switch with label and supporting text in seven states: off, hover off, disabled off, on, hover on, disabled on, focus

Badge

Badge variants: solid, soft and outline in five colours, three sizes, with icon, status dot, removable pills, tag colours, and when to use rounded or pill shape

Status

Status states grouped: with label, each with its meaning, and without label, dots with a tooltip on hover

Avatar

Avatar sizes 24, 32 and 40, owner and member fills, a stack with overflow count, and avatars with name and email

Usage bar

Usage bar: normal, near the limit, at the limit, with label, empty and in a table cell

Composites

Segmented control

Segmented control in small, medium and large: two options, three options and hover

Selection

Dropdown with label and helper text in seven states: default, hover, focus, open, selected with clear button, error, disabled

Type-ahead

Type-ahead with label and helper text in eight states: default, hover, focus, results grouped by country, selected with clear button, no results, error, disabled

Calendar

Calendar: closed date field, single date with today, range, and month view with months without data disabled

Tooltip

Tooltip variants: simple, rich, with link, pointer positions, trigger, placement

Notification

Notification sizes and four intents, title only, with close, icon per intent, page banner, and how to use buttons with an example under each rule

Pagination

Pagination: first, middle and last page, hover, focus, and few pages without ellipsis

Toast

Toasts: success, neutral, error and info on one line, title with body, with an action, neutral with undo, error with retry, action hover, not dismissible, dismissible, and a stack

Patterns

Filter bar

Filter bar states above a SIM table: default, searching, filtered, filter panel open, no results, rows selected

Table

Table states: row default, row hover, row selected, group header, sortable header, empty

Chart

Charts with view tabs on the left and a 7, 14 or 30 day period control on the right: line, bar, line hover with tooltip, bar hover, empty, and two series with legend

Map

SIM Coverage Map active now and over the last 24 hours, with more markers as the range grows; marker hover with a tooltip listing networks, data today and last seen, zoomed in on Europe with counts, network list coverage, empty and locked behind Fleet

Card

Card states: default, hover, focus, selected, collapsed, empty

Layouts

Page layout

Page grid wireframe: top bar and menu, content area, 12-column grid, page header, stats row, filter bar, content

More projects

Document Automation
AI SaaS Product Design Interaction Design 2026

Document Automation

See the process
Network Marketplace
IoT SaaS Product Design Interaction Design 2022

Network Marketplace

See the process
Electronic TV Guide redesigned mobile EPG
Media UX Research Interaction Design 2017

Electronic TV Guide

See the process