Skip to content
Tamem

How Tamem looks and sounds

The mark, color, type, motion and voice shared by the console, the POS, the client app and this website. Every value on this page is the one the product uses, so you can copy it straight into your work.

Download the logoBrief for AI agents
The mark on its 210 by 210 canvas, with the edges each shape is built on.

The mark

A letter T that is also a receipt. Select a part to see where it sits.

Color

Mostly white, near-black and hairlines. Navy is the ink of the mark and the color of whatever you can press or have selected. Brand blue is the bar in the mark and the border of the field you are typing in.

Brand

The two colors of the mark.

Navy

The ink of the mark. Primary buttons, the selected tab, and the one dark band on the landing page.

HEX
RGB
OKLCH
Token

Brand blue

The bar in the mark. The border of the field you are typing in.

HEX
RGB
OKLCH
Token

Neutrals

Most of every screen.

  • Ink

    Text and headings.

  • Muted ink

    Secondary text, captions and icons at rest.

  • Canvas

    The console's page, under its panels.

  • Hairline

    The line between rows.

  • Muted

    Hover fills, loading skeletons and secondary buttons.

  • Inset

    A well inside a panel: totals, a summary, a dialog's buttons.

  • Rail

    The console's sidebar.

  • Tint

    Every second section of the landing page.

  • Panel

    Every panel and the fields in it.

Status

The state of something, always as a tinted badge with darker text of the same hue. Never for emphasis.

  • Positive

    Ready

  • Caution

    Received

  • Info

    Processing

  • Destructive

    Canceled

Receipt paper

Only on pictures of paper: the sign-in card, the customer’s tracking ticket and the receipt in the landing page’s ZATCA band.

  • Paper

    The ground of a printed slip.

  • Stamp

    The one printed heading on the ticket.

Type

One typeface for each script: Inter for English, IBM Plex Sans Arabic for Arabic and Urdu. Headings are semibold and body text is regular. Both faces are free under the SIL Open Font License.

  • Your order is ready for pickup.

    • Aa 400
    • Aa 500
    • Aa 600

    Inter

    English, in the console and on this site.

  • طلبك جاهز للاستلام.

    • أب 400
    • أب 500
    • أب 600
    • أب 700

    IBM Plex Sans Arabic

    Arabic and Urdu on the web. In the POS and the client app it sets every language, English included.

Scale

  • Display

    60px on a desktop, 36px on a phone. Semibold, line height 1.06, tracking −2.8%.

    The invoice is on its way.

  • Heading

    34px, 26px on a phone. Semibold, line height 1.15, tracking −2%.

    The invoice is on its way.

  • Console page title

    24px, 20px on a phone. Semibold.

    The invoice is on its way.

  • Console section title

    14px. Semibold.

    The invoice is on its way.

  • Body

    17px on this site, 14px in the console. Regular.

    The invoice is on its way.

  • Small

    12px. Captions and notes under tables.

    The invoice is on its way.

Three more faces, one job each

  • Quicksand Bold drew the English wordmark. It exists only as outlines in the logo files and is never set as text.
  • IBM Plex Mono sets the sign-in card and the customer’s tracking ticket, the two screens drawn as printed slips.
  • Noto Nastaliq Urdu sets Urdu on the receipt PDF, in the Nastaliq script Urdu readers expect on a printed document.

Three languages

Every screen ships in English, Arabic and Urdu. Arabic and Urdu read right to left, share one typeface on screen and share the Arabic lockup.

  • English

    Your whole shop, in one system.

  • العربية

    نظام محلك كله، في مكان واحد.

  • اردو

    آپ کی پوری دکان، ایک نظام میں۔

The film’s opening line, as each language writes it.
  • Layouts mirror with the reading direction. Spacing and alignment are set by start and end, not left and right.
  • Right-to-left headings drop the tight letter spacing and get more line height: 1.3 for titles, 1.4 for headings. Arabic letters join, and tightening them breaks the joins.
  • Phone numbers and invoice numbers keep their left-to-right order inside Arabic and Urdu text.
  • The mark is never mirrored. The Arabic lockup moves it to the right, where an Arabic reader starts.
  • The name is Tamem in English and تامم in Arabic and Urdu.

Icons

Stroke icons from Hugeicons, in the color of the text beside them. Every icon comes with a word, or with a label a screen reader can announce.

  • 20px by default, 16px in dense rows. The console’s sidebar sets them at 18px.
  • A 1.5 stroke on a 24px grid, with round ends. The sidebar thickens it to 1.8.
  • Muted ink at rest, ink when the item is active.
  • Dashboard
  • Orders
  • Appointments
  • Service cases
  • Catalog
  • Customers
  • Promotions
  • Loyalty
  • Gift cards & credit
  • Staff
  • Branches
  • Finance
  • Reports
  • Settings
