Skip to main content
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

NameTypeDefault value
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}"; }; }-
family.page{ value: "{font.family.body}"; }-
family.page.value"{font.family.body}""{font.family.body}"
family.cta{ value: "{font.family.interactive}"; }-
family.cta.value"{font.family.interactive}""{font.family.interactive}"
family.link{ value: "{font.family.interactive}"; }-
family.link.value"{font.family.interactive}""{font.family.interactive}"
family.input{ value: "{font.family.interactive}"; }-
family.input.value"{font.family.interactive}""{font.family.interactive}"
family.select{ value: "{font.family.interactive}"; }-
family.select.value"{font.family.interactive}""{font.family.interactive}"
family.code{ value: "{font.family.mono}"; }-
family.code.value"{font.family.mono}""{font.family.mono}"
family.iframe{ value: "{font.family.interactive}"; }-
family.iframe.value"{font.family.interactive}""{font.family.interactive}"
family.mono{ value: ""DM Mono”, monospace”; }-
family.mono.value""DM Mono”, monospace”'"DM Mono", monospace'
family.sans{ value: ""Rethink Sans”, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol""; }-
family.sans.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{ value: "{font.family.sans}"; }-
family.body.value"{font.family.sans}""{font.family.sans}"
family.interactive{ value: "{font.family.sans}"; }-
family.interactive.value"{font.family.sans}""{font.family.sans}"
url{ iframe: { value: ""; }; }-
url.iframe{ value: ""; }-
url.iframe.value""""
size{ base: { value: 16; }; }-
size.base{ value: 16; }-
size.base.value1616