Mithaq design system

One mark, two scripts, and the numbers behind them.

This is the reference for anyone drawing, printing or building anything that carries the Mithaq name. Every colour pair below shows its measured contrast, every mark states the size it is for, and every file here is generated from a single geometry file so there is exactly one drawing of the arch.

Detail · 132 px

Standard · 60 px

Micro · 22 px

Principles

Four rules that decide the rest.

01

A board paper outlives a trend.

Minutes signed this year are read in a dispute five years from now. Choose the typographic and colour decisions that will still be legible then, not the ones that look current this quarter.

02

Arabic is not a translation layer.

Both scripts are set in the same family, at matched optical size, with the same hierarchy. An Arabic page is not an English page with the text swapped; it is mirrored, and the mark moves with it.

03

Publish the measurement.

Contrast, isolation, size. A colour pair ships with its ratio next to it. If a number is not on this page, the pairing has not been checked and must not be used.

04

Draw once, cut three ways.

The mark is one geometry with three cuts chosen by rendered size. Nobody redraws it by eye for a new surface, and nobody scales the detail cut down into a favicon.

The mark

A doorway that reads as an M.

The mark is a pointed arch, the doorway of the majlis, whose counter drops into a chevron so the negative space carries the M of Mithaq. It is drawn once. Which cut you use is decided by the size it will render at, never by taste.

MicroMark height up to 32 px

Thicker stems, no centre slit, wider counter, and the same apex angle to within 7 %. The cut for a favicon, a 22 px nav mark, a table avatar.

SVG

Standard32 px and above, and every icon tile

The drawn contour, and the mark of record. Every platform icon carries this cut whatever the tile size, because a tile is a silhouette job.

SVG

Detail96 px and above, editorial and print only

The contour with the geometric tympanum. Covers, hero cards, large print. Never on an icon, and never below 96 px: the lattice turns to grey mud.

SVG

Construction

The micro cut is built on a 100 by 131 grid, the ink ratio of the drawn contour. The stem is 16 units and is the unit for everything else: clear space, the gap in a lockup, the minimum rule weight beside the mark.

Clear space and minimum size

Keep one stem width, 16 % of the mark's width, clear on every side. Nothing crosses it: no rule, no photograph edge, no text.

Screen minimum 16 px tall, micro cut.
Print minimum 6 mm tall, standard cut.
Detail cut never below 96 px or 24 mm.

What breaks it

Do not put the mark in a square box. It is 100 by 131; a square either stretches it or shrinks it by a quarter.

Do not add a rounded tile to an app icon. The platform rounds it, and a second radius reads as a sticker.

Do not put the green mark on brass. The pair measures 5.21:1 and the arch loses its edge.

Do not use the detail cut small. Below 96 px the tympanum is noise, not pattern.

Lockups

Six files. No seventh.

The wordmarks are outlines, not live text, so they render the same in a browser, in a PDF and on a machine that has never heard of the brand font. If you need a lockup that is not here, ask for it to be generated. Do not set the name in a font and call it a logo.

Horizontal

Default. Nav bars, letterheads, email signatures.

SVG

Horizontal, Arabic

Arabic surfaces. Mark on the right so the eye starts where the reading starts.

SVG

Horizontal, reversed

On brand-900 or a photograph dark enough to hold it.

SVG

Horizontal, Arabic reversed

Arabic on dark.

SVG

Stacked

Square-ish. Organization schema, profile pictures, covers.

SVG

Stacked, reversed

The same, on dark.

SVG

Colour

Every pair ships with its ratio.

Each token states the role it plays, and the role decides which number matters. A text token is graded at 4.5:1 on the grounds it is written on. A graphic token, a rule or a mark or an icon, is graded at 3:1. A surface is not graded at all; it shows the contrast that text gets standing on it. Nothing here is graded against a ground it is never used on.

Green

#ecf5f1

--aj-brand-50

Tinted panels, selected rows

surface

ink on it: 15.30:1 AAA
paper on it: 1.06:1 fail

#d2e6dc

--aj-brand-100

Hairlines on green, chart fills

graphic

on night: 13.33:1 AAA

#6fa692

--aj-brand-300

Disabled green, chart mid

graphic

on paper: 2.67:1 fail
on night: 6.25:1 AAA

#1e6b55

--aj-brand-500

Interactive green, focus ring

text

on paper: 6.12:1 AA

#155340

--aj-brand-600

Primary. Buttons, icon ground

text

on paper: 8.59:1 AAA

#0e3d2f

--aj-brand-700

Headings, the mark, the doorway

text

on paper: 11.65:1 AAA

#071e17

--aj-brand-900

Dark sections, the footer

surface

ink on it: 1.02:1 fail
paper on it: 16.67:1 AAA

Brass

#e2cda3

--aj-accent-300

Headings on dark green

text

on night: 11.18:1 AAA

#d4b88a

--aj-accent-400

The mark at icon scale

graphic

on night: 9.13:1 AAA

#c5a572

--aj-accent-500

Rules, marks, non-text brass

graphic

on night: 7.46:1 AAA

#a88851

--aj-accent-600

Display headlines on paper, borders

graphic

on paper: 3.19:1 AA
on night: 5.22:1 AAA

#876936

--aj-accent-700

The only brass allowed to carry small text

text

on paper: 4.90:1 AA

Neutral

#1b1d18

--aj-ink

Body text

text

on paper: 16.28:1 AAA

#3e4238

--aj-ink-2

