Trevor Curtis

Chico’s FAS Design System

A delicate visual design system for a shopping site


Chico's FAS Design System


Sketch and Zeplin

InVision and DSM

UI Design

Development Support


May 2019

In May 2019 I accepted a contract to work with Chico’s FAS to develop a complex design system for the launch of a new brand. Chico’s wanted to speed up the design process of creating an e-commerce website template for immediate development on Oracle Commerce Cloud.

Some initial work had been completed for an existing brand, but there were extensive typographical, color, and iconography changes that needed to be addressed for the new brand.

Chico's FAS was able to rapidly develop a complete e-commerce site for a new brand by utilizing a design system that I created in Sketch using atomic components and layout tools in Anima.

My design system philosophy is built on the principle of Atomic Design, pioneered by Brad Frost.

Chico's design system is built on atomic elements, starting with basic shapes, layer styles for color and borders, and typography styles. Atoms are used to create molecules like buttons, cards, and other simple interface elements. Molecules are then grouped together to create organisms like carousels, forms, and modals. Organisms can be combined in vertical or horizontal templates, creating distinct areas of functionality in a website design. Finally, templates are stacked into pages to create a complete site design.

A completed home page design using design system elements and styles

A selection of carousel designs, some employing card designs

A selection of custom icons that were created for Chico’s FAS in five different sizes

Some input field examples showing the options available within each design component in Sketch

A completed Forgot Pasword page built using design system components

I produced 17 distinct Sketch library files containing all of the symbols, styles, and atomic design elements for designers to use within Sketch. Designers would import these libraries and accept updates to them over Sketch Cloud as I continued to add more elements to the library.

These initial design system libraries led to the creation of 640 mockups to launch a complete e-commerce site in only five months. Design systems can dramatically accelerate the design process, and it improves visual consistency throughout the entire product.