Typography

Typography is one of the main ways you surface content in products. We care about good defaults to provide you a clear hierarchy and contrasting styles in your typography scale.
The Token can be found in typo.json.

Core Token

Font Families

Token	Preview
--ks-font-family-display	Almost before we knew it, we had left the ground.
--ks-font-family-copy	Almost before we knew it, we had left the ground.
--ks-font-family-ui	Almost before we knew it, we had left the ground.
--ks-font-family-mono	Almost before we knew it, we had left the ground.

token.css

_10

:root {

_10

--ks-font-family-copy: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,

_10

Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',

_10

'Segoe UI Symbol';

_10

}

Font Size

Token	Preview
--ks-font-size-copy-xxs	Almost before we knew it, we had left the ground.
--ks-font-size-copy-xs	Almost before we knew it, we had left the ground.
--ks-font-size-copy-s	Almost before we knew it, we had left the ground.
--ks-font-size-copy-m	Almost before we knew it, we had left the ground.
--ks-font-size-copy-l	Almost before we knew it, we had left the ground.
--ks-font-size-copy-xl	Almost before we knew it, we had left the ground.
--ks-font-size-copy-xxl	Almost before we knew it, we had left the ground.

token.css

_10

:root {

_10

--ks-font-size-copy-m: calc(

_10

var(--ks-font-size-copy-m-base) * var(--ks-font-size-copy-bp-factor, 1)

_10

);

_10

}

Line Height

Token	Preview
--ks-font-line-height-copy-xxs	Almost before we knew it, we had left the ground. dolor sit amet
--ks-font-line-height-copy-xs	Almost before we knew it, we had left the ground. dolor sit amet
--ks-font-line-height-copy-s	Almost before we knew it, we had left the ground. dolor sit amet
--ks-font-line-height-copy-m	Almost before we knew it, we had left the ground. dolor sit amet
--ks-font-line-height-copy-l	Almost before we knew it, we had left the ground. dolor sit amet
--ks-font-line-height-copy-xl	Almost before we knew it, we had left the ground. dolor sit amet
--ks-font-line-height-copy-xxl	Almost before we knew it, we had left the ground. dolor sit amet

token.css

_10

:root {

_10

--ks-line-height-copy-m: 1.5;

_10

}

Semantic Token

Font package

A combination of font-size, font-family and line-height.

Token	Application	Preview
--ks-font-display-m	Headlines	Almost before we knew it, we had left the ground.
--ks-font-copy-m	Copy Text	Almost before we knew it, we had left the ground.
--ks-font-ui-m	User interface	Almost before we knew it, we had left the ground.
--ks-font-mono-m	Code Snippets	Almost before we knew it, we had left the ground.

token.css

_10

:root {

_10

--ks-font-copy-m: var(--ks-font-size-copy-m) / var(--ks-line-height-copy-m) var(

_10

--ks-font-family-copy

_10

);

_10

}

Font Weight

Token	Preview
--ks-font-weight-light	Almost before we knew it, we had left the ground.
--ks-font-weight-regular	Almost before we knew it, we had left the ground.
--ks-font-weight-semi-bold	Almost before we knew it, we had left the ground.
--ks-font-weight-bold	Almost before we knew it, we had left the ground.

token.css

_10

:root {

_10

--ks-font-weight-regular: 400;

_10

}

Figma

See the following Page in our Figma tokens file for a visual representation: