Skip to main content

2. Design Application

Overview

Applying your branding and corporate design to kickstartDS is itself done in roughly two steps:

  1. Use a reduced set of Branding Token to generate your initial Design Token set
  2. Fine tune the resulting Design Token set to closely fit your corporate identity

Apply branding

Initialization

We start by creating a file branding-token.json, inside a new directory src/token... for everything to do with Design Token going forward:


_2
mkdir -p src/token
_2
touch src/token/branding-token.json

This file will hold all of our Branding Token. Those are used to initialize you first Design Token set, and especially ease first-time setup.
Get the most up-to-date version of its content from here, and paste it into the file you just created:

src/token/branding-token.json
Copy

_78
{
_78
"color": {
_78
"primary": "#333",
_78
"primary-inverted": "#fff",
_78
"background": "#fff",
_78
"foreground": "#000",
_78
"link": "#1c7ed6",
_78
"link-inverted": "#a5d8ff",
_78
"positive": "#66a80f",
_78
"positive-inverted": "#94d82d",
_78
"informative": "#1a78cc",
_78
"informative-inverted": "#4dabf7",
_78
"notice": "#fab005",
_78
"notice-inverted": "#f59f00",
_78
"negative": "#e03131",
_78
"negative-inverted": "#fa5c5c"
_78
},
_78
"font": {
_78
"display": {
_78
"family": "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"phone": 1.167,
_78
"tablet": 1.333
_78
}
_78
},
_78
"copy": {
_78
"family": "'Helvetica Neue', Helvetica, Arial, sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"interface": {
_78
"family": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"mono": {
_78
"family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
}
_78
},
_78
"font-weight": {
_78
"light": 300,
_78
"regular": 400,
_78
"semi-bold": 600,
_78
"bold": 700
_78
},
_78
"spacing": {
_78
"base": 8,
_78
"scale-ratio": 1.618,
_78
"bp-ratio": 1.414
_78
},
_78
"border-radius": "2px",
_78
"box-shadow": {
_78
"blur": "2.75px"
_78
},
_78
"breakpoints": {
_78
"phone": 576,
_78
"tablet": 768,
_78
"laptop": 992,
_78
"desktop": 1200
_78
}
_78
}

Use a current version

Be sure to actually copy the file linked above, entering the values yourself. This way you'll be sure not to miss any recently updated token in your set up, in case this guide gets outdated!

Select Branding Token

For a more in-depth overview of those token, have a look at our foundations page about Branding Token, detailing all values in use.

But to get a first feel for working with the file, and to add some flavour to our Design System, we'll change some select values around. And feel free to replace everything with values that seem more appropriate for you, or that fit your particular brand (maybe even because you opted to follow the more detailed guide above). If you're wondering which values we selected for this guide... we're mostly matching our own brand for this guide:

PreviewNameValue
primary#05566a
primary-inverted#ecff00
background#fff
foreground#050505
link#5D5DD5
link-inverted#C6C6FF
informative#05566a
informative-inverted#ecff00
font-family-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
scale-ratio1.35
bp-ratio1.15

Apply Branding Token

So let's get right into it, customizing step by step:

Start with copied branding-token.json

This is the file you've copied before, we'll start updating it piecemeal to show off common ways of design application.

src/token/branding-token.json
Copy

_78
{
_78
"color": {
_78
"primary": "#333",
_78
"primary-inverted": "#fff",
_78
"background": "#fff",
_78
"foreground": "#000",
_78
"link": "#1c7ed6",
_78
"link-inverted": "#a5d8ff",
_78
"positive": "#66a80f",/zoo
_78
"positive-inverted": "#94d82d",
_78
"informative": "#1a78cc",
_78
"informative-inverted": "#4dabf7",
_78
"notice": "#fab005",
_78
"notice-inverted": "#f59f00",
_78
"negative": "#e03131",
_78
"negative-inverted": "#fa5c5c"
_78
},
_78
"font": {
_78
"display": {
_78
"family": "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"phone": 1.167,
_78
"tablet": 1.333
_78
}
_78
},
_78
"copy": {
_78
"family": "'Helvetica Neue', Helvetica, Arial, sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"interface": {
_78
"family": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"mono": {
_78
"family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
}
_78
},
_78
"font-weight": {
_78
"light": 300,
_78
"regular": 400,
_78
"semi-bold": 600,
_78
"bold": 700
_78
},
_78
"spacing": {
_78
"base": 8,
_78
"scale-ratio": 1.618,
_78
"bp-ratio": 1.414
_78
},
_78
"border-radius": "2px",
_78
"box-shadow": {
_78
"blur": "2.75px"
_78
},
_78
"breakpoints": {
_78
"phone": 576,
_78
"tablet": 768,
_78
"laptop": 992,
_78
"desktop": 1200
_78
}
_78
}

Customize primary color

Most brands have such a primary color as part of their corporate design guidelines. This will be used to highlight elements, and give them more importance.

Next to primary itself, we'll also define its counter part primary-inverted as #ecff00 (#fff / white works for most uses otherwise, read about the finer details here).

src/token/branding-token.json
Copy

_78
{
_78
"color": {
_78
"primary": "#05566a",
_78
"primary-inverted": "#ecff00",
_78
"background": "#fff",
_78
"foreground": "#000",
_78
"link": "#1c7ed6",
_78
"link-inverted": "#a5d8ff",
_78
"positive": "#66a80f",/zoo
_78
"positive-inverted": "#94d82d",
_78
"informative": "#1a78cc",
_78
"informative-inverted": "#4dabf7",
_78
"notice": "#fab005",
_78
"notice-inverted": "#f59f00",
_78
"negative": "#e03131",
_78
"negative-inverted": "#fa5c5c"
_78
},
_78
"font": {
_78
"display": {
_78
"family": "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"phone": 1.167,
_78
"tablet": 1.333
_78
}
_78
},
_78
"copy": {
_78
"family": "'Helvetica Neue', Helvetica, Arial, sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"interface": {
_78
"family": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"mono": {
_78
"family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
}
_78
},
_78
"font-weight": {
_78
"light": 300,
_78
"regular": 400,
_78
"semi-bold": 600,
_78
"bold": 700
_78
},
_78
"spacing": {
_78
"base": 8,
_78
"scale-ratio": 1.618,
_78
"bp-ratio": 1.414
_78
},
_78
"border-radius": "2px",
_78
"box-shadow": {
_78
"blur": "2.75px"
_78
},
_78
"breakpoints": {
_78
"phone": 576,
_78
"tablet": 768,
_78
"laptop": 992,
_78
"desktop": 1200
_78
}
_78
}

