DESIGN SYSTEMS
MY WORK BUILDING AND MANAGING THE DESIGN SYSTEMS AT BEN BRIDGE JEWELERS
My role: Senior Product Designer
Timeline: Year 2024-2026
I built and maintained a scalable design system in Figma to support responsive web experiences across desktop, tablet, and mobile. The system is structured using atomic design principles and leverages components, variables, tokens, and boolean properties to enable consistent theming, accessibility, and efficient iteration.
the build
the atomic system
The system follows an atomic design structure, starting with foundational elements (colors, typography, spacing), progressing to atoms (buttons, inputs, icons), molecules (form fields, navigation items), and organisms (headers, product cards, page sections). This hierarchy made it easier to evolve components without breaking downstream usage.
components
Components were built with flexible variants and boolean properties to support common states such as size, hierarchy, icon placement, and interaction states. Boolean toggles allowed designers to enable or disable elements like icons, labels, or helper text without duplicating components, reducing system bloat and maintenance overhead.
tokens
I implemented design tokens using Figma variables for color, typography, spacing, and elevation. Tokens were abstracted from raw values, allowing themes (such as light and dark modes) to be applied consistently across the system. Updating a core token automatically propagated changes throughout all components, significantly reducing rework and visual drift.
accessibility and responsiveness
Accessibility was considered at the system level, including color contrast checks, focus states, and accessible component states. Components were designed responsively using auto layout and constraints to adapt across desktop, tablet, and mobile breakpoints.
impact
This system improved design consistency, reduced duplicated work, and made it easier for designers and engineers to build and update features quickly. By centralizing decisions in the system, the team was able to scale designs more efficiently and maintain visual coherence across the product.