BREESHA FOGG

As So Energy’s brand, products, and services continued to grow, we needed a design system that could flexibly adapt to evolving requirements. Taking cues from the Atomic Design methodology, we began by breaking down the user interface into basic building blocks called atoms. These atoms comprised typography, color palettes, grids, spacing, and icons. Building upon this foundation, these atoms were assembled into functional components, or ‘molecules,’ such as buttons, accordions, and data tables. These molecules were then seamlessly integrated into higher-level structures, forming cohesive page layouts and ensuring a comprehensive design system approach.