Small Improvements Style Guide

These are some examples of my contributes to building and maintaining Small Improvements Style Guide, promoting consistency and best practices across teams.

Workshop

In June 2018 the designers and some frontend developers teamed up for a 2-day workshop focused in transforming an existing simple component library into a structured, documented, and searchable Style Guide.

 
IMG_6044.jpg
IMG_6034.jpg
IMG_6072.jpg
 

Style Guide

The result - visible here - was quickly adopted and made conversations around consistency and usage much simpler between designers, developers and copywriters.

Icons

In 2017 we dropped FontAwesome 4 and adopted the open sourced Feather icon family.

Apart from their much cleaner appearance, the fact that they are line-based allowed us to:

  • Easily make new custom icons when needed,

  • Create variants of the icons to match the font-weight.

 
Icons overhaul.png
forms1.png
forms2.png
 

Forms

In early 2018 I proposed an overhaul that not only unified the visual appearance of all form field components, but also brought some needed consistency to some low level elements like Font-sizes, Line-heights and rectangular containers (for buttons, form fields, status labels, etc.) and how they can be used together when creating form input fields and other components.

Font family

In 2019 I had the opportunity to propose a new font family for Small Improvements as we were growing out of our license for Avenir. The goal was not to reinvent the brand, but find something better and with a more flexible license that could support us better in the future.

After carefully researching and testing 12 alternatives, we went for TT Norms because:

  • Similar “vibe” as Avenir

  • Beautiful in big and small sizes

  • Supports a ton of languages including Cyrillic and Greek

  • Price fits our budget for an Unlimited licence and is more transparent than others

  • Great for branding work in general

 
Font testing.png