Live Fooda style guide

Fooda's brand in code

Process

My role

Project Lead

The need for a style guide

While at Fooda, I worked with one other designer and six developers. Even with a small team, we wasted time asking each other questions like, “Hey, what is the button supposed to look like?” or “Is this text supposed to be centered?”. Most companies with great design teams have live style guides; they serve as a central location to store UI components. This makes it easy for designers and developers to find, edit, and copy/paste UI code snippets into their projects. I saw how much time we were wasting and created a style guide to make things more efficient going forward. It included styles for things like buttons, headings, and colors as well as a design language around forms. I created the style guide using HTML and SASS.

Results

Colors

Forms

Error handling

← Previous project