Azure

Component library

Every piece of the interface, in every state

This page shows the components every screen in our projects is built from: in Arabic and English, light and dark. What changes here changes on every screen that uses it.

The restaurant's pieces

The pieces every module shares, built on the kit: money in its currencies, written states, tables, big operational buttons, the thermal receipt, calendars. Every module uses them as they are.

The product's mark

The symbol and the product name from its one key — renaming the product changes it here and everywhere.

BrandMark
AzureRestaurant operating systemAzureAzureAzure

Money

In new pounds, with the old ones during the transition and the dollar equivalent when needed. Latin digits, isolated so they never reverse in an Arabic line.

MoneyAmount

Sizes

250SYP9,300SYP12,750SYP18,500SYP1,284,500SYP

With old pounds and dollars

12,750SYP= 1,275,000 old SYP≈ $ 98.0818,500SYP= 1,850,000 old SYP

Dollars and a signed difference

$100-500SYP+250SYP

An amount in its currency

New pounds, old pounds as printed on the note, or dollars at today's rate — and its worth in new pounds right under it. Accepts an Arabic keyboard's digits.

CurrencyAmountInput
$

= 13,000 SYP($1 = 130 SYP)

old SYP

= 13,000 SYP

Written states

Every state as a word, an icon and a colour — never colour alone. One family per entity of the analysis.

StatusPill

Table (§9)

AvailableReservedSeatedOrderedWaiting for foodPartly readyBill requestedPaidNeeds cleaning

Order item (§23)

In basketHeldPendingPreparingReadyServedCancelled

Kitchen ticket

NewPreparingReadyLate

Reservation (§41)

RequestedConfirmedArrivedSeatedCompletedCancelledNo show

Hall booking (§46.3)

InquiryTentative holdConfirmedContract signedFinal count confirmedIn progressFinishedSettledPostponedCancelled

Guest's call

Calls the waiterAsked for the billWants a head changeWants coal

Sync (§81)

All data up to dateWaiting for connectionNo internet

Printer, shift and task

WorkingNot connectedOut of paperOpenClosedDoneNot done
Bill requestedReadyTentative hold

Table tile

The table number, its state, guests, time and what waits on it (a call, a ready dish, a reservation). One big touch target.

TableTile

Syrian phone number

09xx grouped 4-3-3, and an Arabic keyboard's digits are accepted.

PhoneInput
Valid number

Quantity stepper

Big one-hand buttons: quantity, guests, banknote counts.

QuantityStepper
6
1
12

Operational buttons and their bar

Big and always worded («Send to the kitchen», never an icon alone), and a bar fixed at the bottom of a phone or POS screen.

TouchButton · ActionBar

An order line

Quantity, name, choices and notes, the item's state and amount, and whatever buttons it needs.

OrderItemLine
1

Hummus

Ready
450SYP
1

Tabbouleh

Ready
500SYP
2

Mixed grill

Ready
4,400SYP
1

Fish by the kilo

Grilled

Preparing1.4 kg
3,500SYP
3

Orange juice

Ready
1,200SYP
2

Large water

Ready
350SYP

The bill lines

In the analysis's order: subtotal, hospitality, discount, minimum difference, service, fees, rounding, total in both currencies, paid per currency, remaining.

BillBreakdown
Subtotal
8,950SYP
Service 10%
895SYP
Consumer spending fee 5%
492SYP
Rounding
+13SYP
Total
10,350SYP= 1,035,000 old SYP≈ $ 79.62

The thermal receipt

80 mm (or 58) paper, white in both themes, printed alone without the rest of the page.

ReceiptFrame

Beauty Restaurant

Latakia — South Corniche, facing the harbour

Bill
1,042
Table
T21
Waiter
Ahmad Youssef
Printed at
2026-10-24 22:30
1× Mixed cold mezze platter1,600
2× Mixed grill4,400
3× Pepsi600
2× Ayran400
1× Seasonal fruit platter1,200
3× Arabic coffee750
Subtotal
8,950SYP
Service 10%
895SYP
Consumer spending fee 5%
492SYP
Rounding
+13SYP
Total
10,350SYP= 1,035,000 old SYP

Thank you for your visit — enjoy your evening

Beauty Restaurant

2× Head change600
3× Arabic coffee750

Thank you for your visit — enjoy your evening

Time elapsed

«8 min ago» with the right plural, turning red with an icon when late.

Elapsed

A timeline of rows

One row per hall or table, bookings as blocks with their state written, setup and cleanup before and after, periods, and a «now» line. Time runs in reading order.

