Stewarding Design Sensibility

Sol¹, MoMA’s in-house atomic CSS library, was built for a team that no longer exists.

It was built in an era of tight guardrails by designers fluent in frontend engineering, assuming knowledge of the architecture and the visual system it encoded. As the team changed and MoMA’s brand expression evolved, that fluency became a bottleneck. Every new interaction pattern or subtle adjustment required someone who knew Sol’s internals². I inherited the system: maintaining it, extending it, and stewarding the design sensibility it held.

From Maintenance to Momentum

By late 2025, several parallel migrations were underway: Golang to Next.js, Rails to Sanity CMS, and Sol to Tailwind CSS. Together they represented a broader effort to modernize a fragmented stack — reducing team friction and increasing product velocity — and Sol needed to move with it.

Following organizational shifts, the effort fragmented. Some pieces continued; others didn’t. After leaving MoMA, I continued the Sol work independently and built a compare app to make the migration concrete.

The Compare App: Making the Migration Legible

The compare app renders the same React component twice: once in Sol, once in Tailwind CSS³. It provides a full index of the system organized by atomicity, from foundations and primitives through layout, components, and pages so the migration is legible at every level of abstraction.

Same structure, same variants, same props. Different framework.

Explore the migration

The goal was to make the transformation observable, not to prove pixel-perfect parity. Differences in spacing, typography, and interaction become visible at the level of implementation. The app is as much a migration document as it is a demo.

The Design Audit: Excavating the System

Migrating to Tailwind CSS forced a kind of excavation because Sol was not strictly “atomic”. Certain elements like links, focus states, and images had design decisions baked in. If it were purely atomic, the migration would have mapped 1:1. Instead, migrating meant unpacking that logic.

I used the migration to turn undocumented institutional knowledge into explicit design logic.

• Iconography: Context-aware icons adjusted stroke and weight based on typography. Translated these implicit visual rules into an explicit, repeatable configuration.
• Spacing: Consolidated three overlapping systems — page, baseline, and cap — into a modern theme structure that respected the original design intent.
• Interaction patterns: Untangled the logic of links and focus states. They encoded MoMA’s interaction behavior, including contextual underlines and focus treatment across different UI patterns.
• Editorial typography: Deconstructed how long-form content was styled.

What began as a migration became a systematic audit of MoMA’s design language. By the end, the system no longer required a “resident expert” to interpret it.

Foundations for the future

The compare app was built to preserve the system decisions, the design logic, and the edge cases surfaced along the way — proof of feasibility, and a foundation for whatever comes next⁴.

As a byproduct, named components — absent from Sol — give AI-assisted workflows enough structure to stay on brand, something atomic classes alone can’t provide.

Footnotes

1. Sol, like Tailwind CSS, is an atomic CSS library. Both use small, composable classes that you combine to build UI. In this sense, neither is a design system in the strict sense — they are styling frameworks that design systems are built on. ↩

2. For example, supporting hover styles requires extending the syntax, which is not trivial. ↩

3. Why build each component twice? The side-by-side makes differences visible at the implementation level. The original development environment made iterating directly in the codebase slow and impractical. A standalone app was the faster path. ↩

4. This migration moves the system toward greater maturity by consolidating design tokens and adding a component layer that Sol never had. It’s not a complete design system, but it’s a more solid foundation for building one. ↩