~/github/marklearst on main ✓
❯ whoami

name: Mark Learst
role: Principal Design Engineer, Frontend UI Architect
lane: Frontend architecture, React, TypeScript, design systems, and motion
years_in_react_and_design_systems: 11
tagline: Coder to the core. Think like a designer.

Design engineer and UI architect. I build the layer product teams ship on: React and TypeScript component libraries, design tokens, motion, and the docs and tests that hold them together.

I work in code, close the gap between Figma and React, and build the checks that keep both sides from drifting apart. The product UI that consumes the system is part of the job, not someone else's.

• Primitree · repo · docs · playground Token governance toolchain. Layer rules fail the build on a literal color in a reference layer, DTCG diffs classify renames and removals as breaking for CI, and generated files refuse to be overwritten by hand edits. Six packages on npm: CLI, core, DTCG, hooks, and an MCP server so agents can query and diff tokens. Output: DTCG 2025.10, CSS, Tailwind, TypeScript.
• a11y Companion · repo · site Accessibility review widget for Figma and FigJam. 456 users on Figma Community, 20 locales, 64 WCAG checks. Findings become native Dev Mode annotations with WCAG links, and a section signoff records what it reviewed, so it goes stale when the work changes. A checked box is a claim, not a measurement.
• Variable Design Standard · repo Open spec for governing design variables on DTCG 2025.10: three layers, naming rules, reference validation, mode consistency, and breaking change detection with release notes. Primitree is the tool that enforces it.
• FigmaVars Hooks · repo Typed React 19 hooks and a CLI for the Figma Variables REST API, 100% test coverage. The starting point for Primitree.
• GlucoseIQ · repo · npm Headless TypeScript analytics for CGM data: 17 metric modules, 5 packages, zero runtime dependencies, 100% coverage thresholds, FHIR and Open mHealth output. Docs code samples run in CI, so a broken example fails the build. A watchOS app is approved and waiting on one more feature.
• one-more-pass Claude Code plugin with two skills: a final editorial pass for prose and a final review pass for code. Rule based, with a scanner that reports findings instead of guessing authorship.

• ZoomInfo, Principal Design Engineer (contract, 2026): Audited a React 19 and Nx app that had grown to 88 libraries with five competing styling methods. Cut 50+ nested context providers to 18 and took preproduction cold starts from a 12 to 15 second white screen to a painted shell in under 1.5 seconds, without a rewrite. Built the component library, token pipeline with motion tokens, a 96 component Storybook workbench, and an MCP server with 19 tools that 24 people used to prototype in code.
• General Motors, Senior Design Technologist, Design Systems (2021 to 2024): Led the architecture and build of Aurora, GM's first React design system, shared across Chevrolet, Buick, GMC, and Cadillac at 60% component reuse. Took it from a SharePoint site to governed Figma libraries and a Storybook, wrote the token governance, embedded WCAG 2.1 AA in the workflow, and trained 50+ engineers and designers.
• Independent consulting (2024 to 2026): A configuration driven React and TypeScript component system for Skydio's drone controls, documented in a public Storybook. Primitive and semantic token foundations and a working component architecture for a global music platform. Movement Festival's site in Next.js with GSAP motion.
• Bottomline Technologies, Senior UI Developer (2019 to 2021): An accessible React library of 120+ components for a fintech cashflow analytics platform, and jscodeshift codemods that moved 90% of the frontend to ES modules and cut build time roughly in half.

{
  "frontend": ["React 19", "TypeScript", "Next.js", "TanStack Start", "Vite", "Tailwind CSS"],
  "systems": ["Design Tokens", "DTCG 2025.10", "Figma Variables", "Storybook", "Style Dictionary", "SemVer"],
  "motion": ["GSAP", "Framer Motion", "Motion Tokens"],
  "quality": ["WCAG 2.2 AA", "Playwright", "Vitest", "Visual Regression", "GitHub Actions"],
  "agentic": ["MCP Server Development", "Claude Code", "Cursor", "Agent Workflows with Human Review"]
}

3 Awwwards Sites of the Day, 2 Awwwards Honorable Mentions, and an FWA Site of the Day. Member of the W3C Design Tokens Community Group. Figma Community author.

Open to remote Staff and Principal Design Engineer roles: design systems, component platforms, frontend architecture, and motion.

Portfolio · LinkedIn · Primitree · a11y Companion · GlucoseIQ