Unifying 23 microsites into one scalable design system
PUBLIX
Publix needed a faster way to launch microsites for campaigns and community groups without sacrificing consistency or accessibility. I lead the design of a headless design system that streamlined design and development, reduced time-to-market by 40%, and gave Publix a flexible foundation to scale across audiences and teams.
Overview
Publix was managing 23 independent microsites for campaigns and community groups, each with its own look, feel, and workflows. The result: duplicated work, inconsistent design, and long launch times.
The challenge: build a headless design system that could unify these microsites, accelerate launches, and support diverse audiences while maintaining brand trust.
My Role
Lead Systems Designer
Scope
Design System Architecture, Component Library, Tokenization, Governance & Contribution Model, UX Foundations, Documentation
Tools
Figma, FigJam
Audit
We audited 23 microsites, interviewing designers, engineers, and content owners to understand pain points. This included:
Inventory of existing templates, components, and styling variations
Interviews across departments to capture workflow challenges
Workshops to surface patterns, redundancies, and gaps
Documentation of overlapping solutions that slowed delivery
The audit became the foundation for defining a unified, scalable system.
Foundations
We defined foundation layers that make the system predictable and theme-able across microsites.
Design tokens (semantic first).
We organized color, type, spacing, border, shadow, and motion into semantic tokens (e.g.,brand/background,content/primary,action/hover) mapped to primitives for easy theming. This lets teams swap brand palettes or seasonal skins without changing component logic.Color & theming.
Clear roles for brand vs. neutral surfaces; accessible foreground/background pairs; state tokens for hover/focus/active/disabled. The system supports light/dark environments and passes WCAG 2.2 AA for text, icons, and UI controls.
Documented colors and accessibility, mapping background colors to tokens for reference outside variables.
Created semantic tokens themed by surface color, applied consistently across text, icons, borders, forms, and other UI elements for scalability.
Defined color primitives as raw baseline values to support mapping into semantic tokens for theming and scalability.
Typography
A responsive type ramp with named roles (Display, H1–H6, Body, Meta) plus guidance on line length, scale steps, and usage. Tokens for size/weight/line-height keep headings and body consistent across pages and devices.
Documented typography in a type ramp, mapping semantic tokens for organization and reference outside variables.
Created semantic tokens for font sizing across breakpoints to ensure responsive typography.
Spacing & layout
A consistent spacing scale and grid rules for gutters, columns, and component padding. We documented minimum interactive target sizes and touch spacing to improve mobile ergonomics.
Documented spacing tokens in the base file — including inset, stack, inline, and page — to create predictable layout rules and ensure consistent alignment across components.
Created semantic spacing tokens themed by breakpoint to support responsive layout and consistent alignment across components.
Components
We built a reusable library focused on editorial and marketing needs while supporting utility UI.
Structure & documentation.
Each component includes:
Properties & variants (what changes, what doesn’t)
States & behaviors (hover, focus, error, loading, disabled)
Responsive rules (stacking, truncation, reflow)
Content guidance (character ranges, image ratios, alt-text)
Well documented Documented form components—including inputs, checkboxes, radios, toggles, and listboxes—with clear states and accessibility guidance.
Documented a component with variant properties and in-component guidance, including character counts and quick links to Storybook.
Storybook Documentation
To ensure the design system was not only built but usable, I created documentation directly inside Storybook.
Authored Markdown-based docs from our component anatomies, best practices, and usage guidelines, making Storybook a living catalog.
Provided a component catalog for quick access, reducing the time editors and developers spent searching for guidance.
Enabled inline content testing, allowing editors to experiment with copy directly in Storybook before publishing.
Maintained Figma ↔ Storybook parity, ensuring what designers saw in Figma matched the working coded components.
This approach transformed Storybook into more than an engineering sandbox — it became the central source of truth for design, editorial, and development teams.
Example of Storybook Connect in Figma, enabling components to be tested directly in Figma with live Storybook data.
Pilot Approach
Before scaling, we validated the system through targeted pilots. These allowed us to:
Test component flexibility on selected microsites
Prove cross-platform usability (web, mobile, internal tools)
Collect feedback from editors and engineers in real use cases
Pilots reduced risk and built confidence ahead of system-wide rollout.
Workshopped goals, objectives, and user journeys with stakeholders before launching new sites.
Governance & Adoption
To embed the system long-term, we focused on adoption practices:
I facilitated breakout sessions with the design team to test system usability and gather feedback
We roadmapped upcoming microsites using the system as the foundation
Annual onsite sessions helped teams explore “big ideas” for evolving the system beyond current needs
Governance practices were documented, ensuring consistency while allowing flexibility for future growth
Governance workshop to define roles and responsibilities between Publix and 10up designers.
Annual onsite roadmapping workshop, later translated into FigJam for ongoing documentation and alignment.
Designing for Publix wasn’t about producing a single library, it was about building a living system that could flex across microsites, serve very different audiences, and keep growing alongside marketing and design needs.
The work proved that a design system can be both efficient and adaptable, cutting overhead while supporting unique community-driven microsites.
Reflection
23 sites
Launched using the design system of 1 year
60%
Reduction in upfront design effort.
40%
Faster time-to-market for new microsites.