For this guide we'll have just change the foreground color, but this will influence how elements and text are rendered in components. So it is quite an influential choice.

Additionally we'll define some slightly different colors for our link and link-inverted (they always come in pairs!), to make it unique.

src/token/branding-token.json
Copy

_78
{
_78
"color": {
_78
"primary": "#05566a",
_78
"primary-inverted": "#ecff00",
_78
"background": "#fff",
_78
"foreground": "#050505",
_78
"link": "#5D5DD5",
_78
"link-inverted": "#C6C6FF",
_78
"positive": "#66a80f",
_78
"positive-inverted": "#94d82d",
_78
"informative": "#1a78cc",
_78
"informative-inverted": "#4dabf7",
_78
"notice": "#fab005",
_78
"notice-inverted": "#f59f00",
_78
"negative": "#e03131",
_78
"negative-inverted": "#fa5c5c"
_78
},
_78
"font": {
_78
"display": {
_78
"family": "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"phone": 1.167,
_78
"tablet": 1.333
_78
}
_78
},
_78
"copy": {
_78
"family": "'Helvetica Neue', Helvetica, Arial, sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"interface": {
_78
"family": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"mono": {
_78
"family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
}
_78
},
_78
"font-weight": {
_78
"light": 300,
_78
"regular": 400,
_78
"semi-bold": 600,
_78
"bold": 700
_78
},
_78
"spacing": {
_78
"base": 8,
_78
"scale-ratio": 1.618,
_78
"bp-ratio": 1.414
_78
},
_78
"border-radius": "2px",
_78
"box-shadow": {
_78
"blur": "2.75px"
_78
},
_78
"breakpoints": {
_78
"phone": 576,
_78
"tablet": 768,
_78
"laptop": 992,
_78
"desktop": 1200
_78
}
_78
}

Customize tonal colors

There are a bunch of tokens that, for lack of a better explanation, relate to the tone of voice the element using it should have. Most commonly this would be something like a notice shown to the user (which might be successful = positive, neutral = informative, etc).

Because it seems to fit our branding, and doesn't interfere with user expectations otherwise, we'll change informative (and you guessed it, informative-inverted) to our primary color.

src/token/branding-token.json
Copy

_78
{
_78
"color": {
_78
"primary": "#05566a",
_78
"primary-inverted": "#ecff00",
_78
"background": "#fff",
_78
"foreground": "#050505",
_78
"link": "#5D5DD5",
_78
"link-inverted": "#C6C6FF",
_78
"positive": "#66a80f",
_78
"positive-inverted": "#94d82d",
_78
"informative": "#05566a",
_78
"informative-inverted": "#ecff00",
_78
"notice": "#fab005",
_78
"notice-inverted": "#f59f00",
_78
"negative": "#e03131",
_78
"negative-inverted": "#fa5c5c"
_78
},
_78
"font": {
_78
"display": {
_78
"family": "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"phone": 1.167,
_78
"tablet": 1.333
_78
}
_78
},
_78
"copy": {
_78
"family": "'Helvetica Neue', Helvetica, Arial, sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"interface": {
_78
"family": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"mono": {
_78
"family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
}
_78
},
_78
"font-weight": {
_78
"light": 300,
_78
"regular": 400,
_78
"semi-bold": 600,
_78
"bold": 700
_78
},
_78
"spacing": {
_78
"base": 8,
_78
"scale-ratio": 1.618,
_78
"bp-ratio": 1.414
_78
},
_78
"border-radius": "2px",
_78
"box-shadow": {
_78
"blur": "2.75px"
_78
},
_78
"breakpoints": {
_78
"phone": 576,
_78
"tablet": 768,
_78
"laptop": 992,
_78
"desktop": 1200
_78
}
_78
}

Add a fitting font

In this guide we'll opt for a native system font stack for our display and copy fonts. We'll leave interface and mono and all size values untouched for now. If you have other requirements (for example a self-hosted font, or one by Google Fonts), we'll add a guide for that soon!

src/token/branding-token.json
Copy

_78
{
_78
"color": {
_78
"primary": "#05566a",
_78
"primary-inverted": "#ecff00",
_78
"background": "#fff",
_78
"foreground": "#050505",
_78
"link": "#5D5DD5",
_78
"link-inverted": "#C6C6FF",
_78
"positive": "#66a80f",
_78
"positive-inverted": "#94d82d",
_78
"informative": "#05566a",
_78
"informative-inverted": "#ecff00",
_78
"notice": "#fab005",
_78
"notice-inverted": "#f59f00",
_78
"negative": "#e03131",
_78
"negative-inverted": "#fa5c5c"
_78
},
_78
"font": {
_78
"display": {
_78
"family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"phone": 1.167,
_78
"tablet": 1.333
_78
}
_78
},
_78
"copy": {
_78
"family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"interface": {
_78
"family": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"mono": {
_78
"family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
}
_78
},
_78
"font-weight": {
_78
"light": 300,
_78
"regular": 400,
_78
"semi-bold": 600,
_78
"bold": 700
_78
},
_78
"spacing": {
_78
"base": 8,
_78
"scale-ratio": 1.618,
_78
"bp-ratio": 1.414
_78
},
_78
"border-radius": "2px",
_78
"box-shadow": {
_78
"blur": "2.75px"
_78
},
_78
"breakpoints": {
_78
"phone": 576,
_78
"tablet": 768,
_78
"laptop": 992,
_78
"desktop": 1200
_78
}
_78
}

Adjust spacing behaviour

As we have a pretty dense layout in mind, we reduce spacing > scale-ratio and bp-ratio a bit. This will result in spacing in general scaling a bit less.

We keep the general spacing of 8px, though. We'll also leave the rest of the values untouched as they'll work just fine for this guide!

src/token/branding-token.json
Copy

