Skip to main content
LocalTapiola Turva

Design Tokens #

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

For consistency, we use the below defined color palette throughout our interface. Keep in mind that green, red and orange are only used in special cases like form validation and messaging.

ExampleDescriptionTokenContrastStatus

#004d80

rgb(0, 77, 128)

Primary Blue Dark

Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.

$color-primary-dark var(--color-primary-dark)8.85:1

#940925

rgb(148, 9, 37)

Primary Red Dark

Dark version of primary red that is accessible with white. Most commonly used to indicate hover and active states of an item with primary red background.

$color-primary-dark-turva var(--color-primary-dark-turva)9.03:1

#0077b3

rgb(0, 119, 179)

Primary Blue

Primary digital blue that is accessible with white. Used as primary button background color, selected state background color, and as link text color.

$color-primary var(--color-primary)4.9:1

#c60c30

rgb(198, 12, 48)

Primary Red

Primary digital red that is accessible with white. Used as primary button background color, selected state background color, and as link text color.

$color-primary-turva var(--color-primary-turva)6.01:1

#cde5f1

rgb(205, 229, 241)

Primary Blue Light

Light blue that is 20% tint of the primary blue. Accessible when secondary blue is used as the text color. Used for date hovers and in-between date ranges.

$color-primary-light var(--color-primary-light)1.31:1

#f4cfd6

rgb(244, 207, 214)

Primary Red Light

Light red that is 20% tint of the primary red. Accessible when secondary black is used as the text color.

$color-primary-light-turva var(--color-primary-light-turva)1.42:1

#e6f2f8

rgb(230, 242, 248)

Primary Blue Lighter

Light blue that is 10% tint of the primary blue. Accessible when secondary blue is used as the text color. Used for the dark end of background gradients.

$color-primary-lighter var(--color-primary-lighter)1.14:1

#f9e6ea

rgb(249, 230, 234)

Primary Red Lighter

Light red that is 10% tint of the primary red. Accessible when secondary black is used as the text color.

$color-primary-lighter-turva var(--color-primary-lighter-turva)1.2:1

#f3f9fc

rgb(243, 249, 252)

Primary Blue Lightest

Light blue that is 5% tint of the primary blue. Accessible when secondary blue is used as the text color. Commonly used to indicate a hover state of item with white background.

$color-primary-lightest var(--color-primary-lightest)1.06:1

#fcf3f4

rgb(252, 243, 244)

Primary Red Lightest

Light red that is 5% tint of the primary red. Accessible when secondary black is used as the text color. Commonly used to indicate a hover state of item with white background.

$color-primary-lightest-turva var(--color-primary-lightest-turva)1.09:1

#00294d

rgb(0, 41, 77)

Secondary Blue

Secondary blue that is accessible with light, lighter and lightest primary blue. Used as the body text color.

$color-secondary var(--color-secondary)14.74:1

#111111

rgb(17, 17, 17)

Secondary Black

Secondary black that is accessible with light, lighter and lightest primary red. Used as the body text color.

$color-secondary-turva var(--color-secondary-turva)18.88:1

#00a1d4

rgb(0, 161, 212)

Brand Blue

Non-accessible brand blue that is used in LocalTapiola logo and print materials.

$color-brand-blue var(--color-brand-blue)2.98:1

#b2b4b3

rgb(178, 180, 179)

Brand Gray

Non-accessible brand gray that is used in Turva logo and print materials.

$color-brand-gray-turva var(--color-brand-gray-turva)2.08:1

#de2362

rgb(222, 35, 98)

Status Danger

Danger red that is accessible with white. Only used in special cases like form validation and messaging.

$color-danger var(--color-danger)4.64:1

#e02a0d

rgb(224, 42, 13)

Status Danger

Danger red that is accessible with white. Only used in special cases like form validation and messaging.

$color-danger-turva var(--color-danger-turva)4.66:1

#f7b228

rgb(247, 178, 40)

Status Warning

Warning orange (non-accessible) is only used in special cases like form validation and messaging.

$color-warning var(--color-warning)1.85:1

#faa40f

rgb(250, 164, 15)

Status Warning

Warning orange (non-accessible) is only used in special cases like form validation and messaging.

$color-warning-turva var(--color-warning-turva)2.02:1

#00875a

rgb(0, 135, 90)

Status Success

Success green that is accessible with white. Only used in special cases like form validation and messaging.

$color-success var(--color-success)4.55:1

#08874e

rgb(8, 135, 78)

Status Success

