Hi, I’m Mark.

Design engineer and UI architect who sets system direction in code.

I build design systems from the tokens up, and the governance that keeps Figma and production React aligned.

I also build React component libraries, Storybook, interactive prototypes, and micro-interactions.

When work repeats, I turn it into an agent workflow with tests and human review before anything ships.

Explore the work GitHub

Open to design engineering roles. Let’s talk

Explore the implementation

PrimitreeCLI 1.0.0-next.1 · recorded
Layer rule

meaningbase

Semantic tokens must reference the base layer.

Source tokentokens.json
Semantic token
semantic.action
Not referenced
color.cyan
Color value
#33CCFF
semantic.action contains #33CCFF directly, without referencing color.cyan.
Build stoppedexit 1
PT1003semantic.action

Layer meaning does not allow this token value form.

Inspect source and full output

The two runs use the same configuration. Only semantic.action.$value changes.

primitree.config.ts
export default {
  "schemaVersion": 1,
  "sources": {
    "brand": {
      "type": "dtcg",
      "file": "./tokens.json",
      "architecture": {
        "layers": [
          {
            "id": "base",
            "roots": [
              "color"
            ],
            "values": "literal"
          },
          {
            "id": "meaning",
            "roots": [
              "semantic"
            ],
            "values": "reference",
            "references": [
              "base"
            ]
          }
        ]
      },
      "ownership": {
        "default": [
          "design-systems"
        ]
      },
      "outputs": {
        "directory": "./generated",
        "formats": [
          "css"
        ]
      }
    }
  }
}
tokens.json · Literal color
{
  "color": {
    "cyan": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.2,
          0.8,
          1
        ],
        "hex": "#33CCFF"
      }
    }
  },
  "semantic": {
    "action": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.2,
          0.8,
          1
        ],
        "hex": "#33CCFF"
      }
    }
  }
}
primitree check --format json · exit 1
{
  "schemaVersion": 1,
  "command": "check",
  "source": "brand",
  "findings": [
    {
      "findingId": "PT1003:source%3Abrand%2Ftoken%3Asemantic.action",
      "ruleId": "PT1003",
      "tokenId": "source:brand/token:semantic.action",
      "path": [
        "semantic",
        "action"
      ],
      "message": "Layer meaning does not allow this token value form.",
      "owners": [
        "design-systems"
      ],
      "disposition": "active",
      "layerId": "meaning"
    }
  ],
  "summary": {
    "active": 1,
    "baseline": 0
  }
}
primitree build · exit 1
PT1003 semantic.action: Layer meaning does not allow this token value form.
Build stopped with 1 active finding for source "brand".

Literal color: Build stopped. PT1003: semantic.action must use a reference. No generated files were written.

Two recorded CLI runs; the browser only switches results.

Primitree case study Documentation

Selected work

All projects

Primitree

Primitree Playground displaying token collections and configuration.
Primitree Playground · token configuration

Token architecture rules, Figma-export diffs that preserve identity, and DTCG, CSS, Tailwind, and TypeScript output from one pipeline.

Creator & maintainer · TypeScript / CLI

View case study

Skydio

Skydio Autonomy Widget Orbit Mode in Storybook.
Orbit Mode · Storybook

Built a React mission-control widget implementing Skydio's Rivit design language, with configurable actions, shared state, and Storybook documentation.

Frontend consultant · Component architecture & Storybook

View case study

a11y Companion

a11y Companion browser demonstration showing token contrast audit results alongside the Canvas Record.
Product-site browser demo · token audit and Canvas Record

Canvas-native accessibility review for Figma and FigJam. Checklist progress, contrast evidence, and audit findings stay with the file in a refreshable Canvas Record.

Creator & maintainer · 400+ users on Figma Community

View case study

Aurora at GM

At GM, I architected Aurora for Chevrolet, Buick, GMC, and Cadillac, with 60% component reuse and a WCAG 2.1 AA accessibility target.

Inside Aurora
Conceptual architecture diagram. The original internal interface is not shown.

My library, running here

GlucoseIQ

Headless TypeScript library for CGM and glucose data. 17 clinical metrics, device connectors, FHIR interop, and SVG rendering over a zero-dependency core.

GlucoseIQ case study
Glucose report
Synthetic data
Latest reading
101mg/dL
14-day mean
132mg/dL
Variability CV
26.7%
Last 24 hoursMay 14–15 · UTC
Synthetic glucose traceThe final 24 hours of a 14-day synthetic sample, in mg/dL. 289 readings are shown. The line contains no missing intervals. The latest reading is 101 mg/dL.2501807000:0006:0012:0018:0000:00
00:00 UTC101 mg/dL
Reading distributionmg/dL
Below 70
0.8%
70–180
85.6%
Above 180
13.7%

Enough data for a 14-day report

100%coverage
View sample source
More to exploreFigmaVars Hooks Hailstorm Variable Design Standard Diabetic Utils How I use agents

What colleagues say

“The rare developer that is the marriage of creative and technology. He elevates the aesthetic and user experience of any product he is developing.”

Stuart O'Neil

Executive Creative Director

“Master craftsman with attention to detail, deep experience and passion. Mark can make the smoothest most meaningful animations with the tiniest amount of code.”

Doug Wojciechowski

Design Leader / Experience Design Director

“One of those rare talents that understand creative, motion and development. He's the guy that will stay up all night reading up on the latest programming frameworks.”

Brandon Klebba

Senior Web Designer