_78
{
_78
"color": {
_78
"primary": "#05566a",
_78
"primary-inverted": "#ecff00",
_78
"background": "#fff",
_78
"foreground": "#050505",
_78
"link": "#5D5DD5",
_78
"link-inverted": "#C6C6FF",
_78
"positive": "#66a80f",
_78
"positive-inverted": "#94d82d",
_78
"informative": "#05566a",
_78
"informative-inverted": "#ecff00",
_78
"notice": "#fab005",
_78
"notice-inverted": "#f59f00",
_78
"negative": "#e03131",
_78
"negative-inverted": "#fa5c5c"
_78
},
_78
"font": {
_78
"display": {
_78
"family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"phone": 1.167,
_78
"tablet": 1.333
_78
}
_78
},
_78
"copy": {
_78
"family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"interface": {
_78
"family": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"mono": {
_78
"family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
}
_78
},
_78
"font-weight": {
_78
"light": 300,
_78
"regular": 400,
_78
"semi-bold": 600,
_78
"bold": 700
_78
},
_78
"spacing": {
_78
"base": 8,
_78
"scale-ratio": 1.35,
_78
"bp-ratio": 1.15
_78
},
_78
"border-radius": "2px",
_78
"box-shadow": {
_78
"blur": "2.75px"
_78
},
_78
"breakpoints": {
_78
"phone": 576,
_78
"tablet": 768,
_78
"laptop": 992,
_78
"desktop": 1200
_78
}
_78
}

Start with copied branding-token.json

This is the file you've copied before, we'll start updating it piecemeal to show off common ways of design application.

Customize primary color

Most brands have such a primary color as part of their corporate design guidelines. This will be used to highlight elements, and give them more importance.

Next to primary itself, we'll also define its counter part primary-inverted as #ecff00 (#fff / white works for most uses otherwise, read about the finer details here).

For this guide we'll have just change the foreground color, but this will influence how elements and text are rendered in components. So it is quite an influential choice.

Additionally we'll define some slightly different colors for our link and link-inverted (they always come in pairs!), to make it unique.

Customize tonal colors

There are a bunch of tokens that, for lack of a better explanation, relate to the tone of voice the element using it should have. Most commonly this would be something like a notice shown to the user (which might be successful = positive, neutral = informative, etc).

Because it seems to fit our branding, and doesn't interfere with user expectations otherwise, we'll change informative (and you guessed it, informative-inverted) to our primary color.

Add a fitting font

In this guide we'll opt for a native system font stack for our display and copy fonts. We'll leave interface and mono and all size values untouched for now. If you have other requirements (for example a self-hosted font, or one by Google Fonts), we'll add a guide for that soon!

Adjust spacing behaviour

As we have a pretty dense layout in mind, we reduce spacing > scale-ratio and bp-ratio a bit. This will result in spacing in general scaling a bit less.

We keep the general spacing of 8px, though. We'll also leave the rest of the values untouched as they'll work just fine for this guide!

src/token/branding-token.json
CopyExpandClose

_78
{
_78
"color": {
_78
"primary": "#333",
_78
"primary-inverted": "#fff",
_78
"background": "#fff",
_78
"foreground": "#000",
_78
"link": "#1c7ed6",
_78
"link-inverted": "#a5d8ff",
_78
"positive": "#66a80f",/zoo
_78
"positive-inverted": "#94d82d",
_78
"informative": "#1a78cc",
_78
"informative-inverted": "#4dabf7",
_78
"notice": "#fab005",
_78
"notice-inverted": "#f59f00",
_78
"negative": "#e03131",
_78
"negative-inverted": "#fa5c5c"
_78
},
_78
"font": {
_78
"display": {
_78
"family": "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"phone": 1.167,
_78
"tablet": 1.333
_78
}
_78
},
_78
"copy": {
_78
"family": "'Helvetica Neue', Helvetica, Arial, sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"interface": {
_78
"family": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
},
_78
"mono": {
_78
"family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_78
"font-size": 16,
_78
"line-height": 1.75,
_78
"scale-ratio": 1.225,
_78
"bp-factor": {
_78
"tablet": 1.125
_78
}
_78
}
_78
},
_78
"font-weight": {
_78
"light": 300,
_78
"regular": 400,
_78
"semi-bold": 600,
_78
"bold": 700
_78
},
_78
"spacing": {
_78
"base": 8,
_78
"scale-ratio": 1.618,
_78
"bp-ratio": 1.414
_78
},
_78
"border-radius": "2px",
_78
"box-shadow": {
_78
"blur": "2.75px"
_78
},
_78
"breakpoints": {
_78
"phone": 576,
_78
"tablet": 768,
_78
"laptop": 992,
_78
"desktop": 1200
_78
}
_78
}

Now that we have a slightly modified, up-to-date version of our Branding Token in place, we can start hooking everything up.

kickstartDS Integration

First, add the kickstartDS CLI to your project:


_1
yarn add kickstartds

package.json
Copy

_17
{
_17
"name": "@my/design-system",
_17
"version": "1.0.0",
_17
"description": "Design System for all @MY needs",
_17
"main": "dist/index.js",
_17
"scripts": {
_17
"test": "echo \"Error: no test specified\" && exit 1"
_17
},
_17
"author": "Jonas Ulrich",
_17
"license": "MIT",
_17
"dependencies": {
_17
"@kickstartds/base": "^2.0.2",
_17
"kickstartds": "^1.0.0",
_17
"react": "^17.0.2",
_17
"react-dom": "^17.0.2"
_17
}
_17
}

Read more about our CLI here

Then add the following two additional lines to your package.json scripts block:

package.json
Copy

_19
{
_19
"name": "@my/design-system",
_19
"version": "1.0.0",
_19
"description": "Design System for all @MY needs",
_19
"main": "dist/index.js",
_19
"scripts": {
_19
"init-tokens": "kickstartDS tokens init",
_19
"build-tokens": "kickstartDS tokens compile",
_19
"test": "echo \"Error: no test specified\" && exit 1"
_19
},
_19
"author": "Jonas Ulrich",
_19
"license": "MIT",
_19
"dependencies": {
_19
"@kickstartds/base": "^2.0.2",
_19
"kickstartds": "^1.0.0",
_19
"react": "^17.0.2",
_19
"react-dom": "^17.0.2"
_19
}
_19
}

