Design Tokens7.1.2

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 Accent

Accent 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-accent)

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 on Accent

Default text on accent color for Nordhealth. Used when text sits on the acccent color or a dark background.

var(--n-color-text-on-accent)

4.67

#d24023

Color Text Error

Default text color for error messages for Nordhealth. Also used for the danger badge text.

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

6.31

#b23015

Color Text Danger

Default text color for danger messages for Nordhealth. Also used for the danger badge text.

var(--n-color-text-danger)

5.76

#117627

Color Text Success

Default text color for success messages for Nordhealth. Also used for the success badge text.

var(--n-color-text-success)

7.06

#55595d

Color Text Neutral

Neutral text color. Used for the neutral badge text.

var(--n-color-text-neutral)

17.93

#11181c

Color Text Neutral Strong

Strong neutral text color. Used for the strong neutral badge text.

var(--n-color-text-neutral-strong)

4.91

#946900

Color Text Warning

Warning text color. Used for the warning badge text.

var(--n-color-text-warning)

14.47

#332810

Color Text Warning Strong

Strong warning text color. Used for the strong warning badge text.

var(--n-color-text-warning-strong)

6.91

#793aaf

Color Text Highlight

Highlight text color. Used for the highlight badge text.

var(--n-color-text-highlight)

7.08

#3451b2

Color Text Info

Info text color. Used for the info badge text.

var(--n-color-text-info)

5.97

#016d83

Color Text Progress

Progress text color.

var(--n-color-text-progress)

4.7

10.2

17.06

6.17

#ffffff

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)

9.57

16.01

5.79

#f6f8f8

Color Nav Hover

Default hover color for sidebar navigation.

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

7.52

12.58

4.55

#d8dee4

Color Border

Default border color for Nordhealth.

var(--n-color-border)

5.83

9.75

#bcc5cc

Color Border Strong

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

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

7.39

12.35

#d7dce0

Color Border Neutral

Neutral border color. Used for the neutral badge border style.

var(--n-color-border-neutral)

7.34

12.27

#f8d87c

Color Border Warning

Warning border color. Used for the warning badge border style.

var(--n-color-border-warning)

6.9

11.55

#e3ccf4

Color Border Highlight

Highlight border color. Used for the highlight badge border style.

var(--n-color-border-highlight)

6.79

11.36

#fac7be

Color Border Danger

Danger border color. Used for the danger badge border style.

var(--n-color-border-danger)

6.94

11.6

#b7dfba

Color Border Success

Success border color. Used for the success badge border style.

var(--n-color-border-success)

6.89

11.53

#c6d4f9

Color Border Info

Info border color. Used for the info badge border style.

var(--n-color-border-info)

7.43

12.42

#b0e5ee

Color Border Progress

Progress border color.

var(--n-color-border-progress)

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.53

9.84

16.46

5.95

#fafbfb

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)

8.31

13.9

5.02

#e6e8eb

Color Surface Lowered

Default lowered surface color for Nordhealth. Use this when you need to make a specific layer to appear lower than the surface color, e.g. progress bar.

var(--n-color-surface-lowered)

rgba(144, 152, 152, 0.4)

Color Overlay

Default overlay color for Nordhealth. Use this to distinguish modal and popout layers from the layer underneath.

var(--n-color-overlay)

4.7

10.2

17.06

6.17

#ffffff

Color Status Neutral

Default neutral status color for Nordhealth.

var(--n-color-status-neutral)

6.7

11.21

#f6cd5a

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)

5.18

#8e4ec6

Color Status Highlight

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

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

4.67

#d24023

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.66

#1d8633

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.21

#3e63dd

Color Status Info

Default info status color for Nordhealth. Used to convey something informal.

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

4.67

#007f99

Color Status Progress

Default progress status color for Nordhealth. Used to convey something is in progress.

var(--n-color-status-progress)

4.65

#e75436

Color Status Notification

Default notification indicator color for Nordhealth. Used to convey unread information.

var(--n-color-status-notification)

9.17

15.34

5.54

#f1f3f5

Color Status Neutral Weak

Weak neutral status color for Nordhealth. Used for the badge default state.

var(--n-color-status-neutral-weak)

9.72

16.26

5.88

#fffae1

Color Status Warning Weak

Weak warning status color. Used to display information that needs a user’s attention and may require further steps.

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

9.25

15.47

5.59

#f9f1fe

