Skip to main content

Branding Token

When selecting branding token to create your initial Design Token set, you apply basic corporate design elements to the Design System.

Color Palette


_10
"color": {
_10
"primary": "#05566a",
_10
"primary-inverted": "#ecff00",
_10
"background": "#fff",
_10
"foreground": "#050505",
_10
"link": "#5D5DD5",
_10
"link-inverted": "#C6C6FF"
_10
},

TokenDescription
primaryImportant/interactive elements
The most prevalent color of the design system
backgroundDefault background-color
foregroundDefault text-color
Upon inversion, foreground and background will be swapped
linkSignals text-links

Spacing Scales


_10
"spacing": {
_10
"base": 8,
_10
"scale-ratio": 1.35,
_10
"bp-ratio": 1.15
_10
},

TokenDescription
baseThe base spacing pixel value
It will represent the spacing-m value on the spacing scale
This value will be applied directly on mobile devices, on further breakpoints it will be scaled up
scale-ratioSet the value the m spacing value will be scaled by, down to xxs and up to xxl
bp-factorA single value by which the base spacing will be multiplied on each breakpoint

Fonts


_39
"font": {
_39
"display": {
_39
"family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
_39
"font-size": 18,
_39
"line-height": 1.5,
_39
"scale-ratio": 1.225,
_39
"bp-factor": {
_39
"phone": 1.167,
_39
"tablet": 1.333
_39
}
_39
},
_39
"copy": {
_39
"family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
_39
"font-size": 16,
_39
"line-height": 1.5,
_39
"scale-ratio": 1.225,
_39
"bp-factor": {
_39
"tablet": 1.125
_39
}
_39
},
_39
"ui": {
_39
"family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
_39
"font-size": 16,
_39
"line-height": 1.5,
_39
"scale-ratio": 1.225,
_39
"bp-factor": {
_39
"tablet": 1.125
_39
}
_39
},
_39
"mono": {
_39
"family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_39
"font-size": 16,
_39
"line-height": 1.75,
_39
"scale-ratio": 1.225,
_39
"bp-factor": {
_39
"tablet": 1.125
_39
}
_39
}
_39
},

TokenPreview
displayfont-family for headlines
copyfont-family for copy text
uifont-family for user interface
monofont-family for code display
font-sizeThe base font size pixel value
It will represent the font-size-*-m value on the font-size scale
This value will be applied directly on mobile screens, on larger breakpoints it will be scaled up
line-heightThe base line-height factor
The factor is multiplied with the font-size
bp-factorThe value by which the base font size will be multiplied, when on a certain breakpoint

Font Weights


_10
"font-weight": {
_10
"light": 300,
_10
"regular": 400,
_10
"semi-bold": 600,
_10
"bold": 700
_10
},

Add font-weights and the corresponding values to your design system.

Breakpoints


_10
"breakpoints": {
_10
"phone": 576,
_10
"tablet": 768,
_10
"laptop": 992,
_10
"desktop": 1200
_10
}

Set the screen sizes from which on the according breakpoint will be applied.