Design Tokens Draft

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

4.84

#2276b7

Color Primary Vet

Primary color for Veterinary apps. 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-vet)

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)

5.64

#69a42a

Color Primary Health

Primary color for Healthcare apps. 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-health)

5.98

#1e67a1

Color Primary Dark Vet

Dark primary color for Veterinary apps. Used in primary color gradients, and as a primary button hover color.

var(--n-color-primary-dark-vet)

8.24

#2847a7

Color Primary Dark

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

var(--n-color-primary-dark)

#5c9024

Color Primary Dark Health

Dark primary color for Healthcare apps. Used in primary color gradients, and as a primary button hover color.

var(--n-color-primary-dark-health)

17.9

#011638

Color Secondary Vet

Secondary color for Veterinary apps. Used as the main menu background color in addition to highlighting sections.

var(--n-color-secondary-vet)

17.06

#0c1a3d

Color Secondary

Secondary color for Nordhealth. Used as the main menu background color in addition to highlighting sections.

var(--n-color-secondary)

17.04

#1c1c1c

Color Secondary Health

Secondary color for Healthcare apps. Used as the main menu background color in addition to highlighting sections.

var(--n-color-secondary-health)

19.3

#000e24

Color Secondary Dark Vet

Dark secondary color for Veterinary apps. Used in secondary color gradients.

var(--n-color-secondary-dark-vet)

18.22

#09142f

Color Secondary Dark

Dark secondary color for Nordhealth. Used in secondary color gradients.

var(--n-color-secondary-dark)

16.1

#212121

Color Secondary Dark Health

Dark secondary color for Healthcare apps. Used in secondary color gradients.

var(--n-color-secondary-dark-health)

15.18

5.26

5.49

#e9f3fb

Color Active Vet

Active background color for Veterinary apps. Used as a hover background color for interactive menus and similar. Please note that this color is meant for decorative purposes only.

var(--n-color-active-vet)

14.73

5.11

5.32

#ebeef9

Color Active

Active background color for Nordhealth. Used as a hover background color for interactive menus and similar. Please note that this color is meant for decorative purposes only.

var(--n-color-active)

15.87

5.5

5.74

#f2f9ec

Color Active Health

Active background color for Healthcare apps. Used as a hover background color for interactive menus and similar. Please note that this color is meant for decorative purposes only.

var(--n-color-active-health)

5.98

#4b9fe2

Color Active Menu Vet

Active menu color for Veterinary apps. Used for menu resize hover effect.

var(--n-color-active-menu-vet)

5.15

#5f86ff

Color Active Menu

Active menu color for Nordhealth. Used for menu resize hover effect.

var(--n-color-active-menu)

7.91

#86c147

Color Active Menu Health

Active menu color for Healthcare apps. Used for menu resize hover effect.

var(--n-color-active-menu-health)

17.9

#011638

Color Text Vet

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

var(--n-color-text-vet)

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)

17.04

#1c1c1c

Color Text Health

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

var(--n-color-text-health)

4.84

#2276b7

Color Link Vet

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

var(--n-color-link-vet)

6.17

#3559c7

Color Link

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

var(--n-color-link)

5.64

#69a42a

Color Link Health

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

var(--n-color-link-health)

5.91

#536772

Color Caption

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

var(--n-color-caption)

4.7

#6c7483

Color Caption Vet

Light caption text color for Veterinary apps. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.

var(--n-color-caption-vet)

4.56

#73767a

Color Caption Health

Light caption text color for Healthcare apps. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.

var(--n-color-caption-health)

17.06

5.91

6.17

#ffffff

Color Negative

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

var(--n-color-negative)

17.06

5.91

6.17

#ffffff

Color Negative Health

Default negative text color for Healthcare apps. Used when text sits on a dark background.

var(--n-color-negative-health)

17.06

5.91

6.17

#ffffff

Color Negative Vet

Default negative text color for Veterinary apps. Used when text sits on a dark background.

var(--n-color-negative-vet)

#70828C

Color Icon

Default icon color for Nordhealth.

var(--n-color-icon)

4.9

#808a9b

Color Icon Vet

Default icon color for Veterinary apps.

var(--n-color-icon-vet)

4.59

#818589

Color Icon Health

Default icon color for Healthcare apps.

var(--n-color-icon-health)

13.91

4.82

5.03

#e3e9eb

Color Border

Default border color for Nordhealth.

var(--n-color-border)

13.91

4.82

5.03

#e3e9eb

Color Border Vet

Default border color for Veterinary apps.

var(--n-color-border-vet)

14.23

4.93

5.14

#e5ecea

Color Border Health

Default border color for Healthcare apps.

var(--n-color-border-health)

12.11

#d3dbd9

Color Border Dark Health

Dark border color for Healthcare apps for highlighting specific parts in the user interface.

var(--n-color-border-dark-health)

12.47

4.51

#d8dde1

Color Border Dark

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

var(--n-color-border-dark)

12.47

4.51

#d8dde1

Color Border Dark Vet

Dark border color for Veterinary apps for highlighting specific parts in the user interface.

var(--n-color-border-dark-vet)

16.01

5.55

5.79

#f6f8f8

Color Background

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

var(--n-color-background)

16.01

5.55

5.79

#f6f8f8

Color Background Vet

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

var(--n-color-background-vet)

16.11

5.58

5.82

#f6f9f8

Color Background Health

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

var(--n-color-background-health)

17.06

