One interface language your whole product speaks

A system has three layers. The foundation holds the tokens: named values for color, type size, spacing, radius and motion. The middle layer holds components built from those tokens, such as buttons, inputs, tables, tabs and dialogs, each with its states: default, hover, focus, disabled, error and loading. The top layer holds patterns, which are the combinations you repeat, like a search-and-filter bar or a multi-step form.

Tokens are the part most teams skip and later regret. When a brand color is a named token rather than a hex code pasted in forty places, a rebrand or a dark theme becomes a configuration change. We define tokens in Figma variables and export the same values as code, so design and development read from one source. Components are then built in your front-end stack, whether React, Vue or Flutter, and documented in a browsable catalogue.

Right-to-left design is more than flipping a layout. Navigation order, progress bars, chevrons and back arrows mirror. Phone numbers, product codes and Latin brand names stay left-to-right inside Arabic text, which needs correct bidirectional handling in the markup. Arabic letterforms need more line height than Latin, and a typeface that looks balanced in English often looks thin or cramped in Arabic. We select and test both type scales side by side.

Numerals are a product decision. Many Saudi users are comfortable with Western digits in finance and commerce, while some government and healthcare contexts favor Arabic-Indic digits. We make this a setting in the system, not a one-off choice per screen. The W3C Internationalization guidance on text direction and the markup rules for the dir attribute are our reference for how bidirectional text should behave in the browser.

We check components against the Web Content Accessibility Guidelines (WCAG) 2.2 at design time, when changes are cheap: text contrast, visible focus, touch target size, error messages that explain the fix, and labels a screen reader can announce. Catching these in the library means every screen inherits the fix, instead of an audit finding the same problem two hundred times later.

Handoff is a coded library, not a PDF. Developers install the package, import the components and see usage examples next to the design. A first library covering the core thirty or so components typically takes four to eight weeks, depending on how many product surfaces it must support and whether a brand identity already exists. If your brand is still being defined, we start with tokens and grow the system as the product grows, rather than designing every component up front.