Lumen Design System
As part of the World Vision Common Core Design Guide, Lumen brings our product design to life by offering a unified library of digital style guidelines and essential UI components, ensuring consistency and coherence across all design elements.
My Role
Art Direction, Brand Strategy, Identity Design, Branding, UX/UI Design
01. goal
Lumen is designed to solve the challenge of maintaining consistency, long-term viability, and accessibility across all digital platforms. By adhering to three core creative principles, it addresses the need for clear hierarchy, focus, and meaningful connections with audiences. Lumen bridges the gap between design and development, streamlining the creation of high-quality products while promoting productivity and efficiency.
02. foundations
At World Vision Canada, we collaborate as a global community to make a meaningful difference in the lives of the world’s most vulnerable children. Our creative principles are designed to ensure that every interaction resonates with our audiences while staying true to who we are.
Our digital communications are guided by three key principles—Create Movement, Maintain Focus, and Stay Authentic—to consistently deliver high-quality work that reinforces our brand.
Logo
Grid
Our logo aligns with the 8 PX square base grid on large and small displays, but it can align with a 4 PX grid to account for the size of the extra small display.
Clear Space
To give our logo proper room to breathe, a minimum clear space area (equal to 1/2 of the total logo height) must surround it at all times. Note that more room should be allowed wherever possible.
Themes
Themes define a framework of colours that accommodates and organizes all UI components of the design system.
There are two themes in the design system, the dark theme and the light theme. To create a high contrast between UI elements and the background, we always apply dark text or UI elements to light backgrounds, and vice versa. The dark and light themes complement each other to provide flexible and harmonious styles across the digital experience.
Do & Don't
Orange is best suited for light-themed designs. For accessibility, avoid using orange in small or standard-sized text. Limit the use of orange on dark backgrounds, as it can signify caution in certain cultures.
Accessibility
To meet WCAG 2.0 Level AA standards:
Standard text must have a contrast ratio of at least 4.5:1
Graphs & large text must have a contrast ratio of at least 3:1
Typefaces
Both fonts belong to the same sans-serif family, sharing clean, sleek, and modern lines. However, Lato appears more prominent with a wider typeface, while Karla has a slightly condensed, slimmer look, making it ideal for smaller text. Together, they harmonize to create a modern, minimalistic, and approachable style, adding a refined touch to the site's design.
Lato is widely used in titles, paragraphs, lists and tables across the site, especially for long descriptions that require optimal readability and legibility.
Karla is reserved forlinks (except where noted), tags, buttons and other distinctive text elements that require special attention if noted.
03. components
Components are a fundamental aspect of Lumen, designed to be reusable and scalable, ensuring both visual and functional consistency across all digital products.