5.91

6.17

#ffffff

Color Surface

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

var(--n-color-surface)

17.06

5.91

6.17

#ffffff

Color Surface Health

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

var(--n-color-surface-health)

17.06

5.91

6.17

#ffffff

Color Surface Vet

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

var(--n-color-surface-vet)

rgba(1, 22, 56, 0.65)

Color Overlay Vet

Default overlay color for Veterinary apps. Use this for e.g. modal background overlay.

var(--n-color-overlay-vet)

rgba(12, 26, 61, 0.65)

Color Overlay

Default overlay color for Nordhealth. Use this for e.g. modal background overlay.

var(--n-color-overlay)

rgba(28, 28, 28, 0.65)

Color Overlay Health

Default overlay color for Healthcare apps. Use this for e.g. modal background overlay.

var(--n-color-overlay-health)

4.63

#e4572e

Color Alert Vet

Alert status color for Veterinary apps. Please note that this is a work-in-progress and will change.

var(--n-color-alert-vet)

5.4

#f26430

Color Alert Health

Alert status color for Healthcare apps. Please note that this is a work-in-progress and will change.

var(--n-color-alert-health)

5.92

#fc685e

Color Alert

Alert status color for Nordhealth. Please note that this is a work-in-progress and will change.

var(--n-color-alert)

9.29

#f7b32b

Color Warning Health

Warning status color for Healthcare apps. Please note that this is a work-in-progress and will change.

var(--n-color-warning-health)

10.53

#f8c35e

Color Warning

Warning status color for Nordhealth. Please note that this is a work-in-progress and will change.

var(--n-color-warning)

11.06

#ffc914

Color Warning Vet

Warning status color for Veterinary apps. Please note that this is a work-in-progress and will change.

var(--n-color-warning-vet)

5.35

#49a078

Color Success Vet

Success status color for Veterinary apps. Please note that this is a work-in-progress and will change.

var(--n-color-success-vet)

5.64

#69a42a

Color Success Health

Success status color for Healthcare apps. Please note that this is a work-in-progress and will change.

var(--n-color-success-health)

12.78

4.62

#a3ebf3

Color Success

Success status color for Nordhealth. Please note that this is a work-in-progress and will change.

var(--n-color-success)

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' 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)

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)

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)

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)

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)

50%

Border Radius Circle

This is for creating rounded avatars and similar objects.

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

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)

Box Shadow #

ExampleDescriptionToken

0 1px 3px rgba(1, 22, 56, 0.1)

Box Shadow Vet

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

var(--n-box-shadow-vet)

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

Box Shadow

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

var(--n-box-shadow)

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

Box Shadow Health

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

var(--n-box-shadow-health)

0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 3px rgba(1, 22, 56, 0.6)

Box Shadow Tooltip Vet

Tooltip box shadow to be used with all tooltips in Veterinary apps.

var(--n-box-shadow-tooltip-vet)

0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 3px rgba(12, 26, 61, 0.6)

Box Shadow Tooltip

Tooltip box shadow to be used with all tooltips in Nordhealth theme.

var(--n-box-shadow-tooltip)

0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 3px rgba(28, 28, 28, 0.6)

Box Shadow Tooltip Health

Tooltip box shadow to be used with all tooltips in Healthcare apps.

var(--n-box-shadow-tooltip-health)

0 1px 3px rgba(1, 22, 56, 0.1), 0 10px 30px rgba(1, 22, 56, 0.05)

Box Shadow Card Vet

Card component box shadow for Veterinary apps.

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

0 1px 3px rgba(12, 26, 61, 0.1), 0 10px 30px rgba(1, 22, 56, 0.05)

Box Shadow Card

Card component box shadow for Nordhealth theme.

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

0 1px 3px rgba(28, 28, 28, 0.1), 0 10px 30px rgba(28, 28, 28, 0.05)

Box Shadow Card Health

Card component box shadow for Healthcare apps.

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

0 3px 15px rgba(1, 22, 56, 0.6)

Box Shadow Nav Vet

Nav box shadow for Veterinary apps. Used in collapsed state navigation.

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

0 3px 15px rgba(12, 26, 61, 0.6)

Box Shadow Nav

Nav box shadow for Nordhealth. Used in collapsed state navigation.

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

0 3px 15px rgba(28, 28, 28, 0.6)

Box Shadow Nav Health

Nav box shadow for Healthcare apps. Used in collapsed state navigation.

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

0 5px 35px rgba(1, 22, 56, 0.3)

Box Shadow Modal Vet

Modal box shadow for Veterinary apps. Used in dialogs, modals and such.

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

0 5px 35px rgba(12, 26, 61, 0.3)

Box Shadow Modal

Modal box shadow for Nordhealth. Used in dialogs, modals and such.

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

0 5px 35px rgba(28, 28, 28, 0.3)

Box Shadow Modal Health

Modal box shadow for Healthcare apps. Used in dialogs, modals and such.

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

Line Height #

ExampleDescriptionToken

1.15

1.15 renders as 16.099999999999998px with 14px font.

Line Height Small

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)

Usage #

To utilize design tokens in your app, include this in the beginning of your head:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nordhealth/tokens@1.0.0-alpha.13/lib/tokens.custom-properties.css" integrity="sha384-kEMIlg9JRJ7rGLGGxe21PDHxYzmineiHj3dySboVUAthZTYHM+75+IiwVRwx+vJ4" crossorigin="anonymous" />