Tegel Design System

The problem: scale

One system ships to teams on four stacks. So a single Figma/code drift, or one a11y regression, multiplies across every product downstream.

When I joined: inconsistent focus, contrast, and aria; motion hand-rolled per component; no shared token layer.

What I worked on

Accessibility: standardized aria patterns, forwarded aria-invalid, added an Accessibility section to Storybook, hit WCAG contrast without breaking the palette.
Motion & focus: built both from scratch as shared variables, then rolled them through core components.
Token migration (current): wrote the Figma→token sync script; migrating components, foundations, and brand primitives onto a semantic layer.
Release & infra: automated beta releases, owned a major Stencil core upgrade, tag production builds.
Docs: flipped beta→production, wrote the testing guide, added a designer-approval step to PRs.

How it's built

Stencil monorepo. Authored once as web components, shipped as custom elements with auto-generated React + Angular wrappers.

Figma → JSON → Style Dictionary → CSS custom properties, which is why one token PR ripples library-wide.

Storybook is the playground. Playwright + axe-core catch visual and a11y regressions. CSP-safe runtime.

Decisions

Stencil over Lit/native: auto wrappers + typed JSX, at the cost of a build step.
Web components over React-first: slower to staff, but no stranded Angular/vanilla teams.
Stops at components + tokens: layout stays with consumers.

Hard parts

Standardizing focus across heterogeneous components without breaking each one.
A Stencil core upgrade broke type defs downstream → I owned the rollback and re-shipped with a postinstall patch.

What I'd do differently

CI a11y + contrast checks from day one. Token round-tripping started a year earlier. Both would've made every PR cheaper.

Today

Live across Scania's internal and customer products. On npm as @scania/tegel (+ React, Angular, styles). 19 months, 100 PRs, beta → 1.x.