Design Systems
Digital product design and development at scale.
Client
The Church of Jesus Christ of Latter-day Saints
Services
Design Systems
Creative Direction
Art Direction
Design Leadership
Technical Integration
Mentorship
The Value of a Digital Product Design System
A digital product design system is a unified library of reusable components, design guidelines, and code documentation that serves as a single source of truth for product teams. For The Church of Jesus Christ of Latter-day Saints, where digital tools support a global audience in worship, service, and learning, a design system ensures consistency, scalability, and spiritual impact through high-quality digital experiences.
Unified Experience
A design system ensures visual and functional consistency across multiple platforms. Church products such as the Gospel Library App to ChurchofJesusChrist.org.
Scalable Design and Development
With thousands of contributors and a rapidly growing set of digital tools, a design system enables product teams to scale with efficiency.
Built-in Code and Documentation
The Church’s design system includes production-ready, accessible code for UI components, supported by clear documentation. Supported platforms include Web, iOS, Android, OTT and Wearable Tech.
Cost Efficiency
A design system reduces duplication of effort, shortens development timelines, minimizes bugs and design inconsistencies, and allows teams to focus on innovation rather than reinvention.
Consistent User Experiences
Consistent and thoughtful design enhances usability and builds trust. A design system helps ensure each interaction is simple, beautiful, and edifying.
Scalability
A design system using atomic design principles ensures consistency by building from foundational elements, allowing changes to cascade across the entire interface and multiple digital products.
By small and simple things are great things brought to pass.
Components
• 13K Components across Web, iOS, Android, Mobile
• 11K Inserts Per Week
Cost Savings
$1 Million Year-over-Year cost savings
Impact
Supports 150 Digital Product Teams
Outcome
Cohesive Look and Feel for all digital products that meet WCAG 2.2 Accessibility Standards
Using a design system has greatly benefited The Church of Jesus Christ of Latter-day Saints by bringing consistency, efficiency, and unity across all of its digital products. With a centralized system of reusable components and design principles, teams can build faster, reduce duplication, and maintain a cohesive look and feel across websites, mobile apps, and digital tools. This not only improves the user experience for members and visitors worldwide but also ensures that the Church’s digital presence reflects its values and identity, no matter the platform or audience.
Building a Unified Digital Experience Through Atomic Design
The Church’s design system was built using atomic design principles, starting with foundational elements like colors, typography, and buttons (atoms), which were combined into more complex components such as forms and cards (molecules and organisms). This modular approach allowed designers and developers to create consistent, scalable interfaces that could be easily maintained and adapted across diverse digital experiences. By structuring the system from the ground up, any updates made at the atomic level cascade throughout the entire ecosystem, ensuring visual and functional consistency while streamlining collaboration across teams.
GVSG Blue 10
#e83b26
GVSG Green 10
#1c5a3e
GVSG Yellow 10
#1d51a7
GVSG Red 10
#eda032
GVSG Blue 10
#e83b26
GVSG Green 10
#1c5a3e
GVSG Yellow 10
#1d51a7
GVSG Red 10
#eda032
Cascading Elements
The cascading principles in CSS refer to the way styles are applied in a hierarchical order, where rules flow from general to specific and can be inherited or overridden based on specificity and source order. This concept parallels atomic design in a design system, where small, foundational components influence the appearance and behavior of larger, more complex structures. Just as a change to a base CSS rule can impact an entire interface, updating an atomic element—like a button or color variable—in a design system can cascade through all components and pages that use it. This ensures consistency and simplifies maintenance, allowing teams to make broad updates efficiently while preserving visual and functional harmony.
Bringing atomic design principles and CSS cascading together creates a powerful foundation for designing and developing at scale—especially for a global organization like The Church of Jesus Christ of Latter-day Saints, which serves millions of users with diverse needs across languages, cultures, and devices. Atomic design ensures that each component is thoughtfully crafted and reusable, while CSS cascading allows those components to adapt fluidly within different contexts and platforms. Together, they enable a system where updates to core styles or components ripple consistently across all digital experiences, preserving brand integrity and usability. This approach empowers teams to localize content, support accessibility, and respect regional nuances without fragmenting the design system, ensuring that every user receives a tailored experience that still feels cohesive, intentional, and aligned with the Church’s digital identity.
Results
The design system created for The Church of Jesus Christ of Latter-day Saints is a game-changer for this global organization, enabling rapid, system-wide updates that once would have taken months or even years to implement. With a centralized library of reusable components and design tokens, updates to colors, typography, spacing, or UI elements can be made in one place and instantly reflected across thousands of web pages and multiple mobile applications on both iOS and Android. What used to be a painstaking, manual process across disparate teams and platforms can now be executed in minutes with precision and consistency. This level of efficiency not only saves significant time and resources but also empowers teams to innovate faster, respond to user needs more effectively, and maintain a unified brand experience across every digital touchpoint.
The design system is used for all Digital Product Produced by the Church, which includes thousands of webpages, multiple web applications, and 26 mobile applications (including iOS, Android, OTT and platforms).