
Design systems leader and hands-on builder. 🚧👷
I connect product design and frontend engineering through component libraries, design tokens, documentation and governance. My 20 years in design span enterprise systems, developer tooling and independent products.
I led the SAP Build Apps design system and built hundreds of accessible components for Helsinki Design System. Today, I work on design systems at Digitaltableteur and build VertaaUX.ai, an accessibility and UX auditing platform.
Talks & writing · Portfolio · Get in touch · LinkedIn
![]() Personal site @ petrilahdelma.com Focusing on design leadership and genai workflows. Selected case studies, articles, talks, systems thinking and notes on design tooling and AI. |
![]() Design Systems @ Digitaltableteur Component libraries, design-to-code alignment, and DesignOps governance. Daily stack: Claude Code, Figma, Storybook, React/TypeScript. |
![]() AI-Powered UX Auditing @ VertaaUX.ai Founder. API-first platform for automated accessibility and UX audits. Async pipelines, LLM-assisted analysis, CLI + CI integrations. |
![]() Stylelint Plugin @ Rhythmguard Token governance for CSS and Tailwind: enforce spacing scales, require design tokens, and catch arbitrary values before they ship. |
| Project | My role & what it demonstrates | Explore |
|---|---|---|
| SAP Build Apps DS | Design System Lead: system architecture, component design, documentation, and Figma-to-React alignment. | Case study |
| Helsinki Design System / HDS | Senior UX Designer: component design, frontend work, accessibility, and documentation for the City of Helsinki's open-source design system. | Case study |
| Rhythmguard | Creator and maintainer: CSS and Tailwind token governance, spacing checks, autofix, and drift reports. | npm |
| VertaaUX.ai | Founder and builder: accessibility and UX auditing across web, API, and CLI workflows. | Product |
| Project Spine | Turns reviewed code corrections into verified regression checks and agent guidance, with Git evidence and CI enforcement. | Product |
| DSharp Design System | Client design-system delivery: React components, token governance, and Storybook documentation. | Case study |
| BountyOps | Governance for security research: scope and contract gates, traceable evidence, and human review. | Private |
Independent macOS apps where I explore interaction design, accessibility and local-first workflows.
| App | What I built | Try it |
|---|---|---|
| Precedent | A local-first macOS reference workspace with on-device dictation, OCR, and source provenance. | Download |
| Ring Stats | A native macOS menu-bar app for wearable metrics, with Keychain credential storage. | Download |
| Home Remote | Local TV control through a macOS app, CLI, and MCP server; built as home-tv-mcp. | Download |
-
From Tokens to Thinking Systems: Making AI-Native Design Systems Actually Work
Making component behavior, accessibility and token rules explicit enough for AI agents to use.
Digitaltableteur -
I audited 20 design systems for spacing drift. Here is what your team can use from it.
What real repositories revealed about spacing drift, false positives and rolling out token checks without blocking teams.
DEV.to
- Systems > pixels: Components that compose, not one-off designs
- Deterministic foundations + probabilistic AI: Type safety where it matters, LLMs where they help
- Ship > theorize: Working software beats slide decks
Let’s talk about your next project or design leadership role.
Design systems, frontend architecture and AI workflows—from advisory to hands-on delivery.







