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 navy primary. 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: ﷼ symbol always on the LEFT in both LTR + RTL. 3-decimal precision. Use data-bhd-omr="1250.5" attribute or call BHDCurrency.formatOMR(value) in JS.
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.
Phase 1 (this package) is live. Phase 2 ports projects on top.
| Project | Scope | Status |
|---|---|---|
| arabian.ceo | Full Bootstrap → Tailwind v4 + admin shell | pending |
| Dardasha admin | RTL pass · Cmd+K · tokens | pending |
| BHD Chat | RTL pass · tokens · dark mode | pending |
| Cardify admin | Tokens + Cmd+K port | pending |
| BHD-ERP | AntD token alignment · Cmd+K · dark-mode script | pending |
| fencing.om | Lift SaaS landing patterns | pending |
| AlMaha Marble | Catalog + projects gallery patterns | pending |
| bhd.om | Astro landing-page upgrade | pending |
| hosn.om | Landing-page upgrade | pending |
| mithaq.om, paperandpen.om | Landing-page upgrade | pending |