Color Status Highlight Weak

Weak highlight status color. Used to highlight specific items in the interface.

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

9.21

15.4

5.57

#fff0ee

Color Status Danger Weak

Weak danger status color. 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-weak)

9.37

15.67

5.66

#ebf9eb

Color Status Success Weak

Weak success status color. 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-weak)

9.27

15.51

5.61

#f0f4ff

Color Status Info Weak

Weak info status color. Used to convey something informal.

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

9.4

15.71

5.68

#e7f9fb

Color Status Progress Weak

Weak progress status color. Used to convey something is in progress.

var(--n-color-status-progress-weak)

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)

9.57

16.01

5.79

#f6f8f8

Color Header

Default header background color for modals.

var(--n-color-header)

6.17

#3559c7

Color Accent Secondary

Used for theming purposes to style the background of the top bar in addition to the navigation header. By default, this aliases the accent color, but can be set to a custom color if necessary.

var(--n-color-accent-secondary)

8.45

#2a479d

Color Accent

Accent 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-accent)

20.16

#020712

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)

8.45

#2a479d

Color Text Link

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

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

20.16

#020712

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)

20.16

#020712

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)

4.62

#798790

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 on Accent

Default text on accent color for Nordhealth. Used when text sits on the acccent color or a dark background.

var(--n-color-text-on-accent)

6

#c22000

Color Text Error

Default text color for error messages for Nordhealth.

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

20.16

#020712

Color Text Danger

Default text color for danger messages for Nordhealth. Also used for the danger badge text.

var(--n-color-text-danger)

20.16

#020712

Color Text Success

Default text color for success messages for Nordhealth. Also used for the success badge text.

var(--n-color-text-success)

20.16

#020712

Color Text Neutral

Neutral text color. Used for the neutral badge text.

var(--n-color-text-neutral)

20.16

#020712

Color Text Neutral Strong

Strong neutral text color. Used for the strong neutral badge text.

var(--n-color-text-neutral-strong)

20.16

#020712

Color Text Warning

Warning text color. Used for the warning badge text.

var(--n-color-text-warning)

20.16

#020712

Color Text Warning Strong

Strong warning text color. Used for the strong warning badge text.

var(--n-color-text-warning-strong)

20.16

#020712

Color Text Highlight

Highlight text color. Used for the highlight badge text.

var(--n-color-text-highlight)

20.16

#020712

Color Text Info

Info text color. Used for the info badge text.

var(--n-color-text-info)

20.16

#020712

Color Text Progress

Progress text color.

var(--n-color-text-progress)

4.7

10.2

17.06

6.17

#ffffff

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)

20.16

#020712

Color Nav Heading

Default heading color for sidebar navigation.

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

8.07

13.5

4.88

#e2e5e9

Color Nav Hover

Default hover color for sidebar navigation.

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

7.27

#9cabba

Color Border

Default border color for Nordhealth.

var(--n-color-border)

#687a88

Color Border Strong

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

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

5.71

9.54

#bac3ca

Color Border Neutral

Neutral border color. Used for the neutral badge border style.

var(--n-color-border-neutral)

6.88

11.5

#ffce42

Color Border Warning

Warning border color. Used for the warning badge border style.

var(--n-color-border-warning)

7.45

#cf92fc

Color Border Highlight

Highlight border color. Used for the highlight badge border style.

var(--n-color-border-highlight)

4.87

8.14

#ff9785

Color Border Danger

Danger border color. Used for the danger badge border style.

var(--n-color-border-danger)

6.64

11.1

#7ee786

Color Border Success

Success border color. Used for the success badge border style.

var(--n-color-border-success)

4.7

7.85

#8faeff

Color Border Info

Info border color. Used for the info badge border style.

var(--n-color-border-info)

6.24

10.44

#85d7e5

Color Border Progress

Progress border color.

var(--n-color-border-progress)

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)

9.04

15.13

5.47

#eef2f2

Color Background

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

var(--n-color-background)

9.04

15.13

5.47

#eef2f2

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.4

10.7

#c9cdd4

Color Surface Lowered

Default lowered surface color for Nordhealth. Use this when you need to make a specific layer to appear lower than the surface color, e.g. progress bar.

var(--n-color-surface-lowered)

rgba(2, 7, 18, 0.4)

Color Overlay

Default overlay color for Nordhealth. Use this to distinguish modal and popout layers from the layer underneath.

var(--n-color-overlay)

