DMS runs an insurance lead marketplace, where carriers and agents bid in real time on calls, clicks, and leads. It sells through four brands: Mastodon (the internal platform), Prism, ZipQuote, and ALM (Allstate Lead Marketplace), whose apps drive $100M in revenue, powering carriers like Allstate, Progressive, and State Farm.
I designed and built the DMS Design Library, one coded design system for all four brands, starting in March 2026. Previously, each brand had its own app running on a different legacy stack, with inconsistent UX between them. The library ships as an npm package that the production apps install, along with a playground of over 120 clickable pages where every flow is designed before engineering builds it.
I designed in code again, this time with Claude Code co-authoring over 75% of the commits while I reviewed the screens and wrote the rules. My engineering colleagues published the library to npm and set up the hosting, giving feedback along the way.
Every screen runs on mock data, so a flow could be clicked through end-to-end before its API existed. Each pull request deploys its own preview, which allowed the product team to try a change before engineering reviewed the code. Two index pages render every component and block live, so anyone could check what existed before asking for something new.
Components never use a color directly, as they read semantic CSS variables (background, card, primary, success, etc.) defined in OKLCH. Each brand overrides the values with a single class on the page. For example, the same Create order button renders near-black on Mastodon, blue on ALM, and in the Outfit typeface on ZipQuote, which marketing is trialing before using it anywhere else.
ZipQuote and Mastodon support light and dark mode, while ALM is light only. Charts get their own tokens as well, including a palette for the auction funnel (auction, match, bid, sale attempt, sale, conversion) and a second one for where leads drop off.
Most of the library is shadcn/ui on Base UI, with components added for what the marketplace actually handles. The money input shows 20,000.00 as you type but stores the raw digits, while the phone input does the same for (727) 287-0426. Statuses like Purchased, Pending Return, and Return Rejected come from one map per domain, so a call reads the same in every table.
Every dashboard table comes with column settings, fullscreen, and typed cells for money, counts, dates, and statuses. Date cells show "5 months ago" with the exact time in a tooltip. Clicking one swaps the whole column to "Apr 26, 2026, 4:05:00 AM PDT" for anyone comparing timestamps.
Creating an order runs through one stepper (product, geo, bids, schedule, review). Health and Medicare orders get auction bidding and multistate geo targeting, while Auto and Home orders get package pricing with sources and vendors, as the vertical decides how the order is sold.
The house rules ship inside the package as CONVENTIONS.md, so every app that installs the library gets them in node_modules. A test fails if they drift from the playground's own rules, while lint fails the build if a library file imports from the playground. Some of the rules: sentence case buttons, plain hyphens, and short month dates (Sep 9, 2026).
The same rules are what Claude Code reads before it writes a screen. Three commands handle the repeat work: /new-flow scaffolds a page in house style, /style-check audits a branch against the rules, and /publish-version prepares a release. Claude really likes em dashes, so /style-check gets plenty of use.
All four brand apps (ZipQuote, Mastodon, Prism, and ALM) install the library, which has had 28 releases since May 2026. It has 66 components and 46 blocks shared across 4 brands, creating a unified UX that's easy to iterate on as feedback comes in.
Next.js, React, TypeScript, Tailwind CSS v4, shadcn/ui, Base UI, Recharts, Claude Code, GitHub Actions, GitHub Packages