Diatom
Managing a bespoke and robust design system
In 2020, we formally defined Diatom, our design system, to serve as the foundational building blocks of SEL’s website. This initiative aligned with a broader technical overhaul, including migrating the site framework from Angular to React and transitioning to a new headless content management system. Formalizing the design system at this moment allowed us to introduce consistency, scalability, and accessibility across a highly complex and content‑dense site.
THE CHALLENGE
Starting out with a complete UI audit of the existing site, it was revealed that there were many inconsistencies across elements that could be avoided if we had a formal design system in place.
The first question that needed to be answered was whether to create a custom design system from scratch, or utilize an existing open source system and adopt it. At the time, it was decided that creating our own would allow more flexibility and adaptability for some of the more industry-specific needs on the site. Our website is incredibly robust and content types have a wide range of differences.
We went with an atomic design approach. Breaking our components out into Atoms, Molecules and Organism, and defining our foundational styles made starting from scratch a more manageable task. This structure made large‑scale system development more approachable and helped define clear relationships between components.
MY ROLE
Design system owner and primary designer
Conducted UI audits and audits for accessibility
Created and maintained Figma components and libraries
Wrote documentation and usage guidelines
Established contribution and component‑creation processes
Several components directly addressed long‑standing usability challenges on content‑heavy pages: Tabs and Secondary Navigation components provided clearer mental models for navigating dense informational pages, reducing cognitive load and way-finding issues.
These components allowed users to stay oriented without relying on breadcrumb‑heavy navigation patterns.
The Page Banner established a consistent visual language across the site while remaining modular enough to support varied content needs. This balance reinforced brand cohesion without sacrificing flexibility.
The Features Callout component resolved a persistent accessibility violation. Previously, feature callouts were delivered as flat PNGs with embedded text—an approach that was inaccessible even with alt text.
The new component:
Uses structured HTML instead of text baked into imagesAllows users to tab through numbered feature pointsProvides visual feedback by highlighting corresponding areas on the product imageLabels multiple product views clearly
This significantly improved both accessibility and usability for all users.
By applying atomic design principles, accessibility could be addressed at the component level, making it easier to consistently meet WCAG AA standards across the site as new features and pages were introduced.
For components with more complicated functionality I went in depth to define and demonstrate all characteristics and behaviors. In the example below for a 3D slideshow component, I outlined the function, anatomy, assets, styles, motion, mobile experience, and edge cases. Included are visual diagrams as well as example CSS and alt text for assets.
REFLECTION
Looking back, I would approach the early stages differently.
From a resourcing standpoint, adopting an open‑source design system initially would have provided a stronger foundation. At the time, we underestimated the development effort required to build, iterate on, and maintain a fully custom system at the necessary pace.
From a design perspective, I also recognize how much my understanding of development‑ready components has evolved. Early on, I lacked experience designing components intended for long‑term scalability. Over time, I’ve actively grown those skills—studying other systems in Storybook, researching best practices, and progressively introducing design tokens and variables into the Figma Diatom library.
Through continuous learning and iteration, Diatom has evolved into a system I’m proud of—one that reflects both the technical needs of the product and my own growth as a systems‑focused designer.