Designing a Design System

Amplify UI Toolkit 2014 – 2015

Over the years, Amplify's web-based products diverged quite a bit in their functionality, appearance, and code implementation. To establish a unified design system, a small team began building a web UI toolkit on top of Bootstrap 3. Developer and designer Yuriy Vaskevich initiated the project, which included contributions from Sid Nallu, Jessica Graham, Ben Warfield, Danielle Primiceri, Rajan Ayakkad, Trade Loeffler, and me.

I used the Amplify UI toolkit heavily with Professional Learning Maps. Having a selection of components with markup and styling code ready to use accelerated development and let us focus on building the more unique parts of the interface.

Primary and secondary navigation bars.
Alert color options.
Alert design specification.
Breadcrumb design specifications.
Evaluating footer design options for sufficient color contrast.
The initial version of an accordion widget.
Light and dark variants of the breadcrumb navigation widget. We were into dark mode before it was cool.
A sortable table widget based on DataTables.
Light and dark variants of a secondary navigation bar.
A tabset widget.
Customized text selection background color.