One unified experience across all platforms
Purpose
The ODP Design System exists to inform the design and development process with a shared set of established patterns, usage guidelines, and documentation. It enables teams to work more efficiently and cohesively, speaking a shared design and development language.
What is a ODP Design System?
ODP Design System is a collection of reusable elements and components, guided by clear standards, that can be assembled to build consistent user interfaces. The ODP Design System is the ultimate source of truth and acts as a guide to help designers and developers streamline the design and development process.
Adopting Atomic Design
Atomic Design is a methodology for creating Design Systems, a modular and holistic approach to the breakdown and organization of the system. We’ve adapted the 5 levels of Atomic Design for the ODP Design System. For more details please visit https://bradfrost.com/blog/post/atomic-web-design/
Adopting Atomic Design
Referred to as Atoms within Atomic Design. Our Fundamentals are individual elements that can’t be broken down into smaller ones, such as typography, colors, styling, and spacing. Atoms are the foundation of the visual language & consistency of the Design System.
Elements
Combining shapes, typography, and color leads to the creation of ‘Elements’. Known as Molecules in Atomic Design, Buttons, Dropdowns, and Tags are such smaller ‘Elements’. These can be further combined to create Components.
Components
Components are the building blocks of the Northern Lights Design System. In Atomic Design they are referred to as Organisms. Components are constructed out of several Molecules (Fundamentals) and Atoms (Elements). Components can range from simple to complex, with simple components being nested within the more complex components.
Templates
Templates are page-level structures or blueprints for pages made up of multiple Elements and Components. In ODP, for example, there are a variety of different Templates for Landing Pages.
Pages
The final stage in the Atomic Design method. Pages are Templates brought to life and filled with actual content, such as a Homepage or Landing Page found on any Canadian Tire Corporation site.
