Azora Design System

Filled action buttons in Azora's two emphasis levels, plus a lower-emphasis outline for menu items.

• Primary (brand orange, white text) is the only filled-orange control on a screen at a time where possible — it marks the single next action.
• Secondary (dark navy, white text) is for a utility action that sits next to a primary one without competing for attention.
• Outline — neutral (transparent, border-subtle, ink-700 text) is for actions inside dropdown menus and toolbar icon buttons.
• Outline — primary (white fill, brand-orange 1.5px border, brand-orange text) is a lower-emphasis sibling to the solid primary button.
• Destructive — solid (error fill, white text) is for an irreversible action presented as its own clear button rather than a menu item.

All three share one 10px radius, one 14px/600-weight label, and a 0.15s background transition.

Disabled primary — confirmed: a lightened button-disabled-bg with white text — not a gray button on the page background. Keep the white text; only the fill desaturates.

Small, fully-rounded, filled pills used for every status in the product: the Profiles list, the Last Bookings table, and the profile detail status stepper.

Four fixed pairs — never mix a background from one status with another status's text color:

12px/600-weight label, space-1–space-2 vertical padding, space-3 horizontal padding, radius-full. These are never outlined — fill is what makes them scannable in a dense table.

A second, softer badge style exists for operational/availability states:

The KPI tile used in the Dashboard's Insights row. A white card on surface-page, shadow-card, radius-md, space-4 padding: a label row at the top in ink-500/field-label style, then the number in stat-value (largest type in the system) in ink-900, and an optional one-line caption.

Keep captions to a single short sentence. The number is always the visual anchor of the card.

The dense list pattern that carries most of Azora's screens. A surface-card container with shadow-card and radius-md, a table-header row (ink-500, 12px/600) on a hairline bottom border, and body rows in body/14px with space-3 vertical padding and the same hairline between rows — no zebra striping.

Row content follows a consistent order: an identifier/link column (brand-orange text link), one or more plain data columns, a Badge status column, and a trailing actions column. Selectable tables add a checkbox column at the far left.

The four-segment ring from the Dashboard's "Profiles Processing" / "معالجة الملفات" widget: one donut per status (Pending, Confirmed, Done, Cancel), each shown as its own small ring with the percentage inside and a "Count: N" caption underneath.

Uses its own four-color set (chart-status-pending…chart-status-cancel), not the status-* pair used by table badges.

The on/off switch used as a row-level active/inactive control in every list table — Hotels, Drivers, Last Profiles. On uses control-on (same orange as every primary button); off uses control-off, a mid-gray track. radius-full track and thumb, white thumb, no label text beside it.

Reserve this for a direct, immediate toggle. For a workflow state that moves through steps, use the Badge or the profile-detail stepper instead — never a Toggle.

The product's confirmed toast pattern: a solid rectangle, bold white text, fixed to the top-right of the viewport, radius-sm corners. Two outcomes are confirmed — error (error background) and success (success-strong background, the "Updated successfully" toast on the Users page).

• Solid error/success-strong background, never a soft tint.
• Uses success-strong, not the base success token: white text on plain success (#1fa971) measures under the 4.5:1 minimum (~3.0:1), so any text-bearing success surface should reach for success-strong instead.
• Stack new toasts above older ones with a small (space-2) gap; each keeps its own dismiss control.
• Known bug, not a pattern: the captured second toast renders a raw i18n key (general.changeStatusError) instead of translated text.

The row of pastel quick-link tiles at the top of the Users page: an icon + label on a soft, category-colored background, same-hue dark text, no border or shadow.

Four fixed pairs, one per report category:

The horizontal numbered stepper used to navigate a multi-step form — Add Profile, Edit User. Distinct from the Badge stepper on a profile's detail page: this one is circles-and-connecting-line, for moving through a form.

• Each step is a numbered circle: current and completed steps are filled brand-orange with white text; upcoming steps are an outline circle.
• The connecting line is brand-orange up through the current step, then border-strong for the rest.
• The step's label sits above its circle.

The attachment dropzone from the Hotel Reservation form's Attachments section: a large dashed-border rectangle, border-strong, radius-md, centered cloud-upload icon in ink-500 and "Drag and drop, or click to upload file" in body size, ink-500.

Pairs with a required-field asterisk on its label like any other FormField, and with a disabled-primary button underneath until a file is actually attached.

The pill-shaped radio selector used for binary either/or choices in the Car Rental wizard, always presented as two large pill cards side by side.

• Unselected: surface-card background, border-subtle 1px border, hollow gray radio dot, ink-700 label.
• Selected: brand-orange-soft background, brand-orange 2px border, a filled brand-orange radio dot (white center), ink-900 bold label.
• A small icon sits in its own white, rounded-square chip at the card's outer edge.
• Confirmed RTL-native: radio dot and label sit at the trailing (right) edge in Arabic, the icon chip at the leading (left) edge.

The underline tab bar used to switch sections of a record's detail page.

• Active tab: brand-orange text and icon, bold, a 3px brand-orange underline spanning the full width of that tab segment.
• Inactive tab: ink-500 text and icon, no underline.
• A thin border-subtle line runs under the whole bar.
• Tabs are numbered in the label itself ("1. Overview") when they represent a fixed sequence.
• Different from WizardStepper: tabs are peer sections of one finished record a person jumps between freely; WizardStepper is a forward-moving, not-yet-complete multi-step form.

The row-selection checkbox used in every DataTable: unchecked is a border-strong outline square on surface-card; checked is a solid brand-orange square with a white checkmark, radius-sm corners. The header's select-all control uses the same filled-orange square with a short white dash when the selection is partial.

The labeled text input used throughout every "Add…" form: a field-label above a surface-card input with a border-subtle 1px border and radius-sm corners. A required field adds a small error asterisk.

Asterisk position is inconsistent in the product itself: most forms put it after the label text (Name *), but the Hotel Reservation form puts it before (* Check in).

The invalid-field error state: the input's border stays neutral (border-subtle), not error — only one line of error-colored helper text appears directly under the input. Nothing about the label or the input's background changes either way.

The public login screen's split layout — the one surface in the product that isn't the app's internal chrome.

• Left panel (~1/3 width, surface-page background): the real Azora logo top-left, then "تسجيل الدخول" in page-title, a body/ink-500 subheading, two FormFields (email, password), a plain Checkbox + label ("عرض كلمة المرور" / Show password), and the submit button pinned to the panel's bottom.
• Right panel (~2/3 width): a full-bleed photographic/illustration image, no text or UI on top of it.
• The submit button uses button-disabled-bg, not brand-orange, even though it's fully enabled and clickable — this is the login screen's own primary-button tone; don't "correct" it to brand-orange when matching this screen specifically.
• 2026-10-26 update: button-disabled-bg's token value was darkened from its originally sampled #f3a282 to #c34513 as an accessibility fix — white text on the captured pixel value measured only ~2.0:1, now ~5.0:1.
• Inline validation here matches FormField's confirmed error pattern: neutral border, red helper text only.