Success green that is accessible with white. Only used in special cases like form validation and messaging.

$color-success-turva var(--color-success-turva)4.58:1

#454545

rgb(69, 69, 69)

Gray Darker

Dark gray that is accessible with white. Most commonly used as selected tab button background color.

$color-gray-darker-turva var(--color-gray-darker-turva)9.59:1

#657787

rgb(101, 119, 135)

Gray Darker

Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts.

$color-gray-darker var(--color-gray-darker)4.62:1

#909599

rgb(144, 149, 153)

Gray Dark

Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text.

$color-gray-dark var(--color-gray-dark)3.02:1

#757575

rgb(117, 117, 117)

Gray Dark

Dark gray that is accessible with white. Most commonly used to indicate inactive interface state. This color should also be used for borders that need to pass WCAG Level AA non-text contrast requirements.

$color-gray-dark-turva var(--color-gray-dark-turva)4.61:1

#cfd2d4

rgb(207, 210, 212)

Gray

Gray that is accessible with secondary blue. For consistency, we use this common grayscale palette throughout the interface.

$color-gray var(--color-gray)1.52:1

#d1d1d1

rgb(209, 209, 209)

Gray

Gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface.

$color-gray-turva var(--color-gray-turva)1.53:1

#e1e3e6

rgb(225, 227, 230)

Gray Light

Light gray that is accessible with secondary blue. For consistency, we use this common grayscale palette throughout the interface.

$color-gray-light var(--color-gray-light)1.29:1

#e6e6e6

rgb(230, 230, 230)

Gray Light

Light gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface.

$color-gray-light-turva var(--color-gray-light-turva)1.25:1

#f5f8fa

rgb(245, 248, 250)

Gray Lighter

Light gray that is accessible with secondary blue. For consistency, we use this common grayscale palette throughout the interface.

$color-gray-lighter var(--color-gray-lighter)1.07:1

#f7f7f7

rgb(247, 247, 247)

Gray Lighter

Light gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface.

$color-gray-lighter-turva var(--color-gray-lighter-turva)1.07:1

#ffffff

rgb(255, 255, 255)

Gray Lightest

White is used as the primary page background color and primary container background color.

$color-gray-lightest var(--color-gray-lightest)1:1

#ffffff

rgb(255, 255, 255)

Gray Lightest

White is used as the primary page background color and primary container background color.

$color-gray-lightest-turva var(--color-gray-lightest-turva)1:1

#098194

rgb(9, 129, 148)

Category Travel

Travel category color that is accessible with white. Should be only used within the travel product category and icons (or similar) representing it.

$color-category-travel-turva var(--color-category-travel-turva)4.59:1

#0b7288

rgb(11, 114, 136)

Category Family

Family category color that is accessible with white. Should be only used within the family product category and icons (or similar) representing it.

$color-category-family var(--color-category-family)5.56:1

#364a81

rgb(54, 74, 129)

Category Vehicle

Vehicle category color that is accessible with white. Should be only used within the vehicle/mobility product category and icons (or similar) representing it.

$color-category-vehicle var(--color-category-vehicle)8.56:1

#3e55ad

rgb(62, 85, 173)

Category Vehicle

Vehicle category color that is accessible with white. Should be only used within the vehicle/mobility product category and icons (or similar) representing it.

$color-category-vehicle-turva var(--color-category-vehicle-turva)6.76:1

#7a01c4

rgb(122, 1, 196)

Category Finance

Finance category color that is accessible with white. Should be only used within the finance product category and icons (or similar) representing it.

$color-category-finance var(--color-category-finance)7.99:1

#844494

rgb(132, 68, 148)

Category Pet

Union category color that is accessible with white. Should be only used within the union product category and icons (or similar) representing it.

$color-category-union-turva var(--color-category-union-turva)6.49:1

#a10a4e

rgb(161, 10, 78)

Category Home

Home category color that is accessible with white. Should be only used within the home product category and icons (or similar) representing it.

$color-category-home-turva var(--color-category-home-turva)7.87:1

#a8014e

rgb(168, 1, 78)

Category Pet

Pet category color that is accessible with white. Should be only used within the pet product category and icons (or similar) representing it.

$color-category-pet var(--color-category-pet)7.56:1

#c70c70

rgb(199, 12, 112)

Category Family

Family category color that is accessible with white. Should be only used within the family product category and icons (or similar) representing it.

$color-category-family-turva var(--color-category-family-turva)5.65:1

#d32483

rgb(211, 36, 131)

