Frequently Asked Questions
What is the Provet Cloud Design System?
Provet Cloud Design System is Nordhealth’s design system for Provet Cloud’s products, digital experiences and brand. It’s a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products and experiences. Provet Cloud Design System is powered by Nord Design System.
Who works on Provet Cloud Design System?
Provet Cloud Design System has a core team of designers and developers inside Nordhealth who are dedicated to building and supporting the system. The core team currently includes Ariel Salminen and Elwin van Eede. Previously, the team also included Nick Williams, David Darnes and Eric Habich.
Why is the design system public?
Public documentation makes sharing and collaboration between different teams and third party vendors much easier as it increases the system’s visibility and accountability. This also makes us push towards higher quality content and enables us to be more transparent. Finally, this also serves as an amazing tool that we can leverage in recruiting.
What is the goal of the design system?
The goal of Provet Cloud Design System is to improve UI consistency and quality, while making our software design and development processes more efficient. Provet Cloud Design System also helps to establish a common vocabulary between everyone in our organization and ease collaboration between different teams and disciplines.
What’s on the roadmap?
See our Roadmap in Jira for up to date plans.
Should we use the Provet Cloud Design System?
The short answer is yes, you should use it. Provet Cloud Design System improves UI consistency and quality, while making our software design and development processes more efficient.
Can we use a different framework instead?
The short answer is, no, you shouldn’t. Third party frontend frameworks provide a specific solution and a particular look and feel, and the resulting experience ends up resembling someone else’s brand. In addition to look-alike issues, these frameworks add a lot of unnecessary bloat to the user experience.
While a third party framework might seem like a good way to jump start development, it will eventually lead to developers needing to create a substantial amount of custom code to achieve their products’ goals. Eventually a threshold will be crossed where the initial benefits of using a third party framework are outweighed by the time spent modifying, extending, and fixing the framework.
Finally, there’s also the issue with naming. Using a third party framework means subscribing to someone else’s structure, naming, styling conventions, and even ways of working which will make it harder and harder for us to improve our processes and ease the collaboration between different teams and disciplines.
What’s the meaning of “draft” badges?
These badges indicate whether something is ready to be used in production. Orange (“Draft”) status means that it’s still under work and not ready to be used in production environment or design work.
Can I use this in any project?
Provet Cloud Design System is meant for building digital products and experiences for Provet Cloud. Our terms of use doesn’t allow the use of Provet Cloud Design System outside of this context.
Is it open source?
No, but feel free to browse this website to learn how we approach design and development at Provet Cloud.
Is there a way to monitor API status?
Yes, Provet Cloud Design System has a public status page that informs our users about the uptime of our services. You can view our status page here.
What tools do you use?
What packages do you offer?
Provet Cloud Design System offers the following packages:
Additionally, the parent Nord Design System offers:
How do I get started with the Provet Cloud Design System?
See the Getting Started section in the documentation.
Where can I find Nordhealth logo?
You can find the logo in different formats from our downloads page.
Where can I find the presentation templates?
You can find the presentation templates in different formats from our downloads page.
What’s the difference between RGB, CMYK and Spot colors?
The straightforward answer is that RGB is for anything digital or on a screen, and CMYK and Spot are for print. If you’re working on print and don’t know what Spot colors are, then we recommend you to always pick the CMYK version instead.
What browsers are supported?
Provet Cloud Design System is tested in the latest two versions of the following browsers. Our team addresses critical bug fixes in earlier versions based on their severity and impact. If you need to support IE11 or pre-Chromium Edge, this library isn’t for you.
Can I use this together with other CSS frameworks?
Yes. All CSS selectors are prefixed with .n- to prevent collisions.
What languages are the components written in?
Components are written in TypeScript, CSS and HTML. They ship as standards based Web Components making them compatible with current and future JavaScript based frameworks like Angular, React or Vue.
What are you using to generate the documentation?
We use a tool called Eleventy to generate it. Additionally, we don’t currently use any JavaScript frameworks or similar on the website.
What tools do you use for Web Components?
- Provet Cloud Design System is powered by Nord Design System.
- Components are built with Lit.
- Component metadata is generated by the Custom Elements Manifest Analyzer.
- Documentation is powered by Eleventy.
How do you version the system’s parts?
We follow “Semantic Versioning.” Under this scheme, version numbers and the way they change convey meaning about the underlying features and what has been modified from one version to the next. For more details, please see the documentation.
How do I test the different themes?
Nord has a tool called Theme Builder for this exact purpose.
How did we choose the UI typeface (font)?
For digital products, we use a typeface called Inter which is carefully crafted and designed for computer screens specifically. It features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates and slashed zero for when you need to disambiguate "0" from "O".
We chose this specific typeface based on user research we did in 2020. During this research we tested dozen different options and chose Inter for its legibility and ability to present user interface and content as clearly and efficiently as possible.
How can I add a new icon?
All new icons should be added to Nordicons first. Please see Support page for more information on how to contact us. We can usually add an icon during the next few days if there’s a hurry. Please keep in mind though that if there’s a similar icon already in use, we will suggest you to use that instead.
How can I add a new theme?
It’s possible and described here, but we strongly recommend against it. Please reach out to the Design System team before creating a custom theme to discuss the use case and better understand the limitations.
A component I need is missing?
When you start designing a new feature, you may come across a Design Token, Component, or Template that isn’t defined in the Provet Cloud Design System. When that happens, you should reach out to the Design System team to make a contribution. The easiest way to reach out to us is during our office hours or via our dedicated Slack channel.
A component is missing a feature I need?
Please see our support section for ways to contact us. Our team wants to understand what you’re trying to achieve, and what’s stopping you from achieving this with Provet Cloud Design System today.
I found a bug. How do I report it?
First, make sure the problem is reproducible. Once confirmed, send us a bug report.
I couldn’t find an answer to my question
See the Support guidelines for instructions on how to reach us.