Typography
Font families, the type scale, weights, and the composite text styles matching the Figma type scale. Apply text styles with css({ textStyle: "body.default.regular" }).
Font families
headingFunnel Display — display and heading styles
bodyInstrument Sans — headings and body copy
monoSystem monospace — code and token names
Type scale
2xsThe quick brown fox
xsThe quick brown fox
smThe quick brown fox
mdThe quick brown fox
lgThe quick brown fox
xlThe quick brown fox
2xlThe quick brown fox
3xlThe quick brown fox
4xlThe quick brown fox
5xlThe quick brown fox
Font weights
normalThe quick brown fox — 400
mediumThe quick brown fox — 500
semiboldThe quick brown fox — 600
boldThe quick brown fox — 700
Display styles
display.heroThe quick brown fox jumpsMarketing hero headline
display.largeThe quick brown fox jumpsMarketing section
display.medThe quick brown fox jumpsMarketing section, page level heading
Heading styles
heading.pageThe quick brown fox jumpsIn product page header
heading.sectionThe quick brown fox jumpsIn product page header
Body styles
body.large.semiboldThe quick brown fox jumpsMarketing body
body.large.mediumThe quick brown fox jumpsMarketing body
body.large.regularThe quick brown fox jumpsMarketing body
body.default.semiboldThe quick brown fox jumpsPrimary body copy
body.default.mediumThe quick brown fox jumpsPrimary body copy
body.default.regularThe quick brown fox jumpsPrimary body copy
body.small.semiboldThe quick brown fox jumpsDash body, helper text, labels, table rows
body.small.mediumThe quick brown fox jumpsDash body, helper text, labels, table rows
body.small.regularThe quick brown fox jumpsDash body, helper text, labels, table rows
body.xs.mediumThe quick brown fox jumpsTags, pills, small labels, helper text
body.xs.regularThe quick brown fox jumpsTags, pills, small labels, helper text