Category Home

Home category color that is accessible with white. Should be only used within the home product category and icons (or similar) representing it.

$color-category-home var(--color-category-home)4.83:1

#d54203

rgb(213, 66, 3)

Category Travel

Travel category color that is accessible with white. Should be only used within the travel product category and icons (or similar) representing it.

$color-category-travel var(--color-category-travel)4.56:1
Legend:
Ready, can be used in production.
In Review, ready to be used soon.
Prototype, do not use.

Fonts

Text is interface, which is why we’ve spent a great amount of time fine-tuning our typographic choices. Use the below tokens to set font-families, font-weights and letter-spacing consistently.

ExampleDescriptionTokenContrastStatus

'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'

Font Family: Heading

Heading font family uses a font stack that gracefully degrades to default system fonts on different platforms. Should be used for headings only.

$font-family-heading var(--font-family-heading)N/A

'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'

Font Family: Text

Text font family uses a font stack that gracefully degrades to default system fonts on different platforms. Should be used for body text and form controls.

$font-family-text var(--font-family-text)N/A

'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'

Font Family: Heading

Heading font family uses a font stack that gracefully degrades to default system fonts on different platforms. Should be used for headings only.

$font-family-heading-turva var(--font-family-heading-turva)N/A

'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'

Font Family: Text

Text font family uses a font stack that gracefully degrades to default system fonts on different platforms. Should be used for body text and form controls.

$font-family-text-turva var(--font-family-text-turva)N/A

-0.01rem

Letter Spacing: Heading

Gives tiny amount of negative letter spacing for the page main heading.

$letter-spacing-heading var(--letter-spacing-heading)N/A

400

Font Weight: Normal

Normal font weight is used for body text and form inputs together with “Text” font family.

$font-weight-normal var(--font-weight-normal)N/A

600

Font Weight: Semi Bold

Semi bold font weight is used for buttons and sub headings together with “Text” font family.

$font-weight-semi-bold var(--font-weight-semi-bold)N/A

700

Font Weight: Bold

Bold font weight is used for headings only together with “Heading” font family.

$font-weight-bold var(--font-weight-bold)N/A

800

Font Weight: Extra Bold

Extra bold font weight is used for headings only together with “Heading” font family.

$font-weight-extra-bold var(--font-weight-extra-bold)N/A

Font Size

Duet’s typographic scale is designed to work in sync with its spacing scale. These tokens should be used for all font sizes throughout the interface to create a predictable and harmonious typographic style.

ExampleDescriptionTokenContrastStatus

Aa

0.75rem
12px

Font Size: X-Small

X-Small font size that is only used in native iOS and Android applications.

$font-size-x-small var(--font-size-x-small)N/A

Aa

0.875rem
14px

Font Size: Small

Small font size should be used sparingly for annotations, descriptions, and similar content.

$font-size-small var(--font-size-small)N/A

Aa

1rem
16px

Font Size: Medium

Medium font size is used for the body text.

$font-size-medium var(--font-size-medium)N/A

Aa

1.25rem
20px

Font Size: Large

Large font size is used for small sub-headings.

$font-size-large var(--font-size-large)N/A

Aa

1.5rem
24px

Font Size: X-Large

X-large font size is used for large sub-headings.

$font-size-x-large var(--font-size-x-large)N/A

Aa

2.25rem
36px

Font Size: XX-Large

XX-large font size is used for the main heading on tablet size.

$font-size-xx-large var(--font-size-xx-large)N/A

Aa

3rem
48px

Font Size: XXX-Large

XXX-large font size is used for the main heading on desktop.

$font-size-xxx-large var(--font-size-xxx-large)N/A

Aa

4.5rem
72px

Font Size: XXXX-Large

XXXX-large font size is for marketing purposes and banners.

$font-size-xxxx-large var(--font-size-xxxx-large)N/A

Border Radius

Border-radius is used to give any element rounded corners. Use the below defined tokens to set radiuses consistently.

ExampleDescriptionTokenContrastStatus

0

Border Radius: Sharp

Sharp border-radius resets the corners to be sharp with no rounding.

$radius-sharp var(--radius-sharp)N/A

20rem

Border Radius: Pill

Pill border-radius is the default radius for buttons, tags, tabs, and similar.

$radius-pill var(--radius-pill)N/A

4px

Border Radius: Default

Default border-radius is used in interface containers, form inputs, textareas, and similar. If you’re unsure which radius to use, pick the default.

$radius-default var(--radius-default)N/A

