Back
Building NEOM's Marketing Design System
Building NEOM's Marketing Design System
Building NEOM's Marketing Design System
4 min est. read
Overview
I led the creation of a marketing design system for NEOM. Faced with inconsistent visuals and inefficient workflows, I built an atomic component library in Figma, ran iterations through testing, and streamlined brand assets, making campaign design faster, more cohesive, and future ready.
I led the creation of a marketing design system for NEOM. Faced with inconsistent visuals and inefficient workflows, I built an atomic component library in Figma, ran iterations through testing, and streamlined brand assets, making campaign design faster, more cohesive, and future ready.
Schedule a presentation
Schedule a presentation
Schedule a presentation
Schedule a presentation
Schedule a presentation
Schedule a presentation
My Role
Senior UI Designer
Senior UI Designer
The Team
1x UI Designer
1x Art Director
1x UX Architect
1x CX Director
2x Account Manager
1x UI Designer
1x Art Director
1x UX Architect
1x CX Director
2x Account Manager
Understanding Atomic Design
Atomic design breaks down UI into five stages:
atoms, molecules, organisms, templates, and pages, to enable consistency and reusability at every level.
Atomic design breaks down UI into five stages:
atoms, molecules, organisms, templates, and pages, to enable consistency and reusability at every level.
Two Libraries, One Unified Framework
Separate libraries for EDMs and Cloud Pages, each optimized for desktop and mobile, with unique components for both English and Arabic content.
Separate libraries for EDMs and Cloud Pages, each optimized for desktop and mobile, with unique components for both English and Arabic content.
Design Tokens: The Visual Foundation
Color, typography, spacing, grids, icons, shadows, effects, and radius tokens ensure harmony and scalability across the entire system.
Color, typography, spacing, grids, icons, shadows, effects, and radius tokens ensure harmony and scalability across the entire system.
Component Structure: From Atoms to Pages
Showcasing how individual elements (atoms) scale into full templates and pages across both EDMs and Cloud Pages.
Showcasing how individual elements (atoms) scale into full templates and pages across both EDMs and Cloud Pages.
Optimized for Devices and Languages
All components are fully responsive and support RTL layouts for Arabic, ensuring a seamless experience across audiences and screen sizes.
All components are fully responsive and support RTL layouts for Arabic, ensuring a seamless experience across audiences and screen sizes.