ResourceTimeline
09:0010:0011:0012:0013:0014:0015:0016:0017:0018:0019:0020:0021:0022:0023:0000:0001:0002:00
Grand hall400 seated
Garden hall180 seated
Rooftop120 seated

A month of days

The week starts on Saturday, today is ringed, busy days are darker.

MonthGrid

November 2026

SaturdaySundayMondayTuesdayWednesdayThursdayFriday

Foundations

Colour, type and corners, then the smallest pieces every screen is built from: buttons, badges, avatars and hints.

Colours

Every colour on screen is one of these names, never a hand-typed code. Click a colour to copy its name.

tokens · ColorSwatch

Two colours make a project its own: the brand and the accent, plus the ink. The three are written in ONE block at the top of the stylesheet, and everything shown here is derived from them — light and dark alike. Change that block and every screen changes.

Brand

Accent

Ink steps

Surfaces

Lines

The four status tones

ToneSoftSolidWhen
BrandbrandSampleSampleThe main action, links, selection
NeutralneutralSampleSampleDrafts, secondary actions
AccentaccentSampleSampleWhat deserves a gentle look
SuccesssuccessSampleSampleApproved, complete, on time
WarningwarningSampleSampleClose to due, needs a change
DangerdangerSampleSampleLate, delete, reject
InfoinfoSampleSampleIn review, a note

Status tones are fixed: they never follow a rebrand, so red is red in every project.

Gradient and the deep shade

Signature gradient

For the ONE key action on a screen

bg-signature

Glow

For a page hero or an empty state

bg-glow

Deep shade

The sidebar and tooltips

bg-deep

Type scale

Eight sizes are enough for every screen. Figures are always Latin digits and line up in columns.

text-*
text-4xl36px

This week's report is ready for review

A big figure in a page header

text-3xl30px

This week's report is ready for review

Screen title

text-2xl24px

This week's report is ready for review

Section title

text-lg18px

This week's report is ready for review

Card title

text-[15px]15px

This week's report is ready for review

Lead paragraph

text-sm14px

This week's report is ready for review

Body text

text-xs12px

This week's report is ready for review

A hint under a field

text-2xs11px

This week's report is ready for review

A small label over a group

Corners and shadows

One base corner (10 px) the others derive from, and five shadows for elevation. In dark mode the shadows go deeper.

rounded-* · shadow-*

Corners

sm · 6
md · 8
lg · 10
xl · 14
2xl · 18
full · ∞

Shadows

xs
sm
md
lg
xl
brand

Button

Six shapes, each taking any tone. The signature shape is for the ONE key action of a screen.

Button

Shapes

Every shape in every tone

Sizes

With an icon

States

A link drawn as a button

Button group

Buttons joined in one frame, or a spaced row. The group's size and tone apply to every button in it.

ButtonGroup

Joined

Spaced

Icon button

A square button with only its icon. Its name is required, and shows as a tooltip on hover or focus.

IconButton

Shapes

Sizes

Split button

A main action with an arrow beside it that opens the alternatives. The menu floats above everything, is never clipped, and Escape closes it.

SplitButton

Shapes

States

Copy button

Copies the text and says «Copied» right where it was pressed, for two seconds. This is house's own button, in the library's colours.

A house pieceCopyButton
https://house.example/invite/7Q2K

Badge

A short word for a state: soft, solid or outlined, with a dot or an icon.

Badge

Soft

ApprovedIn reviewLateDraftUrgent

Solid · Outline

ApprovedLateIn reviewUrgent

Sizes

SmallMediumLarge

Tag

A tag that toggles when pressed (for filters), is removed with its button, or carries a person.

Tag · Chip

For filtering

Removable

FinanceHuman resources

People

Sara Al-QahtaniFahad Al-OtaibiPremium Hospitality Co.

Count and status dot

A small number in a bubble that reads «99+» past its limit, and a dot that breathes for what is live now.

Count · StatusDot

Shapes

34299+597 unread

States

Online nowSyncingOffline

Avatar

Two initials in a colour fixed to the name everywhere, or the photo when there is one, with a presence dot.

Avatar · AvatarGroup

Sizes

States

Group

Tooltip

A short word on hover or keyboard focus. It even tells why a disabled button is disabled.

Tooltip

With a shortcut

On a disabled button

Keys and separator

Key caps (⌘ on Apple devices, Ctrl elsewhere) and a separating line, with or without a word.

Kbd · Separator

Kbd

To search, press CtrlK⇧↵Esc

Separator

or
Edit
Share
Print

Fields and forms

Every field here is built on house's Field: the label above the box, its message under it, one height and one border for every box. Lists and the calendar open over the page and nothing clips them.

