Tools come and go. The system stays. Here is what I use to build it, govern it, and ship it.
Deep: design systems and accessibility
Broad: research, governance, and engineering partnership
Design Systems
Figma
Variables, component properties, and auto layout, built so one system can theme many products.
Design Tokens
Semantic tokens mapped to production code, so design and engineering stop translating for each other.
React
Component specs written with engineers, which cut implementation cycles 40% at ADG Tech.
CSS Variables
The layer that carries tokens into production across teams.
Git hub
Version control for contributing to components alongside engineers.
Accessibility
WCAG 2.1 AA
47 production components at REI, built for full keyboard and screen reader support.
Section 508 Trusted Tester
Certified through DHS, one of fewer than 3,000 nationwide.
Governance and Collaboration
Atlassian
Contribution workflows and documentation, so teams can adopt the system without waiting on me.
Miro
Mapping operating models, systems, and journeys with the people who run them.
Notion
Documentation and research in one place the whole team can find.
Research and Validation
Userlytics
Remote usability testing to validate flows before they roll out.
Matomo
Behavioral analytics that show what people actually do, not what they say.
A/B Testing
Competing directions tested, so the winning design has evidence behind it.
Design and Prototyping
Framer
Where I prototype and build this portfolio.
Adobe Creative Suite
Illustrator and Photoshop for the assets a system needs along the way.
AI Workflow
Claude and MCP
Claude connected to Figma, Framer, and Notion for faster audits, documentation, and builds.