Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.

Design Tokens New

Design tokens are a tech-agnostic way to store variables. We use tokens instead of hard coded values to ensure a better UI consistency across different platforms.

Color #

ExampleDescriptionToken

6.17

#3559c7

Color Primary

Primary color for Nordhealth. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.

var(--n-color-primary)

8.24

#2847a7

Color Primary Strong

Strong primary color for Nordhealth. Used in primary color gradients, and as a primary button hover color.

var(--n-color-primary-strong)

17.06

#0c1a3d

Color Text

Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.

var(--n-color-text)

6.17

#3559c7

Color Text Link

Default link text color for Nordhealth. Used for all paragraph level links in an user interface.

var(--n-color-text-link)

10.2

#36434a

Color Text Weak

Weak text color for Nordhealth. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.

var(--n-color-text-weak)

4.7

#667680

Color Text Weaker

Weaker text color for Nordhealth. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.

var(--n-color-text-weaker)

5.18

8.67

#b2babf

Color Text Weakest

Weakest text color for Nordhealth. Used for e.g. disabled input text and placeholder text in focused inputs.

var(--n-color-text-weakest)

4.7

10.2

17.06

6.17

#ffffff

Color Text Inverse

Default inverse text color for Nordhealth. Used when text sits on a dark background.

var(--n-color-text-inverse)

4.61

#cb4848

Color Text Error

Default text color for error messages for Nordhealth.

var(--n-color-text-error)

9.57

16.01

5.79

#f6f8f8

Color Nav Surface

Default surface color for sidebar navigation. Used as alias for default button hover background and active hover color as well.

var(--n-color-nav-surface)

6.38

#8fa1aa

Color Nav Heading

Default heading color for sidebar navigation.

var(--n-color-nav-heading)

8.85

14.8

5.35

#eaf0f0

Color Nav Hover

Default hover color for sidebar navigation.

var(--n-color-nav-hover)

8.32

13.91

5.03

#e3e9eb

Color Border

Default border color for Nordhealth.

var(--n-color-border)

7.46

12.47

4.51

#d8dde1

Color Border Strong

Strong border color for Nordhealth for highlighting specific parts in the user interface.

var(--n-color-border-strong)

4.7

10.2

17.06

6.17

#ffffff

Color Surface

Default application surface color for Nordhealth. Use this for e.g. card backgrounds.

var(--n-color-surface)

4.7

10.2

17.06

6.17

#ffffff

Color Background

Default application background color for Nordhealth. Should be set to either html or body element.

var(--n-color-background)

4.53

9.84

16.46

5.95

#fafbfb

Color Surface Raised

Default raised surface color for Nordhealth. Use this when you need to separate a specific layer from the surface color, e.g. table headers.

var(--n-color-surface-raised)

6.69

#f9821a

Color Status Warning

Default warning status color for Nordhealth. Used to display information that needs user’s attention and may require further steps.

var(--n-color-status-warning)

6.44

10.77

#f9c739

Color Status Highlight

Default highlight status color for Nordhealth. Used to highlight specific items in the interface, like notifications.

var(--n-color-status-highlight)

4.61

#cb4848

Color Status Danger

Default danger status color for Nordhealth. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.

var(--n-color-status-danger)

4.63

#0d864c

Color Status Success

Default success status color for Nordhealth. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.

var(--n-color-status-success)

5.91

#8d3bc4

Color Status Info

Default info status color for Nordhealth. Used to convey general information that isn’t critical. For example, you might show an alert that asks for user feedback.

var(--n-color-status-info)

4.7

10.2

17.06

6.17

#ffffff

Color Button

Default button background color for Nordhealth.

var(--n-color-button)

9.57

16.01

5.79

#f6f8f8

Color Button Hover

Default button hover background color for Nordhealth.

var(--n-color-button-hover)

4.7

#667680

Color Border Hover

Default border hover color for Nordhealth.

var(--n-color-border-hover)

4.7

#667680

Color Icon

Default icon color for Nordhealth.

var(--n-color-icon)

17.06

#0c1a3d

Color Icon Hover

Default icon hover color for Nordhealth.

var(--n-color-icon-hover)

9.57

16.01

5.79

#f6f8f8

Color Active

Default active color for Nordhealth.

var(--n-color-active)

8.53

#2a469d

Color Primary

Primary color for Nordhealth. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.

var(--n-color-primary)

10.45

#263b7e

Color Primary Strong

Strong primary color for Nordhealth. Used in primary color gradients, and as a primary button hover color.

var(--n-color-primary-strong)

7.65

12.8

4.62

#dedfe1

Color Text

Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.

var(--n-color-text)

4.85