The console’s sidebar, with Orders open.

Avatars

A person without a photo is drawn, not lettered. The drawing comes from their name, so the same person has the same face at the till, in the back office and in the customer app.

  • Drawn on the device from the person’s full name. The name is never sent anywhere to make it.
  • Navy ink and white, on light navy or receipt paper. No other color, and no prints on the clothes.
  • Cropped close to the face, because it is shown between 24px and 64px.
  • A photo replaces it as soon as one is added. A business keeps its initials, because a shop is not a face.
  • Abdullah Al-Qahtani
  • Noura Al-Harbi
  • Faisal Al-Dosari
  • Sara Al-Otaibi
  • Ahmed Khan
  • Layla Hassan
Six customers, each drawn from the name under them.

Surfaces

The console separates by tone and space, not lines: a faint canvas, white panels on it, a baby blue well inside a panel, and one line left, between rows. Only what floats has a shadow.

Canvas and panels

--canvas, --card, rounded-panel 16px

The page is a faint grey canvas. Each part of a screen is a white panel on it with 16px corners, no border and no shadow, told apart from the next by the canvas between them.

Invoice

Invoice
INV-2026-004183
Status
Ready

Total

⃁ 41.40

Inset

--inset #E9F0FF, rounded-inset 12px

A well inside a panel, in a deeper baby blue: an order's totals, a summary, the buttons at the foot of a dialog. Never a page's ground.

Invoice
INV-2026-004183
Status
Ready
Total
⃁ 41.40

Rows

<Rows>, 1px --border

The one line left. It runs between rows that belong together, starts where their text starts, and never sits above the first or below the last.

  • Edit
  • Duplicate
  • Cancel order

Floating

80%, backdrop-blur-xl, reduce-transparency

Menus, popups and dialogs are solid and carry the only shadows. A bar that floats over scrolling content is see-through, and turns solid for anyone who asks their device for less transparency.

  • Edit
  • Duplicate
  • Cancel order

Corners

control 16, popup 16, row 12, inset 12, full

Every control and every popup is 16px round, and so is a panel. Smaller boxes get smaller corners; a corner inside a corner is the outer one less the padding. Chips and badges are fully round.

Ready

Spacing

4, 8, 12, 16, 24, 32, 40

Padding and gaps come in steps of 4px. Anything you can tap has at least 44px to hit on a touch screen.

  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40

The landing page

--color-landing-tint, landing-surface

Sections are told apart by ground: every second one sits on the tint. A block that needs a container is a white surface with a soft navy shadow.

Invoice
INV-2026-004183
Status
Ready

Components

Everything the console is built from, working. The switches under each one show its variants and states; the navbar changes the language and the theme.

Controls

Things that hold a value the operator gives.

Button

Every action. One filled button per screen for the main thing, outline and ghost for the rest, destructive only where something is lost.

variant
size
state

Input

A single line the operator types: a name, a code. Label it with Field.

size
state

SearchField

The box a list is searched with: a magnifier and a field. It takes its name from its placeholder.

InputGroup

An input that needs something attached: a search icon, a unit like ⃁, a clear button.

Textarea

Free text longer than a line: a note on an order, a reason.

Printed on the ticket.

state

NumberInput

A number someone types: a count gets − / + either side, an amount its unit. Never a type="number" box.

Before VAT.

%
state

RiyalSign

The Saudi Riyal sign, drawn: a unit beside an amount, as tall as its figures. Text that prints a price gets the sign from formatSAR.

1,250.001,250.001,250.00

PhoneInput

A Saudi mobile number. The +966 is fixed, so nobody types it twice.

+966
state

Checkbox

Turning one option on or off in a form that is saved together. For a setting that applies at once, use Switch.

state

Switch

A setting that applies the moment it is flipped. Inside a form saved with a button, use Checkbox.

state

RadioGroup

Two to five choices that should all be visible at once. More than that, or long labels: Select.

How the order reaches the customer

DatePicker

A day, a month or a range. Every date field in the console goes through it.

mode

TimePicker

A time of day with no date, like opening hours or a usual pickup time.

ImageUploadField

One photo for a record, an item or a person's face. Replaced and removed in place.

Item photo
Item photo

This page doesn't store photos, so the upload stops here.

kind

ImageUploadStage