4.7

10.2

17.06

6.17

#ffffff

Color Status Neutral

Default neutral status color for Nordhealth.

var(--n-color-status-neutral)

6.4

10.7

#ffc41f

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)

7.3

#7800e0

Color Status Highlight

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

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

6

#c22000

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)

6.3

#007018

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)

7.95

#0035e5

Color Status Info

Default info status color for Nordhealth. Used to convey something informal.

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

4.67

#007f99

Color Status Progress

Default progress status color for Nordhealth. Used to convey something is in progress.

var(--n-color-status-progress)

6

#c22000

Color Status Notification

Default notification indicator color for Nordhealth. Used to convey unread information.

var(--n-color-status-notification)

7.16

11.97

#d2d9df

Color Status Neutral Weak

Weak neutral status color for Nordhealth. Used for the badge default state.

var(--n-color-status-neutral-weak)

8.96

14.98

5.41

#fff1ad

Color Status Warning Weak

Weak warning status color. Used to display information that needs a user’s attention and may require further steps.

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

6.34

10.61

#e5bdff

Color Status Highlight Weak

Weak highlight status color. Used to highlight specific items in the interface.

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

6.74

11.28

#ffc4bd

Color Status Danger Weak

Weak danger status color. 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-weak)

8.41

14.07

5.08

#b9f9b9

Color Status Success Weak

Weak success status color. 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-weak)

6.53

10.92

#bdceff

Color Status Info Weak

Weak info status color. Used to convey something informal.

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

8.17

13.66

4.94

#bdeff4

Color Status Progress Weak

Weak progress status color. Used to convey something is in progress.

var(--n-color-status-progress-weak)

4.7

10.2

17.06

6.17

#ffffff

Color Button

Default button background color for Nordhealth.

var(--n-color-button)

9.04

15.13

5.47

#eef2f2

Color Button Hover

Default button hover background color for Nordhealth.

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

20.16

#020712

Color Border Hover

Default border hover color for Nordhealth.

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

20.16

#020712

Color Icon

Default icon color for Nordhealth.

var(--n-color-icon)

20.16

#020712

Color Icon Hover

Default icon hover color for Nordhealth.

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

9.04

15.13

5.47

#eef2f2

Color Active

Default active color for Nordhealth.

var(--n-color-active)

9.04

15.13

5.47

#eef2f2

Color Header

Default header background color for modals.

var(--n-color-header)

8.45

#2a479d

Color Accent Secondary

Used for theming purposes to style the background of the top bar in addition to the navigation header. By default, this aliases the accent color, but can be set to a custom color if necessary.

var(--n-color-accent-secondary)

8.53

#2a469d

Color Accent

Accent 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-accent)

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 on Accent

Default text on accent color for Nordhealth. Used when text sits on the acccent color or a dark background.

var(--n-color-text-on-accent)

5.05

#cb3a1d

Color Text Error

Default text color for error messages for Nordhealth.

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

6.5

#f37e68

Color Text Danger

Default text color for danger messages for Nordhealth. Also used for the danger badge text.

var(--n-color-text-danger)

4.57

7.65

#63c174

Color Text Success

Default text color for success messages for Nordhealth.

var(--n-color-text-success)

6.53

#9ba1a6

Color Text Neutral

Neutral text color. Used for the neutral badge text.

var(--n-color-text-neutral)

8.7

14.56

5.26

#ecedee

Color Text Neutral Strong

Strong neutral text color. Used for the strong neutral badge text.

var(--n-color-text-neutral-strong)

7.4

#dba100

Color Text Warning

Warning text color. Used for the warning badge text.

var(--n-color-text-warning)

14.47

#332810

Color Text Warning Strong

Strong warning text color. Used for the strong warning badge text.

var(--n-color-text-warning-strong)

5.9

#bf7af0

Color Text Highlight

Highlight text color. Used for the highlight badge text.

var(--n-color-text-highlight)

6.43

#8099ff

Color Text Info

Info text color. Used for the info badge text.

var(--n-color-text-info)

5.14

8.6

#2fcada

Color Text Progress

Progress text color.

var(--n-color-text-progress)

14.56

#262930

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)

12.38

#313538

Color Border Neutral

Neutral border color. Used for the neutral badge border style.

var(--n-color-border-neutral)

11.94

#473400

Color Border Warning

Warning border color. Used for the warning badge border style.

var(--n-color-border-warning)

