Hometime Pattern Library

I wanted to revamp the pattern library I had created in my first few months as Head of Design. Create something larger and more comprehensive that would enable consistency across our vast and complex web platform for agents and customers.

Intro image

A new comprehensive pattern libary for Hometime

Icon component structure

I’ve created a few icon master components and they each are available in two sizes.

But they’re setup in a way that when I edit the larger version, adding new SVG’s to it for example, it automatically cascades to the smaller version.

Because the small versions are an instance of the larger icon master components, simply placed inside a smaller container.

This also means I can swap any sized icon for another, within buttons and field components etc. Because they all have the same bounds. 24px by 24px.

Icon 24b
formicon 24b
arrow 24b
Icon 16b
formicon 16b
arrow 16b
Icon Instance selected

A few examples

You can view the entire file in Figma here

Pattern Library – Colors
Pattern Library – Callouts
Pattern Library – Alerts
Pattern Library – Buttons
Pattern Library – Popovers
Pattern Library – Colors-1
Pattern Library – Field Validation
Pattern Library – Icons
Pattern Library – Badges

Selected Work