#5c82f5

Color Text Link

Default link text color for Nordhealth. Used for all paragraph level links in an user interface.

var(--n-color-text-link)

7.65

12.8

4.62

#dedfe1

Color Text Weak

Weak text color for Nordhealth. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.

var(--n-color-text-weak)

5.6

#8f949e

Color Text Weaker

Weaker text color for Nordhealth. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.

var(--n-color-text-weaker)

7.02

#555962

Color Text Weakest

Weakest text color for Nordhealth. Used for e.g. disabled input text and placeholder text in focused inputs.

var(--n-color-text-weakest)

4.7

10.2

17.06

6.17

#ffffff

Color Text Inverse

Default inverse text color for Nordhealth. Used when text sits on a dark background.

var(--n-color-text-inverse)

4.87

#eb5656

Color Text Error

Default text color for error messages for Nordhealth.

var(--n-color-text-error)

14.58

#252931

Color Nav Surface

Default surface color for sidebar navigation. Used as alias for default button hover background and active hover color as well.

var(--n-color-nav-surface)

6.14

#9b9b9b

Color Nav Heading

Default heading color for sidebar navigation.

var(--n-color-nav-heading)

13.06

#2c313a

Color Nav Hover

Default hover color for sidebar navigation.

var(--n-color-nav-hover)

12.52

#2f343c

Color Border

Default border color for Nordhealth.

var(--n-color-border)

9.96

#3d434d

Color Border Strong

Strong border color for Nordhealth for highlighting specific parts in the user interface.

var(--n-color-border-strong)

16.49

#1c1f26

Color Surface

Default application surface color for Nordhealth. Use this for e.g. card backgrounds.

var(--n-color-surface)

17.26

#181b20

Color Background

Default application background color for Nordhealth. Should be set to either html or body element.

var(--n-color-background)

15.38

#21252c

Color Surface Raised

Default raised surface color for Nordhealth. Use this when you need to separate a specific layer from the surface color, e.g. table headers.

var(--n-color-surface-raised)

7.24

#fa8d2e

Color Status Warning

Default warning status color for Nordhealth. Used to display information that needs user’s attention and may require further steps.

var(--n-color-status-warning)

6.33

10.59

#f5c642

Color Status Highlight

Default highlight status color for Nordhealth. Used to highlight specific items in the interface, like notifications.

var(--n-color-status-highlight)

4.87

#eb5656

Color Status Danger

Default danger status color for Nordhealth. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.

var(--n-color-status-danger)

5.2

#2ba168

Color Status Success

Default success status color for Nordhealth. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.

var(--n-color-status-success)

4.93

#b665ec

Color Status Info

Default info status color for Nordhealth. Used to convey general information that isn’t critical. For example, you might show an alert that asks for user feedback.

var(--n-color-status-info)

16.49

#1c1f26

Color Button

Default button background color for Nordhealth.

var(--n-color-button)

14.58

#252931

Color Button Hover

Default button hover background color for Nordhealth.

var(--n-color-button-hover)

5.6

#8f949e

Color Border Hover

Default border hover color for Nordhealth.

var(--n-color-border-hover)

5.6

#8f949e

Color Icon

Default icon color for Nordhealth.

var(--n-color-icon)

7.65

12.8

4.62

#dedfe1

Color Icon Hover

Default icon hover color for Nordhealth.

var(--n-color-icon-hover)

14.58

#252931

Color Active

Default active color for Nordhealth.

var(--n-color-active)

5.22

#2765e0

Color Primary

Primary color for Veterinary applications. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.

var(--n-color-primary)

6.23

#1d59ce

Color Primary Strong

Strong primary color for Veterinary applications. Used in primary color gradients, and as a primary button hover color.

var(--n-color-primary-strong)

16.48

#1f1f1f

Color Text

Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.

var(--n-color-text)

5.22

#2765e0

Color Text Link

Default link text color for Veterinary applications. Used for all paragraph level links in an user interface.

var(--n-color-text-link)

10.37

#404040

Color Text Weak

Weak text color for Veterinary applications. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.

var(--n-color-text-weak)

4.81

#727272

Color Text Weaker

Weaker text color for Veterinary applications. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.

var(--n-color-text-weaker)

5.14

8.6

#b8b8b8

Color Text Weakest

Weakest text color for Veterinary applications. Used for e.g. disabled input text and placeholder text in focused inputs.

var(--n-color-text-weakest)

4.7

10.2

17.06

6.17

#ffffff

Color Text Inverse

Default inverse text color for Veterinary applications. Used when text sits on a dark background.

var(--n-color-text-inverse)

4.61

#cb4848

Color Text Error

