skip to main content

UI library

With a User interface (UI) library we achieve a high design and development velocity, a higher product quality, and more predictable products for the user. Helping the user to develop trust in Priva and resulting in a quick learning curve for new Priva products.

Our UI library is the most practical implementation of the Design System. It contains two parts: code and design.

Code library

Development becomes fun when developers can benefit from a toolbox of code for styling, layout, page elements etcetera. When every development team builds upon work & knowledge from previous teams and doesn’t need to reinvent the wheel. It consists of two elements:

  • A GIT packages and components library. While developing, our developers use, improve or add new packages and components. Storybook is used to browse the library;
  • An ‘Appshell’ for all apps. It is an upgradable foundation with all our non-moving-parts.

Design library

UX designers can focus on users & research instead of developers & design handoffs. Because of a library stacked with reusable building blocks (components, patterns, layouts) and best practices. Every designer builds upon work & knowledge from previous designers. It consists of two elements:

  • a Figma library that matches the components of the UI code library. While designing the designer uses, updates or adds new components or patterns;
  • a Terminology library for UI texts.


The UI Library:

  • allows designers and developers to focus on the parts of the product that are unique and important.
  • should always be helpful and empowering instead of being restrictive.
  • aims to provide the right balance between consistency and flexibility.
  • enables overall quality & consistency of the Priva product portfolio (which is always more important than the flexibility of one specific Priva product).


Priva UI Library

Light - The light blue background color connects the Priva products with the brand while keeping the style light and easy on the eye.

Subtle & soft - A delicate rounding of the edges combined with subtle shadows & animations make the interface feel smooth and unobtrusive.

Colors - The usage of other colors besides blue is minimal and reserved for specific use-cases. This results in a functional & modest feel.

Contrast - Dark blue accent colors create a more powerful contrast that links the Priva products to the brand while giving it a professional look & feel.

Easy access to Priva Design