init-tokens is used to convert your Branding Token (branding-token.json) into a Style Dictionary compatible Design Token set (a bunch of JSON files), whereas build-tokens takes your Design Token set, and converts it to the outputs needed to use and display your Design System. But more about this later!

Generate first Design Token set

Generate your first full set of Design Token now, by calling:


_1
yarn init-tokens

Your output should look roughly like this:


_35
yarn run v1.22.18
_35
$ kickstartDS tokens init
_35
_ _ _ _ _ ____ ____
_35
| | _(_) ___| | _____| |_ __ _ _ __| |_| _ \/ ___|
_35
| |/ / |/ __| |/ / __| __/ _` | '__| __| | | \___ \
_35
| <| | (__| <\__ \ || (_| | | | |_| |_| |___) |
_35
|_|\_\_|\___|_|\_\___/\__\__,_|_| \__|____/|____/
_35
_35
______________/\\\\\\\\\__/\\\______________/\\\\\\\\\\\_______
_35
___________/\\\////////__\/\\\_____________\/////\\\///________
_35
_________/\\\/___________\/\\\_________________\/\\\___________
_35
________/\\\_____________\/\\\_________________\/\\\___________
_35
_______\/\\\_____________\/\\\_________________\/\\\___________
_35
_______\//\\\____________\/\\\_________________\/\\\___________
_35
________\///\\\__________\/\\\_________________\/\\\___________
_35
__/\\\____\////\\\\\\\\\_\/\\\\\\\\\\\\\\\__/\\\\\\\\\\\__/\\\_
_35
_\///________\/////////__\///////////////__\///////////__\///__
_35
_35
Version: 1.0.0
_35
For more information visit:
_35
https://www.kickstartDS.com/docs/intro/cli
_35
_35
Starting...
_35
[kickstartDS: general] info: welcome to the kickstartDS CLI
_35
[kickstartDS: tokens/init] starting: init command with init variable init-task
_35
[1/1] [init: check] info: checking prerequesites before starting
_35
[1/1] [init: check] info: prerequesites met, starting
_35
[init: cleanup] info: cleaning up temp dir /tmp/tokens-init-init-task before starting command
_35
[init: cleanup] info: finished cleaning up temp dir /tmp/tokens-init-init-task before starting command
_35
[1/1] [init: init] info: running the init subtask
_35
[info] generating your token set from primitives tokens file /tmp/tokens-init-init-task/token-primitives.json
_35
[info] successfully generated primitives tokens and wrote them to folder /tmp/tokens-init-init-task/./src/token/dictionary
_35
[1/1] [init: init] info: finished running the init subtask successfully
_35
[kickstartDS: tokens/init] finished: init command with init variable init-task
_35
Done in 1.19s.

It uses your branding-token.json as an input, and generates a folder src/token/dictionary for you. That folder holds JSON files defining your Design Token by category:


_17
$ tree src/token/dictionary
_17
_17
> src/token/dictionary
_17
> ├── background-color.json
_17
> ├── border-color.json
_17
> ├── border.json
_17
> ├── box-shadow.json
_17
> ├── breakpoints.json
_17
> ├── color.json
_17
> ├── deprecated.json
_17
> ├── depth.json
_17
> ├── spacing.json
_17
> ├── text-color.json
_17
> ├── transition.json
_17
> └── typo.json
_17
>
_17
> 0 directories, 12 files

You'll only use this mechanism when first setting up your tokens. It's meant to specifically ease this workflow. Running it again will overwrite changes you manually did to your Design Token set, which is probably not intended!

To learn more about the categories represented by those generated files, have a look at our foundations page about them.

Compile Design Token set

Finally, to test the integration works as expected, we'll first want to create one additional file: sd.config.js. As the name may imply, this is further configuration for our Design Token, to convert them into different outputs (more specifically the Style Dictionary that gets used under the hood):

And, as this is based on Style Dictionary, it generally follows their configuration scheme.

Let's detail some lines:

Import dependencies

Import style-dictionary to use their native StyleDictionary.extend, and get our pre-made, kickstartDS compatible, configuration from @kickstartds/style-dictionary.

Extend configuration

Our pre-made configuration gets extended by our local project setup. That way we can reuse stuff for easier configuration, if needed.

Design Token location

We configure the default Design Token location, which is tokens as a glob src/token/dictionary/**/*.json...

Default SVG icons

... and tell Style Dictionary where to look for our default icons. These are used by kickstartDS components, and need to be present in different formats later on (depending on the use case).

Platforms

To test that our integration works as expected, we'll add the CSS platform for now, which will result in our Design Token being converted to CSS custom properties, as src/token/tokens.css.

sd.config.cjs
Copy

_18
const path = require('path');
_18
const StyleDictionary = require('style-dictionary');
_18
const { config } = require('@kickstartds/style-dictionary');
_18
_18
module.exports = StyleDictionary.extend(config).extend({
_18
source: [
_18
'src/token/dictionary/**/*.json',
_18
path.join(
_18
path.dirname(require.resolve('@kickstartds/core/package.json')),
_18
'source/design-tokens/icons/*.svg'
_18
),
_18
],
_18
platforms: {
_18
css: {
_18
buildPath: 'src/token/',
_18
},
_18
},
_18
});

Using correct file extension

It's important to actually use cjs as the file extension here.

You can build your Design Token set into different outputs using Style Dictionary and kickstartDS. So far we've mainly configured how token are ingested, but we'll build on our single test platform CSS in the process of this guide. Adding integrations for Storybook, the use in kickstartDS components, and so on! By re-using our pre-made configurations we only have to define a buildPath to activate a platform. Optionally you can define file names with files, too.

With all of that in place, for the first time compile your Design Token set into CSS Custom Properties now:


_1
yarn build-tokens

If everything worked as expected, you should end up with a long src/token/tokens.css file and the following output on your terminal:


_35
yarn run v1.22.18
_35
$ kickstartDS tokens init
_35
_ _ _ _ _ ____ ____
_35
| | _(_) ___| | _____| |_ __ _ _ __| |_| _ \/ ___|
_35
| |/ / |/ __| |/ / __| __/ _` | '__| __| | | \___ \
_35
| <| | (__| <\__ \ || (_| | | | |_| |_| |___) |
_35
|_|\_\_|\___|_|\_\___/\__\__,_|_| \__|____/|____/
_35
_35
______________/\\\\\\\\\__/\\\______________/\\\\\\\\\\\_______
_35
___________/\\\////////__\/\\\_____________\/////\\\///________
_35
_________/\\\/___________\/\\\_________________\/\\\___________
_35
________/\\\_____________\/\\\_________________\/\\\___________
_35
_______\/\\\_____________\/\\\_________________\/\\\___________
_35
_______\//\\\____________\/\\\_________________\/\\\___________
_35
________\///\\\__________\/\\\_________________\/\\\___________
_35
__/\\\____\////\\\\\\\\\_\/\\\\\\\\\\\\\\\__/\\\\\\\\\\\__/\\\_
_35
_\///________\/////////__\///////////////__\///////////__\///__
_35
_35
Version: 1.0.0
_35
For more information visit:
_35
https://www.kickstartDS.com/docs/intro/cli
_35
_35
Starting...
_35
[kickstartDS: general] [info: welcome to the kickstartDS CLI
_35
[kickstartDS: tokens/init] starting: init command with init variable init-task
_35
[1/1] [init: check] [info: checking prerequesites before starting
_35
[1/1] [init: check] [info: prerequesites met, starting
_35
[init: cleanup] [info: cleaning up temp dir /tmp/tokens-init-init-task before starting command
_35
[init: cleanup] [info: finished cleaning up temp dir /tmp/tokens-init-init-task before starting command
_35
[1/1] [init: init] [info: running the init subtask
_35
[[info] generating your token set from primitives tokens file /tmp/tokens-init-init-task/token-primitives.json
_35
[[info] successfully generated primitives tokens and wrote them to folder /tmp/tokens-init-init-task/./src/token/dictionary
_35
[1/1] [init: init] [info: finished running the init subtask successfully
_35
[kickstartDS: tokens/init] finished: init command with init variable init-task
_35
Done in 1.25s.

To commit, or not to commit...

It's up to personal / team preference if the generated src/token/token.css file should be added to your repository... or your .gitignore.

There are valid arguments to make for both sides, so you should just follow what feels right for you!

We'll add it to our .gitignore:

.gitignore
Copy

_5
# Node
_5
node_modules
_5
_5
# kickstartDS
_5
src/token/tokens.css

Fine tune the design

Once the Design Token are generated, the Design System will already have the broad look & feel of your Corporate Design!
However you probably still have to tweak it a little to make it match up perfecly with your CD requirements.
This can be done by configuring the various .json files found within the dictionary folder.

Adjustments in background-color.json

Common adjutments are made in the background-color.json file. Note that the same can be applied to text-color.json and border-color.json.

background-color.json
Copy

_462
{
_462
"ks": {
_462
"background-color": {
_462
"accent": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Accent",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"accent-inverted": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Accent",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"clear": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.3.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.4.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"clear-inverted": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.3.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.4.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.5.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"default": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Default",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"default-inverted": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.7.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Default",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"interface": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"disabled": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"interface-inverted": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"disabled": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"primary": {
_462
"base": {
_462
"value": "{ks.color.primary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.primary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary.to-bg.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary.to-bg.3.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
},
_462
"translucent": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.8.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
},
_462
"primary-inverted": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.to-bg.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.to-bg.3.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
},
_462
"translucent": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.8.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
}
_462
}
_462
}

Set hover / active

We are going to be adjusting various states of primary, as they are entireley dependant on the selected color. What might initially work on certain colors might not work at all on others.

background-color.json
Copy

_462
{
_462
"ks": {
_462
"background-color": {
_462
"accent": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Accent",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"accent-inverted": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Accent",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"clear": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.3.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.4.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"clear-inverted": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.3.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.4.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.5.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"default": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Default",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"default-inverted": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.7.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Default",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"interface": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"disabled": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"interface-inverted": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"disabled": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"primary": {
_462
"base": {
_462
"value": "{ks.color.primary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.primary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary.to-bg.4.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary.to-bg.6.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.secondary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
},
_462
"translucent": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.8.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
},
_462
"primary-inverted": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.to-bg.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.to-bg.3.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
},
_462
"translucent": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.8.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
}
_462
}
_462
}

Adjustments in typo.json

The typo.json often needs touching up as there are a lot of variying factors, such as the line-heights and font-sizes.

background-color.json
typo.json
Copy

_471
{
_471
"ks": {
_471
"font-family": {
_471
"display": {
_471
"value": "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif",
_471
"token": {
_471
"category": "Font Families",
_471
"presenter": "FontFamily"
_471
}
_471
},
_471
"copy": {
_471
"value": "'Helvetica Neue', Helvetica, Arial, sans-serif",
_471
"token": {
_471
"category": "Font Families",
_471
"presenter": "FontFamily"
_471
}
_471
},
_471
"interface": {
_471
"value": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif",
_471
"token": {
_471
"category": "Font Families",
_471
"presenter": "FontFamily"
_471
}
_471
},
_471
"mono": {
_471
"value": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_471
"token": {
_471
"category": "Font Families",
_471
"presenter": "FontFamily"
_471
}
_471
}
_471
},
_471
"font-weight": {
_471
"light": {
_471
"value": 300,
_471
"token": {
_471
"category": "Font Weights",
_471
"presenter": "FontWeight"
_471
}
_471
},
_471
"regular": {
_471
"value": 400,
_471
"token": {
_471
"category": "Font Weights",
_471
"presenter": "FontWeight"
_471
}
_471
},
_471
"semi-bold": {
_471
"value": 600,
_471
"token": {
_471
"category": "Font Weights",
_471
"presenter": "FontWeight"
_471
}
_471
},
_471
"bold": {
_471
"value": 700,
_471
"token": {
_471
"category": "Font Weights",
_471
"presenter": "FontWeight"
_471
}
_471
}
_471
},
_471
"font-size": {
_471
"display": {
_471
"bp-factor": {
_471
"phone": {
_471
"value": 1.167
_471
},
_471
"tablet": {
_471
"value": 1.333
_471
}
_471
},
_471
"xxs-base": {
_471
"value": "0.544rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: display",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xs-base": {
_471
"value": "0.6664rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: display",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"s-base": {
_471
"value": "0.8163rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: display",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"m-base": {
_471
"value": "1rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: display",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"l-base": {
_471
"value": "1.225rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: display",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xl-base": {
_471
"value": "1.5006rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: display",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xxl-base": {
_471
"value": "1.8383rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: display",
_471
"presenter": "FontSize"
_471
}
_471
}
_471
},
_471
"copy": {
_471
"bp-factor": {
_471
"tablet": {
_471
"value": 1.125
_471
}
_471
},
_471
"xxs-base": {
_471
"value": "0.544rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: copy",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xs-base": {
_471
"value": "0.6664rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: copy",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"s-base": {
_471
"value": "0.8163rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: copy",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"m-base": {
_471
"value": "1rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: copy",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"l-base": {
_471
"value": "1.225rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: copy",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xl-base": {
_471
"value": "1.5006rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: copy",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xxl-base": {
_471
"value": "1.8383rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: copy",
_471
"presenter": "FontSize"
_471
}
_471
}
_471
},
_471
"interface": {
_471
"bp-factor": {
_471
"tablet": {
_471
"value": 1.125
_471
}
_471
},
_471
"xxs-base": {
_471
"value": "0.544rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: interface",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xs-base": {
_471
"value": "0.6664rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: interface",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"s-base": {
_471
"value": "0.8163rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: interface",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"m-base": {
_471
"value": "1rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: interface",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"l-base": {
_471
"value": "1.225rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: interface",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xl-base": {
_471
"value": "1.5006rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: interface",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xxl-base": {
_471
"value": "1.8383rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: interface",
_471
"presenter": "FontSize"
_471
}
_471
}
_471
},
_471
"mono": {
_471
"bp-factor": {
_471
"tablet": {
_471
"value": 1.125
_471
}
_471
},
_471
"xxs-base": {
_471
"value": "0.544rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: mono",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xs-base": {
_471
"value": "0.6664rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: mono",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"s-base": {
_471
"value": "0.8163rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: mono",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"m-base": {
_471
"value": "1rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: mono",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"l-base": {
_471
"value": "1.225rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: mono",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xl-base": {
_471
"value": "1.5006rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: mono",
_471
"presenter": "FontSize"
_471
}
_471
},
_471
"xxl-base": {
_471
"value": "1.8383rem",
_471
"attributes": {
_471
"category": "size"
_471
},
_471
"token": {
_471
"category": "Font Sizes: mono",
_471
"presenter": "FontSize"
_471
}
_471
}
_471
}
_471
},
_471
"line-height": {
_471
"display": {
_471
"xxs": {
_471
"value": 1.75
_471
},
_471
"xs": {
_471
"value": 1.75
_471
},
_471
"s": {
_471
"value": 1.75
_471
},
_471
"m": {
_471
"value": 1.75
_471
},
_471
"l": {
_471
"value": 1.75
_471
},
_471
"xl": {
_471
"value": 1.75
_471
},
_471
"xxl": {
_471
"value": 1.75
_471
}
_471
},
_471
"copy": {
_471
"xxs": {
_471
"value": 1.75
_471
},
_471
"xs": {
_471
"value": 1.75
_471
},
_471
"s": {
_471
"value": 1.75
_471
},
_471
"m": {
_471
"value": 1.75
_471
},
_471
"l": {
_471
"value": 1.75
_471
},
_471
"xl": {
_471
"value": 1.75
_471
},
_471
"xxl": {
_471
"value": 1.75
_471
}
_471
},
_471
"interface": {
_471
"xxs": {
_471
"value": 1.75
_471
},
_471
"xs": {
_471
"value": 1.75
_471
},
_471
"s": {
_471
"value": 1.75
_471
},
_471
"m": {
_471
"value": 1.75
_471
},
_471
"l": {
_471
"value": 1.75
_471
},
_471
"xl": {
_471
"value": 1.75
_471
},
_471
"xxl": {
_471
"value": 1.75
_471
}
_471
},
_471
"mono": {
_471
"xxs": {
_471
"value": 1.75
_471
},
_471
"xs": {
_471
"value": 1.75
_471
},
_471
"s": {
_471
"value": 1.75
_471
},
_471
"m": {
_471
"value": 1.75
_471
},
_471
"l": {
_471
"value": 1.75
_471
},
_471
"xl": {
_471
"value": 1.75
_471
},
_471
"xxl": {
_471
"value": 1.75
_471
}
_471
}
_471
}
_471
}
_471
}

Set bp-factor

We want to go real big with our desktop font-size, however to have a more nuanced scaling of the font-size we need additional breakpoint-factors.

background-color.json
typo.json
Copy

_474
{
_474
"ks": {
_474
"font-family": {
_474
"display": {
_474
"value": "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif",
_474
"token": {
_474
"category": "Font Families",
_474
"presenter": "FontFamily"
_474
}
_474
},
_474
"copy": {
_474
"value": "'Helvetica Neue', Helvetica, Arial, sans-serif",
_474
"token": {
_474
"category": "Font Families",
_474
"presenter": "FontFamily"
_474
}
_474
},
_474
"interface": {
_474
"value": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif",
_474
"token": {
_474
"category": "Font Families",
_474
"presenter": "FontFamily"
_474
}
_474
},
_474
"mono": {
_474
"value": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_474
"token": {
_474
"category": "Font Families",
_474
"presenter": "FontFamily"
_474
}
_474
}
_474
},
_474
"font-weight": {
_474
"light": {
_474
"value": 300,
_474
"token": {
_474
"category": "Font Weights",
_474
"presenter": "FontWeight"
_474
}
_474
},
_474
"regular": {
_474
"value": 400,
_474
"token": {
_474
"category": "Font Weights",
_474
"presenter": "FontWeight"
_474
}
_474
},
_474
"semi-bold": {
_474
"value": 600,
_474
"token": {
_474
"category": "Font Weights",
_474
"presenter": "FontWeight"
_474
}
_474
},
_474
"bold": {
_474
"value": 700,
_474
"token": {
_474
"category": "Font Weights",
_474
"presenter": "FontWeight"
_474
}
_474
}
_474
},
_474
"font-size": {
_474
"display": {
_474
"bp-factor": {
_474
"phone": {
_474
"value": 1
_474
},
_474
"tablet": {
_474
"value": 1.5
_474
},
_474
"laptop": {
_474
"value": 1.75
_474
}
_474
},
_474
"xxs-base": {
_474
"value": "0.544rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xs-base": {
_474
"value": "0.6664rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"s-base": {
_474
"value": "0.8163rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"m-base": {
_474
"value": "1rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"l-base": {
_474
"value": "1.225rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xl-base": {
_474
"value": "1.5006rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xxl-base": {
_474
"value": "1.8383rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
}
_474
},
_474
"copy": {
_474
"bp-factor": {
_474
"tablet": {
_474
"value": 1.125
_474
}
_474
},
_474
"xxs-base": {
_474
"value": "0.544rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xs-base": {
_474
"value": "0.6664rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"s-base": {
_474
"value": "0.8163rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"m-base": {
_474
"value": "1rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"l-base": {
_474
"value": "1.225rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xl-base": {
_474
"value": "1.5006rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xxl-base": {
_474
"value": "1.8383rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
}
_474
},
_474
"interface": {
_474
"bp-factor": {
_474
"tablet": {
_474
"value": 1.125
_474
}
_474
},
_474
"xxs-base": {
_474
"value": "0.544rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xs-base": {
_474
"value": "0.6664rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"s-base": {
_474
"value": "0.8163rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"m-base": {
_474
"value": "1rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"l-base": {
_474
"value": "1.225rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xl-base": {
_474
"value": "1.5006rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xxl-base": {
_474
"value": "1.8383rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
}
_474
},
_474
"mono": {
_474
"bp-factor": {
_474
"tablet": {
_474
"value": 1.125
_474
}
_474
},
_474
"xxs-base": {
_474
"value": "0.544rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xs-base": {
_474
"value": "0.6664rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"s-base": {
_474
"value": "0.8163rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"m-base": {
_474
"value": "1rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"l-base": {
_474
"value": "1.225rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xl-base": {
_474
"value": "1.5006rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xxl-base": {
_474
"value": "1.8383rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
}
_474
}
_474
},
_474
"line-height": {
_474
"display": {
_474
"xxs": {
_474
"value": 1.75
_474
},
_474
"xs": {
_474
"value": 1.75
_474
},
_474
"s": {
_474
"value": 1.75
_474
},
_474
"m": {
_474
"value": 1.75
_474
},
_474
"l": {
_474
"value": 1.75
_474
},
_474
"xl": {
_474
"value": 1.75
_474
},
_474
"xxl": {
_474
"value": 1.75
_474
}
_474
},
_474
"copy": {
_474
"xxs": {
_474
"value": 1.75
_474
},
_474
"xs": {
_474
"value": 1.75
_474
},
_474
"s": {
_474
"value": 1.75
_474
},
_474
"m": {
_474
"value": 1.75
_474
},
_474
"l": {
_474
"value": 1.75
_474
},
_474
"xl": {
_474
"value": 1.75
_474
},
_474
"xxl": {
_474
"value": 1.75
_474
}
_474
},
_474
"interface": {
_474
"xxs": {
_474
"value": 1.75
_474
},
_474
"xs": {
_474
"value": 1.75
_474
},
_474
"s": {
_474
"value": 1.75
_474
},
_474
"m": {
_474
"value": 1.75
_474
},
_474
"l": {
_474
"value": 1.75
_474
},
_474
"xl": {
_474
"value": 1.75
_474
},
_474
"xxl": {
_474
"value": 1.75
_474
}
_474
},
_474
"mono": {
_474
"xxs": {
_474
"value": 1.75
_474
},
_474
"xs": {
_474
"value": 1.75
_474
},
_474
"s": {
_474
"value": 1.75
_474
},
_474
"m": {
_474
"value": 1.75
_474
},
_474
"l": {
_474
"value": 1.75
_474
},
_474
"xl": {
_474
"value": 1.75
_474
},
_474
"xxl": {
_474
"value": 1.75
_474
}
_474
}
_474
}
_474
}
_474
}

line-height

If you have a hugley variying font size it makes sense to adjust the line-height.

background-color.json
typo.json
Copy

_474
{
_474
"ks": {
_474
"font-family": {
_474
"display": {
_474
"value": "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif",
_474
"token": {
_474
"category": "Font Families",
_474
"presenter": "FontFamily"
_474
}
_474
},
_474
"copy": {
_474
"value": "'Helvetica Neue', Helvetica, Arial, sans-serif",
_474
"token": {
_474
"category": "Font Families",
_474
"presenter": "FontFamily"
_474
}
_474
},
_474
"interface": {
_474
"value": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif",
_474
"token": {
_474
"category": "Font Families",
_474
"presenter": "FontFamily"
_474
}
_474
},
_474
"mono": {
_474
"value": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
_474
"token": {
_474
"category": "Font Families",
_474
"presenter": "FontFamily"
_474
}
_474
}
_474
},
_474
"font-weight": {
_474
"light": {
_474
"value": 300,
_474
"token": {
_474
"category": "Font Weights",
_474
"presenter": "FontWeight"
_474
}
_474
},
_474
"regular": {
_474
"value": 400,
_474
"token": {
_474
"category": "Font Weights",
_474
"presenter": "FontWeight"
_474
}
_474
},
_474
"semi-bold": {
_474
"value": 600,
_474
"token": {
_474
"category": "Font Weights",
_474
"presenter": "FontWeight"
_474
}
_474
},
_474
"bold": {
_474
"value": 700,
_474
"token": {
_474
"category": "Font Weights",
_474
"presenter": "FontWeight"
_474
}
_474
}
_474
},
_474
"font-size": {
_474
"display": {
_474
"bp-factor": {
_474
"phone": {
_474
"value": 1
_474
},
_474
"tablet": {
_474
"value": 1.5
_474
},
_474
"laptop": {
_474
"value": 1.75
_474
}
_474
},
_474
"xxs-base": {
_474
"value": "0.544rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xs-base": {
_474
"value": "0.6664rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"s-base": {
_474
"value": "0.8163rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"m-base": {
_474
"value": "1rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"l-base": {
_474
"value": "1.225rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xl-base": {
_474
"value": "1.5006rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xxl-base": {
_474
"value": "1.8383rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: display",
_474
"presenter": "FontSize"
_474
}
_474
}
_474
},
_474
"copy": {
_474
"bp-factor": {
_474
"tablet": {
_474
"value": 1.125
_474
}
_474
},
_474
"xxs-base": {
_474
"value": "0.544rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xs-base": {
_474
"value": "0.6664rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"s-base": {
_474
"value": "0.8163rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"m-base": {
_474
"value": "1rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"l-base": {
_474
"value": "1.225rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xl-base": {
_474
"value": "1.5006rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xxl-base": {
_474
"value": "1.8383rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: copy",
_474
"presenter": "FontSize"
_474
}
_474
}
_474
},
_474
"interface": {
_474
"bp-factor": {
_474
"tablet": {
_474
"value": 1.125
_474
}
_474
},
_474
"xxs-base": {
_474
"value": "0.544rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xs-base": {
_474
"value": "0.6664rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"s-base": {
_474
"value": "0.8163rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"m-base": {
_474
"value": "1rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"l-base": {
_474
"value": "1.225rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xl-base": {
_474
"value": "1.5006rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xxl-base": {
_474
"value": "1.8383rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: interface",
_474
"presenter": "FontSize"
_474
}
_474
}
_474
},
_474
"mono": {
_474
"bp-factor": {
_474
"tablet": {
_474
"value": 1.125
_474
}
_474
},
_474
"xxs-base": {
_474
"value": "0.544rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xs-base": {
_474
"value": "0.6664rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"s-base": {
_474
"value": "0.8163rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"m-base": {
_474
"value": "1rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"l-base": {
_474
"value": "1.225rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xl-base": {
_474
"value": "1.5006rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
},
_474
"xxl-base": {
_474
"value": "1.8383rem",
_474
"attributes": {
_474
"category": "size"
_474
},
_474
"token": {
_474
"category": "Font Sizes: mono",
_474
"presenter": "FontSize"
_474
}
_474
}
_474
}
_474
},
_474
"line-height": {
_474
"display": {
_474
"xxs": {
_474
"value": 1.45
_474
},
_474
"xs": {
_474
"value": 1.50
_474
},
_474
"s": {
_474
"value": 1.55
_474
},
_474
"m": {
_474
"value": 1.60
_474
},
_474
"l": {
_474
"value": 1.65
_474
},
_474
"xl": {
_474
"value": 1.70
_474
},
_474
"xxl": {
_474
"value": 1.75
_474
}
_474
},
_474
"copy": {
_474
"xxs": {
_474
"value": 1.75
_474
},
_474
"xs": {
_474
"value": 1.75
_474
},
_474
"s": {
_474
"value": 1.75
_474
},
_474
"m": {
_474
"value": 1.75
_474
},
_474
"l": {
_474
"value": 1.75
_474
},
_474
"xl": {
_474
"value": 1.75
_474
},
_474
"xxl": {
_474
"value": 1.75
_474
}
_474
},
_474
"interface": {
_474
"xxs": {
_474
"value": 1.75
_474
},
_474
"xs": {
_474
"value": 1.75
_474
},
_474
"s": {
_474
"value": 1.75
_474
},
_474
"m": {
_474
"value": 1.75
_474
},
_474
"l": {
_474
"value": 1.75
_474
},
_474
"xl": {
_474
"value": 1.75
_474
},
_474
"xxl": {
_474
"value": 1.75
_474
}
_474
},
_474
"mono": {
_474
"xxs": {
_474
"value": 1.75
_474
},
_474
"xs": {
_474
"value": 1.75
_474
},
_474
"s": {
_474
"value": 1.75
_474
},
_474
"m": {
_474
"value": 1.75
_474
},
_474
"l": {
_474
"value": 1.75
_474
},
_474
"xl": {
_474
"value": 1.75
_474
},
_474
"xxl": {
_474
"value": 1.75
_474
}
_474
}
_474
}
_474
}
_474
}

Adjustments in background-color.json

Common adjutments are made in the background-color.json file. Note that the same can be applied to text-color.json and border-color.json.

Set hover / active

We are going to be adjusting various states of primary, as they are entireley dependant on the selected color. What might initially work on certain colors might not work at all on others.

Adjustments in typo.json

The typo.json often needs touching up as there are a lot of variying factors, such as the line-heights and font-sizes.

Set bp-factor

We want to go real big with our desktop font-size, however to have a more nuanced scaling of the font-size we need additional breakpoint-factors.

line-height

If you have a hugley variying font size it makes sense to adjust the line-height.

background-color.json
CopyExpandClose

_462
{
_462
"ks": {
_462
"background-color": {
_462
"accent": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Accent",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"accent-inverted": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Accent",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"clear": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.3.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.4.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"clear-inverted": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.3.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.4.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.5.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Clear",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"default": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Default",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"default-inverted": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.7.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Default",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"interface": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"disabled": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.fg.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"interface-inverted": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.transparent.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
},
_462
"disabled": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.fg-inverted.alpha.1.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Interface",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
},
_462
"primary": {
_462
"base": {
_462
"value": "{ks.color.primary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.primary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary.to-bg.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary.to-bg.3.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
},
_462
"translucent": {
_462
"base": {
_462
"value": "{ks.color.primary.alpha.8.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
},
_462
"primary-inverted": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"interactive": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
},
_462
"hover": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.to-bg.2.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"active": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.to-bg.3.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
},
_462
"selected": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
},
_462
"translucent": {
_462
"base": {
_462
"value": "{ks.color.primary-inverted.alpha.8.base}",
_462
"attributes": {
_462
"category": "color"
_462
},
_462
"token": {
_462
"category": "Colors: Background Primary",
_462
"presenter": "Color"
_462
}
_462
}
_462
}
_462
}
_462
}
_462
}
_462
}

Result

With this we have completed our Design Token setup, and our branding should be successfully applied to kickstartDS!

Next Step

In the next step we'll set up Storybook. This connects nicely, as we'll add the Storybook integration for Design Token there, to make them viewable in the browser. We'll also make preparations for the step after, where we'll add components.

It's probably a good idea to commit everything again, now!

Code Sandbox

See the result of this step in the Code Sandbox below. It's showing specifically the result after this step. You can also view this on Github directly in the ds-guide repository, there's a branch for every step... and we're currently on the branch step/2 in the guide:

Toggle the file browser with the hamburger icon at the top left, or open it directly in your browser.