12.29

#492461

Color Border Highlight

Highlight border color. Used for the highlight badge border style.

var(--n-color-border-highlight)

11.85

#652016

Color Border Danger

Danger border color. Used for the danger badge border style.

var(--n-color-border-danger)

11

#1d4427

Color Border Success

Success border color. Used for the success badge border style.

var(--n-color-border-success)

11.77

#22346e

Color Border Info

Info border color. Used for the info badge border style.

var(--n-color-border-info)

10.55

#064555

Color Border Progress

Progress border color.

var(--n-color-border-progress)

16.34

#1d2025

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.36

#22252b

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)

13.52

#2b2f31

Color Surface Lowered

Default lowered surface color for Nordhealth. Use this when you need to make a specific layer to appear lower than the surface color, e.g. progress bar.

var(--n-color-surface-lowered)

rgba(9, 10, 12, 0.5)

Color Overlay

Default overlay color for Nordhealth. Use this to distinguish modal and popout layers from the layer underneath.

var(--n-color-overlay)

16.34

#1d2025

Color Status Neutral

Default neutral status color for Nordhealth.

var(--n-color-status-neutral)

6.75

11.29

#fdcc44

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.26

#813fba

Color Status Highlight

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

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

5.05

#cb3a1d

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.82

#208333

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.85

#375bd2

Color Status Info

Default info status color for Nordhealth. Used to convey something informal.

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

4.67

#007f99

Color Status Progress

Default progress status color for Nordhealth. Used to convey something is in progress.

var(--n-color-status-progress)

4.65

#e75436

Color Status Notification

Default notification indicator color for Nordhealth. Used to convey unread information.

var(--n-color-status-notification)

15.67

#202425

Color Status Neutral Weak

Weak neutral status color for Nordhealth. Used for the badge default state.

var(--n-color-status-neutral-weak)

15.99

#2c2000

Color Status Warning Weak

Weak warning status color. Used to display information that needs a user’s attention and may require further steps.

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

15.74

#301a3a

Color Status Highlight Weak

Weak highlight status color. Used to highlight specific items in the interface.

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

15.84

#3b1813

Color Status Danger Weak

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

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

15.42

#14291a

Color Status Success Weak

Weak success status color. 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-weak)

15.75

#192140

Color Status Info Weak

Weak info status color. Used to convey something informal.

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

14.61

#082d35

Color Status Progress Weak

Weak progress status color. Used to convey something is in progress.

var(--n-color-status-progress-weak)

16.34

#1d2025

Color Button

Default button background color for Nordhealth.

var(--n-color-button)

14.56

#262930

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.56

#262930

Color Active

Default active color for Nordhealth.

var(--n-color-active)

14.56

#262930

Color Header

Default header background color for modals.

var(--n-color-header)

8.53

#2a469d

Color Accent Secondary

Used for theming purposes to style the background of the top bar in addition to the navigation header. By default, this aliases the accent color, but can be set to a custom color if necessary.

var(--n-color-accent-secondary)

6.26

#3558c5

Color Accent

Accent 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-accent)

4.7

10.2

17.06

6.17

#ffffff

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.66

#527dff

Color Text Link

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

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

4.7

10.2

17.06

6.17

#ffffff

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

10.2

17.06

6.17

#ffffff

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)

4.82

#6d727e

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 on Accent

Default text on accent color for Nordhealth. Used when text sits on the acccent color or a dark background.

var(--n-color-text-on-accent)

#e82700

Color Text Error

Default text color for error messages for Nordhealth.

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

4.7

10.2

17.06

6.17

#ffffff

Color Text Danger

Default text color for danger messages for Nordhealth. Also used for the danger badge text.

var(--n-color-text-danger)

4.7

10.2

17.06

6.17

#ffffff

Color Text Success

Default text color for success messages for Nordhealth.

var(--n-color-text-success)

4.7

10.2

17.06

6.17

#ffffff

Color Text Neutral

Neutral text color. Used for the neutral badge text.

var(--n-color-text-neutral)

4.7

10.2

17.06

6.17

#ffffff

Color Text Neutral Strong

Strong neutral text color. Used for the strong neutral badge text.

var(--n-color-text-neutral-strong)

4.7

10.2

17.06

6.17

#ffffff

Color Text Warning

Warning text color. Used for the warning badge text.

var(--n-color-text-warning)

15.37

#22252a

