The source of truth

Oracle-Grapeshot don’t have an in-house design lead, so the library had to become the defacto source of truth for users; eliminating the need for personal interpretation, multiple frameworks or duplication of effort.

We applied the principles of atomic design to review and refine their existing design library, including fonts, spacing, margins, inputs and stateful features. We also broadened the existing colour palette so that colours for things like active/inactive states were clearly delineated. And in each case, we created a variant for tablets and mobiles.

Grapeshot design system components

Atoms, organisms and components

The library was organised by its design ‘atoms’ - the constituent building blocks from which all the user interfaces were derived. The atoms can be used and reused in isolation without worrying about any implicit dependencies. And everything that’s available to developers is immediately visible all in one place.

It had to be easy to navigate and access so that customers could use it without resorting to help from the development team. It also allows different users to add new updates and assets - the eventual goal is for the library to accommodate words and code snippets too.

No matter how good a design library is, it can’t exist in isolation, especially if the goal is for it to be the definitive source of truth. Oracle-Grapeshot hope to ensure its ongoing success by communicating its value internally and making it part of the on-boarding process for new team members.

Grapeshot design system organisms Grapeshot design systems templates

Let's work together

We’d love to hear from you. Make our day.
All ideas welcome. We’ll soon let you know if we’re able to help.

Contact us