Stephen Salyer
Staff Design Systems Designer & Architect — Bayer, Fortune 500

I turn chaos into systems.

The shared language 300+ dev teams and 160+ brands speak every day — designed, engineered, and argued for by one person. Scroll, and watch the noise organize.

Six years of my life live in these systems. Worth every token.

See the work→
Scroll

Selected work

01 — Index · 2018–2026
P.01 uxElle Next-gen design system
2026 · In progress
A ground-up rebuild of Bayer's enterprise system for the AI era — W3C DTCG tokens, React, Figma MCP, and a fully automated Variables → JSON → CSS pipeline. Greenlit by a business case I wrote myself. The one I fought for. uxElle enterprise design system — React and TypeScript component library built on W3C DTCG design tokens and Figma MCP
P.02 Element Enterprise design system
2019–present · 300+ teams
The system running the company while its successor is built. Multi-brand token pipeline generating production CSS for 160+ brands simultaneously. 90% adoption — earned, not mandated. The one that never sleeps. Element enterprise design system — multi-brand design token pipeline (Style Dictionary) serving 300+ dev teams and 160+ brands with Storybook and Code Connect
P.03 Alias Flow ↗ Figma plugin
2025 · Figma Community
Click any Figma variable and follow its alias chain across collections and modes — the token graph, made visible. Built to fill a real gap in Figma's native tooling. Built on nights I couldn't let it go. Variable Alias Flow — Figma plugin visualizing design token alias chains across Figma Variables collections and modes
P.04 Contrast Checker ↗ Figma plugin
2025 · Figma Community
WCAG 2.1 AA validation at 160-brand scale — every foreground/background combination tested, failures surfaced by component. Design System Contrast Checker — Figma plugin for WCAG 2.1 AA accessibility automation and contrast validation across multi-brand token collections
P.05 Crop Science B2B e-commerce UX
$2M+ incremental revenue
End-to-end UX for Bayer's agricultural e-commerce platform — pre- and post-auth flows, complex catalog navigation, purchasing workflows built for farmers, not funnels. Bayer Crop Science B2B e-commerce platform — end-to-end enterprise UX design contributing to $2M+ incremental revenue
P.06 DART Financial analysis tool
Designed & developed
Financial storytelling in React and Chart.js — waterfall charts, year-over-year comparisons, and program dashboards, all built on the design system. DART financial analysis tool — React and Chart.js data visualization dashboards built on an enterprise design system
P.07 DoughNaughty Mobile UX/UI
Freelance commission
A donut delivery app — location-aware ordering, cart, checkout. Proof that rigor and delight belong together. Pure joy. Zero governance meetings. DoughNaughty mobile app — end-to-end UX and UI design for a location-aware food delivery product
Why I do this

Good systems are acts of care that nobody will ever thank you for. I don't write design tokens because I love naming things "surface-secondary-hover." I write them so some engineer at 2am doesn't have to guess what blue I meant. That's it. That's the romance.

written at 2am, obviously

Live token graph

02 — W3C DTCG · Interactive
Select any token to trace its alias chain — primitive → semantic → component.
L1 / Primitives — raw values
L2 / Semantics — decisions
L3 / Components — applied

The same architecture runs 160+ brands in production. This is one palette of it.

Both roles. One owner.

03 — Practice
Stephen Salyer — Staff Design Systems Architect and Design Technologist (design tokens, React, Figma MCP, AI-assisted development), St. Louis

Design and engineering. Not hand-off — ownership.

At Bayer I'm the primary technical design systems architect for a Fortune 500 organization: 300+ dev teams, 160+ brands, 100+ products globally. I own the complete stack — uxElle, the AI-era rebuild, and Element, the legacy system still running the company.

I got uxElle greenlit by writing the business case for why a 2019-deprecated foundation couldn't serve an AI-native organization. Deep execution plus the organizational argument for systemic change — that's what Staff means to me. And honestly? It's the best part of the job.

iToken ArchitectureW3C DTCG · Figma Variables · Style Dictionary v5 · multi-brand, multi-mode at 160+ scale
iiDesign System DesignComponent architecture · Figma multi-file systems · Code Connect · contribution models
iiiFront-End EngineeringReact · TypeScript · Storybook · Node.js · GitHub Actions · CI/CD
ivAI & Agentic DevelopmentCursor rules · Figma MCP · Claude Code · the system as semantic guardrail for AI
vAccessibilityWCAG 2.1 AA · original a11y Code Connect pattern · contrast automation at scale
viGovernance & Org DesignBusiness case development · contribution models · 90% adoption across 300+ teams

Six years at scale

04 — Timeline · 2018–present
Bayer2019 — Present · Full-time
Staff Design Systems Designer & Architect

Primary technical design systems architect across a Fortune 500. Simultaneously leading uxElle (ground-up rebuild) while maintaining Element (300+ teams). Wrote the business case that greenlit uxElle. Invented the a11y Code Connect pattern. Authored company-wide Cursor AI context files. Led e-commerce UX contributing to $2M+ in revenue.

React · TypeScript · W3C DTCG · Figma REST API · Style Dictionary v5 · Code Connect · Cursor AI · Claude Code · Figma MCP · Storybook · WCAG 2.1 AA
Estée Lauder2025 · 6 months · Freelance
Design Systems Consultant

Maintained and evolved the enterprise Figma design system. Rebuilt component APIs to eliminate prop/HTML naming conflicts. Introduced composable wrapper patterns for menus and tooltips, mirroring developer patterns.

Figma · Component API · Wrapper patterns
Scorch Agency2018 — 2019 · Full-time
Front-End Designer

Responsive front-end interfaces for TIAA Bank, Microsoft, and LinkedIn across 15+ simultaneous projects. Component library and design system principles throughout.

Front-end · Component libraries · Enterprise
05 — Correspondence · Remote from St. Louis · Staff / Principal

Let's buildthe system.

Bring me the chaos — the 40 shades of blue, the six button components, the teams that stopped talking. That's my favorite starting point.

"A design system is not a component library. It is the language the organization speaks — and the semantic layer AI codes from."

© 2026 Stephen Salyer · St. Louis, Missouri Set in Archivo & JetBrains Mono · Built by hand + Three.js