BHD Tailwind design.bhd.om
← design system

Tailwind, BHD-branded, one tag.

Tailwind v4 pre-wired with the BHD cyan palette (#009bc1) and IBM Plex Sans Arabic. Drop it into any page, no build.

Use it

Prototype / internal / quick page (zero build) — pick a brand

<script src="https://design.bhd.om/tw.js"></script>                    <!-- bhd (cyan) -->
<script src="https://design.bhd.om/tw.js" data-brand="cupsbyaa"></script> <!-- pink -->

<h1 class="text-3xl font-bold text-primary">Hello</h1>
<button class="bg-primary text-white px-4 py-2 rounded-lg">Action</button>

Every brand gives the same classes: bg-primary, bg-brand-50…950, font-sans. Runtime compile — mockups & internal tools, not perf-critical production.

Production (purged + minified, best practice) — per brand

/* app.css */
@import "tailwindcss";
@import "https://design.bhd.om/themes/bhd.css";       /* or themes/cupsbyaa.css */

/* build */
npx @tailwindcss/cli -i app.css -o public/tailwind.css --minify

Same brand tokens, tiny purged output. Keeps Lighthouse green.

Brands

bhd · live

#009bc1 · IBM Plex Sans Arabic · data-brand="bhd"

cupsbyaa · live

#E55E99 · Inter · data-brand="cupsbyaa"

More group brands (cardify, hosn, mithaq, reachscreens, dardasha, fencing, paperandpen, arabian) drop in as one entry each once their hex is confirmed.

→ Component gallery → Admin dashboard shell (both rebrand live with the brand switcher)

Brand palette

bg-bhd-50 … bg-bhd-950 · bg-primary = bhd-500 (#009bc1)

Components copy-paste, BHD-branded

<button class="bg-primary text-white px-4 py-2 rounded-lg font-medium hover:bg-bhd-600 transition">Primary</button>

Card title

A simple branded card with a cyan gradient banner.

<div class="max-w-sm rounded-2xl border border-zinc-200 shadow-sm overflow-hidden">
  <div class="h-24 bg-gradient-to-br from-bhd-400 to-bhd-700"></div>
  <div class="p-5">...</div>
</div>
Info — branded alert.
Success message.
Error message.
New Paid Pending

Bigger kits

For full dashboards / large component sets, these are clone-per-project starters (not CDN runtimes). Pair them with themes/<brand>.css to brand them: