Skip to main content
const fontComponents: {
  family: {
     page: {
        value: "{font.family.body}";
     };
     cta: {
        value: "{font.family.interactive}";
     };
     link: {
        value: "{font.family.interactive}";
     };
     input: {
        value: "{font.family.interactive}";
     };
     select: {
        value: "{font.family.interactive}";
     };
     code: {
        value: "{font.family.mono}";
     };
  };
};
Component font tokens.

Type declaration

family

readonly family: {
  page: {
     value: "{font.family.body}";
  };
  cta: {
     value: "{font.family.interactive}";
  };
  link: {
     value: "{font.family.interactive}";
  };
  input: {
     value: "{font.family.interactive}";
  };
  select: {
     value: "{font.family.interactive}";
  };
  code: {
     value: "{font.family.mono}";
  };
};

Type declaration

family.page

readonly page: {
  value: "{font.family.body}";
};
Type declaration

family.page.value

readonly value: "{font.family.body}" = "{font.family.body}";

family.cta

readonly cta: {
  value: "{font.family.interactive}";
};
Type declaration

family.cta.value

readonly value: "{font.family.interactive}" = "{font.family.interactive}";
readonly link: {
  value: "{font.family.interactive}";
};
Type declaration
readonly value: "{font.family.interactive}" = "{font.family.interactive}";

family.input

readonly input: {
  value: "{font.family.interactive}";
};
Type declaration

family.input.value

readonly value: "{font.family.interactive}" = "{font.family.interactive}";

family.select

readonly select: {
  value: "{font.family.interactive}";
};
Type declaration

family.select.value

readonly value: "{font.family.interactive}" = "{font.family.interactive}";

family.code

readonly code: {
  value: "{font.family.mono}";
};
Type declaration

family.code.value

readonly value: "{font.family.mono}" = "{font.family.mono}";