Scaling a Design System Alone @ Secureframe

I audited the product and scoped the migration

I catalogued every instance that needed migrating — 166 form components alone — and grouped them by risk: low-traffic pages first, critical flows last. I also identified broader gaps: no standardized form layout, no consistent treatment for required fields, and no accessibility standards for keyboard users.

I coordinated the migration across three engineers

No dedicated sprint time existed for this work. I sequenced the migration into three engineers' existing sprints — batched by risk so regressions stayed contained. I ran the design review for each batch before it went live.

Beyond the component migration, I updated the Figma guidelines with "gold standard" form examples so other designers had a clear reference. My peer designer designed the focus states alongside me, starting the accessibility foundation (keyboard nav, consistent focus rings across every form component).

Accessibility context: Before this release, Castle had no accessibility standards — each implementation handled focus differently, and keyboard navigation didn't exist. We established the baseline: consistent focus states across every form component and a standard that all future Castle components include keyboard behavior in their specs. This was a foundation to build on, not a full WCAG audit.

The Result: "Spring Design Release 2025"

• 166 checkbox and radio components migrated

• New standardized form layout

• Consistent behavior for required fields, date inputs, and validation patterns

• Focus states and keyboard navigation for all form components

• Updated Figma guidelines with usage documentation

How engineers responded: Engineers started proactively bringing components to the design system channel — in one case, two engineers independently built the same component and asked if it should live in Castle. That shift from designers pushing adoption to engineers pulling for it was the clearest signal the system was working. Castle patterns also got embedded into the team's AI coding rules, meaning the system was part of how engineers write code, not just how designers hand off specs.

Then the Engineer Left

Our dedicated Castle engineer left for ~6 months. Component backlog started piling up. No one was assigned to build it.

I Proposed a New Workflow

I'd been experimenting with Claude Code and had gotten the Secureframe codebase running locally on my own. I pitched engineering leadership: what if designers submitted small Castle PRs for engineering review?

I started with something deliberately tiny — a color token update (green600 → green700) — to prove the concept. A senior engineer agreed to review. It worked.

I built the workflow, then brought in my peer designer

I established the end-to-end process with another fellow engineer:

Once I proved it worked, my peer designer adopted the same workflow. Now two designers were keeping Castle moving instead of zero engineers.

What I Shipped

Using the new workflow, I authored PRs for components beyond the original form system — toggles, tables, and navigation elements — proving the workflow scales across different parts of the design system.

I also started building an automated tool to scan the codebase and flag legacy components that should be converted to Castle equivalents.

Scanning tool (status): I'm also building an automated tool with a senior engineer to scan the codebase and flag legacy components that have Castle equivalents. It uses Claude Code + Playwright to navigate the app and surface inconsistencies. The core infrastructure works — it authenticates, scans pages, and identifies mismatches — and we're refining coverage. Early phase, but a step toward measuring adoption automatically rather than auditing by hand.

An engineer validated the approach publicly — noted I'd completed a change to their most complex component in a fraction of the usual time.

Impact

Component adoption increased from ~70% to 90–100% across most of the system — remaining gaps in links, tabs, and icons with clear migration paths identified. Here's more details:

• 166 form components migrated with zero customer-facing regressions (I led the audit, migration plan, and release coordination)

• Standardized form system — layout, required fields, date inputs, validation patterns (I spec'd and coordinated)

• Accessibility foundation — keyboard navigation and focus states across every form component (co-designed with peer designer)

• Design guidelines published for the team (I authored)

• AI-assisted workflow established after engineer departed (I proposed, built, and proved the workflow)

• Components beyond forms shipped via the new workflow (I authored PRs)

• Adopted by another designer, confirming it scales beyond one person

• Design system kept moving through a 6-month engineering gap instead of stalling