Default text color for error messages for Veterinary applications.

var(--n-color-text-error)

9.68

16.19

5.85

#f8f9fa

Color Nav Surface

Default surface color for sidebar navigation. Used as alias for default button hover background and active hover color as well.

var(--n-color-nav-surface)

6.14

#9b9b9b

Color Nav Heading

Default heading color for sidebar navigation.

var(--n-color-nav-heading)

8.74

14.61

5.28

#eaeef0

Color Nav Hover

Default hover color for sidebar navigation.

var(--n-color-nav-hover)

7.98

13.34

4.82

#e3e3e8

Color Border

Default border color for Veterinary applications.

var(--n-color-border)

5.87

9.81

#c5c4c5

Color Border Strong

Strong border color for Veterinary applications for highlighting specific parts in the user interface.

var(--n-color-border-strong)

4.7

10.2

17.06

6.17

#ffffff

Color Surface

Default application surface color for Veterinary applications. Use this for e.g. card backgrounds.

var(--n-color-surface)

4.7

10.2

17.06

6.17

#ffffff

Color Background

Default application background color for Veterinary applications. Should be set to either html or body element.

var(--n-color-background)

4.54

9.86

16.5

5.96

#fbfbfc

Color Surface Raised

Default raised surface color color for Veterinary applications. Use this when you need to separate a specific layer from the surface color, e.g. table headers.

var(--n-color-surface-raised)

6.97

#f48b2f

Color Status Warning

Default warning status color for Veterinary applications. Used to display information that needs user’s attention and may require further steps.

var(--n-color-status-warning)

6.44

10.77

#f9c739

Color Status Highlight

Default highlight status color for Veterinary applications. Used to highlight specific items in the interface, like notifications.

var(--n-color-status-highlight)

4.61

#cb4848

Color Status Danger

Default danger status color for Veterinary applications. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.

var(--n-color-status-danger)

4.63

#0d864c

Color Status Success

Default success status color for Veterinary applications. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.

var(--n-color-status-success)

6

#8736d3

Color Status Info

Default info status color for Veterinary applications. Used to convey general information that isn’t critical. For example, you might show an alert that asks for user feedback.

var(--n-color-status-info)

4.7

10.2

17.06

6.17

#ffffff

Color Button

Default button background color for Veterinary applications.

var(--n-color-button)

9.68

16.19

5.85

#f8f9fa

Color Button Hover

Default button hover background color for Veterinary applications.

var(--n-color-button-hover)

4.81

#727272

Color Border Hover

Default border hover color for Veterinary applications.

var(--n-color-border-hover)

4.81

#727272

Color Icon

Default icon color for Veterinary applications.

var(--n-color-icon)

16.48

#1f1f1f

Color Icon Hover

Default icon hover color for Veterinary applications.

var(--n-color-icon-hover)

9.68

16.19

5.85

#f8f9fa

Color Active

Default active color for Veterinary applications.

var(--n-color-active)

7.24

#104dc6

Color Primary

Primary color for Veterinary applications. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.

var(--n-color-primary)

8.52

#0e44af

Color Primary Strong

Strong primary color for Veterinary applications. Used in primary color gradients, and as a primary button hover color.

var(--n-color-primary-strong)

7.65

12.8

4.62

#dedfe1

Color Text

Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.

var(--n-color-text)

4.73

#4c83f1

Color Text Link

Default link text color for Veterinary applications. Used for all paragraph level links in an user interface.

var(--n-color-text-link)

7.65

12.8

4.62

#dedfe1

Color Text Weak

Weak text color for Veterinary applications. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.

var(--n-color-text-weak)

5.6

#8f949e

Color Text Weaker

Weaker text color for Veterinary applications. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.

var(--n-color-text-weaker)

7.02

#555962

Color Text Weakest

Weakest text color for Veterinary applications. Used for e.g. disabled input text and placeholder text in focused inputs.

var(--n-color-text-weakest)

4.7

10.2

17.06

6.17

#ffffff

Color Text Inverse

Default inverse text color for Veterinary applications. Used when text sits on a dark background.

var(--n-color-text-inverse)

5.24

#e36868

Color Text Error

Default text color for error messages for Veterinary applications.

var(--n-color-text-error)

14.58

#252931

Color Nav Surface

Default surface color for sidebar navigation. Used as alias for default button hover background and active hover color as well.

var(--n-color-nav-surface)

4.59

7.67

#aaaeb6

Color Nav Heading

Default heading color for sidebar navigation.

var(--n-color-nav-heading)

13.06

#2c313a

Color Nav Hover

Default hover color for sidebar navigation.

var(--n-color-nav-hover)