Color Text Warning Strong

Strong warning text color. Used for the strong warning badge text.

var(--n-color-text-warning-strong)

4.7

10.2

17.06

6.17

#ffffff

Color Text Highlight

Highlight text color. Used for the highlight badge text.

var(--n-color-text-highlight)

4.7

10.2

17.06

6.17

#ffffff

Color Text Info

Info text color. Used for the info badge text.

var(--n-color-text-info)

19.18

#0e0f11

Color Text Progress

Progress text color.

var(--n-color-text-progress)

15.37

#22252a

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.7

10.2

17.06

6.17

#ffffff

Color Nav Heading

Default heading color for sidebar navigation.

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

10.07

#3d424d

Color Nav Hover

Default hover color for sidebar navigation.

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

6.74

#555c68

Color Border

Default border color for Nordhealth.

var(--n-color-border)

5.04

#848c9a

Color Border Strong

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

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

8.17

#4a5055

Color Border Neutral

Neutral border color. Used for the neutral badge border style.

var(--n-color-border-neutral)

6.38

#7a5a00

Color Border Warning

Warning border color. Used for the warning badge border style.

var(--n-color-border-warning)

9.29

#6b16a2

Color Border Highlight

Highlight border color. Used for the highlight badge border style.

var(--n-color-border-highlight)

7.46

#a81a05

Color Border Danger

Danger border color. Used for the danger badge border style.

var(--n-color-border-danger)

5.17

#167e31

Color Border Success

Success border color. Used for the success badge border style.

var(--n-color-border-success)

9.53

#1037b1

Color Border Info

Info border color. Used for the info badge border style.

var(--n-color-border-info)

6.01

#096c85

Color Border Progress

Progress border color.

var(--n-color-border-progress)

19.18

#0e0f11

Color Surface

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

var(--n-color-surface)

21

#000000

Color Background

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

var(--n-color-background)

14.93

#25272d

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)

9.15

#43494c

Color Surface Lowered

Default lowered surface color for Nordhealth. Use this when you need to make a specific layer to appear lower than the surface color, e.g. progress bar.

var(--n-color-surface-lowered)

rgba(9, 10, 12, 0.9)

Color Overlay

Default overlay color for Nordhealth. Use this to distinguish modal and popout layers from the layer underneath.

var(--n-color-overlay)

11.6

#343942

Color Status Neutral

Default neutral status color for Nordhealth.

var(--n-color-status-neutral)

6.83

11.43

#ffcd42

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)

4.75

#9c44e9

Color Status Highlight

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

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

4.88

#ff401a

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.7

#079c24

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.93

#1d50f7

Color Status Info

Default info status color for Nordhealth. Used to convey something informal.

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

6.13

#00a9cc

Color Status Progress

Default progress status color for Nordhealth. Used to convey something is in progress.

var(--n-color-status-progress)

4.88

#ff401a

Color Status Notification

Default notification indicator color for Nordhealth. Used to convey unread information.

var(--n-color-status-notification)

10.59

#394041

Color Status Neutral Weak

Weak neutral status color for Nordhealth. Used for the badge default state.

var(--n-color-status-neutral-weak)

8.72

#614700

Color Status Warning Weak

Weak warning status color. Used to display information that needs a user’s attention and may require further steps.

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

12.32

#53156f

Color Status Highlight Weak

Weak highlight status color. Used to highlight specific items in the interface.

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

11.21

#73190c

Color Status Danger Weak

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

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

8.1

#145c29

Color Status Success Weak

Weak success status color. 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-weak)

13.23

#122778

Color Status Info Weak

Weak info status color. Used to convey something informal.

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

8.64

#0f5361

Color Status Progress Weak

Weak progress status color. Used to convey something is in progress.

var(--n-color-status-progress-weak)

19.18

#0e0f11

Color Button

Default button background color for Nordhealth.

var(--n-color-button)

15.37

#22252a

Color Button Hover

Default button hover background color for Nordhealth.

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

4.7

10.2

17.06

6.17

#ffffff

Color Border Hover

Default border hover color for Nordhealth.

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

4.7

10.2

17.06

6.17

#ffffff

Color Icon

Default icon color for Nordhealth.

var(--n-color-icon)

4.7

10.2

17.06

6.17

#ffffff

Color Icon Hover

Default icon hover color for Nordhealth.

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

15.37

#22252a

Color Active

Default active color for Nordhealth.

