Aidan LegaspiAbout

Card Anatomy

How design partnership shaped composable React components that product teams used.

Organization
Eventbrite
My role
Staff Engineer, Design Ops2022–2023
Project
Marmalade design system
My contribution
Proposed building cards from shared primitives and documenting them in Storybook; paired with design in Figma on Card Anatomy and ChoiceList.
Worked with
A designer on the Marmalade work

The problem

When we built Marmalade at Eventbrite, I brought lessons from our previous design system, EDS. Its original primitives had held up, but after the owning team lost funding, contributions accumulated without clear governance. Component APIs grew, and application teams relied on overrides to get the experiences they needed.

I wanted Marmalade to support product variation without absorbing every product-specific component into the shared system.

Designing for composition

I proposed “Card Anatomy”: identify the reusable pieces of a card, then show how they compose into domain-specific components. I used Eventbrite’s Event Card to explain the idea and proposed documenting both the primitives and their compositions in Storybook.

One set of primitives, two card compositionsFour abstract primitives (media, heading, text and action) are reused to build a vertical card and a horizontal card.PrimitivesCompositionAnother composition
Conceptual diagram: the same primitives arranged two ways. It is not the original Event Card or its actual set of primitives.

I paired with Design in Figma, considering how designers would assemble the pieces and how engineers would recognize those same pieces in React.

ChoiceList made the tradeoff concrete. It needed to support radio or checkbox controls on either side of its content. Working through those arrangements together helped us identify which parts belonged in the shared components and which decisions should remain with the teams using them.

ChoiceList controls on either side of contentTwo lists. In the first, a radio button and a checkbox sit before their content. In the second, they sit after it.Control before contentControl after content
Conceptual diagram of the requirement: a radio or checkbox control before or after the same content.

Giving teams control

Layout primitives such as Stack handled spacing and arrangement, while teams composed the components inside them.

We also built composable forms with validation adapters supporting Formik and React Hook Form. Teams could use shared form UI without committing to one form library.

Those adapters applied inversion of control: Marmalade provided the shared components and integration points, while consuming applications supplied the form-library integration.

What shipped

The primitives and composed examples shipped and were used by product teams. The composition work produced components such as ChoiceList, while Stack supported layouts throughout Marmalade and in product code.

The approach let us share foundational pieces while leaving room for different product experiences and application architectures.

What I learned

Pairing in Figma helped us make architectural decisions together. We could examine the designs, identify stable building blocks, and work through what belonged in the shared system.

I would also evaluate foundational libraries earlier. Initially, I carried forward a habit of building low-level behavior ourselves, including focus management and keyboard interactions. Bringing libraries such as Radix into the system made components faster to build and easier for other engineers to contribute.

Part of a larger system

I co-created Marmalade and helped move it toward federated contribution. By 2025, the system had 80+ components and 4,000+ production imports. It also received Best Documentation and Jury’s Choice at the 2023 Design System Awards.

Those reflect the wider team’s work. Card Anatomy is one example of my contribution to the component architecture and the design partnership behind it.

Back to the career journey