12.52

#2f343c

Color Border

Default border color for Veterinary applications.

var(--n-color-border)

9.96

#3d434d

Color Border Strong

Strong border color for Veterinary applications for highlighting specific parts in the user interface.

var(--n-color-border-strong)

16.49

#1c1f26

Color Surface

Default application surface color for Veterinary applications. Use this for e.g. card backgrounds.

var(--n-color-surface)

17.26

#181b20

Color Background

Default application background color for Veterinary applications. Should be set to either html or body element.

var(--n-color-background)

15.38

#21252c

Color Surface Raised

Default raised surface color for Veterinary applications. Use this when you need to separate a specific layer from the surface color, e.g. table headers.

var(--n-color-surface-raised)

7.11

#ed9230

Color Status Warning

Default warning status color for Veterinary applications. Used to display information that needs user’s attention and may require further steps.

var(--n-color-status-warning)

5.98

10

#e9c254

Color Status Highlight

Default highlight status color for Veterinary applications. Used to highlight specific items in the interface, like notifications.

var(--n-color-status-highlight)

5.24

#e36868

Color Status Danger

Default danger status color for Veterinary applications. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.

var(--n-color-status-danger)

4.84

#329a68

Color Status Success

Default success status color for Veterinary applications. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.

var(--n-color-status-success)

4.65

#a867e4

Color Status Info

Default info status color for Veterinary applications. Used to convey general information that isn’t critical. For example, you might show an alert that asks for user feedback.

var(--n-color-status-info)

16.49

#1c1f26

Color Button

Default button background color for Veterinary applications.

var(--n-color-button)

14.58

#252931

Color Button Hover

Default button hover background color for Veterinary applications.

var(--n-color-button-hover)

5.6

#8f949e

Color Border Hover

Default border hover color for Veterinary applications.

var(--n-color-border-hover)

5.6

#8f949e

Color Icon

Default icon color for Veterinary applications.

var(--n-color-icon)

7.65

12.8

4.62

#dedfe1

Color Icon Hover

Default icon hover color for Veterinary applications.

var(--n-color-icon-hover)

14.58

#252931

Color Active

Default active color for Veterinary applications.

var(--n-color-active)

4.5

#078856

Color Primary

Primary color for Healthcare applications. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.

var(--n-color-primary)

5.96

#0d724b

Color Primary Strong

Strong primary color for Healthcare applications. Used in primary color gradients, and as a primary button hover color.

var(--n-color-primary-strong)

16.07

#23211d

Color Text

Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.

var(--n-color-text)

4.5

#078856

Color Text Link

Default link text color for Healthcare applications. Used for all paragraph level links in an user interface.

var(--n-color-text-link)

10.24

#41413e

Color Text Weak

Weak text color for Healthcare applications. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.

var(--n-color-text-weak)

4.68

#75746f

Color Text Weaker

Weaker text color for Healthcare applications. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.

var(--n-color-text-weaker)

5.2

8.7

#bab9b7

Color Text Weakest

Weakest text color for Healthcare applications. Used for e.g. disabled input text and placeholder text in focused inputs.

var(--n-color-text-weakest)

4.7

10.2

17.06

6.17

#ffffff

Color Text Inverse

Default inverse text color for Healthcare applications. Used when text sits on a dark background.

var(--n-color-text-inverse)

4.84

#ce3b47

Color Text Error

Default text color for error messages in Healthcare applications.

var(--n-color-text-error)

9.44

15.79

5.71

#f7f6f3

Color Nav Surface

Default surface color for sidebar navigation. Used as alias for default button hover background and active hover color as well.

var(--n-color-nav-surface)

6.28

#9e9d98

Color Nav Heading

Default heading color for sidebar navigation.

var(--n-color-nav-heading)

8.49

14.2

5.13

#edeae3

Color Nav Hover

Default hover color for sidebar navigation.

var(--n-color-nav-hover)

7.96

13.31

4.81

#e4e3e2

Color Border

Default border color for Healthcare applications.

var(--n-color-border)

5.97

9.98

#c7c6c2

Color Border Strong

Strong border color for Healthcare applications for highlighting specific parts in the user interface.

var(--n-color-border-strong)

4.7

10.2

17.06

6.17

#ffffff

Color Surface

Default application surface color for Healthcare applications. Use this for e.g. card backgrounds.

var(--n-color-surface)

4.7

10.2

17.06

6.17

#ffffff

Color Background

Default application background color for Healthcare applications. Should be set to either html or body element.

var(--n-color-background)

9.76

16.33

5.9

#fafaf8

Color Surface Raised

