typography

Classes

Styles

body

--lineHeightInEms: var(--title2-font-size);
  --md: 1em;
  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(1em * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.011em;
  cursor: default;
  font-size: 1em;
  font-weight: 400;
  line-height: var(--lk-wholestep);

body-bold

--lineHeightInEms: var(--title2-font-size);
  --md: calc(1em / var(--lk-wholestep));
  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(1em * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.011em;
  padding: 0;
  font-size: 1em;
  font-weight: 600;
  line-height: var(--lk-wholestep);
  position: relative;

callout

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.009em;
  font-size: var(--callout-font-size);
  font-weight: 400;
  line-height: var(--lk-halfstep);

callout-bold

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.009em;
  font-size: var(--callout-font-size);
  font-weight: 600;
  line-height: var(--lk-halfstep);
  text-decoration: none;

capline

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: 0.0618em;
  text-transform: uppercase;
  font-size: var(--capline-font-size);
  font-weight: 400;
  line-height: var(--lk-halfstep);

capline-bold

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: 0.0618em;
  text-transform: uppercase;
  font-size: var(--capline-font-size);
  font-weight: 600;
  line-height: var(--lk-halfstep);

caption

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.007em;
  font-size: var(--caption-font-size);
  font-weight: 400;
  line-height: var(--lk-halfstep);

caption-bold

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.007em;
  font-size: var(--caption-font-size);
  font-weight: 600;
  line-height: var(--lk-halfstep);

display1

--lineHeightInEms: calc(1em * var(--lk-quarterstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --sm: calc(var(--lineHeightInEms) * calc(1 / var(--lk-halfstep)));
  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.022em;
  font-size: var(--display1-font-size);
  font-weight: 400;
  line-height: var(--lk-quarterstep);

display1-bold

--lineHeightInEms: calc(1em * var(--lk-quarterstep));
  --md: calc(1em / var(--lk-wholestep));
  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(1em * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.022em;
  font-size: var(--display1-font-size);
  font-weight: 700;
  line-height: var(--lk-quarterstep);

display2

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.022em;
  font-size: var(--display2-font-size);
  font-weight: 400;
  line-height: var(--lk-halfstep);

display2-bold

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.022em;
  font-size: var(--display2-font-size);
  font-weight: 700;
  line-height: var(--lk-halfstep);

heading

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.014em;
  font-size: var(--heading-font-size);
  font-weight: 600;
  line-height: var(--lk-halfstep);

heading-bold

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.014em;
  font-size: var(--heading-font-size);
  font-weight: 700;
  line-height: var(--lk-halfstep);

is-link

transition: opacity 0.2s ease;
  cursor: pointer;

italic

font-style: italic;

label

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.004em;
  font-size: var(--label-font-size);
  font-weight: 600;
  line-height: var(--lk-halfstep);
  position: static;

label-bold

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.004em;
  font-size: var(--label-font-size);
  font-weight: 700;
  line-height: var(--lk-halfstep);

mono

font-family: monospace;

subheading

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.007em;
  font-size: var(--subheading-font-size);
  font-weight: 400;
  line-height: var(--lk-halfstep);

subheading-bold

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.007em;
  font-size: var(--subheading-font-size);
  font-weight: 600;
  line-height: var(--lk-halfstep);

title1

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.022em;
  font-size: var(--title1-font-size);
  font-weight: 400;
  line-height: var(--lk-halfstep);

title1-bold

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.022em;
  font-size: var(--title1-font-size);
  font-weight: 600;
  line-height: var(--lk-halfstep);

title2

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.02em;
  font-size: var(--title2-font-size);
  font-weight: 400;
  line-height: var(--lk-halfstep);

title2-bold

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.02em;
  font-size: var(--title2-font-size);
  font-weight: 600;
  line-height: var(--lk-halfstep);

title3

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.017em;
  font-size: var(--title3-font-size);
  font-weight: 400;
  line-height: var(--lk-halfstep);

title3-bold

--lineHeightInEms: calc(1em * var(--lk-halfstep));
  --md: var(--lineHeightInEms);

  --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
  --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
  --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));

  --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
  --xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
  --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));

  letter-spacing: -0.017em;
  font-size: var(--title3-font-size);
  font-weight: 600;
  line-height: var(--lk-halfstep);

weight-400

font-weight: 400;