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.
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.
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