font

const font: {
  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}";
     };
     iframe: {
        value: "{font.family.interactive}";
     };
     mono: {
        value: "\"DM Mono\", monospace";
     };
     sans: {
        value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
     };
     body: {
        value: "{font.family.sans}";
     };
     interactive: {
        value: "{font.family.sans}";
     };
  };
  url: {
     iframe: {
        value: "";
     };
  };
  size: {
     base: {
        value: 16;
     };
  };
};

All the 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}";
  };
  iframe: {
     value: "{font.family.interactive}";
  };
  mono: {
     value: "\"DM Mono\", monospace";
  };
  sans: {
     value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
  };
  body: {
     value: "{font.family.sans}";
  };
  interactive: {
     value: "{font.family.sans}";
  };
};

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}";

family.link

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

Type declaration

family.link.value

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}";

family.iframe

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

Type declaration

family.iframe.value

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

family.mono

readonly mono: {
  value: "\"DM Mono\", monospace";
};

Type declaration

family.mono.value

readonly value: "\"DM Mono\", monospace" = '"DM Mono", monospace';

family.sans

readonly sans: {
  value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
};

Type declaration

family.sans.value

readonly value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" = '"Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';

family.body

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

Type declaration

family.body.value

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

family.interactive

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

Type declaration

family.interactive.value

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

url

readonly url: {
  iframe: {
     value: "";
  };
};

Type declaration

url.iframe

readonly iframe: {
  value: "";
};

Type declaration

url.iframe.value

readonly value: "" = "";

size

readonly size: {
  base: {
     value: 16;
  };
};

Type declaration

size.base

readonly base: {
  value: 16;
};

Type declaration

size.base.value

readonly value: 16 = 16;