Foundation
Typography

Typography

The type system uses Roboto as the primary sans-serif. All scale values are expressed in rem for accessibility (they respect the user's browser font size preference).

Font families

TokenValueUsage
--mk-font-sans'Roboto', sans-serifAll product UI text
--mk-font-mono'Roboto Mono', monospaceCode, tokens, IDs

Install from Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Roboto+Mono&display=swap" rel="stylesheet" />

Font sizes

TokenValue
--mk-font-size-xs0.75rem
--mk-font-size-sm0.875rem
--mk-font-size-base1rem
--mk-font-size-lg1.125rem
--mk-font-size-xl1.5rem
--mk-font-size-2xl1.75rem
--mk-font-size-3xl2.125rem
--mk-font-size-4xl2.5rem
--mk-font-size-5xl3rem

Font weights

TokenValuePreview
--mk-font-weight-regular400Regular text sample
--mk-font-weight-medium500Medium text sample
--mk-font-weight-semibold600Semibold text sample

Line heights

TokenValueUsage
--mk-line-height-none1Single-line UI elements (buttons)
--mk-line-height-tight1.17Headlines
--mk-line-height-snug1.19Subheadings
--mk-line-height-normal1.5Body text
--mk-line-height-relaxed1.625Long-form reading
--mk-line-height-loose2Spacious list items

Letter spacing

TokenValue
--mk-letter-spacing-tighter-0.05em
--mk-letter-spacing-tight-0.025em
--mk-letter-spacing-normal0em
--mk-letter-spacing-wide0.025em
--mk-letter-spacing-wider0.05em
--mk-letter-spacing-widest0.1em

Type scale

Display

Use display styles for marketing and hero sections only — not product UI.

Display 1 · 5rem · 400Display One
Display 2 · 4.5rem · 400Display Two
Display 3 · 4rem · 400Display Three
Display 4 · 3.5rem · 400Display Four
Display 5 · 3rem · 400Display Five
Display 6 · 2.5rem · 400Display Six

Heading

Use heading styles for product UI and content hierarchy.

H1 · 2.125rem · 400Heading One
H2 · 1.75rem · 400Heading Two
H3 · 1.5rem · 400Heading Three
H4 · 1.125rem · 400Heading Four
H5 · 1rem · 400Heading Five
H6 · 0.875rem · 400Heading Six

Body

body-xl · 1.125rem · 400 · Primary body copyThe quick brown fox jumps over the lazy dog.
body-l · 1.125rem · 500 · Emphasized body, labelsThe quick brown fox jumps over the lazy dog.
body-m · 1.125rem · 600 · Strong emphasisThe quick brown fox jumps over the lazy dog.
body-base · 1rem · 400 · Standard UI bodyThe quick brown fox jumps over the lazy dog.
body-s · 1rem · 500 · Secondary labelsThe quick brown fox jumps over the lazy dog.
body-xs · 0.875rem · 400 · Metadata, helper textThe quick brown fox jumps over the lazy dog.
body-2xs · 0.875rem · 500 · Captions, tagsThe quick brown fox jumps over the lazy dog.
body-3xs · 0.75rem · 400 · Fine print, footnotesThe quick brown fox jumps over the lazy dog.

Eyebrow

One eyebrow per section maximum.

0.875rem · 600 · uppercase · ls 0.1emSection Label

Button

button-lg · 0.875rem · 400Button Large
button-md · 0.8125rem · 400Button Medium
button-sm · 0.75rem · 400Button Small

Link

link-l · 0.875rem · 500Link Large
link-m · 0.8125rem · 400Link Medium
link-s · 0.75rem · 400Link Small
ColorsSpacing