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

},

	Token	Description
	primary	Important/interactive elements The most prevalent color of the design system
	background	Default background-color
	foreground	Default text-color Upon inversion, foreground and background will be swapped
	link	Signals text-links

Spacing Scales

_10

"spacing": {

_10

"base": 8,

_10

"scale-ratio": 1.35,

_10

"bp-ratio": 1.15

_10

},

Token	Description
base	The 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-ratio	Set the value the m spacing value will be scaled by, down to xxs and up to xxl
bp-factor	A 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

},

Token	Preview
display	font-family for headlines
copy	font-family for copy text
ui	font-family for user interface
mono	font-family for code display
font-size	The 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-height	The base line-height factor The factor is multiplied with the font-size
bp-factor	The 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.