A custom Arabic-first design theme, in Figma and code
Your brand as a Ritla theme: a Figma file and code on the same tokens, Arabic-first.
- Price
- Scoped after a scan
- Timeline
- Set by the theme's size
- Starts with
- A free scan
Your brand, in both scripts.
علامتك التجارية، بالخطين.
A theme is the part of a design system that makes it yours: colour, type, radius, spacing and the rules for how they change in dark mode and in Arabic. We build yours on the same token structure as Kanz, so your Figma file and your code read from one source and every Ritla component takes your brand without a line of layout changing. Arabic is designed in from the first file: a face that carries Arabic properly, Arabic line heights, and no tracking on connected script.
This is for you if
The situations this engagement was built for.
You want Ritla components but in your brand, not Kanz's
Your design system was built in English and Arabic was added later
Designers and developers keep drifting apart on colour, type and spacing
Your Arabic type looks borrowed: the wrong face, cramped lines, tracked letters
One component, both modes, from the same tokens
A theme switches the variables, never the classes: the same component in light and dark, in Arabic, reading from one token set.
Illustrative: live HTML and CSS. Drawn from our own fixtures and public-site scans, not a client engagement.
What is in the engagement
What you get
- A baseline scan of your current Arabic surface, so the theme answers what is actually wrong
- Your brand mapped to tokens: colour ramps, semantic colours for light and dark, type, radius and spacing
- Arabic typography chosen and set: a face that carries Arabic, line heights, weights, no letter-spacing
- A Figma file with every token as a variable and components in left-to-right and right-to-left variants
- The same tokens as code, so Ritla components render in your brand
- Contrast checked for every text and background pair in both modes
What we need from you
- Your brand guidelines, or the product as it stands if there are none
- Access to your Figma team, or a file we can hand over
- One decision-maker for brand and typography questions
What this does not cover
- A new brand identity: we express the one you have, we do not replace it
- Arabic type design: we choose and configure existing faces rather than draw new ones
- Screens beyond the components and blocks the theme styles
How it runs
Timeline: Set by the theme's size. Every step ends with something you can see.
- Week 1
Scan and brand intake
A scan of your current Arabic surface and a read of your brand, so the theme answers what is wrong today rather than a generic brief.
- Weeks 1 to 2
Tokens
Colour ramps, semantic colours for light and dark, type, radius and spacing, with contrast checked for every pair in both modes.
- Weeks 2 to 4
Figma and code
The Figma file with every token as a variable and components in both directions, and the same tokens as code so Ritla components render in your brand.
- Final week
Verify
Components rendered in your theme in English, mirrored and Arabic, scanned, and compared with the Figma file so the two agree.
The checks this engagement leans on
Every finding starts as one of these, with evidence attached. Each has its own page explaining when it fires and how to fix it. Browse every check.
- R050highArabic text falling back past the declared font family (measured, declared, or a webfont that failed to load)When no font in the stack carries Arabic, or the declared webfont fails to load, each device substitutes its own default and the Arabic looks different on Windows, iOS and Android.
- R051highLetter-spacing applied to Arabic text (breaks the connected script)Arabic letters join along a baseline, so positive tracking breaks the joins and negative tracking overlaps the letterforms, typically from a Latin type scale never scoped away from Arabic.
- R054mediumItalic/oblique applied to Arabic textArabic has no italic tradition, so the browser fakes one by mechanically slanting the letters, and text meant to look emphasized reads as distorted instead; weight or color works better.
- R061mediumArabic-Indic and Western digits mixed in the same contextMixing ٣ and 3 within one table, list or
fieldsetmakes figures hard to compare at a glance; numbers in running prose outside those containers are not checked.
Scan first. Then we talk about your findings.
The scan takes about a minute and costs nothing. Your enquiry arrives with it attached, so the reply starts from evidence about your site rather than questions about it.
- Paste the URL of your Arabic page.
- See your score and top findings.
- Tell us what you need. A person replies within one working day.
Start with a scan
We would rather look before we talk. Give us the URL and we will run the same scan the homepage runs, then you can tell us what you need.
Questions about the custom theme
Is this the same as Kanz?
Kanz is Ritla's first theme, built on the same token structure. A custom theme uses that structure with your brand, so the components are the same and the look is yours.
Do we need to use Ritla components?
The theme is built for them, and they take it without changes. The Figma file and the tokens are useful on their own, but the point is that design and code read from one source.
Which Arabic font will you use?
One that carries Arabic properly and suits your brand, chosen with you. The rule that does not change: Arabic never falls back to a Latin face, and it is never letter-spaced.
How is it priced?
Scoped after a scan. The size of the theme, colour and type only or a full system, decides the work, and we quote from that rather than from a discovery call.
Other ways we can help
- We lookArabic Readiness CertificationA pre-launch audit by people who read Arabic, ending in a certificate.See the engagement ›
- We fixArabic Readiness DeliveryWe take the product from its measured score to a clean one, and the scan is the receipt.See the engagement ›
- We lookArabic Typography & Font AuditThe layer that decides whether Arabic looks native or merely present.See the engagement ›
- We watchLocalization QA RetainerFor teams shipping continuously without an Arabic speaker on staff.See the engagement ›
- We rebuildRitla UI rolloutWe replace the components that keep breaking in Arabic with Ritla components, so the fixes stay fixed.See the engagement ›
- You deliverAgency partnersResell certification and conversion under your own brand.See the engagement ›
Find out where your Arabic stands
A free scan of one page, scored and explained in about a minute. If it tells you everything you needed, that is a good outcome too.