A larger drop area, for when the photo is the main thing on the screen.

Upload

This page doesn't store photos, so the upload stops here.

Field

Labels any control and reads out its hint and its error. The one way to label a control.

As it prints on the receipt.

state

Fieldset

Several controls under one heading: checkboxes or radios that answer one question.

Extras

Label

A label wired by hand, outside a form. Inside a form, use Field.

Choosing

Picking from a list or from a few options.

Select

A list we own (statuses, types, yes or no) or a short one that stays short, like branches. For a list that grows, use Combobox.

list
size
state

Combobox

A list that grows (customers, items, suppliers), searched by typing, with a missing entry created on the spot.

mode
list
create

SelectableOption

Two or three choices that each need a sentence to explain, shown as cards.

ChipShell

A small saved value, edited or removed right where it is shown.

StarchFoldedOn a hanger

Questionnaire

One question at a time, as in setup. It keeps the person on the question in front of them.

Question 1 of 2
Do you deliver orders?

We'll add delivery to your order screen.

Feedback

What the console says back: status, progress, errors, and what is still empty.

Badge

A short status on a row or a heading. The tone says how it is going; the word says what.

New
variant
size

Alert

Something about the whole screen the operator should know before going on. It stays while it is true.

variant

Toast

Confirms something that happened out of view, then leaves. If the change shows where it happened, no toast.

type

Progress

How far along something with a known end is.

Orders ready today
x
value

Skeleton

The shape of content on its way, so the screen does not jump when it arrives.

Empty

What a list says when there is nothing in it yet, and the one action that fills it.

No orders yet
Orders you ring up at the till show up here.

ErrorBoundary

When part of a screen fails, only that part shows the error and a way to try again.

Timestamp

When something happened, in words, with the exact time on hover.

Placed 3 minutes ago

Avatar

A photo or initials for a business or an account.

TMNQ

PersonAvatar

A person's photo, or a face drawn from their name when there is none.

MerchantAvatar

A merchant's logo, or waves drawn from its id when there is none.

motion

Overlays

Things that open on top of the page.

Popover

A little more about something, opened from it and closed by clicking away.

PopoverForm

Adding or renaming something small, up to three fields, right where it is listed.

Starch

DropdownMenu

Actions that do not earn a button of their own. Actions only: to choose a value, use Select.

Tooltip

The name of an icon-only button. Never the only place something important is said.

ResponsiveDialog

A short task that needs focus: a dialog on a computer, a sheet from the bottom on a phone.

ResponsiveSheet

A longer task beside the page: a side sheet on a computer, a sheet from the bottom on a phone.

AlertDialog

Confirming what cannot be undone. Use it rarely: asking too often teaches people to click through.

Dialog

The dialog under ResponsiveDialog. Use ResponsiveDialog, so a phone gets a sheet.

Sheet

The panel under ResponsiveSheet and the phone menu. For a task, use ResponsiveSheet.

side

Layout

How a screen is put together.

PageHeader

A screen's title, one line on what it is for, and its main action.

Orders

Everything rung up at this branch.

Text

Text at one of three levels: the thing itself, what supports it, or metadata. Only metadata is grey.

Noura Al-Qahtani
level

Section

A part of a screen with its own heading and actions. On the page it is a white panel; an Inset inside it holds totals or a summary.

Payment

What this order comes to, and how it was paid.

Paid by
Mada card
Subtotal
⃁ 40.00
VAT 15%
⃁ 6.00
Total
⃁ 46.00

CodeWell

A value the reader copies, such as a sign-in link or an authenticator secret. Monospace and left to right in every language; one click selects all of it.

https://tamem.dev/sign-in/7KQ2-9XF4-MB3R

DetailRow

One fact about a record, a label and its value. Shows a dash, not a blank, when there is nothing.

Invoice
INV-2026-004183
Total
⃁ 45.00
Note
Not set

Rows

Rows that belong together, with a line between each and the next that starts at their text. The only way to draw a line between rows. ActionRow makes a row one thing to do; FactRow makes it a label and its value.

Orders

  • Noura Al-Qahtani⃁ 45.00
  • Faisal Al-Harbi⃁ 120.00
  • Fahad Al-Otaibi⃁ 27.50
row
lead

Breakdown

A whole and what it is made of: a month's expenses by category, sales by branch. Press a part to narrow the screen to it.

All branches

⃁ 115,411.97

MetricRow

A few numbers that matter today, side by side.

Takings today
⃁ 1,842.50
12% more than last Sunday
Orders
37
5 waiting for pickup
Late
2
1 more than yesterday

