amazon web services & the aura design system

I began my partnership with AWS by interviewing designers, developers, and project managers: What moments of friction do you run into on a regular basis? What would your "dream" library feel like?

I learned that designers wanted principles and best practices, but all they could do was try to visually emulate existing designs. Meanwhile, developers faced frustration due to unclear designs, struggling to output work that aligned with expectations.

At the center of the chaos was the existing library — openly editable to the entire team, with no oversight. Designers used it as a working file, not a source of truth. Mistakes and clutter were everywhere, and team members of all disciplines indicated a lack of trust in the library's contents. Everyone wanted precision and clarity.

Equipped with a greater understanding of the team's hopes & dreams, I began a radical transformation of the website design library.

First I built the color palette, distilling AWS’s 225 brand tokens into a tight semantic palette built for web. Named after their use cases, they created a forcing function for proper usage and accessible color pairings. I used variable modes to include light mode and dark mode values in each semantic color, which meant that designers were always creating in both modes at the same time.

Another major source of chaos was in spacing. From an audit of their existing work, I created a simplified stack of spacing and padding variables that could be applied universally. I used modes to control values across breakpoints, allowing the same variable to be used for all devices — the spacing would flex automatically. Typography got the same treatment.

With styles and variables in place, my next step was to build every single component in the library from scratch. Extreme, but necessary — the library was in such poor condition that starting over was easier than spot-fixing the existing designs.

In doing this, I eliminated any chance of legacy issues traveling to the new library. I crafted each component by hand, with absolute reverence to the new system.

As I built out the new library, I was also responsible for documenting it. With no existing documentation to reference, I had the freedom to design a new template.

This required a lot more research with the design team, to better understand their design workflow. “What are you typically looking for when you go into documentation? Is anything here unnecessary?”

I held the same conversations with the development team. Between my past experience working alongside engineers, and Figma’s brand new Dev Mode, it was easy to land on a solid documentation template that satisfied everyone.

Even before I completed the library, I witnessed changes in the new work being created in parallel with my library project. I saw designers already building more advanced components, and delivering them to a higher standard of precision.

The team sorely deserved a tool like this, and it was a great joy to finally provide it to them. However, my work at AWS wasn’t finished.

For the remainder of my two years on the team, I acted as the sole systems designer maintaining this library. I kept a close working relationship with the Sr. Manager of UX and was the point person for anything library-related for designers, engineers, and page authors on the team.

While engineers migrated the marketing site, designers delivered new work for me to inspect, refine, and document. I oversaw the library as it evolved alongside Figma updates, and shared my learnings with other teams at AWS so they could benefit in the same way as the marketing site. I greatly enjoyed my time with AWS, and hope to be involved in many more library transformations down the road.