Nord Design System’s parts are themable using CSS Custom Properties. We ship pre-made themes for Nordhealth, Veterinary and Healthcare apps. You can utilize these themes through our CDN.
Integrating Nord’s themes into your project is straighforward. To get started, add one of the following link tags to the
<head> of your application:
<!-- Nordhealth light theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/themes/2.0.7/nord.css" integrity="sha384-bowyFJwMxGq6edVuhzlGNnyNTEHhEGZ1r+1TvHnsfJHOYQWcXuntdxq8bBcQaW4Y" crossorigin="anonymous" />
<!-- Nordhealth dark theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/themes/2.0.7/nord-dark.css" integrity="sha384-jkvofCL2D57AgXmZYQ8tpgVC1fxHJtgsSRkgcmRur9quumKsOLr6FEI7R1tzvrV0" crossorigin="anonymous" />
<!-- Healthcare light theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/themes/2.0.7/health.css" integrity="sha384-PBgtWfQYM0mQSxLnQwxP+4JKwLYMqHS+REEMCHLl2obvhlPvPxZaoBkCuewaEsQH" crossorigin="anonymous" />
<!-- Healthcare dark theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/themes/2.0.7/health-dark.css" integrity="sha384-FwIVQOmmH/7hktJUPhcCsZ/R+iaEtG/p2GfEQ4vPa4jOOK5ZF366rGDdtLCyPpNQ" crossorigin="anonymous" />
<!-- Veterinary light theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/themes/2.0.7/vet.css" integrity="sha384-ghaaL34mUc3JYVhlQIWyVg7N+luRVrPEuSScf2L7WRInUZn9bH5EuJeeqhCL5XX6" crossorigin="anonymous" />
<!-- Veterinary dark theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/themes/2.0.7/vet-dark.css" integrity="sha384-cDriykZ8F4qNE22pVSsj4l2oaysb4DA6f7Q4YcSJg15OmTyWMJkvK4dSM29GKHji" crossorigin="anonymous" />
When using Nord’s themes, it’s also recommended to include our tokens in CSS Custom Properties format before the theme link tag to get access to properties such as font sizes and similar that our theming doesn’t affect:
<link rel="stylesheet" href="https://nordcdn.net/ds/tokens/1.0.7/tokens.custom-properties.css" integrity="sha384-/OZ8/KiNciyGFGYUhkutjMLH9p9ii3/AHNN4HNQVI0BWhc+aTXdmDD2uJoh76TlH" crossorigin="anonymous" />
While usage through Nord CDN is the favored approach, we do also support installing any of the themes locally using Node Package Manager. Before you move further with this approach, please make sure you have Node.js installed on your machine. You can install the latest version through their website.
If you’re planning on using Nord Themes in a project that doesn’t yet use Node Package Manager, you’ll have to first create a package.json file. To do this, run
npm init and follow the steps provided. Once finished, you can continue Nord Themes installation by following the instructions below.
Install using NPM #
Run in your project or website root directory (where package.json lives):
npm install @nordhealth/themes
Importing a theme locally #
Once you’ve installed our NPM package, you can import any of Nord’s themes into your project in either CSS, SCSS, Sass or Less:
/* Import Nord light theme */
/* Import Nord dark theme */
/* Import Healthcare light theme */
/* Import Healthcare dark theme */
/* Import Veterinary light theme */
/* Import Veterinary dark theme */
If you’re not using Webpack or similar tool for your build process, you may have to provide the full path to Node Modules:
List of all available themes #
Below you can find a list of all available themes and paths to them.
- Nord light UI:
- Nord dark UI:
- Veterinary light UI:
- Veterinary dark UI:
- Healthcare light UI:
- Healthcare dark UI:
- To see a concrete example of the themes in action, view Nordhealth Pay prototype.
Developing themes #
The themes package in Nord Design System can be found under
packages/themes. The themes utilize simple SCSS files and CSS Custom Properties. Gulp.js is used to transform SCSS into CSS.
The following are the most commonly used commands during development:
npm start- Compile themes, start watching for changes.
npm run build- Builds the project.
npm test- Run all tests once.
Getting support #
Need help with our themes? Please head over to the Support page for more guidelines and ways to contact us.