50%

Border Radius: Circle

Circle border-radius is used as icon background shape and as avatar shape.

$radius-circle var(--radius-circle)N/A

Box Shadow

Box-shadows are used to cast shadows from interface elements. Use the below defined tokens to set shadows consistently.

ExampleDescriptionTokenContrastStatus

0 2px 10px 0 rgba(0, 41, 77, 0.07)

Shadow: Tooltip

Tooltip shadow is used by popover tooltips.

$shadow-tooltip var(--shadow-tooltip)N/A

0 2px 10px 0 rgba(0, 41, 77, 0.1)

Shadow: Hover

Hover shadow is used when primary component is clickable and is hovered over/active on mobile.

$shadow-hover var(--shadow-hover)N/A

0 2px 10px 0 rgba(117, 117, 117, 0.13)

Shadow: Tooltip

Tooltip shadow is used by popover tooltips.

$shadow-tooltip-turva var(--shadow-tooltip-turva)N/A

0 2px 10px 0 rgba(117, 117, 117, 0.15)

Shadow: Hover

Hover shadow is used when primary component is clickable and is hovered over/active on mobile.

$shadow-hover-turva var(--shadow-hover-turva)N/A

0 2px 20px 0 rgba(0, 0, 0, 0.2)

Shadow: Modal

Modal shadow is used for popovers and modal windows on a dark blue overlay.

$shadow-modal var(--shadow-modal)N/A

0 2px 6px 0 rgba(0, 41, 77, 0.07)

Shadow: Default

Default shadow style.

$shadow-default var(--shadow-default)N/A

0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)

Shadow: Card

Card shadow is a variant of default shadow that is used when information needs to be contained within a card.

$shadow-card var(--shadow-card)N/A

0 2px 6px 0 rgba(117, 117, 117, 0.13)

Shadow: Default

Default shadow is used when information needs to be contained within a component.

$shadow-default-turva var(--shadow-default-turva)N/A

0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)

Shadow: Card

Card shadow is a variant of default shadow that is used when information needs to be contained within a card.

$shadow-card-turva var(--shadow-card-turva)N/A

Space

We use the below defined tokens to create a predictable and harmonious spacing for our interface. These tokens should be used for all padding, margin and position coordinates. Multiplying and dividing these values is allowed using even numbers (*2 *4 or /2 /4 etc).

ExampleDescriptionTokenContrastStatus

2px

Space: XXX-Small

XXX-small space is used when the space is limited.

$space-xxx-small var(--space-xxx-small)N/A

4px

Space: XX-Small

XX-small space is used when the space is limited.

$space-xx-small var(--space-xx-small)N/A

8px

Space: X-Small

X-small space is used when the space is limited.

$space-x-small var(--space-x-small)N/A

12px

Space: Small

Small space is used when the space is limited and for example in popover datepicker.

$space-small var(--space-small)N/A

16px

Space: Medium

Medium is the default space.

$space-medium var(--space-medium)N/A

20px

Space: Large

Large space is most commonly used as an empty space between two components.

$space-large var(--space-large)N/A

28px

Space: X-Large

X-large space is used as an empty space between two elements.

$space-x-large var(--space-x-large)N/A

36px

Space: XX-Large

XX-large space is used as horizontal padding in buttons and as an empty space between two elements.

$space-xx-large var(--space-xx-large)N/A

48px

Space: XXX-Large

XXX-large space is used as an empty space between two elements.

$space-xxx-large var(--space-xxx-large)N/A

72px

Space: XXXX-Large

XXXX-large space is used as an empty space between two elements.

$space-xxxx-large var(--space-xxxx-large)N/A

Sizes

Size tokens are used to set element sizes according to Duet’s sizing scale. Can be used for both the width and height properties.

ExampleDescriptionTokenContrastStatus

7px

Size: Icon XXX-Small

XXX-small icon size is used when the space is limited.

$size-icon-xxx-small var(--size-icon-xxx-small)N/A

10px

Size: Icon XX-Small

XX-small icon size is used when the space is limited.

$size-icon-xx-small var(--size-icon-xx-small)N/A

16px

Size: Icon X-Small

X-small icon size is used when the space is limited.

$size-icon-x-small var(--size-icon-x-small)N/A

20px

Size: Icon Small

Small icon size is used with text links, buttons, inside forms, and in global navigation.

$size-icon-small var(--size-icon-small)N/A

24px

Size: Icon Medium

Medium icon size is the standard icon size. Used for example in primary selections.