Secondary text

text

on paper: 9.86:1 AAA

#6d7165

--aj-muted

Captions, meta

text

on paper: 4.79:1 AA

#e6e3d9

--aj-line

Hairlines and borders

surface

ink on it: 13.24:1 AAA
paper on it: 1.23:1 fail

#d0ccbe

--aj-line-2

Stronger borders, inputs

surface

ink on it: 10.57:1 AAA
paper on it: 1.54:1 fail

#9b9d90

--aj-muted-2

Disabled text. Never a live label: 2.64:1

text

on paper: 2.64:1 fail

#faf8f2

--aj-surface

Table stripes, card wells

surface

ink on it: 16.00:1 AAA
paper on it: 1.02:1 fail

#ffffff

--aj-white

Cards on paper

surface

ink on it: 17.00:1 AAA
paper on it: 1.04:1 fail

#fbfaf7

--aj-paper

Page ground

surface

ink on it: 16.28:1 AAA
paper on it: 1.00:1 fail

#f4f1ea

--aj-paper-2

Alternating sections

surface

ink on it: 15.07:1 AAA
paper on it: 1.08:1 fail

The two brasses, and why there are two

The brass of record is accent-500. On brand green at icon scale it manages only 3.84:1, so the app icon and the favicon use accent-400 at 4.70:1. That is an optical correction for size, not a second brand colour, and it applies nowhere else. For brass carrying small text the only allowed value is accent-700 at 4.90:1 on paper.

Separately from readability: brand-600 and brand-700 are 10.1 apart in CIE76, which is why the doorway inside the icon reads as depth at 180 px and disappears at 32 px. That is the intended behaviour, and it is a distance, not a contrast ratio.

Typography

One family, both scripts.

Dialogue ME carries Latin and Arabic in one family, so a bilingual page does not change voice when it changes script. JetBrains Mono sets eyebrows, tokens and anything that is a value rather than a sentence. There is no third face.

Display clamp(40px, 6vw, 68px) / 700 / 1.04 One per page, the first thing read

Governance, recorded.

Section clamp(30px, 4vw, 44px) / 700 / 1.1 Section heads

Governance, recorded.

Subhead 22px / 600 / 1.25 Card titles

Governance, recorded.

Body 16px / 400 / 1.55 Running text

Governance, recorded.

Small 14px / 400 / 1.5 Notes, table cells

Governance, recorded.

Eyebrow 12px / 500 / 1.4 Mono, uppercase, 0.08em tracking

Governance, recorded.

Latin

The board approved the amended financial bylaw, with one abstention recorded.

عربي

اعتمد المجلس اللائحة المالية المعدّلة، مع تسجيل امتناع واحد عن التصويت.

Arabic is set one step larger than the Latin at the same level, because the same point size reads smaller. Never justify Arabic with letter spacing, and never stretch a word with kashida to fill a line.

Icon system

Chosen at 1024, used at 32.

An app icon is picked on a large canvas and then lived with at the size of a fingernail, on a wallpaper nobody controls. These are the gates every Mithaq tile passes before it ships, and the proof sheets they passed on.

Gate	Target	Measured
Ground isolation	dE76 ≥ 35 against white and against black	40.1
Mark contrast	≥ 3:1, the WCAG floor for a graphic	4.70:1
Full bleed	All four corners equal the ground, no radius of our own	checked per file
No alpha	App Store rejects an icon with an alpha channel	checked per file
Small-size proof	Rendered at 180, 120, 80, 60, 48 and 32 px and looked at	sheet below

App icon, light and dark

Light tile, squircle-masked, 180 down to 32 px.

Dark tile. iOS also takes a tinted monochrome cut.

Favicon

On a light tab strip, 48 down to 16 px, magnified 3x.

On a dark tab strip. The favicon keeps its own radius because browsers do not mask it.

Components

The pieces, as they actually render.

These are live elements using the shipped stylesheet, not pictures of them. If one looks wrong here it is wrong in the product.

Buttons

Primary Secondary Quiet

Eyebrow and badge

Governance suiteA BHD Group product

Status

ApprovedFor voteWithdrawnFor noting

Card

Board Portal بوابة المجلس

Meetings before, during and after, with minutes, decisions, motions, polls and signing records in one audit trail.

MeetingsDecisionsPolls

Geometry

sm 6px

base 10px

lg 14px

xl 20px

Elevation

sm

base

lg

Voice

Write like the secretary, not the vendor.

Do

Short sentences. One idea each.
The same word for the same thing, every time.
Numbers instead of adjectives. "Two deployment routes", not "flexible deployment".
Say what is not built yet, in the same tone as what is.
فصحى for Arabic. Never dialect, never a translated English sentence.

Do not

Em dashes. Commas, colons, periods, parentheses.
Seamless, robust, comprehensive, cutting-edge, best-in-class, leverage, synergy.
Customer logos we have not earned.
Present tense for something that is on the roadmap.
Exclamation marks. A board paper has never needed one.

Files

Everything on this page, in one list.

Every file below is written by scripts/build-brand-assets.mjs from scripts/brand/geometry.mjs, and the build fails if any one of them was not rewritten on the run. That assertion exists because the detail cut carried a "generated, do not hand-edit" label for months while the script never touched it: it was a hand-made export whose artboard clipped its own artwork. The one file here the generator does not own is brand.css, which is hand-maintained and gated instead: the build refuses a stylesheet that declares any custom property twice in one block.