Wicked Sidekick
Design System Foundation
Built a token system, component library, and Storybook documentation for an AI-powered B2B SaaS product – in one week
Wicked Sidekick
Wicked Sidekick is an AI-powered B2B SaaS tool that enables Product Managers to analyze customer meeting transcripts and extract insights. The pre-revenue product was developed part-time by former Brightcove engineers and a Product Manager, with ongoing feature development.
As lead designer, I began by auditing the codebase, conducting competitive research, and establishing a visual direction before building the design system foundation from the ground up.
Wicked Sidekick
Product Designer
Lead & Only Designer
Competitive research, visual direction, design tokens, component library, Storybook documentation, frontend implementation
David (Product Owner), George (Dev Lead)
March 2026
The existing frontend, built with React 19, lacked design direction and a design system. The component inventory was limited to four custom components and twenty-eight CSS files, with inconsistencies and hardcoded values. Each new view required manual value selection and rebuilding common patterns. The product also lacked a cohesive brand identity.
Before touching any code, I surveyed the branding of many AI meeting tools – Gong, Fireflies, Jamie, Krisp, Fathom, Otter, tl;dv, Read.ai, Fellow, Granola, and more. The findings shaped the visual decisions that followed.
Few competitors established a warm, approachable brand. Most use similar fonts such as Inter, DM Sans, Work Sans, and Poppins. There is significant opportunity for differentiation through warm color palettes and distinctive typography.
The initial color palette featured blue and purple to convey trust and creativity. While the intent was strong, further refinement was needed. I aimed to introduce warmth and a human element to differentiate the brand.
Blue remained the primary color but shifted from the generic #4A90E2 to a deeper sapphire tone. Purple from David’s specification was incorporated into the neutral palette, with each gray containing a hint of dusty violet. This approach created a warm, subtle quality throughout the UI while avoiding overused color schemes in the market.
Fira Sans was selected for the UI to provide humanist warmth and avoid overused SaaS fonts. Literata was chosen for transcripts and content, supporting extended reading and establishing a clear hierarchy between UI and content.
The existing logo was a placeholder – generic enough to be mistaken for the React logo. I designed a new mark that reflects the product’s identity: distinctive and purposeful, usable beyond the MVP.
The primary goal from the start was to deliver a design system foundation rapidly by leveraging established frameworks rather than building from scratch. With ongoing feature development, the approach needed to be additive and non-disruptive.
Tailwind CSS served as the single source of truth for all design tokens. Although the codebase contained unused Tailwind classes, the intent to use Tailwind was evident. Standardizing tokens ensured engineers and AI tools consistently used the defined palette.
Imported components are delivered as source code owned by the team and built on Radix UI primitives, providing keyboard navigation, focus management, and screen reader support. This approach enabled the team to achieve professional-grade accessibility without additional development time.
Storybook serves as the living documentation for the component library. With the new Storybook MCP server I introduced in a pull request, it became the definitive reference for designers, engineers, and AI agents on the project.
The build process included nine stories, each delivered as a self-contained pull request. The approach remained additive through Story 5, allowing the team to continue shipping features throughout the process.
Stories 1–2
The full token system was configured in Tailwind, and approximately 15 shadcn components were installed in a new directory alongside existing code, ensuring no conflicts.
Story 3
Hand-rolled sidebar and topbar replaced with a customized shadcn sidebar. Layout-level change: every view updated at once. The strongest single before/after in the project.
AppSidebar and AppHeader. The sidebar supports a collapsed state – shown here mid-transition.Story 4
Component stories, token documentation, and a comprehensive Tailwind token class reference were provided, detailing available options and their resolved values.
Story 5+
This served as the reference view and established the template for all future migrations.
As I said when I saw this earlier, this is awesome 🔥 Leveraging libraries and AI to build with speed. If there are people who have not been a part of building out design systems, what Colin has built would have taken a team at least a quarter (to get agreement in the design team + engineering time to build)
