kham.udom tokens

UX engineer · design systems · prototypes · software

I turn design into software that ships.

Design systems · Prototypes · Production software

I prototype ideas into something you can try, ship full products from schema to UI, and build the design systems teams scale on for game consoles, browsers, and AI developer platforms.

View the work Get in touch

design systems · interactive prototypes · production software this site runs on Charm UX, a design system I help build ↓

fig 1. a design system in one component. every layer is a token.

kham.workSelected work

Design systems, prototypes, and software that shipped.

Microsoft CoreAI · systems2025-present

AI Foundry Design System & Foundry Toolkit

On the CoreAI team I build React + TypeScript components for Microsoft's AI Foundry design system and handle WCAG and ARIA fixes across the platform. I also work with the Foundry Toolkit extension team on vsc-ui-react: an open-source library of VS Code-styled Fluent UI v9 components that ships inside an extension with 1.2M+ installs.

Microsoft Foundry ↗ GitHub ↗ npm ↗ Foundry Toolkit ↗
currently shipping

open source · systems2023-present

Charm UX

An open-source design system that began as an internal Microsoft library and is now public: 30+ accessible, headless Lit web components, themed through a dedicated token package. I contribute to building its core. You're looking at it. This portfolio is built on Charm.

Charm site ↗ GitHub ↗ npm ↗
design → production The Athletic Advertising marketing site with sports-elevated hero and mobile ad formats

independent · software2026

The Athletic Advertising

Production marketing site from design through deploy: ad formats, specs, and proof pages on Astro SSG and Content Collections.

Live site ↗

  • independent · software2025-present

    The Recipe Room

    Full product from schema to live PWA: Postgres data model, GPT-4o vision recipe extract, chef assistant, and the cookbook UI cooks use. I don't stop at the component layer. I ship the app.

    Read the case study → Live site ↗ GitHub ↗

  • Microsoft Web Platform · prototype2017-2021

    Microsoft Edge

    Live prototypes for Vertical Tabs and feature flows, plus FAST / Fluent components for Shopping, News, and high-contrast DevTools.

    Read the case study →

  • Microsoft Web Platform · systems2017-2021

    FAST & Fluent UI Web Components

    Open-source contributor: high-contrast work, navigation and section-header for fast.design.

    Read the case study → fast.design ↗ GitHub ↗

  • Microsoft Xbox · software2012-2017

    Xbox One Dashboard

    Core UI and prototypes across Home, Community, Store, and One Guide. XAML/MVVM, 10-foot TV experience through three console releases.

    Read the case study →

kham.approachPrinciples

Prototype. Ship. Systematize.

  1. Live builds beat static designs

    Nine years building 3D game worlds taught me to make things you can walk through. I'd rather code a rough live version and try it than review a static mock. Then I harden what works into production.

  2. Ship the whole app

    Schema, API, UI, deploy. I've taken apps from first sketch to a live URL (The Recipe Room, Athletic Advertising) and built platform UI at Microsoft that millions of people use.

  3. Accessibility is architecture

    Keyboard navigation, screen reader support, and high contrast from the start. Bolting them on later never works. I've done the WCAG and ARIA cleanup from Edge to AI Foundry.

  4. Build components developers want to use

    In a design system, other developers are the users. Clear API, predictable behavior, real examples. Get that right and teams adopt. Get it wrong and they build workarounds.

kham.experienceThe long arc

From game worlds to products and systems.

  1. 2025+
    UX Engineer · Microsoft CoreAI
    AI Foundry design system · contract

    React + TypeScript components for AI-powered developer experiences; platform-wide accessibility improvements.

  2. 2023
    Software Engineer · Microsoft C+E CX Studio
    Charm UX design system · contract

    Core components for Charm UX: accessible, headless Lit Web Components with design-token theming.

  3. 2022
    Independent Software Engineer
    Client products, concept → deployment

    Accessible, performant web applications built in direct partnership with clients.

  4. 2021
    UX Engineer · Microsoft Web Prototyping
    Concept → working software

    Interactive prototypes for early product decisions. Live builds over static mocks so stakeholders could try the idea.

  5. 2017
    UX Engineer · Microsoft Web Platform
    FAST · Fluent UI · Edge

    Core components for Edge, News, and Shopping; accessibility and UI performance initiatives.

  6. 2012
    Design Developer · Microsoft Xbox
    Xbox Dashboard

    Core UI and prototypes for the Xbox One Dashboard across the 2013 launch and the 2015 and 2017 releases.

  7. 2002
    3D Environment Artist · Amaze Entertainment
    Cross-platform games

    Nine years building detailed 3D worlds and interactive assets. That craft still shapes how I build interfaces.

kham.skillsCapabilities

What I bring to a team.

languages
TypeScript · JavaScript · HTML · CSS
frameworks
React · Next.js · Lit · FAST · Astro · Web Components
software
End-to-end delivery · Schema → UI · PWAs · Content Collections · Production deploys
systems
Design systems · Design tokens · Fluent UI · Material UI · Storybook · Component architecture
prototyping
Interactive prototypes · Live builds · Three.js · GSAP · Concept validation
accessibility
WCAG · WAI-ARIA · High contrast · Performance optimization
ai development
Cursor · GitHub Copilot · LLM integrations · Prompt engineering
platforms
Azure DevOps · Google Cloud · Supabase · Postgres · Vercel · Netlify

Buttons, seals, links, and the exploded button anatomy in the hero share one accent ink token. Adjust hue, saturation, radius, or edition and every Charm component (plus each diagram layer) re-themes live. Hover the diagram to expand it.

Reset to defaults

This drawer is a ch-dialog, the radios are ch-radio, and every button, card, and badge on this page is a Charm component. The sliders mutate Charm's token layer on :root. Your changes are saved in this browser.