# 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.