Default raised surface color for Healthcare applications. Use this when you need to separate a specific layer from the surface color, e.g. table headers.

var(--n-color-surface-raised)

6.53

#e68947

Color Status Warning

Default warning status color for Healthcare applications. Used to display information that needs user’s attention and may require further steps.

var(--n-color-status-warning)

6.28

10.51

#f2c642

Color Status Highlight

Default highlight status color for Healthcare applications. Used to highlight specific items in the interface, like notifications.

var(--n-color-status-highlight)

4.84

#ce3b47

Color Status Danger

Default danger status color for Healthcare applications. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.

var(--n-color-status-danger)

4.71

#108457

Color Status Success

Default success status color for Healthcare applications. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.

var(--n-color-status-success)

7.04

#8130b0

Color Status Info

Default info status color for Healthcare applications. Used to convey general information that isn’t critical. For example, you might show an alert that asks for user feedback.

var(--n-color-status-info)

4.7

10.2

17.06

6.17

#ffffff

Color Button

Default button background color for Healthcare applications.

var(--n-color-button)

9.44

15.79

5.71

#f7f6f3

Color Button Hover

Default button hover background color for Healthcare applications.

var(--n-color-button-hover)

4.68

#75746f

Color Border Hover

Default border hover color for Healthcare applications.

var(--n-color-border-hover)

4.68

#75746f

Color Icon

Default icon color for Healthcare applications.

var(--n-color-icon)

16.07

#23211d

Color Icon Hover

Default icon hover color for Healthcare applications.

var(--n-color-icon-hover)

9.44

15.79

5.71

#f7f6f3

Color Active

Default active color for Healthcare applications.

var(--n-color-active)

4.96

#0f8054

Color Primary

Primary color for Healthcare applications. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.

var(--n-color-primary)

5.96

#0d724b

Color Primary Strong

Strong primary color for Healthcare applications. Used in primary color gradients, and as a primary button hover color.

var(--n-color-primary-strong)

8.09

13.53

4.89

#e6e5e0

Color Text

Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.

var(--n-color-text)

5.09

#13a069

Color Text Link

Default link text color for Healthcare applications. Used for all paragraph level links in an user interface.

var(--n-color-text-link)

8.09

13.53

4.89

#e6e5e0

Color Text Weak

Weak text color for Healthcare applications. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.

var(--n-color-text-weak)

5.7

#979590

Color Text Weaker

Weaker text color for Healthcare applications. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.

var(--n-color-text-weaker)

6.78

#5d5b57

Color Text Weakest

Weakest text color for Healthcare applications. Used for e.g. disabled input text and placeholder text in focused inputs.

var(--n-color-text-weakest)

4.7

10.2

17.06

6.17

#ffffff

Color Text Inverse

Default inverse text color for Healthcare applications. Used when text sits on a dark background.

var(--n-color-text-inverse)

4.88

#e95858

Color Text Error

Default text color for error messages in Healthcare applications.

var(--n-color-text-error)

14.36

#2b2a26

Color Nav Surface

Default surface color for sidebar navigation. Used as alias for default button hover background and active hover color as well.

var(--n-color-nav-surface)

5.75

#979690

Color Nav Heading

Default heading color for sidebar navigation.

var(--n-color-nav-heading)

12.84

#33322d

Color Nav Hover

Default hover color for sidebar navigation.

var(--n-color-nav-hover)

11.55

#3a3936

Color Border

Default border color for Healthcare applications.

var(--n-color-border)

8.8

#4d4a47

Color Border Strong

Strong border color for Healthcare applications for highlighting specific parts in the user interface.

var(--n-color-border-strong)

15.91

#23221f

Color Surface

Default application surface color for Healthcare applications. Use this for e.g. card backgrounds.

var(--n-color-surface)

16.88

#1d1d1b

Color Background

Default application background color for Healthcare applications. Should be set to either html or body element.

var(--n-color-background)

14.95

#282723

Color Surface Raised

Default raised surface color for Healthcare applications. Use this when you need to separate a specific layer from the surface color, e.g. table headers.

var(--n-color-surface-raised)

7.01

#f78a2b

Color Status Warning

Default warning status color for Healthcare applications. Used to display information that needs user’s attention and may require further steps.

var(--n-color-status-warning)

6.07

10.15

#f6c028

Color Status Highlight

Default highlight status color for Healthcare applications. Used to highlight specific items in the interface, like notifications.

var(--n-color-status-highlight)

4.88

#e95858

Color Status Danger

Default danger status color for Healthcare applications. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.

var(--n-color-status-danger)

5.05

#199f6b

Color Status Success

Default success status color for Healthcare applications. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.

var(--n-color-status-success)

