Opnbook is a sophisticated AI productivity platform that unifies multiple AI tools (ChatGPT, Claude, Gemini) into a seamless desktop experience. This enterprise-focused application enables organizations to maximize AI efficiency through advanced prompt management, usage tracking, and performance analytics.
As a Senior Product Designer for Opnbook, I created and maintained a comprehensive design system from the ground up.
This system established a cohesive visual language, streamlined component architecture, and dramatically improved the design-to-development workflow.
Opnbook faced a fundamental challenge: the complete absence of a design system. This created several critical issues:
Scaling impossibility: As the product grew, the lack of design infrastructure created significant barriers to maintaining quality while expanding functionality
I developed a systematic approach to building a complete design system that would serve both immediate needs and support future growth.
First, I conducted a comprehensive audit of existing interfaces and user flows. Then, I identified common patterns and inconsistencies across the product. Finally, I ceated a prioritized list of components based on frequency and impact.
I focused on high-impact, frequently used components first to limit resources and maximize wins.
I used a structured variable system with semantic naming that balances flexibility with standardization, e.g., primary-action, surface-background, text-secondary. This serves two purposes: It prevents creating too many variables and allows developers to self-serve.
To expand on this, I created a three-layer variable system: primitive naming→ semantic assignments → component-specific tokens. It was crucial that I established clear naming conventions that communicated intent rather than just appearance.
To meet accessibility standards, we decided to release both light and dark modes from the get-go. All the variables and components needed to have its light and dark counterparts.
I prioritized clear documentation to encourage adoption, with notes and general usage advice. This was key in making sure the build was to spec since we were often working with off-shore engineers.
Nowadays, it's important to build components on an atomic level, referencing unpublished base components so I could easily change the base components instead of changing all the variants of a component.
I utilized the Viridis color palettes, developed by Stéfan van der Walt and Nathaniel Smith for matplotlib, which are specifically designed to be perceptually uniform and accessible to users with color vision deficiencies.
I also ensured all color combinations met WCAG 2.1 AA accessibility standards in both themes.
A key component of the Opnbook Design System was a robust data visualization framework that prioritized both aesthetic consistency and accessibility:
I utilized Figma's open source community and found chart patterns that work for our needs, doctored them to our established colors to create a collection of chart components including bar charts, line charts, area charts, scatter plots, and pie/donut charts.
A critical success factor was the close partnership with engineering teams. What worked for us was weekly working sessions with lead engineers, paired designer-developer documentation, and joint review process.
I incorporated industry best practices that ensured both quality and adoption:
The Opnbook Design System demonstrates the transformative impact of creating a robust design infrastructure from scratch. By establishing clear patterns, thoughtful documentation, and strong cross-functional collaboration, we built a system that not only improved our current product but positioned the company for more efficient growth and consistent quality in the future.