Field

The label, the control, and its own message under it. Every field in the library goes through it.

A house pieceField

States

We only send the sign-in link there.

Text box

One line, with an icon, a prefix or a suffix, and a character counter when needed.

TextField · Input

States

Empty

Filled

Disabled

Read only

Checking

Extras

+966
https://

Accepted

Shown at the top of the report.0 / 40

Sizes

Long text

Grows with the text up to a limit, then scrolls; counts characters when the text has a maximum.

TextAreaField · Textarea

States

Sent to the reviewer with the request.86 / 200

Number box

The − and + buttons (hold to keep going), the arrow keys, a minimum and a maximum; digits typed on an Arabic keyboard read as Latin.

NumberField

States

hours

From 0 to 80, in half-hour steps.

%

Disabled

Search box

A clear button appears as you type, Esc clears, and a keyboard shortcut puts the cursor in it.

SearchField

States

Password

The eye shows what was typed. The box runs left to right in both languages.

A house piecePasswordInput

States

At least twelve characters.

Disabled

Pick list

Every choice from a list goes through it. A short list opens as it is; a long one (seven options or more) has a search box that understands Arabic spelling.

A house pieceSearchSelect

States

Short list

Long list with search

Disabled

Date box

Typed or picked from the calendar. Accepts 25/2/2027 and Arabic digits and turns them into year-month-day.

A house pieceDateInput

States

This month or the next only.

Date with Hijri

The same date box, with the same day in the Umm al-Qura calendar under it (or beside it), following every pick.

DateField

Layouts

Hijri: 3 Jumada I 1448 AH

Hijri under the box

The Hijri date shows here once a day is picked

Hijri beside it

Both dates together

For a date in a table or a card: Gregorian and Hijri, on one line or two, with the governing calendar emphasised.

DualDate

Display

One line

2026-10-143 Jumada I 1448 AH

Two lines

2026-10-143 Jumada I 1448 AH

Hijri governs

2026-10-143 Jumada I 1448 AH

Amounts

The official riyal sign (SAMA), drawn, before the figure in both languages. Digits are always Latin.

Money · RiyalSign

Display

Full

4,850,000

Compact

4.9M

With the code

SAR 1,250

With halalas

312.50

Amount box

Groups the thousands as you type, and turns Arabic digits into Latin ones.

MoneyInput

States

Stored value: nothing yet

Disabled

Verification code in boxes

A fixed-length code sent by text or email. Typing moves to the next box, pasting fills them all, Arabic digits read as Latin. Not the same as the two-step sign-in box below.

OtpInput

States

Empty

Complete

Split 3 + 3

Two-step sign-in code

One box that takes an authenticator app code (six digits) or a backup code shaped XXXXX-XXXXX.

A house pieceCodeInput

States

File upload

Drop or browse; the files are listed under it with their size and a remove button. It draws progress only for a real upload the screen reports.

FileDrop

States

Checkbox

On or off, and «some» when a group is partly chosen.

Checkbox

States

House's own checkbox (for a form posted as is)

Checkbox group

Several options under one label, with «select all».

CheckboxGroup

States

One of several

A vertical or horizontal list, with a line of explanation per option.

RadioGroup

Layouts

Choice cards

For a decision where each option needs a sentence.

RadioCards

Switch

For a setting that applies at once, with no save button.

Switch

States

Sizes

Segmented buttons

Always one choice among a few, such as how a list is shown.

SegmentedControl

States

Layouts

Filter chips

Several choices switched on and off, with an optional count.

ToggleChips

States

Sizes

Slider

One value or a range, with marks under it and a bubble with the value while dragging.

Slider

States

Windows and menus

Everything that appears over the page: windows, the side panel, the confirm question, toasts, menus and anchored panels — and with them the page’s quiet states: empty, loading, progressing. Every list and calendar here opens whole above the window that holds it, and Escape closes only the top layer.

Dialog

A window over the page for a short task: a form, details, or a decision. Escape, a click outside or the close button closes it, and focus returns to the button that opened it. On a phone it rises from the bottom edge.

Dialog · DialogClose

Sizes

A form inside a dialog

Side panel

A panel that slides in from the screen’s end (the right in English) for longer things: filters, a record’s details, settings. Same fields; their lists open whole above it.

Sheet

Confirm question

Asks before something that cannot be undone. A click outside does not close it — the answer is yes or no. It can ask for a word to be typed first, and run the work inside itself until it finishes. It opens from anywhere, even from inside an open dialog.

AlertDialog · useConfirm

Tones

Toast