4.86

#ba5bfb

Color Status Info

Default info status color for Healthcare applications. Used to convey general information that isn’t critical. For example, you might show an alert that asks for user feedback.

var(--n-color-status-info)

15.91

#23221f

Color Button

Default button background color for Healthcare applications.

var(--n-color-button)

14.36

#2b2a26

Color Button Hover

Default button hover background color for Healthcare applications.

var(--n-color-button-hover)

5.7

#979590

Color Border Hover

Default border hover color for Healthcare applications.

var(--n-color-border-hover)

5.7

#979590

Color Icon

Default icon color for Healthcare applications.

var(--n-color-icon)

8.09

13.53

4.89

#e6e5e0

Color Icon Hover

Default icon hover color for Healthcare applications.

var(--n-color-icon-hover)

14.36

#2b2a26

Color Active

Default active color for Healthcare applications.

var(--n-color-active)

Border Radius #

ExampleDescriptionToken

0.02em

Border Radius Sharp

This is sharp border radius.

var(--n-border-radius-sharp)

3px

Border Radius Small

This is small border radius.

var(--n-border-radius-s)

5px

Border Radius

This is the default border radius.

var(--n-border-radius)

999px

Border Radius Pill

This is for creating pill shaped tags and similar.

var(--n-border-radius-pill)

50%

Border Radius Circle

This is for creating rounded avatars and similar objects.

var(--n-border-radius-circle)

Box Shadow #

ExampleDescriptionToken

0 1px 3px rgba(12, 12, 12, 0.1)

Box Shadow

Default box shadow. Used with buttons, active states, and such.

var(--n-box-shadow)

0 1px 8px rgba(12, 12, 12, 0.05)

Box Shadow Header

Default box shadow for header component.

var(--n-box-shadow-header)

0 0 0 1px var(--n-color-border), 0 1px 8px rgba(12, 12, 12, 0.05)

Box Shadow Card

Default box shadow for card component that creates both shadow and border around the card.

var(--n-box-shadow-card)

0 0 0 1px var(--n-color-border), 0 5px 17px rgba(12, 12, 12, 0.14)

Box Shadow Nav

Default box shadow for navigation component. Used in collapsed state.

var(--n-box-shadow-nav)

0 4px 12px rgba(12, 12, 12, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)

Box Shadow Popout

Default box shadow to be used with all pop out windows.

var(--n-box-shadow-popout)

0 24px 38px 3px rgba(12, 12, 12, 0.14), 0px 9px 46px 8px rgba(12, 12, 12, 0.02), 0px 11px 15px -7px rgba(12, 12, 12, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)

Box Shadow Modal

Default box shadow for modal component. Used in dialogs, modals, and such.

var(--n-box-shadow-modal)

0 1px 3px rgba(0, 0, 0, 0.2)

Box Shadow

Default box shadow. Used with buttons, active states, and such.

var(--n-box-shadow)

0 1px 8px rgba(0, 0, 0, 0.15)

Box Shadow Header

Default box shadow for header component.

var(--n-box-shadow-header)

0 0 0 1px var(--n-color-border), 0 1px 8px rgba(0, 0, 0, 0.15)

Box Shadow Card

Default box shadow for card component that creates both shadow and border around the card.

var(--n-box-shadow-card)

0 0 0 1px var(--n-color-border), 0 5px 17px rgba(0, 0, 0, 0.24)

Box Shadow Nav

Default box shadow for navigation component. Used in collapsed state.

var(--n-box-shadow-nav)

0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--n-color-border)

Box Shadow Popout

Default box shadow to be used with all pop out windows.

var(--n-box-shadow-popout)

0 0 0 1px var(--n-color-border), 0 24px 38px 3px rgba(0, 0, 0, 0.32), 0px 9px 46px 8px rgba(0, 0, 0, 0.2), 0px 11px 15px -7px rgba(0, 0, 0, 0.28)

Box Shadow Modal

Default box shadow for modal component. Used in dialogs, modals, and such.

var(--n-box-shadow-modal)

Font Size #

ExampleDescriptionToken

Quick brown fox

36px

Font Size XXXL

This is the xxx-large font size.

var(--n-font-size-xxxl)

Quick brown fox

24px

Font Size XXL

This is the xx-large font size.

var(--n-font-size-xxl)

Quick brown fox

20px

Font Size XL

This is the x-large font size.

var(--n-font-size-xl)

Quick brown fox

16px

Font Size L

This is the large font size.

var(--n-font-size-l)

Quick brown fox

14px

Font Size M

This is the base font size.

var(--n-font-size-m)

Quick brown fox

12px

Font Size S

This is the small font size.

