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.
| Example | Description | Token | Status |
|---|---|---|---|
| #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. | $ var(--) |  |
| #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. | $ var(--) | |
| #00629a rgb(0, 98, 154) | Primary Blue Darker #Primary digital red that is accessible with white. Used as link text color. | $ var(--) | |
| #ad0b2b rgb(173, 11, 43) | Primary Red Darker #Primary digital red that is accessible with white. Used as link text color. | $ var(--) | |
| #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. | $ var(--) | |
| #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. | $ var(--) | |
| #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. | $ var(--) | |
| #f4cfd6 rgb(244, 207, 214) |
| $ var(--) |  |
| #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. | $ var(--) | |
| #f9e6ea rgb(249, 230, 234) |
| $ var(--) | |
| #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. | $ var(--) | |
| #fcf3f4 rgb(252, 243, 244) |
| $ var(--) | |
| #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. | $ var(--) | |
| #171c3a rgb(23, 28, 58) | Secondary Black #Secondary black that is accessible with light, lighter and lightest primary red. Used as the body text color. | $ var(--) | |
| #00a1d4 rgb(0, 161, 212) |
| $ var(--) | |
| #b2b4b3 rgb(178, 180, 179) | Brand Gray #Non-accessible brand gray that is used in Turva logo and print materials. | $ var(--) | |
| #de2362 rgb(222, 35, 98) | Status Danger #Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $ var(--) | |
| #e02a0d rgb(224, 42, 13) | Status Danger #Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $ var(--) | |
| #f7b228 rgb(247, 178, 40) | Status Warning #Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $ var(--) | |
| #faa40f rgb(250, 164, 15) | Status Warning #Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $ var(--) | |
| #00875a rgb(0, 135, 90) | Status Success #Success green that is accessible with white. Only used in special cases like form validation and messaging. | $ var(--) | |
| #08874e rgb(8, 135, 78) | Status Success #Success green that is accessible with white. Only used in special cases like form validation and messaging. | $ var(--) | |
| #444445 rgb(68, 68, 69) | Gray Darker #Dark gray that is accessible with white. Most commonly used as selected tab button background color. | $ var(--) | |
| #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. | $ var(--) | |
| #747475 rgb(116, 116, 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. | $ var(--) | |
| #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. | $ var(--) | |
| #e4e4e6 rgb(228, 228, 230) | Gray Light #Light gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface. | $ var(--) | |
| #cfcfd1 rgb(207, 207, 209) | Gray #Gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface. | $ var(--) | |
| #cfd2d4 rgb(207, 210, 212) | Gray #Gray that is accessible with secondary blue. For consistency, we use this common grayscale palette throughout the interface. | $ var(--) | |
| #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. | $ var(--) | |
| #f5f5f7 rgb(245, 245, 247) | Gray Lighter #Light gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface. | $ var(--) | |
| #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. | $ var(--) | |
| #ffffff rgb(255, 255, 255) | Gray Lightest #White is used as the primary page background color and primary container background color. | $ var(--) | |
| #ffffff rgb(255, 255, 255) | Gray Lightest #White is used as the primary page background color and primary container background color. | $ var(--) | |
| #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. | $ var(--) | |
| #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. | $ var(--) | |
| #171c3a rgb(23, 28, 58) | 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. | $ var(--) | |
| #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. | $ var(--) | |
| #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. | $ var(--) | |
| #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. | $ var(--) | |
| #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. | $ var(--) | |
| #a9457c rgb(169, 69, 124) | Category Union #Union category color that is accessible with white. Should be only used within the union product category and icons (or similar) representing it. | $ var(--) | |
| #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. | $ var(--) | |
| #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. | $ var(--) | |
| #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. | $ var(--) | |
Ready, can be used in production. 
In Review, ready to be used soon. Prototype, do not use. Data Visualization
The below defined color palette is meant for data visualizations only. It is designed to meet the accessibility requirements and work together with our main color palette above.
| Example | Description | Token | Status |
|---|---|---|---|
| 14.74 #7a01c4 rgb(122, 1, 196) | Data 01 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #009bcc rgb(0, 155, 204) | Data 02 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #1bab4b rgb(27, 171, 75) | Data 03 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #ff5622 rgb(255, 86, 34) | Data 04 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #f54c9a rgb(245, 76, 154) | Data 05 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #c21565 rgb(194, 21, 101) | Data 06 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #c065f7 rgb(192, 101, 247) | Data 07 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #0069bf rgb(0, 105, 191) | Data 08 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #137835 rgb(19, 120, 53) | Data 09 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #b33c18 rgb(179, 60, 24) | Data 10 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #0da3A6 rgb(13, 163, 166) | Data 11 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #0b7288 rgb(11, 114, 136) | Data 12 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #b38918 rgb(179, 137, 24) | Data 13 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #806211 rgb(128, 98, 17) | Data 14 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
| 14.74 #00294d rgb(0, 41, 77) | Data 15 #Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $ var(--) | |
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.
| Example | Description | Token | Status |
|---|---|---|---|
'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. | $ var(--) | |
'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. | $ var(--) | |
'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. | $ var(--) | |
'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. | $ var(--) | |
-0.01rem | Letter Spacing: Heading #Gives tiny amount of negative letter spacing for the page main heading. | $ var(--) | |
400 | Font Weight: Normal #Normal font weight is used for body text and form inputs together with “Text” font family. | $ var(--) | |
600 | Font Weight: Semi Bold #Semi bold font weight is used for buttons and sub headings together with “Text” font family. | $ var(--) | |
700 | Font Weight: Bold #Bold font weight is used for headings only together with “Heading” font family. | $ var(--) | |
800 | Font Weight: Extra Bold #Extra bold font weight is used for headings only together with “Heading” font family. | $ var(--) | |
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.
| Example | Description | Token | Status |
|---|---|---|---|
| Aa 0.75rem | Font Size: X-Small #X-Small font size that is only used in native iOS and Android applications. | $ var(--) | |
| Aa 0.875rem | Font Size: Small #Small font size should be used sparingly for annotations, descriptions, and similar content. | $ var(--) | |
| Aa 1rem | Font Size: Medium #Medium font size is used for the body text. | $ var(--) | |
| Aa 1.25rem | Font Size: Large #Large font size is used for small sub-headings. | $ var(--) | |
| Aa 1.5rem | Font Size: X-Large #X-large font size is used for large sub-headings. | $ var(--) | |
| Aa 2.25rem | Font Size: XX-Large #XX-large font size is used for the main heading on tablet size. | $ var(--) | |
| Aa 3rem | Font Size: XXX-Large #XXX-large font size is used for the main heading on desktop. | $ var(--) | |
| Aa 4.5rem | Font Size: XXXX-Large #XXXX-large font size is for marketing purposes and banners. | $ var(--) | |
Border Radius
Border-radius is used to give any element rounded corners. Use the below defined tokens to set radiuses consistently.
| Example | Description | Token | Status |
|---|---|---|---|
| 0 | Border Radius: Sharp #Sharp border-radius resets the corners to be sharp with no rounding. | $ var(--) | |
| 12px | Border Radius: Intermediate #Intermediate border-radius is in some interactive UI elements and when medium is not enough and large is too much. | $ var(--) | |
| 16px | Border Radius: Large #Large border-radius is used in marketing container, banners and big images. | $ var(--) | |
| 20rem | Border Radius: Pill #Pill border-radius is the default radius for buttons, tags, tabs, and similar. | $ var(--) | |
| 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. | $ var(--) | |
| 50% | Border Radius: Circle #Circle border-radius is used as icon background shape and as avatar shape. | $ var(--) | |
| 8px | Border Radius: Medium #Medium border-radius is used in cards, small containers (e.g. menu component) and small images. | $ var(--) | |
Box Shadow
Box-shadows are used to cast shadows from interface elements. Use the below defined tokens to set shadows consistently.
| Example | Description | Token | Status |
|---|---|---|---|
| 0 0 0 1px #0077b3 | Shadow: Focus Input #Input element focus shadow styling, incorporates $color-primary. | $ var(--) | |
| 0 0 0 1px #171c3a | Shadow: Focus Input Turva #Focus state shadow for input elements in Turva theme, using $color-secondary-turva. | $ var(--) | |
| 0 0 0 1px #747475 | Shadow: Hover Input Turva #Hover state shadow for input elements in Turva theme, using $color-gray-dark-turva. | $ var(--) | |
| 0 0 0 1px #909599 | Shadow: Hover Input #Input hover state shadow, uses $color-gray-dark. | $ var(--) | |
| 0 0 0 1px #de2362 | Shadow: Error #Error state shadow, uses $color-danger. | $ var(--) | |
| 0 0 0 1px #e55039 | Shadow: Error Turva #Error state shadow for Turva theme, using $color-danger-turva. | $ var(--) | |
| 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 | Shadow: Focus #Applied for focus state shadow styling, utilizes $color-primary. | $ var(--) | |
| 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a | Shadow: Focus Turva #Focus state shadow for Turva theme, using $color-secondary-turva. | $ var(--) | |
| 0 2px 10px 0 rgba(0, 41, 77, 0.07) | Shadow: Tooltip #Tooltip shadow is used by popover tooltips. | $ var(--) | |
| 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. | $ var(--) | |
| 0 2px 10px 0 rgba(117, 117, 117, 0.13) | Shadow: Tooltip #Tooltip shadow is used by popover tooltips. | $ var(--) | |
| 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. | $ var(--) | |
| 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. | $ var(--) | |
| 0 2px 6px 0 rgba(0, 41, 77, 0.07) | Shadow: Default #Default shadow style. | $ var(--) | |
| 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. | $ var(--) | |
| 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. | $ var(--) | |
| 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. | $ var(--) | |
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).
| Example | Description | Token | Status |
|---|---|---|---|
| 2px | Space: XXX-Small #XXX-small space is used when the space is limited. | $ var(--) | |
| 4px | Space: XX-Small #XX-small space is used when the space is limited. | $ var(--) | |
| 94px | Space: XXXXX-Large #XXXXX-large space is used as spacer on modals. | $ var(--) | |
| 8px | Space: X-Small #X-small space is used when the space is limited. | $ var(--) | |
| 12px | Space: Small #Small space is used when the space is limited and for example in popover datepicker. | $ var(--) | |
| 16px | Space: Medium #Medium is the default space. | $ var(--) | |
| 20px | Space: Large #Large space is most commonly used as an empty space between two components. | $ var(--) | |
| 28px | Space: X-Large #X-large space is used as an empty space between two elements. | $ var(--) | |
| 36px | Space: XX-Large #XX-large space is used as horizontal padding in buttons and as an empty space between two elements. | $ var(--) | |
| 48px | Space: XXX-Large #XXX-large space is used as an empty space between two elements. | $ var(--) | |
| 72px | Space: XXXX-Large #XXXX-large space is used as an empty space between two elements. | $ var(--) | |
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.
| Example | Description | Token | Status |
|---|---|---|---|
| 7px | Size: Icon XXX-Small #XXX-small icon size is used when the space is limited. | $ var(--) | |
| 10px | Size: Icon XX-Small #XX-small icon size is used when the space is limited. | $ var(--) | |
| 16px | Size: Icon X-Small #X-small icon size is used when the space is limited. | $ var(--) | |
| 20px | Size: Icon Small #Small icon size is used with text links, buttons, inside forms, and in global navigation. | $ var(--) | |
| 24px | Size: Icon Medium #Medium icon size is the standard icon size. Used for example in primary selections. | $ var(--) | |
| 30px | Size: Icon Large #Large icon size is used for insurance categories in mobile, small product levels, and card icons. | $ var(--) | |
| 36px | Size: Icon X-Large #X-large icon size is used as product level icons. | $ var(--) | |
| 48px | Size: Icon XX-Large #XX-large icon size is used in components as a visual element. | $ var(--) | |
| 72px | Size: Icon XXX-Large #XXX-large icon size is used for insurance categories in desktop and to visualise feedback overlays. | $ var(--) | |
| 1110px | Size: Layout Max-Width #This size is used as the max-width for all layouts on the Web. | $ var(--) | |
| 1px | Size: Button Border #Button border size is used to set a consistent borders for buttons. | $ var(--) | |
| 1px | Size: Button Tiny Border #Button tiny border size is used to set a consistent borders for action buttons - that contain only icons. | $ var(--) | |
| 1px | Size: Form Border #Form border size is used to set a consistent borders for form elements. | $ var(--) | |
| 2px | Size: Medium Border #Medium border size is used to set a consistent borders for components needing thicker border than buttons or form elements. | $ var(--) | |
| 30px | Size: Step Small #Small step size is used for stepper circles that have icon inside them (mobile viewports). | $ var(--) | |
| 3rem | Size: Navigation #Navigation size (48px) is used for the navigation height on desktop viewports. | $ var(--) | |
| 40px | Size: Step Medium #Medium step size is used for stepper circles that have icon inside them (desktop viewports). | $ var(--) | |
| 48px | Size: Tappable Square #A minimum recommended touch target size is 48 device independent pixels on a website with a properly set mobile viewport. | $ var(--) | |
| 4rem | Size: Header #Header size (64px) is used for the header height on mobile, tablet and desktop viewports. | $ var(--) | |
| 8rem | Size: Button Min Width #Button min width size is used to set the minimum width for button elements. | $ var(--) | |
Opacity
The opacity property specifies how transparent an element is. Use the below defined tokens to set transparencies consistently.
| Example | Description | Token | Status |
|---|---|---|---|
| 0.30 | Opacity: 30% #Gives 30% opacity to an element. | $ var(--) | |
| 0.50 | Opacity: 50% #Gives 50% opacity to an element. | $ var(--) | |
| 0.75 | Opacity: 75% #Gives 75% opacity to an element. | $ var(--) | |
| 0.85 | Opacity: 85% #Gives 85% opacity to an element. | $ var(--) | |
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.
| Example | Description | Token | Status |
|---|---|---|---|
-999999 | Z-Index: Deep #Deep z-index is used to stack something behind everything else. | $ var(--) | |
1 | Z-Index: Default #The default z-index for components and elements inside components. | $ var(--) | |
100 | Z-Index: Masked #Default z-index for masked interface elements. | $ var(--) | |
200 | Z-Index: Mask #Default z-index for masking interface elements. | $ var(--) | |
250 | Z-Index: Mask Buttons #Default z-index for buttons that should overlap masking interface elements. | $ var(--) | |
300 | Z-Index: Sticky #Default z-index for sticky interface elements. | $ var(--) | |
400 | Z-Index: Header #Default z-index for header. | $ var(--) | |
500 | Z-Index: Toast #Default z-index for toast messages. | $ var(--) | |
600 | Z-Index: Dropdown #Default z-index for dropdowns which makes sure the dropdown stacks above toasts and sticky elements. | $ var(--) | |
700 | Z-Index: Overlay #Default z-index for modal and popup overlays. | $ var(--) | |
800 | Z-Index: Spinner #Default z-index for spinners, stacking on top of overlay. | $ var(--) | |
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. | $ var(--) | |
950 | Z-Index: Popup #Default z-index for popups that stacks on top of all other elements. | $ var(--) | |
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.
| Example | Description | Token | Status |
|---|---|---|---|
| 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. | $ var(--) | |
| 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. | $ var(--) | |
| 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). | $ var(--) | |
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.
| Example | Description | Token | Status |
|---|---|---|---|
300ms ease | Transition: Quickly #Use this design token for a quick transition. Most often used for button, link and form input hover effects. | $ var(--) | |
600ms ease | Transition: Slowly #Use this design token for a slow transition. Used for example in mobile navigation. | $ var(--) | |
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.
| Example | Description | Token | Status |
|---|---|---|---|
'(max-width: 20.5em)' | Media Query: XXX-Small #XX-Small media query is used to target devices below 360px. Remember that in most cases the XXX-Small media query is rarely needed when building websites mobile first. | $ var(--) | |
'(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. | $ var(--) | |
'(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. | $ var(--) | |
'(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. | $ var(--) | |
'(min-width: 48em)' | Media Query: Medium #Medium media query is used to target portrait tablets from 768px and up. | $ var(--) | |
'(min-width: 62em)' | Media Query: Large #Large media query is used to target landscape tablets from 992px and up. | $ var(--) | |
'(min-width: 64.0625em)' | Media Query: X-Large #X-Large media query is used to target desktop devices from 1025px and up. | $ var(--) | |
'(min-width: 76.25em)' | Media Query: XX-Large #XX-Large media query is used to target large desktop devices from 1220px and up. | $ var(--) | |
'(min-width: 106.25em)' | Media Query: XXX-Large #XXX-Large media query is used to target very large desktop devices from 1700px and up. | $ var(--) | |
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/tokensInstall using Yarn #
Run in your project or website root directory (where package.json lives):
yarn add @duetds/tokensUsage #
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 * as 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 into Figma #
You can import design tokens into Figma using the Tokens Studio plugin for Figma.
After installing the plugin, choose the Sync option from the plugin's Settings tab and choose URL option. Enter the following URL into the input field: https://www.duetds.com/assets/downloads/tokens.figma.json
List of all available formats #
Below you can find a list of all available formats and paths to them.
- Sass:
"@duetds/tokens/lib/tokens.scss" - Sass Map:
"@duetds/tokens/lib/tokens.map.scss" - CSS Custom Properties:
"@duetds/tokens/lib/tokens.custom-properties.css" - Less:
"@duetds/tokens/lib/tokens.less" - Stylus:
"@duetds/tokens/lib/tokens.styl" - Common.js:
"@duetds/tokens/lib/tokens.common.js" - JSON:
"@duetds/tokens/lib/tokens.json" - Raw JSON:
"@duetds/tokens/lib/tokens.raw.json" - iOS JSON:
"@duetds/tokens/lib/tokens.ios.json" - Android XML:
"@duetds/tokens/lib/tokens.android.xml" - Tokens Studio for Figma:
"@duetds/tokens/lib/tokens.figma.json"
Testing integration #
To quickly test if Duet Design Tokens are correctly installed, follow the below steps.
- Require common.js module:
const tokens = require("@duetds/tokens") - Use console log to output a list of all tokens:
console.log(tokens) - 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 #
- The very page you’re looking at is using tokens: Design Token API docs
- For more concrete examples, see templates section in documentation.
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.