Diatom
Managing a bespoke and robust design system
Diatom didn't start as a grand plan—it started as a UI audit.
In 2020, we began the endeavor of migrating the site from Angular to React and adopt a new headless CMS. The audit revealed just how inconsistent things had become across components, layouts, and content—and made it clear we needed to build a proper design system for selinc.com from the ground up.
THE CHALLENGE
The first real decision was whether to adopt an existing open-source system or build our own. Given the range of complexity and content types across selinc.com, we decided a custom system would give us the flexibility to address more industry-specific needs.
We went with an atomic design approach. Breaking out components into Atoms, Molecules and Organism, and defining our foundational styles made starting from scratch much more manageable. It also helped establish clear, logical relationships between components that the team could build on over time.
MY ROLE
I served as design system owner and primary designer throughout Diatom's evolution from initial audit through ongoing maintenance and iteration. My responsibilities included:
Conducting UI and accessibility audits to identify gaps and violations.
Building and maintaining Figma component libraries and design tokens.
Writing documentation, usage guidelines, and contribution processes.
Defining component specs including anatomy, behavior, motion, and edge cases.
Collaborating with developers to ensure components were built to spec.
CONTENT NAVIGATION & ORGANIZATION
Several components directly addressed long‑standing usability challenges on content‑heavy pages: Tabs and Secondary Navigation components provided clearer mental models for navigating content-dense pages, reducing cognitive load and way-finding issues.
These components allowed users to stay oriented without relying on breadcrumb‑heavy navigation patterns.
COHESIVE ELEMENTS
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.
IMPROVED ACCESSIBILITY
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 complexity I went in depth to define and demonstrate all characteristics and behaviors. In this example for a 3D slideshow component, I had outlined the function, anatomy, assets, styles, motion, mobile experience, and edge cases. Included were visual diagrams as well as example CSS and alt text for assets.
REFLECTION
Looking back, I would approach the early stages differently—and I think that's a sign of how much I've grown.
From a resourcing standpoint, starting with an open‑source design system as a foundation would have reduced the initial burden. 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, my understanding of development-ready components has deepened significantly. I’ve actively invested in that growth—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.