var(--n-font-size-s)

Quick brown fox

11px

Font Size XS

This is the x-small font size.

var(--n-font-size-xs)

Font #

ExampleDescriptionToken

Quick brown fox

'Nordhealth Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'

Font Family

Inter is the default UI font family utilized by all our applications.

var(--n-font-family)

Quick brown fox

'Nordhealth Mono', monospace, monospace

Font Family Code

This font family is utilized by all our themes for code.

var(--n-font-family-code)

iIl!1230

'kern' 1, 'tnum' 1, 'calt' 1, 'case' 1, 'cv05' 1, 'zero' 1, 'cv08' 0, 'ss03' 1

Font Features

This token includes the default font feature settings to be used together with our font family.

var(--n-font-features)

iIl!1230

'kern' 1, 'tnum' 0, 'calt' 1, 'case' 1, 'cv05' 1, 'zero' 0, 'cv08' 0, 'ss03' 1

Font Features Reduced

This token includes a font feature variation with reduced legibility. This is mainly used for display headings.

var(--n-font-features-reduced)

Quick brown fox

400

Font Weight Default

Default font weight for body text.

var(--n-font-weight)

Quick brown fox

500

Font Weight Active

Default font weight for active items.

var(--n-font-weight-active)

Quick brown fox

600

Font Weight Heading

Default font weight for headings.

var(--n-font-weight-heading)

Quick brown fox

670

Font Weight Strong

Default font weight for strong.

var(--n-font-weight-strong)

Gradient #

ExampleDescriptionToken

linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0))

Gradient Skeleton

Default skeleton gradient. Used for loading skeletons in the user interface.

var(--n-gradient-skeleton)

linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0))

Gradient Skeleton

Default skeleton gradient. Used for loading skeletons in the user interface.

var(--n-gradient-skeleton)

Line Height #

ExampleDescriptionToken

1.15

1.15 renders as 16.099999999999998px with 14px font.

Line Height Tight

This token can be used when you don’t want line height taking any extra space.

var(--n-line-height-tight)

1.2

1.2 renders as 16.8px with 14px font.

Line Height Heading

This is the default line height for headings.

var(--n-line-height-heading)

1.5

1.5 renders as 21px with 14px font.

Line Height

This is the default line height for body text.

var(--n-line-height)

20px

20px renders as NaNpx with 14px font.

Line Height Form

This is the default line height for form inputs, textareas and buttons.

var(--n-line-height-form)

Size #

ExampleDescriptionToken

14px

Size Icon Input

This is a size for icons that are used inside form inputs.

var(--n-size-icon-input)

8px

Size Icon S

This is a small size for icons.

var(--n-size-icon-s)

12px

Size Icon M

This is a medium size for icons.

var(--n-size-icon-m)

16px

Size Icon L

This is a large size for icons.

var(--n-size-icon-l)

Space #

ExampleDescriptionToken

72px

Space XXL

This is a xx-large space.

var(--n-space-xxl)

36px

Space XL

This is a x-large space.

var(--n-space-xl)

24px

Space L

This is a large space.

var(--n-space-l)

16px

Space M

This is a medium space.

var(--n-space-m)

8px

Space S

This is a small space.

var(--n-space-s)

Transition #

ExampleDescriptionToken

0.05s ease

Transition Quickly

Use this design token for a quick transition. Most often used for quick hover effects on things such as links, icons and more.

var(--n-transition-quickly)

0.2s ease

Transition Slowly

Use this design token for a slow transition. Used for example in modals, tooltips, collapsing elements, and more.

var(--n-transition-slowly)

Z-index #

ExampleDescriptionToken

-999999

Z-Index: Deep

Deep z-index is used to stack something behind everything else.

var(--n-index-deep)

1

Z-Index: Default

The default z-index for components and elements inside components.

var(--n-index-default)

100

Z-Index: Masked

Default z-index for masked interface elements.

var(--n-index-masked)

200

Z-Index: Mask

Default z-index for masking interface elements.

var(--n-index-mask)

300

Z-Index: Sticky

Default z-index for sticky interface elements.

var(--n-index-sticky)

400

Z-Index: Header

Default z-index for header.

var(--n-index-header)

500

Z-Index: Toast

Default z-index for toast messages.

var(--n-index-toast)

600

Z-Index: Dropdown

Default z-index for dropdowns which makes sure the dropdown stacks above toasts and sticky elements.

var(--n-index-dropdown)

700

Z-Index: Overlay

Default z-index for modal and popup overlays.

var(--n-index-overlay)

800

Z-Index: Spinner

Default z-index for spinners, stacking on top of overlay.