$size-icon-medium var(--size-icon-medium)N/A

30px

Size: Icon Large

Large icon size is used for insurance categories in mobile, small product levels, and card icons.

$size-icon-large var(--size-icon-large)N/A

36px

Size: Icon X-Large

X-large icon size is used as product level icons.

$size-icon-x-large var(--size-icon-x-large)N/A

48px

Size: Icon XX-Large

XX-large icon size is used in components as a visual element.

$size-icon-xx-large var(--size-icon-xx-large)N/A

72px

Size: Icon XXX-Large

XXX-large icon size is used for insurance categories in desktop and to visualise feedback overlays.

$size-icon-xxx-large var(--size-icon-xxx-large)N/A

1110px

Size: Layout Max-Width

This size is used as the max-width for all layouts on the Web.

$size-layout-max-width var(--size-layout-max-width)N/A

1px

Size: Form Border

Form border size is used to set a consistent borders for form elements.

$size-form-border var(--size-form-border)N/A

2px

Size: Button Border

Button border size is used to set a consistent borders for buttons.

$size-button-border var(--size-button-border)N/A

30px

Size: Step Small

Small step size is used for stepper circles that have icon inside them (mobile viewports).

$size-step-small var(--size-step-small)N/A

3rem

Size: Navigation

Navigation size (48px) is used for the navigation height on desktop viewports.

$size-navigation var(--size-navigation)N/A

40px

Size: Step Medium

Medium step size is used for stepper circles that have icon inside them (desktop viewports).

$size-step-medium var(--size-step-medium)N/A

48px

Size: Tappable Square

A minimum recommended touch target size is 48 device independent pixels on a website with a properly set mobile viewport.

$size-tappable-square var(--size-tappable-square)N/A

4rem

Size: Header

Header size (64px) is used for the header height on mobile, tablet and desktop viewports.

$size-header var(--size-header)N/A

8rem

Size: Button Min Width

Button min width size is used to set the minimum width for button elements.

$size-button-min-width var(--size-button-min-width)N/A

Opacity

The opacity property specifies how transparent an element is. Use the below defined tokens to set transparencies consistently.

ExampleDescriptionTokenContrastStatus

0.30

Opacity: 30%

Gives 30% opacity to an element.

$opacity-30 var(--opacity-30)N/A

0.50

Opacity: 50%

Gives 50% opacity to an element.

$opacity-50 var(--opacity-50)N/A

0.75

Opacity: 75%

Gives 75% opacity to an element.

$opacity-75 var(--opacity-75)N/A

Z Index

Managing vertical stacking order across large websites and applications can be a painful experience. That’s why Duet includes a predefined system to make handling of z-indexes easier.

ExampleDescriptionTokenContrastStatus

-999999

Z-Index: Deep

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

$z-index-deep var(--z-index-deep)N/A

1

Z-Index: Default

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

$z-index-default var(--z-index-default)N/A

100

Z-Index: Masked

Default z-index for masked interface elements.

$z-index-masked var(--z-index-masked)N/A

200

Z-Index: Mask

Default z-index for masking interface elements.

$z-index-mask var(--z-index-mask)N/A

300

Z-Index: Sticky

Default z-index for sticky interface elements.

$z-index-sticky var(--z-index-sticky)N/A

400

Z-Index: Header

Default z-index for header.

$z-index-header var(--z-index-header)N/A

500

Z-Index: Toast

Default z-index for toast messages.

$z-index-toast var(--z-index-toast)N/A

600

Z-Index: Dropdown

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

$z-index-dropdown var(--z-index-dropdown)N/A

700

Z-Index: Overlay

Default z-index for modal and popup overlays.

$z-index-overlay var(--z-index-overlay)N/A

800

Z-Index: Spinner

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

$z-index-spinner var(--z-index-spinner)N/A

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.

$z-index-modal var(--z-index-modal)N/A

950

Z-Index: Popup

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

$z-index-popup var(--z-index-popup)N/A

Line Height

Line-height property defines the amount of space above and below inline elements. Duet uses “unitless” values to define line-heights, which ensures that the line-height is always relative to the used font-size.

ExampleDescriptionTokenContrastStatus
1.1 renders as 17.6px with 16px font.

1.1

Line Height: X-Small

X-small line-height is used when we don’t want the line-height to create any additional white space above or below text.

$line-height-x-small var(--line-height-x-small)N/A
1.25 renders as 20px with 16px font.

1.25

Line Height: Small

