Skip to content
View marklearst's full-sized avatar
🫥
👨🏻‍💻 Coder to the core. 🎨 Think like a designer.
🫥
👨🏻‍💻 Coder to the core. 🎨 Think like a designer.

Block or report marklearst

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
marklearst/README.md
~/github/marklearst on main ✓whoami
name: Mark Learst
role: Principal Design Engineer
focus:
  - Design systems architecture
  - React component libraries
  - Design tokens
  - Storybook
  - Accessibility
  - Health tech
  - Open source
tagline: Coder to the core. Think like a designer.

cat about.md

Design systems architect and hands-on React engineer. I build the path from token contracts to production UI: typed component APIs, Storybook, accessibility, testing, release controls, and governance.

My lane is the whole system, including the product UI that consumes it. I work in code, close the gap between Figma and React, and build the checks that keep both sides from drifting apart.

ls selected-work/

  • ZoomInfo: Architect and build design-system engineering around shared component packages, Storybook and API parity, source-drift checks, scoped visual regression, component proposals, and agent-readable tooling.
  • General Motors: Led the architecture and build of Aurora, GM's first cross-brand React design system. It reached 60% component reuse across Chevrolet, Buick, GMC, and Cadillac. I took it from SharePoint to governed Figma libraries, a shared React component library, and a working Storybook, then trained 50+ engineers and designers.
  • Independent consulting: Reworked the primitive and semantic foundations for a global music platform and implemented the proposed component architecture in a working Storybook prototype. Built a configuration-driven React and TypeScript component system for Skydio and the token, component, Storybook, CMS, and motion foundation for Movement Festival.
  • Bottomline Technologies: Built an accessibility-first React component library that raised WCAG 2.1 AA compliance to 65% and expanded user reach by 20%. Wrote jscodeshift codemods that migrated 90% of the frontend from CommonJS to ES modules and cut build time roughly in half.

ls open-source/

  • Primitree: A prerelease, DTCG-aligned toolchain for checking, transforming, and shipping design tokens. It rebuilds and expands the work behind FigmaVars and the Variable Design Standard with validation, diffing, CSS, Tailwind, and TypeScript output, React hooks, and MCP.
  • a11y Companion: A Figma and FigJam accessibility review workflow with 400+ Figma Community users, WCAG guidance, contrast inspection, annotations, sign-offs, and persistent review records.
  • GlucoseIQ: Prerelease TypeScript packages for CGM analytics, rendering, React, testing, and CLI workflows, plus a watchOS product in active development. Evolved from Diabetic Utils.

cat stack.json

{
  "systems": ["Design Tokens", "Storybook", "Figma Variables", "Style Dictionary"],
  "frontend": ["React 19", "TypeScript", "Next.js", "TanStack Start", "Tailwind CSS"],
  "quality": ["WCAG 2.2 AA", "Playwright", "Vitest", "Visual Regression", "CI"],
  "workflow": ["Claude Code", "Cursor", "Codex", "MCP", "Agent Workflows"],
  "standards": ["DTCG 2025.10", "Semantic Versioning"]
}

cat standards.md

Participant in the W3C Design Tokens Community Group.

cat status.txt

Open to remote Principal, Staff, and Senior Design Engineer roles centered on design systems, component platforms, frontend architecture, design tokens, and health tech.

Portfolio · LinkedIn · Primitree · GlucoseIQ · a11y Companion

Pinned Loading

  1. variable-design-standard variable-design-standard Public

    A public, tool-agnostic spec and governance rules for design variables: schema, contract, naming, modes, references, and change control.

    CSS 1

  2. figmavars figmavars Public

    🌳 Welcome to FigmaVars, a React hooks library designed to simplify the integration of Figma variables into your React applications.

    TypeScript 3

  3. diabetic-utils diabetic-utils Public

    🩸 A modern TypeScript utility library for glucose, A1C, and diabetic health data.

    TypeScript 4

  4. hailstorm hailstorm Public

    Forked from abusix/hailstorm

    Hailstorm - Abusix Design System. [Team: guardian]

    TypeScript