Developica required a platform that simultaneously supported three languages and two themes. To manage this level of complexity, I stopped drawing individual screens manually and built an infrastructure that generates them automatically.
1440 × 860 · Persian · light
Rebuilt live in your browser from the project’s own content export and colour tokens — the same eighteen states the design file carries. Every string below is the real variable value.
overview
Developed a fully custom design system based on Untitled UI to create a highly flexible infrastructure. This system was engineered to seamlessly support 3 breakpoints, 2 automatic color themes, and 3 languages, ensuring that all variations are managed entirely through Figma variables.
Developica, a software engineering firm, needed a completely new digital identity and platform. The scope of this collaboration started with naming and domain selection, evolved into a visual identity and a 30-page brandbook, and culminated in a complete Information Architecture (IA) overhaul and UI/Design System creation.
The true value of this product lies not just in its aesthetics, but in its underlying systematic logic. Supporting both Right-to-Left (RTL) and Left-to-Right (LTR) layouts alongside dark and light modes turned this from a simple "design task" into an "engineering and maintenance challenge". The final output was a system that guaranteed error-free development and long-term scalability.
Information Architecture (IA) Redesign
The company's initial service list was categorized strictly by technology (e.g., Web Development, Mobile, Legacy Modernization). This structure was confusing for the target audience—a non-technical client with a business challenge—and buried the company's most strategic services at the very bottom.
I rewrote the IA based on the "Client's Product Lifecycle": Strategy & Design for clients who don't yet know what needs to be built; Development for clients who know what they want and are ready to build; Modernization for legacy systems that are hindering growth; and Support for maintaining and optimizing live, active products.
The output of this phase (July 2025) was a comprehensive document including the sitemap, service hierarchy, navigation strategy, and CTA placements, which served as the absolute prerequisite for visual design.
- Enterprise solutions
- Application development
- Web development
- Mobile
- Desktop
- Legacy modernization
- Startup services
- Product services
- 01web application development lived under two parents at once
- 02the top level named technologies, never outcomes
- 03the vocabulary assumed a reader who already spoke it
- 04the two most strategic services sat last, and thinnest
pick a category to see what folded into it
Corporate Identity & Brandbook
Developica's name and logo were created from scratch. The final logo—four interlocking blades—conveys structure and motion at larger scales while maintaining absolute stability and legibility at favicon size.
To ensure visual consistency, I compiled a 30-page brandbook. The color palette revolves around the primary "Orchid Blue," with "Purple and Mint" as accents, and a deep Navy Blue to provide weight in dark interfaces. This document covers color logic, typographic scales, safe spacing, and digital application rules, empowering the development team to make accurate visual decisions independently.
Four blades, alternating over and under — traced here straight out of the brand book.
- Orchid Blue#3348FFprimary
- Deep Navy#1F2B99primary dark
- Violet#6640FFsecondary
- Mint#84FDD4accent
- Ink#0D111Ddark surface
- Paper#F5F6FAlight surface
Thirty pages: colour logic, approved combinations, clear space in units of the mark, reductions, the misuse grid, digital applications and the type scale.
System Engineering: Intersection of Languages & Themes
The founder had two key requirements: automatic dark/light mode support across all components, and three languages (English, Persian, Arabic) living directly within the design file.
Since Persian and Arabic are RTL (Right-to-Left) languages, this was far more than a simple text swap. The layout had to be meticulously structured so that the logo mirrors, primary and secondary buttons swap positions, directional icons flip, and varying text lengths across languages are accommodated seamlessly without breaking the UI grid.
- the side the logo sits on
- the order of primary and secondary buttons
- every directional icon
- the anchor each section grows from
- the length of the very same sentence
Content Management via Variables
To prevent human error and drastically reduce maintenance costs in a multilingual system, all variables (colors, spacing, and most importantly, text) were moved to Figma Variables.
Page content was transformed into a collection with 3 language modes: 182 content variables (totaling 546 managed text strings). With this architecture as a single source of truth, any text edit in the master source automatically propagates across all versions, themes, and breakpoints.
Another key achievement was streamlining the developer handoff. The content was exported from the design file as JSON, allowing translators to work directly with the data and providing the engineering team with perfectly structured, ready-to-implement code.
Above The Fold / Title- Persianدر دولوپیکا، ما آینده کسبوکار شما را طراحی میکنیم...!
- EnglishAt Developika, we design your business future...!
- Arabicفي ديفلوبيكا، نحن [كلمة ديناميكية] مستقبل عملك الرقمي.
The Arabic value still holds its dynamic word as a placeholder: the verb in the headline was a variable of its own.
- Navbar7
- Above The Fold4
- Key Features6
- Product Design13
- Software development10
- Modernization8
- Support13
- Our Projects24
- Testimonials30
- Blog Section30
- Contact Us14
- Footer23
182 × 3 = 546
182 variables × 3 modes = 546 managed strings
Final Deliverables
The design phase was successfully concluded. None of the images in this case study are screenshots of a live site; they are the direct, engineered outputs of the design file itself. Deliverables included: Information Architecture documentation and sitemap; naming, logo design, and a 30-page brandbook; a custom Design System built on Untitled UI (adapted for dual themes and bi-directional text); responsive key pages with full support for linguistic and thematic variations; and tri-lingual content files in JSON format, ready for development.
- 3 breakpoints × 2 themes × 3 languagesomnidimensional consistencyfull system support for every combination, without duplicating or redesigning components
- 546 text stringsmanaging content at scale182 content variables across 3 language modes, exported as JSON
- near-zero update timethe metric I trackreducing the time to apply a single text edit across every system state to near zero — the ultimate proof of this architecture's efficiency
If I were to tackle this project again, I would bind the content variables before completing the design of the first full page. The variable architecture must form the core of the page from the very beginning, rather than designing the interface first and injecting the variable system afterward.
- 01Information-architecture document and sitemap
- 02Naming, domain, logo, lockups and a 30-page brand book
- 03Design system on Untitled UI, rebuilt for two themes and two writing directions
- 04Home, about, contact, blog index, article and 404 — each at 18 states
- 05Trilingual content file as JSON, ready for handover
statusDesign phase complete. The build has not started.
