Arabic-first design system — not localized later

Copy it as code, or hand it to your AI

A library of components, blocks and templates — every item verified in Arabic and English, dark and light. Take it as clean code, or as a ready prompt for any AI tool.

Browse the library See a full prompt

Press AR / English above and watch every card mirror — sidebar, arrows, toast direction, table alignment.

PenTool UI
The difference a screenshot cannot show

Designed in Arabic ≠ translated to Arabic

Six failures that recur in every interface translated after it was built. Not language bugs — system bugs: physical properties instead of logical ones, and a Latin type scale forced onto letters that do not fit it.

Case Translated later Arabic-first
Currency and marketDigits are Western in both languages. Only the currency moves — the symbol precedes the number in English and follows it in Arabic.
One market
$1,234.50
A dollar sign in an Arabic interface, or SAR appended to the number — one market imposed on everyone.
Three markets
SAR 1,234.50Saudi Arabia
JOD 1,234.500Jordan — three decimals
$1,234.50English
DateThe American order is ambiguous to an Arabic reader, and the Hijri date is a requirement, not decoration.
Ambiguous
08/21/2026
Month/day/year — is it 21 August or 8 September?
Hijri + Gregorian
21 August 2026
8 Rabi‘ al-Awwal 1448 AH
Direction of motionAn arrow is a directional symbol. In RTL, “next” is to the left — and the arrow flips with it.
Does not flip
Next →
Points against the reading direction
Flips
Next ←
Flips with the direction
The sidebarThe difference is one line: margin-left is fixed, andmargin-inline-start flips.
Physical properties
Stays on the left although the page reads right to left
Logical properties
Moves to the start edge
Line heightDots, hamzas and maddas need more vertical room than Latin does: +0.18.
Cramped

Build a tested Arabic design system — not a Latin interface flipped over and dressed in Arabic letters.

+0.18

Build a tested Arabic design system — not a Latin interface flipped over and dressed in Arabic letters.

Name fieldsThe four-part name is an official requirement in the Gulf — it does not compress into two fields.
Two fields
First nameFamily name
Two fields — they cannot hold an official name
Four parts
Given nameFatherGrandfatherFamily
Four fields — matching the ID document
If it is not verified, it is not approved

The quality standard — in numbers

Every number here is computed from the library itself on each build, never written by hand. Add a component and the count changes; break a rule and the build fails before the claim reaches this page.

Mandatory gate 88checks

Contrast fails the build

Every colour pair in the palette is measured in dark and light against WCAG 2.1 AA. One failed check stops the release — the design is not shipped …

Machine-checked 0

Zero physical properties

margin-left does not flip with the direction, andmargin-inline-start flips. …

224/224

Every component in two languages

No component carries text in one language only. Press AR / English at the top …

0

Zero dependencies

HTML and CSS only. No framework, no library, no font from a delivery network. You copy the component …

2Two themes

Dark and light

Every colour is defined in both themes and its contrast checked in both. Light is not an automatic …

★ Arabic only 20components

built for Arabic alone

A Hijri calendar, a four-part name, national ID and residency with a check-digit validation, and an Arabic tax invoice. …

Why does this matter? “High quality” is a phrase every site writes. The difference is that these numbers can be verified: … npm run contrast and watch them measured in front of you, then run npm run audit which reads 224 components and 16,439 lines and recomputes. And if one of us broke a rule, …

We build for you — not sell you a template

Have us build your site

The site you are standing on is the sample. No portfolio screenshots, no promises — what you see is what we build, and the 224 components below are its raw material.

Request a quote Reply within one business day · no commitment
224ready components
88contrast checks gating the build
0properties breaking RTL
2verified modes
1
You write What the business is, who the site is for, and what a visitor should do.
2
We reply with a quote A clear scope, timeline and price. No open-ended hours, no elastic clauses.
3
We build on the system The same components you see here — verified in Arabic and English, in both modes.
4
You get the code The site and its code are yours. No subscription, no dependence on us to run it.
Fully open

Free today

Everything in the library is available today — components, prompts and code. Take it and build: no account, no password, no card.

Pricing is announced when payment opens. We ask for your email once, at your first copy — nothing more.

Ready systems — company & HR management

Systems already running with clients — installed, with training for your team. Not a one-click purchase: priced by organisation size and seat count.

Request a quote

Copy your first component in a minute

No account, no install, no dependencies. Open the library, pick a component, copy the code — or take the prompt and hand it to your AI.

Browse the library See a full prompt

What changed just now?