Logan Hollowell Jewelry Design System

We had built a lot of product without building the system underneath it.

Every campaign, seasonal drop, and new feature had added a section that was almost right. Underneath sat Shopify's base theme with its own CSS, type, and spacing, plus years of additions on top. Buttons didn't quite match. Product cards behaved differently depending on where they showed up. For a luxury brand, "almost" is the difference between premium and ordinary.

The same foundation also had to support the mobile app. We needed something a small team could move fast with, without turning the brand into a generic kit.

Before building anything new, I audited every component, color, and type style across the storefront, emails, and campaign pages. It turned up dozens of near-duplicates.

For each one I asked: is this variation intentional, or is it drift? Some differences solved real problems. Most were different answers to the same problem. That question decided what went into the system and what stayed flexible.

Tokens gave the system a shared language.

254 tokens in three tiers. Core tokens (165) hold raw values: color, type, spacing, radii, shadows. Semantic tokens (19) describe the job, so we design with "primary text" or "subtle background" instead of a specific grey. Component tokens (70) hold decisions for a single component, like a button's padding.

52 tokens point to other tokens rather than holding a value, so a semantic change doesn't mean redesigning every component that uses it. In the theme, 117 CSS variables carry those decisions into production.

A component isn't finished when the default state looks right.

Many Logan Hollowell pieces are one of a kind, so the product card needed a sold-out state from day one. It swaps the price for a status and adds a waitlist button. Before that, every page handled sold out its own way.

Every component in the Figma library ships with its states (navigation, product cards, editorial blocks, forms, checkout), so whoever builds a page picks a state instead of inventing one.

Fixing accessibility in a component fixes it everywhere that component is used, so that's where we did it.

Vasken led reviews on pieces like the contact drawer, and together we brought small text and prices up to WCAG AA. Tokens note where a color only passes on certain backgrounds.

There's one focus ring, owned by the shared stylesheet, and it changes color to stay visible over the dark homepage hero. Drawers return focus to the button that opened them. The button's gold sheen turns off for anyone who has asked their device to reduce motion.

I didn't want a polished Figma library sitting next to a different production reality.

There's no separate code library to keep in sync. Components are built directly into the Shopify theme as sections and snippets, each with a matching component in Figma.

The storefront rebuild tested this. One product template now covers pieces from $2,675 to $55,650. A high-value piece adds storytelling, like a note from the founder, instead of getting its own template that slowly drifts from the first. That became a rule for the system: standardize the foundation, not every expression of it. (Storefront case study →)

Documentation is only useful if people can trust it.

Shopify's templating language only runs on Shopify's servers, so a normal Storybook would have meant maintaining a second copy of every component. Instead, each story uses the HTML its template renders, styled by the theme's own stylesheet. Storybook shows what customers actually see.

Each component page has a Design tab with the matching Figma frame, and any difference between Figma and production is written down. The primary button matches except for its hover color, for example. The question shifts from "does this match Figma?" to "where does it differ, and should it?"

It covers five components and three foundation pages so far, and it's still growing.

The system had to hold up at real production speed.

Between March 11 and April 30, 2026, we shipped 109 custom sections and snippets on the new foundation, and 134 by September.

By September the theme had five stylesheets. I merged them into one, removing 3,218 duplicate rules (18,375 lines). To do that safely on a live store, I first built a comparison tool that captures every page at three screen sizes, records the computed style of every element, and diffs before and after. It now covers 33 pages, 99 screens per change. Once checking was cheap, cleaning up was safe.

AI made the design system more important, not less.

Since March 2026, 903 of my 965 commits to the theme were made with Claude Code, including the Storybook, the comparison tool, and the stylesheet cleanup.

A designer on a product for years absorbs the brand and its exceptions. An AI tool only knows what you give it, and the design system is most of what I give it: tokens as constraints, components as patterns, Storybook as the reference for what correct looks like.

It still isn't enough on its own. Some generated code still lands off the palette, which is why the system needs checks, not just documentation.

A design system existing doesn't mean the product is using it.

Vasken and I were the whole design team, so the Figma number isn't an org-wide adoption story. It answers a simpler question: were we actually designing with what we built? Across our active files, 92% of component instances come from the shared library.

Production was a different story. I measured all 4,486 color values in the custom theme files. 62% matched the palette, but only 24% went through a variable that would follow a palette change. The rest were hard-coded copies, many inherited from the base theme.

Changes happen in the open, and patterns earn their place.

Every new component or change goes to a shared review board in Slack, where Marketing, Production, Operations, and Management can weigh in before it ships. People who depend on the system hear about changes before customers do.

A pattern doesn't enter the system the first time we build it. Once we've built it three or four times, I review it and promote it. Building it a few times first shows what actually repeats.

I'd enforce typography earlier.

The type scale exists in the tokens, but fewer than one in ten font sizes in the custom code use it. Color problems were easy to see. Typography drifted quietly.

If I started again, I'd ship the type tokens with an automated check that flags any off-scale size before the first section ships, not after the hundredth.

This isn't a finished system, and I don't think it should be.

It's a foundation the storefront was rebuilt on, with the measurements to show where it holds up and where it doesn't yet.

• Figma defines intent.
• Tokens give decisions names.
• Components make those decisions reusable.
• Production tests whether they hold up.
• Storybook makes the current state visible.
• Measurement shows where the system needs to improve.