AAHD brand guide

01 / Mark

The khatam.

Two squares turned 45 degrees: the eight-point star cut into Omani doors and worked into silver. A small green square sits at the centre. It is the one point of colour in the mark.

Use the mark alone at small sizes. Pair it with A.A.H.D. or the full name when there is room. Keep clear space equal to half the mark on every side. Minimum size 20 px on screen, 6 mm in print.

Download mark, SVG

Mark on paper

Mark on ink

Mark on green

A.A.H.D.

Short lockup

Ali Adnan Haider Darwishعلي عدنان حيدر درويش

Full lockup

Ali Adnan Haider Darwishعلي عدنان حيدر درويش

Full lockup on ink

02 / Colour

Mostly paper. A little green.

The same tokens as the original alizaabi.om. Paper carries the page, ink carries the words, green marks the one thing that matters on the screen. Muted ink is the second voice in a headline.

Paper

#EBEBEB
rgb 235 235 235
--a-bg

Ink

#0F0F0F
rgb 15 15 15
--a-ink

Surface

#F5F5F5
--a-surface

Green

#00DE51
--a-green

Ratio on any page: paper 70, ink 25, green 5

Muted inkrgba(0, 0, 0, .56) for secondary text and the second voice of a headline. --a-ink-56

Linesrgba(0, 0, 0, .15) for rules, .06 for card edges. --a-line, --a-hair

DoUse green as a fill or a mark: a button, a card, a 6 px square, a 2 px rule. Text on green is always ink.

Don'tSet green text on paper. It fails contrast. No gradients, no shadows, no glass, no extra colours.

03 / Type

Two faces and Arabic.

Apfel Grotezk for display, tight and large. Inter for everything you read. IBM Plex Sans Arabic for Arabic. All three load from fonts.bhd.om, never from Google.

Display

Aa

Apfel Grotezk

Headlines, numbers, big names. Tracking -4.5%.

Text

Aa

Inter

Body, labels, buttons. Labels in caps at 11 px, tracking 14%.

Arabic

أب

IBM Plex Sans Arabic

Arabic names, the العربية switch, bilingual covers.

a-displayAli Adnan Darwish

a-h1Ten years, one thread.

a-h2The first from Oman.

a-h3BHD Printing & Designing

a-ledeHead of Strategic Planning at ITHCA Group. Founder and CEO of BHD Group.

a-bodyAt the Oman Vision 2040 Office I worked with decision makers at ministerial level on the National Program for Investment and Export Development.

a-eyebrow04 / Journey

a-labelMuscat, Oman

04 / Components

Parts that repeat.

Every class starts with a-, so the theme can sit inside any other site without a clash. Hover the rows and buttons.

Buttons, a-btn

Primary Ink Outline العربية

Link, a-link a-link--big [email protected]

Cards, a-card, a-card--green, a-card--ink

2017

Economics Research

Central Bank of Oman

2019

Founder & CEO

BHD Group

2025

Head of Strategic Planning

ITHCA Group

Rows, a-rows / a-row

Stats, a-stats / a-stat, with data-a-count

14Companies in BHD Group

20+Portfolio companies

2.5B+USD pipeline screened

2025FBCG Next Generation Award

Key-value list, a-kv

IndiaJindal Shadeed
JapanMitsui

Ink variant, class a-ink or data-a-theme="ink"

Board session

Strategy, measured.

Primary Outline

05 / Motion

Slow in, quick to settle.

One curve for almost everything: cubic-bezier(.16, 1, .3, 1). Things arrive fast and land softly. Durations: 0.3 s for hover, 0.6 s for state, 1.2 s for entrances.

Add an attribute and the motion kit does the rest. Respect for reduced motion is built in: every effect falls back to a still state.

data-a-split	Headline words rise in when they enter the screen.
data-a-words	A paragraph lights up word by word as you scroll.
data-a-fade	Element fades up on enter.
data-a-stagger	Children fade up in sequence.
data-a-count="14"	Number counts up. Add data-a-dec="1" for decimals.
data-a-reveal	Image wipes in from below.
data-a-hscroll	Section pins and its [data-a-track] scrolls sideways.
data-a-magnetic	Element leans toward the pointer.
data-a-clock	Live Muscat time, GMT+4.
data-cursor="Open"	The cursor grows green and shows the label.
data-shape="star"	The particle stage morphs to this shape here. Shapes: portrait, dunes, skyline, helix, orbit, globe, star, text.
data-anchor=".x"	The shape fits inside that empty block, so it never sits under text.

data-a-words

Strategy is about making choices, trade-offs; it's about deliberately choosing to be different.

06 / Voice

Short. Active. Warm.

Simplified Technical English with Zinsser's four principles: short sentences, active voice, one word for one thing, no clutter. A person wrote it, not a manual.

Do"I lead strategic planning for Oman's sovereign technology fund."

Don't"Passionate, results-driven leader leveraging synergies to unlock value."

DoTwo-tone headlines: the second clause in muted ink. "Ten years, one thread."

Don'tEm dashes, italic serif flourishes, emoji, exclamation marks.

NameAli Adnan Haider Darwish. Arabic: علي عدنان حيدر درويش. Short form: A.A.H.D.

NumbersReal and sourced. OMR to 3 decimals. Dates as 10 Oct 2026.

07 / Use it

Three lines in the head.

The theme is hosted at a fixed address. Version 1 stays stable; a breaking change becomes v2. Decks and documents take the values from tokens.json.

<link rel="stylesheet" href="https://fonts.bhd.om/css2?family=Apfel+Grotezk&family=Inter:[email protected]&family=IBM+Plex+Sans+Arabic:wght@300;500&display=swap">
<link rel="stylesheet" href="https://alizaabi.om/theme/v1/aahd.css">

<body class="a-root">
  <p class="a-eyebrow">01 / Section</p>
  <h1 class="a-display" data-a-split>Ali Adnan <em>Haider Darwish</em></h1>
  <a class="a-btn a-btn--green" href="mailto:[email protected]">Write</a>

  <!-- motion kit, optional -->
  <script src="https://alizaabi.om/theme/v1/vendor/gsap.min.js"></script>
  <script src="https://alizaabi.om/theme/v1/vendor/ScrollTrigger.min.js"></script>
  <script src="https://alizaabi.om/theme/v1/vendor/lenis.min.js"></script>
  <script type="module">
    import { init } from 'https://alizaabi.om/theme/v1/aahd.js';
    init();
  </script>
</body>

Paper, ink, and one green.