Design System

Product Design

Visual Identity

BoldArena

Building a bilingual crypto platform for Arabic speaking users meant designing two mirrored experiences that had to feel like one product. I led the visual identity and design system from the ground up, working across English and Arabic, LTR and RTL, mobile and desktop. Valerie Torres & ClickOut Media Design Team. Visual Identity & Design System.

Backstage process ↗

Industry

Fintech

Year

2026

Ruby stone

Challenge

Challenge

BoldArena needed a content platform that could serve two very different readers with one system: Arabic speaking users across the Middle East and North Africa, and English speaking users elsewhere. That meant more than translation. Arabic runs right to left. English runs left to right. Every layout, icon, and navigation pattern had to work mirrored without losing hierarchy or clarity. Color choices that read as trustworthy in one culture can read differently in another. Green, for example, carries stronger positive weight in Arabic markets than in Western ones, and gold carried its own meaning too, pointing to the opportunity to learn and earn that the platform offered. On top of the dual market challenge, the platform had no existing brand. It needed a logo, a full visual identity, and a scalable design system that a content team could use daily without a designer in the room for every article.

Solution

Solution

I started with typography. Noto Sans and Noto Sans Arabic gave us one type family across both scripts, so headings, body text, and UI elements stayed visually consistent whether the page read left to right or right to left. For the logo, I explored multiple concepts before landing on BoldArena: a mark built to scale down to a favicon and up to a hero banner, kept consistent across the LTR and RTL layouts. The design system came next. I built primitives (the raw color palette) separate from semantic tokens (how those colors get used: primary, background, border, text, CTA). This meant the content team could apply "cta-primary" or "text-secondary" without ever touching a hex code. Spacing, padding, and radius all followed a 4px base scale, so nothing in the interface was ever eyeballed. Bidirectionality was the core design constraint, not an afterthought. I built every card, tab, and button to flip cleanly between LTR and RTL, including directional icons and tab indicators. I organized the whole system into 102 Figma variables covering headers, hero sections, news cards, category tabs, and footer content, so any future page could pull from the same bilingual source of truth.

Flowers on water

Glassy texture

Window frames

Glass pattern

Liquid paint

Floating flower

Outcome

Outcome

The homepage reached staging in both directions: a Western LTR layout and a fully mirrored Arabic RTL layout, each responsive across mobile and desktop. The design system meant new content sections could be built by reusing existing components instead of designing from scratch every time, which mattered for a platform meant to publish content daily. The project didn't move past staging while I was there, but the system was built to scale beyond that point. This project sharpened my systems thinking in a way no single market project could. Designing for two scripts and two reading directions at once means the system has to be right, not just the screen.

← Previous Project

← Previous

Next Project →

Next →