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 #

ExampleDescriptionTokens

4.84

#2276b7

rgb(34, 118, 183)

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)

$n-color-primary-vet

6.17

#3559c7

rgb(53, 89, 199)

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)

$n-color-primary

5.64

#69a42a

rgb(105, 164, 42)

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)

$n-color-primary-health

5.98

#1e67a1

rgb(30, 103, 161)

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)

$n-color-primary-dark-vet

8.24

#2847a7

rgb(40, 71, 167)

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)

$n-color-primary-dark

#5c9024

rgb(92, 144, 36)

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)

$n-color-primary-dark-health

17.9

#011638

rgb(1, 22, 56)

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)

$n-color-secondary-vet

17.06

#0c1a3d

rgb(12, 26, 61)

Color Secondary

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

var(--n-color-secondary)

$n-color-secondary

17.04

#1c1c1c

rgb(28, 28, 28)

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)

$n-color-secondary-health

19.3

#000e24

rgb(0, 14, 36)

Color Secondary Dark Vet

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

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

$n-color-secondary-dark-vet

18.22

#09142f

rgb(9, 20, 47)

Color Secondary Dark

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

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

$n-color-secondary-dark

16.1

#212121

rgb(33, 33, 33)

Color Secondary Dark Health

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

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

$n-color-secondary-dark-health

7.91

#86c147

rgb(134, 193, 71)

Color Active Menu Health

Active menu item text color for main menu. Use this to highlight the selected item from the rest.

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

$n-color-active-menu-health

14.73

5.11

5.32

#ebeef9

rgb(235, 238, 249)

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)

$n-color-active

5.98

#4b9fe2

rgb(75, 159, 226)

Color Active Menu Vet

Active menu item text color for main menu. Use this to highlight the selected item from the rest.

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

$n-color-active-menu-vet

5.15

#5f86ff

rgb(95, 134, 255)

Color Active Menu

Active menu item text color for main menu. Use this to highlight the selected item from the rest.

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

$n-color-active-menu

15.87

5.5

5.74

#f2f9ec

rgb(242, 249, 236)

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)

$n-color-active-health

17.9

#011638

rgb(1, 22, 56)

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)

$n-color-text-vet

17.06

#0c1a3d

rgb(12, 26, 61)

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)

$n-color-text

17.04

#1c1c1c

rgb(28, 28, 28)

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)

$n-color-text-health

15.18

5.26

5.49

#e9f3fb

rgb(233, 243, 251)

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)

$n-color-active-vet

4.84

#2276b7

rgb(34, 118, 183)

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)

$n-color-link-vet

6.17

#3559c7

rgb(53, 89, 199)

Color Link

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

var(--n-color-link)

$n-color-link

5.64

#69a42a

rgb(105, 164, 42)

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)

$n-color-link-health

5.91

#536772

rgb(83, 103, 114)

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)

$n-color-caption

4.7

#6c7483

rgb(108, 116, 131)

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)

$n-color-caption-vet

4.56

#73767a

rgb(115, 118, 122)

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)

$n-color-caption-health

17.06

5.91

6.17

#ffffff

rgb(255, 255, 255)

Color Negative

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

var(--n-color-negative)

$n-color-negative

17.06

5.91

6.17

#ffffff

rgb(255, 255, 255)

Color Negative Health

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

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

$n-color-negative-health

17.06

5.91

6.17

#ffffff

rgb(255, 255, 255)

Color Negative Vet

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

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

$n-color-negative-vet

#70828C

rgb(112, 130, 140)

Color Icon

Default icon color for Nordhealth.

var(--n-color-icon)

$n-color-icon

4.9

#808a9b

rgb(128, 138, 155)

Color Icon Vet

Default icon color for Veterinary apps.

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

$n-color-icon-vet

4.59

#818589

rgb(129, 133, 137)

Color Icon Health

Default icon color for Healthcare apps.

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

$n-color-icon-health

12.02

#d3dad8

rgb(211, 218, 216)

Color Border Health

Default border color for Healthcare apps.

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

$n-color-border-health

12.47

4.51

#d8dde1

rgb(216, 221, 225)

Color Border Vet

Default border color for Veterinary apps.

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

$n-color-border-vet

13.91

4.82

5.03

#e3e9eb

rgb(227, 233, 235)

Color Border

Default border color for Nordhealth.

var(--n-color-border)

$n-color-border

15.51

