Drop-in CSS tokens, dark-mode init, Cmd+K, RTL utilities, and an admin shell that the entire BHD-Group portfolio inherits from. Hosted at design.bhd.om.
Semantic CSS variables, light + dark. Anchored on the BHD cyan primary (#009bc1). Works with plain CSS, Tailwind v3 (arbitrary values), or Tailwind v4 (drop-in @theme inline block in the file).
Add the foundation to any BHD-Group project in three lines.
<link rel="stylesheet" href="https://design.bhd.om/tokens.css">
<link rel="stylesheet" href="https://design.bhd.om/cmdk.css">
<script src="https://design.bhd.om/dark-mode.js"></script>Then on your <html>:
<html lang="en" dir="ltr" data-bhd-theme-mode="light">For Arabic sites, switch to:
<html lang="ar" dir="rtl" data-bhd-theme-mode="light">Every BHD-Group project loads what it needs. Cache forever, version via query param.
Semantic CSS variables, light/dark, BHD palette, radius scale, shadow scale, layout sizes. Includes a hard-coded rule that strips letter-spacing on Arabic.
https://design.bhd.om/tokens.cssPre-DOM theme init. localStorage + prefers-color-scheme. Exposes BHDTheme.set() · .toggle() · .current().
Logical-property utilities for non-Tailwind projects. Tailwind users prefer native ps-* / pe-* / ms-* / me-*.
Command palette, Cmd+K / Ctrl+K. Vanilla. Pair with cmdk.css. React variant at /cmdk.jsx.
Skeleton loaders + empty-state pattern. Drop <div class="bhd-skel"> for placeholders, <div class="bhd-empty"> for empty UIs.
Clone-and-edit starter for any admin surface. Sidebar + topbar + content. Cmd+K wired. Dark mode wired. RTL-safe.
https://design.bhd.om/admin-shell.htmlCanonical OMR display: the official Rial sign (, CBO 2025) always on the LEFT in both LTR + RTL, never the generic ﷼ ligature. 3-decimal precision. Use data-bhd-omr="1250.5" attribute or call BHDCurrency.formatOMR(value) in JS.
The official Omani Rial sign (CBO 2025) as a single-path SVG with fill="currentColor". currency.js inlines it for you; embed directly only when you render server-side without JS.
Self-hosted icon set for every BHD-Group surface. Load core fontawesome.min.css first, then light / solid / brands as needed. Never all.css, never emojis.
All powered by the same tokens this page uses. Toggle the theme above and watch everything follow.
Drop-in placeholder for any list or card. Animates while loading.
Consistent empty pattern with icon, title, description, CTA.
When you create your first invoice it will appear here.
Same markup, two directions. Logical properties + bidi-isolated currency.
Symbol always on the LEFT. 3-decimal precision. Bidi-safe. Declarative data-bhd-omr or imperative BHDCurrency.formatOMR().
| Subtotal | |
| VAT 5% | |
| Total |
Cmd+K (macOS) / Ctrl+K (Win/Linux). Fuzzy match across label + hint + keywords.
The package is live and most of the portfolio is already ported. Remaining ports below.
| Project | Scope | Status |
|---|---|---|
| Dardasha admin | RTL pass · Cmd+K · tokens | live |
| BHD Chat | RTL pass · tokens · dark mode | live |
| Cardify admin | Tokens + Cmd+K port | live |
| fencing.om + Mithaq | Public pages + shared admin shell, Topbar v2 | live |
| AlMaha Marble | Catalog + projects gallery patterns | live |
| bhd.om | Landing-page upgrade | live |
| hosn.om | Landing-page upgrade | live |
| paperandpen.om | Landing-page upgrade | live |
| BHD-ERP | AntD token alignment · Cmd+K · dark-mode script | pending |
| arabian.ceo | Full Bootstrap → Tailwind v4 + admin shell | pending |
| book.bhd.om, reachscreens.com, rabab, tfb.om | Tokens + landing patterns, per-project sessions | pending |