Llama Design System
Karehero Design System
Role
UI/UX Design
Team
UI/UX Design – Robin Powell (me)
Engineer – Jamie Scollay
Design systems
When planing the karehero progressive web app it was decided it would be a good idea to create a design system for it. It was going to be a large complex app, by creating all the foundations first then working from the design system we could ensure consistency through out and also future proof it so it would be easy to update globally and also easy for other designers and developers to use it.
I decided to use an atomic design approach going from the smallest elements like spacers and pills, progressing to cards, forms and larger components all the way up to building full pages. This meant every element was documented, built and then combined together to create lager components and elements. This is a great way to go as when combined with apps like story book the whole system is 100% consistent and easy to manage.
Atomic design systems
My preferred method of design system is the Atomic system created by Brad Frost. I like this system as it helps you to think of the user interface as both a cohesive whole and a collection of parts at the same time.
Foundations
The foundations are the very building blocks to the design system. They include type scales, colour systems, micro and macro spacing systems, shadow styles and more. Once you have these all worked out you can now start creating elements and components for your designs knowing you have a set of predefined design decisions already made.
Typography & spacing scales
Colour & elevation systems
Fluid & fixed grid system
Iconography
Components
Documentation and Specs
Some examples of documents and specced out pages from the design system
Building with Storybook
We connected the design system to storybook so when the engineer Jamie had done building components I could compare and sign off .This was great because this way we could make sure the design and build were a 100% match..
