function
<Component />
return
const
interface
{ }
color.primary
TS
() => {}
spacing.xl
dev
tokens
[ ]
code
<T>
type
async
font.sans
JS
TypeScript
export
[React, ...skills]
components
import
border.radius
props
default
?.
tokens
shadow.lg
await
&&
class
<Props>
accessibility
variables
transition
JSX
</>
theme
motion
( )
hooks
state
utils
wcag
responsive
grid
flex
scale
{ml}

Coder to the core, think like a designer.

About

Lead Design Engineer who builds accessible design systems and React component libraries that teams actually want to use. I build the glue between Figma and production—tight APIs, automated pipelines, zero drift.

Skills

Design Systems

  • Storybook, MDX, Component Libraries
  • Documentation Architecture, Versioning
  • Governance, Release Notes, Migration Strategy

Tokens & Theming

  • Design Tokens, Figma Variables, Tailwind
  • Style Dictionary, Semantic Theming
  • Token Pipelines, DTCG Compliance

Frontend

  • React 19, TypeScript, Next.js
  • Component APIs, Composition Patterns
  • Slot Patterns, Headless Patterns

AI Workflows

  • Claude Code, Cursor, Agentic Development
  • Subagent Orchestration, MCP Servers
  • CLAUDE.md Guardrails, AI-Assisted Codegen

Quality & Testing

  • Playwright, React Testing Library
  • Vitest, Jest, Visual Regression
  • CI Validation Gates, Component Testing

Accessibility

  • WCAG 2.2 AA, Semantic HTML
  • ARIA Patterns, Axe, Keyboard Support
  • VoiceOver, Screen Reader Testing

Currently

Building open standards like Variable Design Standard (VDS) and shipping tools designers and engineers actually want to use. I develop with agentic workflows—Claude Code for architecture and validation, Cursor for implementation.

  • Maintaining FigmaVars Hooks and a11y Companion (200+ users)
  • Shipping portfolio, component libraries, and OSS with 60%+ faster iteration

  • Design-to-code pipelines from Figma Variables to production

Open to: Lead Design Engineer, Staff IC, Design Systems, DX Tooling roles—remote preferred.

Standards & Values

Standards

  • WCAG 2.2 AA — Accessibility baseline, not a feature

  • DTCG 2025.10 — Design token format compliance

  • VDS — Variable Design Standard for token governance

  • Semantic Versioning — Predictable releases

Values

  • Coder to the core, think like a designer
  • Accessibility is a baseline, not a feature
  • Systems over one-offs, clarity over cleverness
  • Open standards beat tool lock-in
  • Motion should inform, not distract
  • Zero drift—systems that hold up long after launch

Timeline

Experience

2024–PresentSelf-Employed · Design Systems, OSS, Product ConsultingShipped production design systems, accessibility tooling, agentic workflows
2021–2024General Motors · Senior Design EngineerAurora design system across 4 brands, 60% reuse, WCAG 2.2 AA, trained 50+ engineers
2019–2021Bottomline Technologies · Senior UI DeveloperES module migration via jscodeshift, build time cut ~50%
2015–2018CÜR Music · Senior Frontend DeveloperStreaming player build, editorial workflow tooling

Open Source

  • a11y Companion — Figma widget · 200+ users · WCAG 2.2 tooltips

  • FigmaVars Hooks — React 19 hooks · Figma Variables API · 100% coverage

  • Diabetic Utils — TypeScript · glucose/A1C analytics · medical-grade

  • Variable Design Standard — Token governance spec · DTCG-compliant

  • GlucoseIQ — watchOS app · HealthKit · StoreKit 2 (in development)

Notable

  • W3C Design Tokens Community Group contributor
  • Arctic Code Vault contributor
  • Claude Code in Action certified (Anthropic)
  • Cursor & Claude Code: Professional AI Setup (Frontend Masters)

Connect

© 2026 Mark Learst.Crafted with precision
privacy
v2026.1.0