Evidence
From no shared system to one that every Aajil product uses.
Tokens in two layers: 153 raw values, 134 named by role.
Every component in Arabic and English, each in light and dark.
Why Aajil needed a system
Every product spoke its own dialect.
The cost of designing as you go
Aajil finances construction businesses in Saudi Arabia. At the time it ran a website, a web app, a mobile app and internal dashboards, each designed when it was needed, by whoever was free. Nothing tied them together: buttons, spacing and colors drifted from one product to the next, and every new feature reopened the same question: which version is right?
Arabic first, twice the work
We designed Arabic screens on their own, never as a mirror of the English. That is right for Saudi businesses, and costly without shared parts: every screen existed twice, kept in step by hand.
The goal
One visual language across every product, and a base for every feature and experiment after it. The rebrand from Buildnow to Aajil strengthened the case. Consistency was the reason.
Earlier at Aajil, I had redesigned the website in one week.
A month, three people
Speed came from clear ownership, not shortcuts.
Who owned what
Zayed, our art director and Aajil’s creative lead, set the graphic foundations: color direction, gradients and visual patterns. Our graphic designer owned illustrations and icons. I led the system itself: principles, tokens, components and the handover to engineering.
Speak the engineers’ language
Engineering was moving to a new front end, so the system speaks its language: text-sm, shadow-md and rounded-lg mean the same in Figma and in code, and the handover needs no glossary.
AI for the documentation, me for the decisions
I used AI for documentation, mostly for the tokens, and reviewed and decided every value myself. The components are not generated: they come from the UI components and patterns already used across Aajil products.
Principles
Four rules behind every decision.
Arabic is not a translation
Each script is set on its own terms, with its own type roles and taller Arabic line heights.
Typography tokens exist twice: one set for English, one for Arabic.
Name by role, not by value
Components ask for a job, like the brand background, never a hex code. A theme only changes what sits underneath.
bg-brand is yellow 400 in light and yellow 300 in dark; no component changes.
One vocabulary for design and code
Tokens use the same names as the code, so a handover is a lookup, not a translation.
text-sm, shadow-md and rounded-lg mean the same thing in Figma and in code.
Calm where money moves
The components a business uses to verify, apply and pay get the most states and the most care.
The code field alone has 28 variants: four sizes, seven states.
Foundations
Color, type, space and icons: the parts everything else is made of.
Color
A confident yellow on true neutrals. The brand scale runs from 50 to 950 with 400 as the brand color; the neutrals carry no tint, so the yellow always leads. Green, orange and red are kept for status.
Rebuilt in code from the Aajil tokens
Scroll sideways to see all of it
Type
IBM Plex Sans and IBM Plex Sans Arabic are one family, so both scripts share a weight and a voice. Each has its own scale of nine roles, from display to caption, and Arabic gets taller line heights so its marks never collide.
Rebuilt in code from the Aajil tokens
Scroll sideways to see all of it
Space and shape
Spacing steps by four pixels, from 4 to 96. Corners, borders and shadows each have a short scale, so a card, a field and a modal clearly belong together.
Rebuilt in code from the Aajil tokens
Scroll sideways to see all of it
Icons
Two styles on one 24 px grid: bold for emphasis and outline for quiet interface. The library holds more than 18,000 icons in 57 categories, so the set mixes common interface icons (search, settings, lock, calendar, share) with ones for the product itself: credit cards, accounts, wallets, invoices, shipments and property.
From the Aajil icon library
Scroll sideways to see all of it
Tokens
Two layers, so a theme is a switch, not a second design.
The first layer holds raw values: yellow 400, black 900, 16 pixels. The second names them by job: the brand background, the default text, the subtle border. Components only use the second layer. Dark mode is the same names pointing at different values (38 of the 44 semantic colors point at a different raw value in dark); Arabic is the same names with its own type scale.
A name reads from the general to the specific: color.background.bg-brand-hover is a color, for backgrounds, in the brand family, in its hover state. Each token keeps the name it has in the Figma file, where the variables panel shows a role per row, a value for each mode, each pointing at a raw value. The Primitives collection holds 153 variables and the Semantic one 134.
The variables panel of the Aajil Figma file
Scroll sideways to see all of it
The same tokens as code
Each token keeps its name, its type and its description when it leaves Figma. A role points at a raw value, and dark mode is one extra line on the same token: the component never changes.
Rebuilt in code from the Aajil tokens
Scroll sideways to see all of it
Shaped for financing
Where generic components became Aajil’s: verifying a business, applying for credit, reading the numbers.
A stepper is common. A credit application in Arabic is not. These are the parts we shaped around Aajil’s work.
Verify
Every session that touches money starts with a one-time code. The code field comes in four sizes and seven states, from empty to error, for six- or nine-digit codes, grouped or apart. Each product picks the one that fits its screen.
From the Aajil Figma library
Scroll sideways to see all of it
Apply in steps
A credit request is long, so the stepper names each step and shows what’s done, what’s next and what needs fixing. Seven styles, from a compact line to full cards, cover the website, the apps and the dashboards. In Arabic, progress runs right to left.
From the Aajil Figma library
Scroll sideways to see all of it
Read the numbers
Finance teams live in tables. Ours put the riyal beside every amount, give every status a word as well as a color, and keep search, filters and the main action in one row above the data.
From the Aajil Figma library
Scroll sideways to see all of it
The component library
About forty families, every one in Arabic and English.
Actions, forms, navigation, feedback, data and overlays: what a product needs, built twice, once per language, and themed through tokens. The button is the deepest: eight colors, five sizes, four states, with or without icons, 440 variants per language. A product team picks a color and a size; the system handles the rest.
Other components
Actions Button groups in nine layouts; badges in seven themes, two sizes and five types, with a dot, an avatar or a loader.
Forms Text fields in seven layouts; selects in seven; code fields in four; and upload, search, phone, number, date and time fields, toggles, checkboxes and sliders.
Navigation Tabs in seven types, each with a mobile version; breadcrumbs in six types; navbars, sidebars, mobile menus, pagination and the stepper.
Feedback Alerts in four types and five colors; progress bars in six colors; toasts in nine types; banners, spinners and skeletons.
Data Tables with sortable columns, riyal amounts, status badges, search, filters and paging; cards in nine types; lists, timelines and ratings.
Overlays Modals in eleven types; dropdown menus in sixteen; popovers; tooltips in four positions; drawers and speed dials.
From the Aajil Figma library
Scroll sideways to see all of it
From the Aajil Figma library
Scroll sideways to see all of it
How the teams use it
A system only counts when people use it.
The system lives in a Figma team library, so any designer can pull it into any file, and engineering builds from the same names. Every Aajil product now uses it: the website, the web app, the mobile app and the dashboards.
A change starts with a token. Adjust the brand yellow once, and it reaches every component in the library and every screen built from it.
- Figma libraryComponents and tokens
- TokensNamed by role
- CodeSame names in code
- Every productWeb, app, dashboards
Learnings
Reflections, takeaways, and what I’d do differently.
What did I learn?
A design system is mostly a set of decisions about where to be different. One month was enough because we spent it on what makes Aajil, Aajil: Arabic on its own terms, the money moments and the brand.
What went well?
Clear ownership let three people move in parallel. The best evidence is adoption: every product uses the system, and new features start from it.
Naming colors by role paid off in dark mode: 38 of the 44 semantic colors point at a different raw value there, and no component had to change.
What could be improved?
Three text colors in the Figma file fall short of WCAG AA’s 4.5:1 on white: brand yellow text (2.7:1), success green (3.2:1) and muted gray (2.2:1). This page already draws them one step darker (yellow 700 at 4.6:1, green 700 at 5.0:1, gray 500 at 5.2:1, with subtle gray moved to 600 to keep the order); I’d move the library to the same steps. And I’d measure adoption from the first week.
Need one language across your products?
If your products look different in every corner, or Arabic always comes second, I’d like to hear about it.