var(--n-index-spinner)

900

Z-Index: Modal

Default z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible.

var(--n-index-modal)

950

Z-Index: Popout

Default z-index for popouts that stacks on top of all other elements.

var(--n-index-popout)

Usage #

Design tokens are a central location to store design related information such as colors, fonts, sizes and transitions. These raw values are automatically transformed to different formats like Sass, CSS, JSON and more.

Nord Design System uses design tokens instead of hard coded values to ensure a better UI consistency across different platforms.

While this package has now reached a stable state, please keep in mind that we’re still working on some aspects like for examples shades and tints for the status colors.

Installation #

Before moving further, 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 Design Tokens 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 install Nord Design Tokens by following the instructions below.

Install using NPM #

Run in your project or website root directory (where package.json lives):

npm install @nordhealth/tokens

Importing CSS Custom Properties #

CSS Custom properties (sometimes referred to as CSS variables) are the recommended way to use Nord’s Design Tokens. You can import them in plain CSS or Sass:

/* Import as CSS variables */
@import "~@nordhealth/tokens/lib/tokens.custom-properties.css";

.example {
color: var(--n-color-primary);
}

If you’re not using Webpack or similar tool for your build process, you may have to provide the full path to Node Modules:

// Import as basic variables
@import "/node_modules/@nordhealth/tokens/lib/tokens.custom-properties.css";

.example {
color: var(--n-color-primary);
}

Importing in HTML #

CSS Custom properties can be imported in HTML as well. This is the most common and straightforward way to use them. Add the following to the <head> section of your app to get started:

<link rel="stylesheet" href="https://nordcdn.net/ds/tokens/2.0.0/tokens.custom-properties.css" integrity="sha384-EH/+icjGq0rAJYIrGWilIc3W7yX40/nwJ1xfuoRSkskcn7b8eDCIZGMBpU9y3Amf" crossorigin="anonymous" />

Importing in JavaScript #

In JavaScript, token names are formatted in lower camelCase. To import the design tokens, require the provided common.js module:

// Import design tokens
const tokens = require("@nordhealth/tokens");

// Console.log primary color value
console.log(tokens.nColorPrimary);

In JSON, design token names are formatted in snake_case:

// Import design tokens
const tokens = require("@nordhealth/tokens/lib/tokens.json");

// Console.log primary color value
console.log(tokens["n_color_primary"]);

If your project supports ECMAScript Modules, you can also use the import syntax:

// Import design tokens
import * as tokens from "@nordhealth/tokens";

// …or… import a single design token
import { nColorPrimary } from "@nordhealth/tokens";

Importing in Sass #

Sass variables and map keys are formatted in kebab-case. There’re a few ways to import them. The simplest way is to reference and import the tokens partial directly:

// Import as basic variables
@import "~@nordhealth/tokens/lib/tokens.scss";

.example {
color: $n-color-primary;
}

// Import a Sass map of all tokens
@import "~@nordhealth/tokens/lib/tokens.map.scss";

.example {
color: map-get($tokens-map, "n-color-primary");
}

Accessing themes in JavaScript and Sass #

All our theme specific tokens have an appendix in their name. We don’t surface this in the token documentation because the recommended way to use the tokens is via CSS Custom Properties that allows us to use the Nord Themes package to override the default colors.

If you have a need to directly access specific theme’s colors in e.g. Sass or JavaScript, you can do it by adding the following appendix into the color name:

.example {
// To access veterinary theme colors, use -vet appendix
color: $n-color-primary-vet;

// To access health theme colors, use -health appendix
color: $n-color-primary-health;
}

Same when using our Common.js module:

// To access veterinary theme colors, use Vet appendix
console.log(tokens.nColorPrimaryVet);

// To access health theme colors, use Health appendix
console.log(tokens.nColorPrimaryHealth);

List of all available formats #

Below you can find a list of all available formats and paths to them.

Testing integration #

To quickly test if Nord Design Tokens are correctly installed, follow the below steps.

  1. Require common.js module: const tokens = require("@nordhealth/tokens")
  2. Use console log to output a list of all tokens: console.log(tokens)
  3. If everything works, you should now see a long list of Design Tokens in your console.

Examples #

Developing tokens #

The design tokens package in Nord Design System can be found under packages/tokens. It’s built with Theo that transforms YAML based design tokens into a variety of output formats.

The following are the most commonly used commands during development:

Can I use Nord in my own project? #

Nord Design System is solely meant for building digital products and experiences for Nordhealth. Please see the terms of use for full license details.

Getting support #

If you experience any issues while getting started with Nord Design Tokens, please head over to the Support page for more guidelines and help.

 
Edit page