SafeMom: a design system the AI builds with
Brand, tokens, and the rules that keep Claude Code on-brand in a pregnancy ingredient checker
Brand Identity
Design Systems
Design Tokens
AI-Built Apps
Overview
Length
July 2026, ongoing
Role
Brand & product designer
Scope
Brand identity, Flutter token system, agent rules, CI design checks, screen design
Team
With the founder
When a product moves from prototype to production, the system underneath has to grow with it.
I built Rexx fast. Speed meant hardcoded values everywhere: colors typed as hex codes, spacing as magic numbers, corner radius inconsistent across screens.
It worked, but it was fragile.
Changing one color meant hunting through 30 files. And the Figma file and codebase had drifted apart.
I created a two-layer token system in Figma: primitives (raw values like grayscale and spacing scales) and aliases (semantic tokens like colorBgBase and radiusLarge that reference primitives and support light and dark modes).
Then I mirrored the same architecture in Swift. Using the Figma MCP server, I connected the two so design decisions and code stay in sync.
A component wasn't considered token-connected until three things were true: the Figma layer referenced an alias variable (not a raw hex), the corresponding Swift enum value existed in RexxStyles.swift, and the component rendered correctly in both light and dark mode.
The goal wasn't a 200-component library. It was a foundation where every design decision has one source of truth - and that source compiles.
Building fast is the right call when you're validating a product. But there's a moment where speed becomes debt. Recognizing that moment and investing in the foundation, without slowing down what users see, is the design engineering skill that doesn't show up in a mockup.
Interested?
I’m open to roles where design is a true partner in shaping product direction. If you’re building something with purpose, I’d love to chat.