Icon
A Phosphor icon chosen by its semantic key, sized from the tokens and mirrored in right-to-left layouts when it is directional.
Design system
Every component of the library with its states, the tokens and the icon set, in both themes and both directions.
Components
Foundation
PremiumButton
The action button: gradient call to action, glass secondary, text and destructive variants, with a loading state and optional icons.
GlassCard
The liquid-glass surface that groups content, with padding and corner-radius variants.
Sample title
compact
Sample title
standard
Sample title
spacious
Forms
PremiumTextField
A labelled single-line input with hint, validation states, a leading icon, a trailing slot and password reveal.
A hint under the field.
Error: This value is not valid.
Success: Looks good.
Warning: Check this value.
MoneyInput
An amount field that turns typed major units into exact integer minor units, with precision and range checks.
AED
A hint under the field.
USD
PremiumTextEditor
A labelled multi-line input with hint and validation states.
A hint under the field.
Error: This value is not valid.
PremiumPicker
A single choice: a segmented control for up to four options, a menu for more.
Sample label
A hint under the field.
MultiSelectPicker
A checkbox list for several choices, with a filter field when the list is long.
Sample label
2 selected
A hint under the field.
Combobox
A searchable single choice whose options load as the reader types: debounced, cancellable and announced.
A hint under the field.
PremiumToggle
A switch row with a label and an optional description.
PremiumCheckbox
A checkbox with a label and an optional description.
Error: This value is not valid.
PremiumSlider
A range input that shows its current value.
A hint under the field.
NumberStepper
A whole-number field with decrease and increase buttons, bounds and a step.
A hint under the field.
PremiumDatePicker
A labelled native date input with an ISO value, a minimum and a maximum.
A hint under the field.
DateRangePicker
Two native date inputs for a start and an end date, with bounds, quick ranges and an order check.
Sample label
A hint under the field.
TagInputView
A list of tags added with Enter or a comma and removed with Backspace or the button of the tag.
- beach
- family
A hint under the field.
FileDropzone
Chooses or drops files with type, size and count checks, lists their upload state and offers released documents as downloads only.
Sample label
Drop files here
Up to 5MB per file At most 3 files
sample-file-1.pdf
182kBReleased
sample-file-2.pdf
2.4MBUploading, 60%
sample-file-3.pdf
640kBUpload failed
This value is not valid.
A hint under the field.
ValidationMessage
An inline message under a field: error, warning, information or success.
Error: This value is not valid.
Warning: Check this value.
Information: Good to know.
Success: Looks good.
PremiumFormSection
A glass section with a title, a description and a footer that groups form rows.
Sample title
A short sample sentence that shows how body text reads.
FormRow
A label column next to a control, stacked on narrow screens.
A hint under the field.
FormBackground
The soft gradient backdrop of a form page.
Feedback
StatusBadge
A compact status label in a success, warning, error, information, neutral or accent tone.
successwarningerrorinfoneutralaccentChecking…
DeadlineBadge
The deadline of one clock with the time left and a tone that warns before it passes.
EmptyStateView
An empty state with a glowing icon, a title, a body and up to two actions.
Nothing here yet
Items you add appear here.
LoadingView
A labelled spinner, or a skeleton placeholder, while content loads.
Loading the sample…
Loading the sample…
Skeleton
A pulsing placeholder in the shape of the content that is loading.
ErrorView
A full error state with a title, a body and a retry action.
Something went wrong
The page could not be shown. Try again; if the problem stays, come back later.
ErrorBannerView
A dismissible banner that announces an error, a warning or a notice.
The connection was interrupted
A short sample sentence that shows how body text reads.
Check this value.
Good to know.
FeatureLockedView
The locked state of a page: signed out, wrong kind of user, module not enabled or permission missing.
This module is not enabled
Ask your administrator to enable this module for your organisation or account.
SuccessAnimation
A check mark that springs in to confirm a completed action.
Saved
A short sample sentence that shows how body text reads.
CommandOutcome
The outcome of a submitted command: accepted, queued, awaiting approval or the other party, reconciling, completed, rejected or unknown.
Accepted
The request was accepted. It is not confirmed yet.
S-1001
Modal
A dialog over the page with a title, a body and a footer, in three sizes.
Drawer
A side panel over the page at the inline end that traps focus like a dialog.
ApprovalDialog
Exact-action approval: the reviewed action and website, one Approve in the signed-in session that carries the action out (customers keep their email code or passkey and a separate final step), the deadline and an honest retry.
ToastProvider
Short notifications in a polite live region that dismiss themselves.
Layout
AppShell
The application frame: a sidebar navigation that collapses to icons and becomes a drawer on small screens, a top bar, a skip link and the content region.
The frame around this page is the live AppShell: sidebar, top bar, drawer on small screens and the skip link.
SkipLink
The first link of a page: hidden until it receives keyboard focus, it leads past the navigation to the main content.
The skip link below stays hidden until it receives keyboard focus: press Tab here to see it.
Skip to contentPageHeader
The header of a page: breadcrumbs, title, description and actions.
Sample title
A short sample sentence that shows how body text reads.
Tabs
A tab list with roving focus and one panel per tab, controlled or uncontrolled.
A short sample sentence that shows how body text reads.
Wizard
A multi-step flow: the steps with the current one marked, the current panel, and back and next actions.
Step 1 of 3 Overview
A short sample sentence that shows how body text reads.
TappableCard
An interactive glass card that renders a button or a link, with a leading icon, a title, a body and a chevron, and a disabled state that says why.
IconButton
A button that shows only an icon and always carries an accessible name.
ThemeToggle
Switches between the dark and the light theme, remembers the choice and follows the system until one is made.
DirectionToggle
Switches the document between left-to-right and right-to-left, for the showcase and for testing mirrored layouts.
GradientBackground
The decorative page background: three soft radial glows over the base color, drifting slowly unless reduced motion is requested.
Sample backdrop
Data
DataTable
A typed table with sortable headers, a sticky header, row actions, selection, a load-more control and empty, loading and error states.
States
| Guest | Status | Actions | |||
|---|---|---|---|---|---|
S-1001 | Guest Example 1 | AEDÂ 1,250.00 | success | ||
S-1002 | Guest Example 2 | AEDÂ 480.50 | warning | ||
S-1003 | Guest Example 3 | AEDÂ 3,020.00 | info | ||
S-1004 | Guest Example 4 | AEDÂ 760.00 | neutral | ||
| Total | AEDÂ 5,510.50 |
FilterBar
The filters above a list: search, status chips, a date range, a clear action and the number of active filters.
Status
Dates
1 filter active
KeyValueList
A definition list of labels and values, stacked or side by side.
- Reference
- S-1001
- Guest
- Guest Example 1
- Status
- Reachable
- Reference
- S-1001
- Guest
- Guest Example 1
- Status
- Reachable
Stat
One headline number with its label and an optional change in a positive, negative or neutral tone.
Sample figure
AEDÂ 48,250.00
12%since last month
Sample figure
312
-4%since last month
Sample figure
18
A hint under the field.
Money
An amount from integer minor units and a currency, formatted exactly, with an optional sign and debit or credit tone.
- Amount
- AEDÂ 1,234.50
- Credit
- +AEDÂ 480.00
- Debit
- ($150.75)
Timeline
A chronological list of events with time, title, detail and tone, and a load-more control.
Saved
A short sample sentence that shows how body text reads.Guest Example 1
The connection was interrupted
Sample title
Guest Example 2
Charts
LineChartView
A line chart with a gradient area fill and keyboard and pointer selection of points.
BarChartView
A bar chart anchored to the zero baseline, with keyboard and pointer selection of bars.
PieChartView
A donut chart of shares with a legend that selects a slice.
Sparkline
A small trend line without axes, described by its label.
Tokens
Colors
| Token | Dark | Contrast on dark | Light | Contrast on light |
|---|---|---|---|---|
| background | #0A0C18 | 1:1 | #F5F7FB | 1:1 |
| bgElev1 | #11142B | 1.07:1 | #FFFFFF | 1.07:1 |
| bgElev2 | #181C36 | 1.17:1 | #E9EEF6 | 1.09:1 |
| foreground | #EBF0F8 | 17.01:1 | #0A0C18 | 18.15:1 |
| fgMuted | #B4BFD0 | 10.48:1 | #414B61 | 8.15:1 |
| fgQuiet | #7A88A8 | 5.48:1 | #566179 | 5.79:1 |
| accent | #00E0FF | 12.15:1 | #00667A | 6.15:1 |
| blue | #3CBAFF | 8.96:1 | #0A5FA2 | 6.17:1 |
| systemblue | #169BFF | 6.64:1 | #0058C0 | 6.2:1 |
| purple | #A783F8 | 6.72:1 | #6636DF | 6.2:1 |
| pink | #FF5492 | 6.43:1 | #AF1652 | 6.4:1 |
| success | #22C55E | 8.54:1 | #116B37 | 6.15:1 |
| warning | #FBBF24 | 11.66:1 | #815400 | 6.12:1 |
| error | #F26A6A | 6.53:1 | #AF2323 | 6.34:1 |
| controlBorder | #627296 | 4.05:1 | #74809C | 3.69:1 |
Spacing
| Name | Value | Sample |
|---|---|---|
| xxxSmall | 2 px | |
| xxSmall | 4 px | |
| xSmall | 6 px | |
| small | 8 px | |
| smallPlus | 10 px | |
| medium | 12 px | |
| standard | 16 px | |
| large | 20 px | |
| xLarge | 24 px | |
| xxLarge | 32 px | |
| xxxLarge | 36 px |
Radius
| Name | Value | Sample |
|---|---|---|
| small | 8 px | |
| medium | 12 px | |
| standard | 16 px | |
| large | 20 px | |
| tappable | 24 px | |
| card | 28 px |
Type scale
| Name | Value | Sample |
|---|---|---|
| badge | 10 px | Sample title |
| micro | 12 px | Sample title |
| captionSmall | 12 px | Sample title |
| caption | 12 px | Sample title |
| bodySmall | 13 px | Sample title |
| body | 14 px | Sample title |
| bodyLarge | 15 px | Sample title |
| titleSmall | 16 px | Sample title |
| field | 16 px | Sample title |
| title | 17 px | Sample title |
| titleMedium | 18 px | Sample title |
| titleLarge | 20 px | Sample title |
| headline | 24 px | Sample title |
| metric | 26 px | Sample title |
| navigationTitle | 28 px | Sample title |
| largeTitle | 34 px | Sample title |
| dashboardHeroValue | 44 px | Sample title |
| display | 56 px | Sample title |
Motion
| Name | Value | Sample |
|---|---|---|
| quick | 0.2 s | |
| standard | 0.4 s | |
| slow | 0.6 s | |
| chart | 1 s | |
| success | 2 s | |
| spin | 1 s | |
| pulse | 2 s | |
| easeSpring | cubic-bezier(.34, 1.2, .64, 1) | Spring easing |
Icons
Navigation
- desktop
- hotels
- visa
- excursions
- transfers
- tickets
- holidays
- services
- insurance
- accounts
- crm
- settings
- design
- health
- tools
- support
- funds
- partnerships
- work
Actions
- add
- subtract
- edit
- delete
- search
- filter
- export
- save
- cancel
- confirm
- upload
- download
- refresh
- more
- show
- hide
Status
- success
- warning
- error
- info
- pending
- locked
Miscellaneous
- user
- users
- key
- robot
- calendar
- money
- document
- bell
- globe
- moon
- sun
- chevronLeft
- chevronRight
- chevronDown
- check
- close
- menu