A short word in the screen’s corner about something that happened elsewhere or in the background. It leaves by itself, its timer stops while the pointer is over it, and it shows above any open window.

toast · Toaster
A toast never replaces the result where it lands: a saved form shows its new values, a table dims in place while it refreshes. A toast is for what has no place on this screen: a job finished in the background, an undo for a row that left the list.

Tones

Cases

Popover

A small panel under a button: a quick filter, a two-field form, a piece of information. Focus moves into it; a click outside or Escape closes it.

Popover

Hover card

Shows when the pointer rests on a name or a link, or when the keyboard reaches it, after a short moment. For previews only — no buttons in it.

HoverCard
Reviewed by Mona Alqahtani and forwarded to Finance.

Screen-level note

A note about the whole screen: a refusal, an absence, a standing condition. Not where a field’s error goes — that is written under the field itself.

A house pieceCallout
This data is a demo and is not saved.
You may not open this screen. Ask your branch manager for access.

Waiting where the result lands

While a result is on its way, the place it will appear says so: the button spins until the new data is really on screen, and the list dims in place instead of being replaced.

A house piececomponents/Pending

A button and a list sharing one pending state

  • Row 1
  • Row 2
  • Row 3

The list never disappears and keeps its scroll: it only dims until the new row arrives.

A panel with nothing to show yet

Loading…

The spinner on its own

Checking the code…

Empty state

A small drawing, a title, one line of help, and the next step. Four kinds: nothing yet, no results, all done, and failed to load.

EmptyState

Nobody here yet

Add the first person to the branch and the list will appear here.

No results for “senior accountant”

Try a shorter word, or clear the filters.

Nothing is waiting for you

You have reviewed every request. We will tell you when a new one arrives.

Could not load the list

The connection to the server dropped. Nothing was lost.

Small — inside a card or a table

No results for “senior accountant”

Try a shorter word, or clear the filters.

Skeleton

The shape of what is coming, with a calm light crossing it in the reading direction. For a first load only: what is already shown and refreshing stays put and dims.

Skeleton · SkeletonText · SkeletonAvatar · SkeletonCard · SkeletonTable · SkeletonTableRow

Blocks and lines

A card

A table

Progress

How far along something measurable is: a file uploading, a wizard’s steps, a share of a target. Digits are always Latin.

Progress · SegmentedProgress · ProgressRing

The bar

Uploading the payroll sheet64%
Approved3 of 5
Storage92%

Nearly full — delete old attachments.

Preparing the file…

Steps

Step 2 of 4 · Attachments

The ring

64%
64%
18of 25

Figures and charts

The figures that matter, in a tile, and the charts that explain them. Their colours come from the chart slots in the brand block, their digits are Latin, and under Arabic time runs from the right.

Stat card

A label, a figure, the change against the last period, and a small trend. The change is coloured by whether it is good news, not by its sign: fewer failed sign-ins is green.

StatCard

Active people

1,284

+12%

against last month

Failed sign-ins

37

−18%

fewer is better

Sign-ins today

412

+6%

against yesterday

On-time attendance

92%

target 95%

Requests waiting

8

0%

same as last week — the whole tile is a link

Bar chart

A comparison between categories: columns for months, stacked when made of parts, or horizontal rows for long Arabic names. Hover to see the details.

BarChart

Stacked columns

JanFebMarAprMayJun
  • Approved
  • Waiting for review
  • Returned for changes

Horizontal rows

  • Field operations42
  • Engineering31
  • Customer care24
  • Finance12

Line chart

A trend over time, one line or more, with a filled area under the first and a dashed target line.

LineChart
  • This year
  • Last year

Donut

The parts of one whole. It turns from the top in the reading direction; hover a part to see its figure and share in the middle.

Donut

80

requests

  • Approved4657%
  • Waiting for review1823%
  • Returned for changes911%
  • Drafts79%

Sparkline

A trend without axes, beside a figure or inside a tile. It ends on a dot at the last value.

Sparkline
Sign-ins29
On-time attendance92
Failed sign-ins6
New people7

Chart legend

Explains a chart’s colours. The eight slots follow the brand and the dark theme; no colour is written by hand.

ChartLegend

The eight chart slots

  • chart-1
  • chart-2
  • chart-3
  • chart-4
  • chart-5
  • chart-6
  • chart-7
  • chart-8

With values

  • Approved46
  • Waiting for review18
  • Returned for changes9

Data table

House's own table, not a copy from another library. It reads the database, so it is not drawn on this page.

A house piececomponents/data-table

Fetches only the page you see from the server, sorts and searches there, opens a row in a side sheet, and lets the reader choose and resize columns. It runs on the People screen.

Open the People screen