5.38

5.61

#f4f4f4

rgb(244, 244, 244)

Color Background Health

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

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

$n-color-background-health

15.51

5.38

5.61

#f4f4f4

rgb(244, 244, 244)

Color Background Vet

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

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

$n-color-background-vet

16.01

5.55

5.79

#f6f8f8

rgb(246, 248, 248)

Color Background

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

var(--n-color-background)

$n-color-background

17.06

5.91

6.17

#ffffff

rgb(255, 255, 255)

Color Surface

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

var(--n-color-surface)

$n-color-surface

17.06

5.91

6.17

#ffffff

rgb(255, 255, 255)

Color Surface Health

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

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

$n-color-surface-health

17.06

5.91

6.17

#ffffff

rgb(255, 255, 255)

Color Surface Vet

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

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

$n-color-surface-vet

4.63

#e4572e

rgb(228, 87, 46)

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)

$n-color-alert-vet

5.4

#f26430

rgb(242, 100, 48)

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)

$n-color-alert-health

5.92

#fc685e

rgb(252, 104, 94)

Color Alert

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

var(--n-color-alert)

$n-color-alert

9.29

#f7b32b

rgb(247, 179, 43)

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)

$n-color-warning-health

10.53

#f8c35e

rgb(248, 195, 94)

Color Warning

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

var(--n-color-warning)

$n-color-warning

11.06

#ffc914

rgb(255, 201, 20)

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)

$n-color-warning-vet

5.35

#49a078

rgb(73, 160, 120)

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)

$n-color-success-vet

5.64

#69a42a

rgb(105, 164, 42)

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)

$n-color-success-health

12.78

4.62

#a3ebf3

rgb(163, 235, 243)

Color Success

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

var(--n-color-success)

$n-color-success

Font Size #

ExampleDescriptionTokens

Quick brown fox

36px

Font Size XXXL

This is the xxx-large font size.

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

$n-font-size-xxxl

Quick brown fox

24px

Font Size XXL

This is the xx-large font size.

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

$n-font-size-xxl

Quick brown fox

20px

Font Size XL

This is the x-large font size.

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

$n-font-size-xl

Quick brown fox

16px

Font Size L

This is the large font size.

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

$n-font-size-l

Quick brown fox

14px

Font Size M

This is the base font size.

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

$n-font-size-m

Quick brown fox

12px

Font Size S

This is the small font size.

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

$n-font-size-s

Quick brown fox

11px

Font Size XS

This is the x-small font size.

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

$n-font-size-xs

Font #

ExampleDescriptionTokens

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)

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

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

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

$n-font-features

Quick brown fox

400

Font Weight Default

Default font weight for body text.

var(--n-font-weight)

$n-font-weight

Quick brown fox

500

Font Weight Active

Default font weight for active items.

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

$n-font-weight-active

Quick brown fox

600

Font Weight Heading

Default font weight for headings.

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

$n-font-weight-heading

Quick brown fox

670

Font Weight Strong

Default font weight for strong.

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

$n-font-weight-strong

Space #

ExampleDescriptionTokens

72px

Space XXL

This is a xx-large space.

var(--n-space-xxl)

$n-space-xxl

36px

Space XL

This is a x-large space.

var(--n-space-xl)

$n-space-xl

24px

Space L

This is a large space.

var(--n-space-l)

$n-space-l

16px

Space M

This is a medium space.

var(--n-space-m)

$n-space-m

8px

Space S

This is a small space.

var(--n-space-s)

$n-space-s

Border Radius #

ExampleDescriptionTokens

0.02em

Border Radius Sharp

This is sharp border radius.

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

$n-border-radius-sharp

3px

Border Radius Small

This is small border radius.

var(--n-border-radius-small)

$n-border-radius-small

50%

Border Radius Circle

This is for creating rounded avatars and similar objects.

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

$n-border-radius-circle

8px

Border Radius

This is the default border radius.

var(--n-border-radius)

$n-border-radius

999px

Border Radius Pill

This is for creating pill shaped tags and similar.

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

$n-border-radius-pill

Line Height #

ExampleDescriptionTokens

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)

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

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

$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.10/lib/tokens.custom-properties.css" integrity="sha384-Cs4ob7U4CDkKOCkhEuefirDUTgFKxsZz+6HuHOL6D9jcmvJLkPuc9OnrRCFzb40i" crossorigin="anonymous" />