Table

A table drawn by hand, for a short fixed list. For data that is sorted, filtered or paged, use DataTable.

InvoiceCustomerStatusTotal
INV-2026-004183Noura Al-QahtaniReady⃁ 45.00
INV-2026-004182Faisal Al-HarbiIn progress⃁ 120.00
INV-2026-004181Fahad Al-OtaibiOverdue⃁ 27.50

Pagination

Moves through a list too long for one page. A DataTable brings its own; use this under a list you page yourself.

pageSize

Tabs

Switching between views of the same thing without leaving the screen.

Everything rung up today.
variant

NavTabs

Tabs that are addresses: each is its own page, and the browser's back button works.

OrdersCustomersReports

Toolbar

The controls that act on the panel under them, like a list's search and filters. They stand on the canvas above the panel, not inside it.

Blocks

Larger pieces with behaviour of their own.

DataTable

Records the operator sorts, filters, searches and pages through.

Invoice
Customer
Status
Total
INV-2026-004183
Noura Al-Qahtani
Ready
⃁ 45.00
INV-2026-004182
Faisal Al-Harbi
In progress
⃁ 120.00
INV-2026-004181
Fahad Al-Otaibi
Ready
⃁ 27.50
state

Form

Every form in the console. Fields bound to it get their label, error and state with no wiring.

field

EntityDialog

Creating or editing one record in a dialog or a sheet, with “Create another” for entering several.

variant

MapPicker

Choosing a place on a map, with search. Only where the address really matters, like delivery.

DiaryGrid

A branch's day or week of appointments, staff side by side. Only for the appointments calendar.

Faisal Al-Harbi

Fahad Al-Otaibi

view

App shell

The frame every console screen sits in.

InlineEditField

Changing one value right where it is shown, saved on Enter.

AuditHistory

Who changed what on a record, and when.

  • Price changedShirt · wash and ironFahad Al-Otaibi5 minutes ago
  • Order voidedINV-2026-004179Faisal Al-HarbiAn hour ago
  • Staff member addedFaisal Al-HarbiFahad Al-OtaibiYesterday

Motion

Nothing animates on scroll. Movement answers something the person did, or plays one of the landing page's demos. When the device asks for reduced motion, nothing slides or scales: surfaces fade in place.

  • Press

    160ms, --ease-out, scale 0.97

    A button shrinks to 97% while it is held, over 160ms, and springs back. A full-width row darkens instead, because 3% of a wide row is a lurch. Hover only shows where there is a mouse.

  • Popups

    200ms / 150ms, --ease-out cubic-bezier(0.23, 1, 0.32, 1)

    Menus, lists and popovers grow out of the control that opened them, from 95%, in 200ms, and shrink back into it in 150ms. Dialogs open in the centre in 250ms, since nothing on screen opened them.

  • Sheets

    400ms, --ease-drawer cubic-bezier(0.32, 0.72, 0, 1)

    Sheets and drawers rise on iOS's sheet curve in 400ms, and leave by the edge they came in from.

  • A line arriving

    220ms, cubic-bezier(0.22, 1, 0.36, 1)

    Fades in and drops 4px into place. A new WhatsApp message, a stock count that just changed.

    • Order ⁨INV‑2026‑004183⁩ is ready for pickup.

  • A list arriving

    240ms, cubic-bezier(0.23, 1, 0.32, 1)

    Rows come in from the top, 40ms apart, when a sheet opens with a list.

    • Thobe
    • Shirt
    • Abaya
    • Shemagh

  • The landing demos

    --ease-out, --ease-in-out cubic-bezier(0.77, 0, 0.175, 1)

    The hero’s order, the Salla shelf and the ZATCA receipt play as short loops while they are on screen. Each has a pause control, the visitor can take over at any point, and under reduced motion each shows its most telling frame.

  • On the POS

    180ms, 320ms, 260ms

    The tablet uses springs instead of curves, damped so they settle without a bounce. The one exception is the count on a catalog tile, which overshoots slightly so a changed number gets noticed.

    Presses and keypad keys
    180ms
    Sheets and toasts
    320ms
    The count on a catalog tile
    260ms

App icons

Two store apps, one mark. Both icons set the mark on white, over a blue ground. The console and this website use the mark on its own.

  • POS

    The counter tablet

    SVG

  • Client app

    The customer’s phone

    SVG

  • Console and website

    The browser tab

  • The icon files are full-bleed squares. iOS and Android cut the corners, so the artwork never rounds its own.
  • The icon colors are specified in Display P3.
  • On Android the artwork is scaled to 60% on the same gradient, inside the adaptive icon’s safe zone.
  • On a phone, this site tints the browser’s address bar navy.

