Drop-in tokens, RTL-safe interaction patterns, optional semantic sound, Cmd+K, dark mode, and an admin shell for the BHD Group portfolio.
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. Interaction sound remains off until the user enables it.
<link rel="stylesheet" href="https://design.bhd.om/tokens.css">
<link rel="stylesheet" href="https://design.bhd.om/cmdk.css">
<link rel="stylesheet" href="https://design.bhd.om/interactions.css">
<script src="https://design.bhd.om/interactions.js" defer></script>
<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.
Search, preview, copy, and download the complete licensed icon collection, including Lucide, technology marks, cloud symbols, Twemoji, BHD Mood, and Koboyo hand-drawn artwork.
https://design.bhd.om/icons.htmlFramework-neutral <bhd-icon> component and URL resolver for using the licensed library across BHD product surfaces without copying assets into every repository.
Tactile buttons, dynamic actions, hold confirmation, magnetic drop zones, scroll fades, receipt printing, stamps, tickets, signatures, foil, and progressive-motion safeguards.
https://design.bhd.om/interactions.jsUISFX 0.4 semantic sound adapter. Silent by default, user-gesture enabled, persistent preference, and automatic loop cleanup. Load as an ES module.
https://design.bhd.om/sfx.jsAccessible reference implementation for the interaction patterns, including keyboard, RTL, reduced-motion, and sound behavior.
https://design.bhd.om/patterns.htmlSemantic 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 | Tactile actions · hold confirm · semantic sound preference | live |
| CupsByAA | Receipt printer · artwork drop · soft semantic sound | live |
| bhdoman.com | Quote actions · upload feedback · premium foil | live |
| arabian.ceo | Full Bootstrap → Tailwind v4 + admin shell | pending |
| book.bhd.om, reachscreens.com, rabab, tfb.om | Tokens + landing patterns, per-project sessions | pending |