var(--n-color-active)

15.37

#22252a

Color Header

Default header background color for modals.

var(--n-color-header)

6.26

#3558c5

Color Accent Secondary

Used for theming purposes to style the background of the top bar in addition to the navigation header. By default, this aliases the accent color, but can be set to a custom color if necessary.

var(--n-color-accent-secondary)

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.09)

Box Shadow

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

var(--n-box-shadow)

0 1px 5px 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 5px rgba(12, 12, 12, 0.05), 0 0 40px rgba(12, 12, 12, 0.015)

Box Shadow Card

Default box shadow for card component that creates drop shadow, raised surface, and a 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.16), 0 9px 86px 8px rgba(12, 12, 12, 0.1), 0 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 5px 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 5px 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.34), 0px 9px 86px 8px rgba(0, 0, 0, 0.28), 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

2.25rem /
36px

Font Size XXXL

This is the xxx-large font size.

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

Quick brown fox

1.5rem /
24px

Font Size XXL

This is the xx-large font size.

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

Quick brown fox

1.25rem /
20px

Font Size XL

This is the x-large font size.

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

Quick brown fox

1rem /
16px

Font Size L

This is the large font size.

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

Quick brown fox

0.875rem /
14px

Font Size M

This is the base font size.

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

Quick brown fox

0.75rem /
12px

Font Size S

This is the small font size.

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

Quick brown fox

0.6875rem /
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)

Line Height

ExampleDescriptionToken

1.15

1.15 renders as 16.1px 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.3

1.3 renders as 18.2px with 14px font.

Line Height Caption

This is the default line height for captions, hint texts and form errors.

var(--n-line-height-caption)

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 20px 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

8px

Size Icon XXS

This is a xx-small size for icons. Most commonly used for the caret icons inside navigation items and page progress icons.

var(--n-size-icon-xxs)

10px

Size Icon XS

This is a x-small size for icons. Most commonly used inside small form fields and buttons.

var(--n-size-icon-xs)

12px

Size Icon S

This is a small size for icons. Most commonly used for icons inside buttons and select menu toggles.

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

16px

Size Icon M

This is a medium size for icons. Most commonly used for icons that sit inside large buttons.

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

24px

Size Icon L

This is a large size for icons. Most commonly used for illustrative purposes.

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

36px

Size Icon XL

This is a x-large size for icons. Most commonly used for illustrative purposes.

var(--n-size-icon-xl)

72px

Size Icon XXL

This is a xx-large size for icons. Most commonly used for illustrative purposes.

var(--n-size-icon-xxl)

52px

Size Top Bar

This is the default height of the top bar. It is also used for the small header variant.

var(--n-size-top-bar)

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)

4px

Space XS

This is a x-small space.

var(--n-space-xs)

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)

0.4s ease

Transition Mobile

Use this design token for mobile menu transitions. Used for example in the mobile version of popout and dropdown.

var(--n-transition-mobile)

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: Navigation

Default z-index for navigation.

var(--n-index-nav)

500

Z-Index: Top bar

Default z-index for top bar.

var(--n-index-top-bar)

600

Z-Index: Overlay

Default z-index for modal and popup overlays.

var(--n-index-overlay)

700

Z-Index: Spinner

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

var(--n-index-spinner)

800

Z-Index: Popout

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

var(--n-index-popout)

900

Z-Index: Toast

Default z-index for toast messages.

var(--n-index-toast)

1000

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)

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.

Please note that in most cases you will want to install our CSS Framework instead of Design Tokens package directly. CSS Framework imports this package internally and gives you both the design tokens and a wide range of shorthand utility classes to modify an element’s appearance in your application.

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-accent);
}

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-accent);
}

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/7.1.2/tokens.custom-properties.css" integrity="sha384-oq5hOWENy+//pHZtNXU0kmwsnx1TBLmSyooW2y0lLhHM/OY1UJQmQsCLkj4T6yUR" crossorigin="anonymous" />

Importing in JavaScript

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

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

// Console.log accent color value
console.log(tokens.nColorAccent);

In JSON, design token names are formatted in snake_case:

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

// Console.log accent color value
console.log(tokens["n_color_accent"]);

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 { nColorAccent } 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-accent;
}

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

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

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-accent-vet;

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

Same when using our Common.js module:

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

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

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.

Was this page helpful?

YesNoSend feedback

We use this feedback to improve our documentation.

 
Edit page