> Amino: Design system
Amino is a shared design system built to support a fast‑growing SaaS product with multiple customer‑facing surfaces, internal tools, and a marketing site that needed to move just as quickly as the product itself.
I led the design and implementation of Amino to solve a growing consistency and velocity problem across product, engineering, and marketing. As the product matured, UI patterns, colors, and components had begun to diverge. This slowed development, created visual inconsistencies, and made even small changes expensive.
Role: Lead Product Designer
Scope: Design system strategy, token architecture, component design
Team: Product design, engineering, marketing
PROBLEM AND SOLUTION
As the product scaled, we were paying a growing tax for inconsistency:
Similar components were implemented slightly differently across surfaces
Design changes required manual updates in multiple places
Marketing and documentation lagged behind product changes
The team needed a system that was flexible enough for product complexity, simple enough for everyday use, and fast enough to support continuous shipping.
Reversible token architecture
At the foundation of Amino was a layered token model that also made theming essentially automatic.
Primitive tokens defined the raw color scales, such as color-50 through color-900. On top of those, semantic tokens described purpose and usage, such as bg-card, bg-surface, and text-primary. Components never referenced raw colors directly. They only consumed semantic tokens.
Reversible color primitives
Primitive color tokens were designed to be fully reversible. In light mode, color-0 mapped to white. In dark mode, that same token mapped to black. The token name never changed. Only the palette behind it did.
Theme switching was handled by a root-level data-theme attribute that mirrored the color scale. Because semantic tokens mapped to primitives, all component colors flipped automatically when the theme changed.
As a result, components were completely theme-agnostic. Dark mode required little to no overrides, and no dark-specific Tailwind or CSS attributes were needed. Most components worked in both themes by default simply by flipping the theme context.
This approach kept the system simple, predictable, and easy to maintain as it scaled.
Dark and light mode
EXTENDING TO MARKETING
A key extension of Amino was exposing system components as MDX blocks for documentation and the marketing website.
Pages were no longer designed individually. They were assembled by composing components. This allowed marketing and product teams to ship content quickly using tools like Cursor and other AI editors while staying visually consistent with the product.
Docs, website, and application UI all shared the same visual language and component behavior.
Website section block
Once the system was in place, the leverage became clear.
Because the website and documentation were built from the same MDX component system, all docs and website pages were rewritten and relaunched in a matter of weeks rather than months. Design shifted from being a recurring bottleneck to a one-time system investment.
Product development also sped up. Teams reused proven components, visual inconsistencies decreased, and dark mode became far easier to maintain. Amino became part of the company’s infrastructure rather than a separate design effort.
LEARNINGS
Building Amino reinforced a few key lessons:
Design systems are for the entire team, not just designers
Simple token architectures scale better than clever abstractions
Consistency matters for both engineers and customers.
If I were to evolve Amino further, I’d invest earlier in usage analytics and contribution workflows to better understand how the system grows over time.
Amino wasn’t about creating a perfect visual language. It was about enabling speed, confidence, and consistency as the product scaled.
The system allowed design, engineering, and marketing to operate from the same foundation, turning UI decisions into solved problems and freeing the team to focus on higher‑leverage work.