Voice

Write the way a shop owner explains the system to a new cashier: plain verbs, real nouns, sentence case. A number that isn’t true today doesn’t go on the page.

Say what is true

  • Write: Founding shops

    Not: Trusted by 342 laundries

    The number was never real, so it came off the page.

  • Write: Connect your Salla store

    Not: Certified Salla app

    The connection works. The marketplace listing is not finished.

  • Write: Sent from the Tamem number, unless your shop has its own

    Not: Sent from your own number

    A shop’s messages leave from its own number only once it has been set up with one; until then they go from the Tamem number.

  • Write: Take payment

    Not: Submit

    A button names what happens when you press it.

House rules

  • Sentence case everywhere, headings and buttons included.
  • Name real things from the shop: a thobe, an abaya, a gift card. Not items or entities.
  • No long dashes. Use a comma, a colon or a new sentence.
  • Trilingual screens and ZATCA invoices are the baseline in Saudi Arabia. State them as facts, not as highlights.

Brief for AI agents

Paste this into an agent’s context before it makes Tamem screens, images or copy. It is built from the same values as this page.

tamem-brand.md

# Tamem brand brief

Read this before making Tamem screens, images or copy. The values
are the ones the product ships with (apps/web/src/app/globals.css).

## Name
- Tamem in English, تامم in Arabic and Urdu.
- The company's full legal name only where a legal party is meant.

## Mark
- A letter T that is also a receipt: navy #1B3472, with one bar in brand blue #3563EA.
- Files: /brand/tamem-horizontal-en.svg, /brand/tamem-horizontal-ar.svg, /brand/tamem-icon.svg.
- Arabic and Urdu use the Arabic lockup, mark on the right. Never mirror the mark.
- Never recolor, stretch, rotate or add effects. On any ground but white or receipt paper, set it on a white tile.
- Clear space: the height of the crossbar on every side. Lockup at least 24px tall, mark at least 16px.

## Color
```
navy        #1B3472  --primary
brand       #3563EA  --color-brand
ink         #090A0C  --foreground
mutedInk    #5A5E65  --muted-foreground
canvas      #EBEDF1  --canvas
hairline    #E3E5E9  --border
muted       #EEF0F4  --muted
inset       #E9F0FF  --inset
panel       #F9FAFB  --sidebar
tint        #F2F6FD  --color-landing-tint
ground      #FFFFFF  --background
positive    #0E8A68  --color-positive
caution     #C97709  --color-caution
info        #006EDC  --color-info
destructive #E7000B  --destructive
paper       #F7F4EC  --color-receipt-paper
stamp       #B43822  --color-receipt-stamp
```
- Mostly white, ink and hairlines. Navy only for what can be pressed or is selected,
  plus one dark band on the landing page.
- Secondary text is mutedInk, on the console and the marketing site alike.
- Status colors only as tinted badges, never for emphasis.
- Receipt paper and stamp only on pictures of printed slips.
- No gradients, no glows, no second accent.

## Type
- Inter for Latin (400, 500, 600). IBM Plex Sans Arabic for Arabic and Urdu (400 to 700).
- Headings semibold, tracking -2% to -2.8% in Latin and 0 in Arabic script.
- Sentence case. No uppercase labels, no eyebrows, no monospace outside receipts.

## Surfaces
- Console: hairlines (1px #E3E5E9) instead of boxes. One radius, 16px.
- Console: shadows only on menus, dialogs, popovers and toasts.
- Landing page: every second section on the tint (#F2F6FD), containers as
  white landing-surface blocks, lines only between siblings.
- 4px spacing steps. Touch targets at least 44px.

## People
- A person without a photo gets a drawn face, never initials. It is DiceBear's notionists
  style in navy #1B3472 and white on #E9EDF7 or #F7F4EC, seeded by the full name.
- Draw it with PersonAvatar (@tamem/ui-web) or Avatar (@tamem/ui-native), on the device.
  Never fetch it from a hosted avatar API: that sends the person's name away.
- A business is not a face: a merchant keeps its logo, or its initials.

## Motion
- In answer to a person's action. 150ms color changes; 220ms for a line arriving.
- The landing demos loop while on screen, with a pause control and a takeover.
- Nothing on scroll. Under prefers-reduced-motion, show one still frame.

## Voice
- Plain verbs, real nouns. A button names what happens.
- No invented numbers, customers or certifications.
- No em or en dashes.