ORGANIZATION
Humanitarian NGO (anonymized)
REGIONS
Syria · Iraq · Ukraine · Türkiye · Afghanistan · Moldova · Central Asia
SCRIPTS
Latin · Cyrillic · Arabic · Perso-Arabic
OUTPUT TYPES
Posters · Infographics · Announcements · Digital
PROBLEM
HQ designers.
Six regions.
Zero shared language.
HQ designers producing materials for audiences they cannot speak to.
The design team at headquarters creates posters, infographics, and emergency announcements for field distribution across six regions. They don’t speak the languages of the communities receiving these materials. Translation is slow, inconsistent, and dependent on other staff. The outputs go to frontline areas: conflict zones, disaster response, refugee contexts, where misreading something has real consequences.
Color alone cannot communicate severity. It must be paired with symbol.
Every layout must work mirrored. RTL is not an afterthought.
Materials must survive black and white photocopying in the field.
RESEARCH
What breaks when design crosses language barriers.
Field research informed every constraint. Three failure modes emerged consistently: icon misreads across cultures (thumbs up is offensive in multiple regions), color-only severity coding (fails in B&W and for color-blind users), and layout assumptions baked for LTR that collapse in Arabic and Dari.
0
icons flagged
Culturally ambiguous across the target regions, including symbols assumed to be universal.
0
script systems
Latin, Cyrillic, Arabic, Perso-Arabic: all required by one system, one type family.
B&W
photocopy test
All materials must pass a grayscale reproduction test before field distribution.
FOUNDATIONS
Every decision documented. Nothing hardcoded.
Four foundations built before any component. Each one carries a constraint that doesn’t exist in typical design systems.
Foundation 1
Color
Semantic tokens mapped to communication intent. 5 primitive scales. B&W simulation for every token.
Foundation 2
Typography
Noto Sans. The only open-source family covering Latin, Cyrillic, Arabic, and Perso-Arabic. 55 text styles across 5 weights.
Foundation 3
Spacing
8pt grid. 12 tokens. 3 grid configurations for A3 poster, A4 infographic, and social formats.
Foundation 4
Icons
36 Phosphor icons. 8 flagged for cultural sensitivity. Every icon paired with Regular + Fill variant.
COMPONENTS
Communication primitives, not UI components.
The first three components built are not buttons or inputs. They are the building blocks of humanitarian communication.
Component 1
Alert Banner
4 severity levels. LTR and RTL variants. B&W print variant. Severity encoded in color + border weight + symbol: three independent channels.
RESULT
Three-channel encoding means no single failure (color blindness, B&W print, or script change) can break the message.
Component 2
Safety Status Card
4 states. Large symbol is the primary read. Legible at 2 metres on A3 print.
RESULT
Symbol-first hierarchy means the card communicates before any text is read. Critical for low-literacy contexts.
IN THE FIELD
The system was validated on real field materials: A3 evacuation posters, A4 infographics, and social media announcements produced for active humanitarian operations.
RTL & SCRIPTS
True RTL, not just text direction.
Every element mirrors. The accent border moves from left to right. Icon positions flip. Step number circles move to the opposite side. Text alignment switches. Arabic requires 18px minimum body size, 2px more than the Latin floor.
REFLECTIONS
Designing for conditions you can’t fully simulate.
On constraints as design input
The B&W requirement, the RTL requirement, the cultural icon review: each one produced a better decision than the unconstrained version would have. Constraints are not restrictions on the design. They are the problem made specific.
On AI as a tool
Claude MCP was used directly inside Figma to build foundations, components, and templates. The system documentation and the system itself were built simultaneously, not documented after the fact. The process and the output are the same artifact.
On anonymization
The org cannot be named. The constraints, the decisions, and the field context can. Specificity of problem is more credible than specificity of client.
