• Skylab design system
• Skydesigner GPT

<

>

bringing polish and velocity to
​a design system 

Project
Transform and scale Avalara's Skylab design system 
Skylab documentation (Opens in a new tab)

My role
Lead design, production, documentation, sequencing, and maintenance

The work
The Skylab design system at Avalara was created in 2018 and maintained and broadened by a small dedicated team until the beginning of 2025 when I became its owner.

Known issues that I sought to address included:

• The siloed team struggled to deliver the components and updates needed by the Product organization and its designers — the backlog was sizeable and development resources limited.
• Timelines to introduce needed components were extended due to a labor-heavy documentation process.
• Product design scenarios weren't at the center of the design system's DNA.
• Efforts to efficiently leverage work done by product designers never took off.
• Components had been created individually without a holistic visual design story, so they often presented conflicting signals.
• Limited resourcing kept component styles static in a changing design and UX landscape. 

Progress so far

• Streamlined the research process to:
  • reference a complementary design system created by the company's marketing team, aligning where possible.
  • also reference a shortlist of other leading design systems like Carbon, Material, and Polaris.
  • include the use of AI tools for speedier, deeper analysis.
• Created a roadmap with the help of the VP of Product Experience and my design manager.
  • Performed an audit of the foundations and components and developed a point of view as to overall direction and specific updates to make.
  • Piloted a contribution model that has led to the delivery of a large number of modernizing, refining, and documented design changes that can be brought into the Sprints of the SDK team via PM prioritization.
• Strengthened and built relationships of trust with the product designers, giving them pathways to collaborate and brainstorm as part of the process.
• Created and now maintain the Skydesigner GPT trained on the style guide and user persona information — helps designers save time, adhere to guidelines, and build consistent experiences.
• Created Skydesigner, a powerful GPT that saves people from having to dig through documentation for specs and guidance.
• Adopted AI tools to make documentation tasks quicker and less burdensome. 

What’s next

• ​Update the Skylab Figma library to align properties 1:1 with the SDK in readiness for MCP and code connect integration. This integration will yield production-ready code (from a Skylab perspective) for engineers to work from.

Vertical Divider

Example transformations

Colors

In our Color Palette, three of the token sets were ripe for small but high-impact shifts:

• Giving the darkest and next-darkest greys the same hex value has the effect of imbuing the product experience with a softer and more confident edge.
• Pushing the greys from a strictly neutral range to a range with a subtle blue-purple cast makes them give off a more optimistic vibe
• Pushing the greens a touch more toward blue makes them more harmonious within our color ecosystem, in which the blues are a primary element.
• Giving a great depth range to our blues better aligns with the marketing color palette, and offers more opportunities for saturation and richness.

Accordion

Our Accordion had both style and spacing issues.
Giving the darkest and next-darkest greys the same hex value has the effect of imbuing the product experience with a softer and more confident edge.

Alert

Our Alert needed to be a lot more flexible so it could be used in a lot of different use cases that require different combinations of elements. Sometimes it makes sense to include it in a dialog, conditionally use it to give feedback bsed on a form selection, tell the user they hav some unmapped fields, and much more.

Making everything about the alert optional except whether it signifies a information, success, warning, or error condition ensures designers have a lot of options, all of which contribute to a consistent visual experience.

Including text coloration without losing WCAG AA compliance aligns with the same type of updates made to the design system Toast, creating harmony and predictability.

More transformation examples coming soon…

Faster access to answers + powerful screen review

Skydesigner
This GPT is trained on the style guide (including content guidelines) and user persona information — helps designers save time, adhere to guidelines, and build consistent experiences. Documentation (Opens in a new tab)

Skycheck
In October 2025, I introduced Skycheck, a new feature within the Skydesigner GPT. Skycheck is a new rubric-based screen review tool for fast, structured design feedback. Skycheck evaluates screens against the Skylab design system standards: layout, components, interaction, accessibility, content, and persona fit. It uses a strict rubric grounded in real product behavior.Skycheck helps teams move faster while staying aligned with Skylab’s component usage, content standards, and page patterns.

How Skycheck works
 • Upload a screen image and request a Skycheck
 • Get a clear scorecard showing alignment and gaps
 • ask for a lightweight check (15s) for early explorations if you want
 • Optional flags highlight missing states or patterns

Extra feature
Every Skycheck includes an invitation to run a heuristics check based on Nielsen Norman Group’s 10 usability principles. (You can run the checks in either order.)