Small line-height is used for all application headings and text in sidebar.

$line-height-small var(--line-height-small)N/A
1.5 renders as 24px with 16px font.

1.5

Line Height: Medium

Medium line-height is used for the main body text. Basically everything else except the headings and sidebar (and a few other exceptions).

$line-height-medium var(--line-height-medium)N/A

Transition

We use transitions to add a sense of playfulness and delight to our interface. Transitions also hint at functionality and inform the user's mental model of how an interface functions.

ExampleDescriptionTokenContrastStatus

300ms ease

Transition: Quickly

Use this design token for a quick transition. Most often used for button, link and form input hover effects.

$transition-quickly var(--transition-quickly)N/A

600ms ease

Transition: Slowly

Use this design token for a slow transition. Used for example in mobile navigation.

$transition-slowly var(--transition-slowly)N/A

Media Query

Media queries are useful when you want to modify your application depending on the user’s screen size. Use the below defined tokens to set media queries consistently when building websites mobile first.

ExampleDescriptionTokenContrastStatus

'only screen and (max-width: 22.5em)'

Media Query: XX-Small

XX-Small media query is used to target the smallest devices between 0-360px. Remember that in most cases the XX-Small media query is rarely needed when building websites mobile first.

$media-query-xx-small var(--media-query-xx-small)N/A

'only screen and (max-width: 35.9375em)'

Media Query: X-Small

X-Small media query is used to target smaller devices between 0-575px. Remember that in most cases the X-Small media query is rarely needed when building websites mobile first.

$media-query-x-small var(--media-query-x-small)N/A

'only screen and (min-width: 36em)'

Media Query: Small

Small media query is used to target devices from 576px and up. When working mobile first, this is your first breakpoint when the viewport width grows.

$media-query-small var(--media-query-small)N/A

'only screen and (min-width: 48em)'

Media Query: Medium

Medium media query is used to target portrait tablets from 768px and up.

$media-query-medium var(--media-query-medium)N/A

'only screen and (min-width: 62em)'

Media Query: Large

Large media query is used to target landscape tablets from 992px and up.

$media-query-large var(--media-query-large)N/A

'only screen and (min-width: 64.0625em)'

Media Query: X-Large

X-Large media query is used to target desktop devices from 1025px and up.

$media-query-x-large var(--media-query-x-large)N/A

'only screen and (min-width: 76.25em)'

Media Query: XX-Large

XX-Large media query is used to target desktop devices from 1220px and up.

$media-query-xx-large var(--media-query-xx-large)N/A

About #

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.

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

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 Duet 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 Duet Design Tokens by following the instructions below.

Install using NPM #

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

npm install @duetds/tokens --save

Install using Yarn #

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

yarn add @duetds/tokens

Usage #

You can find a list of all available design tokens in Duet Design Tokens documentation.

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("@duetds/tokens");

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

In JSON, design token names are formatted in snake_case:

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

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

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

// Import design tokens
import tokens from "@duetds/tokens";

// …or… import a single design token
import { colorPrimary } from "@duetds/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 "~@duetds/tokens/lib/tokens.scss";

.example {
  color: $color-primary;
}

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

.example {
  color: map-get($tokens-map, "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/@duetds/tokens/lib/tokens.scss";

.example {
  color: $color-primary;
}

Importing CSS Custom Properties #

CSS Custom properties (sometimes referred to as CSS variables) are useful for prototyping and when we don’t have to support older Internet Explorers. You can import them in plain CSS or Sass:

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

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

Importing in HTML #

CSS Custom properties can be imported in HTML as well:

<link rel="stylesheet" href="tokens.custom-properties.css" />

Importing in Sketch #

To import Duet’s color palette in Sketch, follow the below steps:

  1. Download and install Sketch Palettes plugin.
  2. Download LocalTapiola Color Palette or Turva Color Palette.
  3. From Sketch’s Plugins menu, select Sketch Palettes / Load Palette… and choose the file you just downloaded.
  4. Once loaded, you should have the palette visible in Sketch’s color picker. To show the token names as well click the icon with four tiny circles:
Sketch color palette

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 Duet Design Tokens are correctly installed, follow the below steps.

  1. Require common.js module: const tokens = require("@duetds/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.

Keeping tokens up to date #

To make sure you’re using the latest available fonts, run npm outdated to see which packages have updates. If you see outdated versions, use npm update to update to latest minor version. For major versions you have to bump the version numbers by hand in package.json and then run npm install.

Examples #

Troubleshooting #

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