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

17.9

5.14

6.27

#011638

rgb(1, 22, 56)

Color Sidebar

Default sidebar background color for Provet Cloud.

var(--n-color-sidebar)

$n-color-sidebar

17.04

4.89

5.97

#1c1c1c

rgb(28, 28, 28)

Color Sidebar Diarium

Default sidebar background color for Diarium.

var(--n-color-sidebar-diarium)

$n-color-sidebar-diarium

4.84

#2276b7

rgb(34, 118, 183)

Color Button

Primary button background color for Provet Cloud.

var(--n-color-button)

$n-color-button

5.92

#69a42a

rgb(105, 164, 42)

Color Button Diarium

Primary button background color for Diarium.

var(--n-color-button-diarium)

$n-color-button-diarium

6.27

#4b9fe2

rgb(75, 159, 226)

Color Brand

Primary brand color for Provet Cloud. Please note that this color is meant for decorative purposes only.

var(--n-color-brand)

$n-color-brand

8.3

#86c147

rgb(134, 193, 71)

Color Brand Diarium

Primary brand color for Diarium. Please note that this color is meant for decorative purposes only.

var(--n-color-brand-diarium)

$n-color-brand-diarium

15.92

#e9f3fb

rgb(233, 243, 251)

Color Active

Active color for Provet Cloud. Please note that this color is meant for decorative purposes only.

var(--n-color-active)

$n-color-active

16.65

#f2f9ec

rgb(242, 249, 236)

Color Active Diarium

Active color for Diarium. Please note that this color is meant for decorative purposes only.

var(--n-color-active-diarium)

$n-color-active-diarium

17.9

5.14

6.27

#011638

rgb(1, 22, 56)

Color Text

Text color for Provet Cloud. Used as the main text color and sidebar background color.

var(--n-color-text)

$n-color-text

17.04

4.89

5.97

#1c1c1c

rgb(28, 28, 28)

Color Text Diarium

Text color for Diarium. Used as the main text color and sidebar background color.

var(--n-color-text-diarium)

$n-color-text-diarium

4.84

#2276b7

rgb(34, 118, 183)

Color Text Link

Default link text color for Provet Cloud.

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

$n-color-text-link

5.92

#69a42a

rgb(105, 164, 42)

Color Text Link Diarium

Default link text color for Diarium.

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

$n-color-text-link-diarium

4.7

#6c7483

rgb(108, 116, 131)

Color Text Light

Light text color for Provet Cloud.

var(--n-color-text-light)

$n-color-text-light

4.56

#73767a

rgb(115, 118, 122)

Color Text Light Diarium

Light text color for Diarium.

var(--n-color-text-light-diarium)

$n-color-text-light-diarium

17.9

4.7

4.84

#ffffff

rgb(255, 255, 255)

Color Text Negative

Default negative text color for Provet Cloud.

var(--n-color-text-negative)

$n-color-text-negative

17.9

4.7

4.84

#ffffff

rgb(255, 255, 255)

Color Text Negative Diarium

Default negative text color for Diarium.

var(--n-color-text-negative-diarium)

$n-color-text-negative-diarium

5.14

#808a9b

rgb(128, 138, 155)

Color Icon

Default icon color for Provet Cloud.

var(--n-color-icon)

$n-color-icon

4.82

#818589

rgb(129, 133, 137)

Color Icon Diarium

Default icon color for Diarium.

var(--n-color-icon-diarium)

$n-color-icon-diarium

12.61

#d3dad8

rgb(211, 218, 216)

Color Border Diarium

Default border color for Diarium.

var(--n-color-border-diarium)

$n-color-border-diarium

13.08

#d8dde1

rgb(216, 221, 225)

Color Border

Default border color for Provet Cloud.

var(--n-color-border)

$n-color-border

16.28

#f4f4f4

rgb(244, 244, 244)

Color Background

Default application background color for Provet Cloud.

var(--n-color-background)

$n-color-background

16.28

#f4f4f4

rgb(244, 244, 244)

Color Background Diarium

Default application background color for Diarium.

var(--n-color-background-diarium)

$n-color-background-diarium

17.9

4.7

4.84

#ffffff

rgb(255, 255, 255)

Color Surface

Default application surface color for Provet Cloud.

var(--n-color-surface)

$n-color-surface

17.9

4.7

4.84

#ffffff

rgb(255, 255, 255)

Color Surface Diarium

Default application surface color for Diarium.

var(--n-color-surface-diarium)

$n-color-surface-diarium

4.86

#e4572e

rgb(228, 87, 46)

Color Alert

Alert status color for Provet Cloud.

var(--n-color-alert)

$n-color-alert

5.66

#f26430

rgb(242, 100, 48)

Color Alert Diarium

Alert status color for Diarium.

var(--n-color-alert-diarium)

$n-color-alert-diarium

9.75

#f7b32b

rgb(247, 179, 43)

Color Warning Diarium

Warning status color for Diarium.

var(--n-color-warning-diarium)

$n-color-warning-diarium

11.61

#ffc914

rgb(255, 201, 20)

Color Warning

Warning status color for Provet Cloud.

var(--n-color-warning)

$n-color-warning

5.61

#49a078

rgb(73, 160, 120)

Color Success

Success status color for Provet Cloud.

var(--n-color-success)

$n-color-success

5.92

#69a42a

rgb(105, 164, 42)

Color Success Diarium

Success status color for Diarium.

var(--n-color-success-diarium)

$n-color-success-diarium

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

Quick brown fox

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

Font Family

This is the default font family utilized by all our products.

var(--n-font-family)

$n-font-family

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

1px

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

6px

Border Radius

This is the default border radius.

var(--n-border-radius)

$n-border-radius

Line Height #

ExampleDescriptionTokens

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 href="https://cdn.jsdelivr.net/npm/@nordhealth/tokens/lib/tokens.custom-properties.css" rel="stylesheet" />