Palette & components
Design tokens and the shared components used across every screen.
Colour
Brand
Green 500#6FB46A
Green 700#457F41
Green 100#D7EED5
Ink 900#1A1A17
Neutral 500#78776F
Neutral 100#EBEBE9
Feedback Added
Success#2F9E5B
Warning#D18A12
Error#D94343
Info#3B6DAE
Waiting#A15BC7
Typography
Aeonik carries the hierarchy through size and weight. Numbers and references use tabular figures.
3xl / 700Report an issue
2xl / 700Ticket queue
xl / 700Validator offline — RAD 231 B
md / 600Section heading
base / 400Body text, form labels and descriptions.
sm tabularSB-2026-000184 · 0788 123 456
Status badge
New
In progress
Waiting on operator
Resolved
Closed
Priority tag
Not set
Low
Normal
High
Urgent
Route line
New
In progress
Waiting on operator
Resolved
Closed
New
In progress
Waiting on operator
Resolved
Closed
Buttons
Form fields
Default
Focused
Error
Select the company you work for.
Category radio tile
Validator
Kiosk
Search & filters
Search bar
Filter chip — default / active
All statuses
All categories
Active filter — removable
Priority: Urgent
Tabs
All 12
Waiting on you 2
Open 4
Resolved & closed 6
Pagination
Multi-page
Showing 1–6 of 58 tickets
…
Single page (Prev/Next disabled)
Showing 2 of 2 tickets
Ticket row / mobile card
Mobile card (replaces the row below 640px)
SB-2026-000184
Waiting
Validator offline — RAD 231 B
Reply box
Reply mode
Internal note mode
Toast
Reply sent and ticket marked Resolved
States
Empty
The queue is clear
No open tickets right now.
Loading
Error
Couldn't load
Something went wrong.