Scaling a design system for AWS service teams.
Synthesis was designed to be a unifying experience for service teams. Allowing them to stay on brand, building customer trust, and being flexiable enough to build the experiences they needed.
Principles
Brand perception
Aligning to the brands visual guidelines. Helping build a cohesive customer experiences across different touch points.
Flexability
Providing teams with building blocks. Helping them build the required customer experiences that live outside of the console.
Speed
Moving fast in updates, developments and customization. Helping teams deliver quickly and iterate to refine the experience.
Design excellence
Both visual and interaction excellence. Components and patterns look great and deliver smooth experiences.
Foundations
Foundational colors
The foundational colors come from the Amazon parent brand. These are core colors in the Cloudscape design system for in console experiences.
Amazon Orange
#ff9900
Squid ink
#232f3e
White
#ffffff
Primary theme color
To align with brand, we allowed teams to theme their primary color based on their service type (e.g. AI, Data & Analytics).
Default
Main
#ffe88d
Darker
#ffd78a
Lighter
#fff7e6
AI/ML Services
Main
#7df9ff
Darker
#00f3ff
Lighter
#e5feff
Data & Analytics Services
Main
#8fffce
Darker
#3dff9e
Lighter
#ccffe9
The theme only applied to primary elements. All other aspects of the system stayed the same. Allowing us to maintain a consistent experience across the various service teams.
Backgrounds
Most of the UI is painted with background colors and elevations. Basing these of Squid ink we selected the following colors. Ensuring we met accessibility standards for text and contrasting colors.
Background
Used as the page background creating the base.
#131920
Elevation - 01
Used for cards and containers.
#1B232D
Elevation - 02
Used for things like menus
#333843
Elevation - 03
Used for things like modals and popovers.
#424650
Components
I created these spec sheets to improve developer handoff by ensuring all states and types were designed. They also served as inline documentation for designers.
Visuals
Empty states
The base component providing options to render an illustration as well as provide details and any needed actions.
Background images
The flowing connections came from the concept of data flowing from both an AI perspective and a data analytics perspective.
Delivery method
Synthesis core
Focused on the atomic components and universal patterns to give teams the bricks to build with.
Service-specific PALs
Allowed teams to build specialized components while maintaining consistency.
