Tim Presley

Design systems · Enterprise integration

Translating Tecton for Sperry.

Adapting an enterprise design system without breaking the products, tools, and teams it was intended to unify.

Working integration · Ongoing
Tecton foundations
Landmark expression React semantic layer MUI components
Sperry translation Foundation bridge PrimeNG semantic + component tokens
Public-safe reconstruction. This diagram explains the integration model without reproducing proprietary libraries or internal screens.
Role
Head of UX, Sperry Drilling
Scope
Design architecture and cross-PSL implementation strategy
Partners
Sperry UX and engineering, Landmark, Argo-created assets
Environment
Angular, PrimeNG, React, MUI, Storybook, Figma

The business context

An enterprise mandate met a multi-framework reality.

Tecton was funded as an enterprise design system for Halliburton’s product service lines. Its initial design and delivery, led through Landmark with Argo Design, centered on a React and MUI implementation.

Sperry’s development teams use Angular and PrimeNG. The challenge was not whether to align with Tecton; it was how to preserve its enterprise foundation without forcing a mismatched framework implementation onto existing products.

The inherited model included framework-independent foundations, a semantic React library, an MUI-oriented Figma library, and a later Storybook implementation with React plus a smaller PrimeNG subset.

Enterprise consistency did not require identical code. It required a stable contract between shared foundations and framework-specific implementations.

The constraint

Alignment could not come at the cost of compatibility.

Flattening component variables directly onto foundation colors would have changed the relationships existing Sperry Figma files relied on. The Storybook PrimeNG implementation also used wrappers that, after review with development leadership, did not fit Sperry’s intended application architecture.

Organizational infrastructure compounded the technical problem. Each product service line operated in a separate Figma organization while enterprise procurement remained underway. Shared publishing, updates, contribution rights, and release communication were still evolving.

  • Framework mismatch: React and MUI could not serve as Angular implementation source.
  • Existing consumers: Design files depended on stable component-variable relationships.
  • Distribution limits: Separate Figma organizations restricted shared library management.
  • Governance ambiguity: Multiple PSLs needed to integrate against a changing source.

What I did

Built a translation layer, not a competing system.

  1. Separated foundation from framework.I treated Tecton Foundations as the enterprise contract and React/MUI as one expression of it.
  2. Preserved component semantics.I kept PrimeNG component-variable bindings rather than flattening them onto foundation values.
  3. Created a visible bridge.A Sperry mirror of Tecton Foundations made upstream changes identifiable, reviewable, and controlled.
  4. Aligned design with delivered tokens.I mirrored the Storybook JSON structure into Figma collections and connected PrimeNG components through semantic aliases.
  5. Made architecture a joint decision.I evaluated wrapper-based adoption with the development lead and selected an approach that matched how Angular products would actually be maintained.
  6. Kept cross-PSL dialogue outcome-focused.Discussions centered on shared foundations, traceable updates, framework support, and a viable path to broader participation.

Selected interface work

What the translation produces in practice.

The integration work is visible in more than a token diagram. It creates a PrimeNG-aligned component environment where designers can inspect the theme, work with familiar component semantics, and compose application surfaces that remain connected to the enterprise foundation.

Component workspace Light theme
FORM CONTROLSInput and selection
Inspect tokens
TEXT INPUT
Orion planning workspace
Component → form field → surface
SELECT
Planning ⌄
Component aliases preserved
ACTIONS
ContinueSave draft
PrimeNG behavior · Tecton theme
STATUS
ReadyReview
Semantic state tokens
PrimeNG component workspaceA reconstructed example showing component semantics preserved while visual properties inherit from Tecton-aligned tokens.
VARIABLE TRACEButton / primary / background
ComponentSemanticBridgeFoundation
action.primary → color.brand.strong → tecton.azure.600
Operational workspaceOverview   Activity   Reports
Active work142 need review
Traceability and compositionThe bridge keeps an individual UI decision explainable from application component back to enterprise foundation.

Representative reconstruction using fictional content. It demonstrates the interaction and token architecture without reproducing proprietary components or internal applications.

Outcome

A working Sperry path into Tecton.

The integration established a PrimeNG-aligned Figma architecture that preserves component-level meaning while remaining traceable to Tecton foundations and Storybook tokens.

1Controlled bridge between enterprise foundations and Sperry implementation
3 layersFoundation, semantic, and component relationships preserved
AngularFramework fit for Sperry’s production ecosystem
OngoingEnterprise distribution and governance remain active work

The result should not be overstated. Figma Enterprise migration, complete PrimeNG parity, cross-PSL contribution rights, and sustainable upstream synchronization are still in progress. The value of the work is a credible integration architecture—not a claim that enterprise adoption is complete.

What I would do differently

Define the operating model before asking each PSL to integrate.

I would establish a representative cross-PSL governance group earlier to define what is fixed, what can be extended, how frameworks are supported, and how changes are versioned and communicated. That would move debate from individual implementation choices into an agreed decision framework.

Next case studyDigital Design of Service