BHD Group brand guidelines

The brand, as a page that stays current.

Not a PDF in someone's downloads folder. Every colour, size and curve on this page is read live from tokens.json, which is generated from tokens.css. Change the CSS, redeploy, and this page changes with it. Click any value to copy it.

Machines get the same file. Point an agent at https://design.bhd.om/tokens.json and it stops guessing our colours.

Restraint is the systemCyan marks action, focus, selection or live status. It is never decoration.

Arabic is a first languageOne family covers Latin and Arabic. Arabic is never letter-spaced.

Borders before shadowsElevation is reserved for overlays, popovers and sticky controls.

Say what the wait isA model-driven wait gets a named state, not a generic spinner.

Logo

The hosted mark, used for favicons, share cards and app tiles across the group.

favicon.svg · on light

favicon.svg · on dark

og.svg · 1200×630 share card

Rules

ColourCyan on light or dark. Never recolour, never gradient, never add a shadow.

Clear spaceKeep clear space equal to the height of the mark's stem on all four sides.

Minimum size16px for a favicon, 24px anywhere else. Below that use the wordmark instead.

Do notStretch, rotate, outline, or place on a busy photograph.

Not hosted here yet: the full BHD lockups and the per-brand logo masters (Cardify, CupsByAA, Hosn, Mithaq and the rest). They live in the brand archive on Drive. Ask before pulling a logo from anywhere else.

Typography

IBM Plex Sans Arabic, one variable family for Latin and Arabic, served from fonts.bhd.om. Never load it from Google's hosts.

Print, package, ship. 0123456789

بن حيدر درويش ش.م.م، مسقط

Scale

DisplayAaclamp(2.1rem, 6vw, 3.4rem) · 600 · -0.02em

SectionAa1.35rem · 600 · -0.01em

BodyAa1rem · 400 · capped near 70 characters

NoteAa0.82rem · muted-foreground

MonoAasystem monospace stack, for values and code

The hard Arabic rule

للرخام

Correct. No letter-spacing, the cursive join holds.

للرخام

Wrong. Tracking breaks the join and reads as illiterate. For emphasis use kashida (U+0640), never tracking.

tokens.css enforces this with a global rule on :lang(ar), [dir="rtl"] and .ar.

Motion

Opacity and transform only. Pick a duration and a curve below, watch it, copy it. Values come from tokens.json. Every duration collapses to 1ms under prefers-reduced-motion.

Duration Easing

Durations

Easings

Waiting states

A model-driven wait says what it is doing. Nine named states, one component, same names on web and native. Full playground on the orb page.

Listening Searching Solving

Moodboard

What the system should feel like, and what it must never feel like. No stock photography, on purpose.

Ink on paper
A print shop's product. Dense, exact, no wasted surface.

Workshop, not showroom
Built for a team that uses it all day. Compact controls, keyboard first.

One accent, earned
Cyan appears where something is live or actionable. Nowhere else.

Bilingual by default
Arabic is not a translation layer bolted on at the end. Logical properties everywhere.

Quiet motion
Movement explains a change. It never performs.

Never
Purple to cyan gradients, glassmorphism, emoji as icons, three shadows on one card, a spinner with no words.

Applications

Where the system runs today, and the brand themes that recolour it.

Surface	What it uses	Status
BHD-ERP	Tokens, tactile actions, hold to confirm, sound preference	live
Cardify admin	Tokens, Cmd+K	live
CupsByAA	Receipt printer, artwork drop, soft semantic sound	live
fencing.om, Mithaq	Public pages, shared admin shell, Topbar v2	live
hosn.om	Landing page	live
arabian.ceo	Bootstrap to Tailwind v4, admin shell	pending

Brand themes

Each file recolours the same tokens for one brand: themes/<brand>.css.