Vanguard

Eighteen months across two Vanguard engagements. First web components. Then mobile components. Different teams, different stacks, same pressure: make the interface language hold together across product surfaces.

Engagement one: Stencil

A web component library with several frontend teams consuming it. The internal stack already ran React, Angular, and vanilla JS, so the library needed to meet each team where it was. Stencil gave the system a framework-neutral base: build the component once, consume it from whichever application needed it.

Adoption was the work. Each team had its own theming, release cadence, and composition habits. Storybook held the contract: specs, states, usage notes, and examples in one place, with the shared component kept small enough for consuming teams to trust.

Engagement two: React Native

A React Native component library backing both the iOS and Android apps from a single codebase. Different consumers, different design tokens, different release process.

The mobile work kept parity visible in the code before it could drift in the product. Buttons, sheets, typography, spacing, loading states. Two platforms solving the same problem twice was the pressure.

The component library carried that discipline. Tokens at the bottom, primitives above, composed components above that. Platform-specific code was allowed where it made sense, but it lived inside the component rather than leaking into every consuming screen.

Tokens, primitives, composition

The architecture stayed deliberately plain. Design tokens generated from the source of truth, primitives consumed the tokens, composed components consumed the primitives. Three layers, narrow contracts, predictable change.

The boundary between layer two and layer three was the call to make. Primitives stayed framework-neutral: a Pressable, a Text, a View with the right defaults. Composed components carried product meaning: a transaction row, a chart card, a confirmation sheet. When a component started carrying too much behaviour, it got split before that behaviour hardened into API.

That kept the library maintainable. New screens always ask for variants. The useful answer was usually composition, not another prop.

What lasts

Led three to five engineers across the two engagements. Eighteen months total. Practical system work: small contracts, documented states, and components that consuming teams could adopt without ceremony.

Internal Vanguard process, team names, individual names: not on a public portfolio. The craft side is here. The rest stays internal.