One system, six regions, four scripts.
| Context | Detail |
|---|---|
| Organisation | Humanitarian NGO (anonymised) |
| Regions | Syria · Iraq · Ukraine · Türkiye · Afghanistan · Moldova |
| Scripts | Latin · Cyrillic · Arabic · Perso-Arabic |
| Output types | Posters · Infographics · Announcements · Digital |
HQ designers. Six regions. Zero shared language.
The design team at headquarters creates posters, infographics and emergency announcements for field distribution across six regions — for communities whose languages they don’t speak. Translation is slow, inconsistent and dependent on other staff. The outputs go to conflict zones, disaster response and refugee contexts, where misreading something has real consequences.
- Colour alone cannot communicate severity. It must be paired with a symbol.
- Every layout must work mirrored. RTL is not an afterthought.
- Materials must survive black-and-white photocopying in the field.
What breaks when design crosses language barriers.
Three failure modes emerged consistently: icons misread across cultures (a thumbs up is offensive in several regions), colour-only severity coding (fails in B&W and for colour-blind readers), and layouts built for LTR that collapse in Arabic and Dari.
Every decision documented. Nothing hardcoded.
Four foundations built before any component, each carrying a constraint typical design systems never face.
True RTL, not just text direction.
Every element mirrors. The accent border moves sides, icon positions flip, step numbers move across, text alignment switches. Arabic needs an 18px minimum body size — 2px above the Latin floor.
| Language | Script | Direction | Min. size | Expansion |
|---|---|---|---|---|
| English | Latin | LTR | 16px | Baseline |
| Ukrainian | Cyrillic | LTR | 16px | +10–15% |
| Arabic | Arabic | RTL | 18px | +20–30% |
| Dari / Pashto | Perso-Arabic | RTL | 18px | +20–30% |
Communication primitives, not UI components.
The first components aren’t buttons or inputs. They are the building blocks of humanitarian communication.
Alert banner
4 severity levels. LTR and RTL variants. A B&W print variant. Severity encoded in colour + border weight + symbol — three independent channels.
Safety status card
4 states. The large symbol is the primary read, legible at 2 metres on an A3 print.
Validated on real field materials: A3 evacuation posters, A4 infographics and social announcements produced for active humanitarian operations.
Designing for conditions you can’t fully simulate.
On constraints as design input
The B&W, RTL and cultural-icon requirements each produced a better decision than the unconstrained version would have. Constraints are the problem made specific.
On AI as a tool
Claude MCP was used inside Figma to build foundations, components and templates. The documentation and the system were built at the same time.
On anonymisation
The organisation can’t be named. The constraints, decisions and field context can. Specificity of problem beats specificity of client.