XX Large
.type-display-xxlFamily: SemiBoldSize: 64pxLine height: 78pxLetter Spacing: -0.5px
More leads, less work, & smarter
0123456789
Design tokens
Typography utilities
Token classes use the type-* prefix so product repos can apply Rhythmic type styles without colliding with Tailwind defaults.
Display scale
X Large (SemiBold)
.type-display-xl-semiFamily: SemiBoldSize: 56pxLine height: 68pxLetter Spacing: -0.5px
More leads, less work, & smarter strategies
0123456789
X Large (Medium)
.type-display-xlFamily: MediumSize: 56pxLine height: 68pxLetter Spacing: -0.5px
More leads, less work, & smarter strategies
0123456789
Large
.type-display-lgFamily: MediumSize: 48pxLine height: 54pxLetter Spacing: -0.25px
More leads, less work, and smarter strategies
0123456789
Medium
.type-display-mdFamily: SemiBoldSize: 28pxLine height: 34px
More leads, less work, and smarter strategies
0123456789
Small
.type-display-smFamily: MediumSize: 26pxLine height: 32px
More leads, less work, and smarter strategies
0123456789
X Small
.type-display-xsFamily: MediumSize: 24pxLine height: 30px
More leads, less work, and smarter strategies
0123456789
Heading scale
XX Large (SemiBold)
.type-heading-xxl-semiFamily: SemiBoldSize: 40pxLine height: 50px
More leads, less work, and smarter strategies
0123456789
XX Large (Medium)
.type-heading-xxlFamily: MediumSize: 40pxLine height: 50px
More leads, less work, and smarter strategies
0123456789
Large
.type-heading-lgFamily: MediumSize: 36pxLine height: 48px
More leads, less work, and smarter strategies
0123456789
Medium
.type-heading-mdFamily: SemiBoldSize: 34pxLine height: 44px
More leads, less work, and smarter strategies
0123456789
Small
.type-heading-smFamily: MediumSize: 28pxLine height: 38px
More leads, less work, and smarter strategies
0123456789
Label scale
X Large
.type-label-xlFamily: MediumSize: 20pxLine height: 30px
More leads, less work, and smarter strategies
0123456789
Large
.type-label-lgFamily: MediumSize: 18pxLine height: 28px
More leads, less work, and smarter strategies
0123456789
Medium
.type-label-mdFamily: MediumSize: 16pxLine height: 24px
More leads, less work, and smarter strategies
0123456789
Small
.type-label-smFamily: MediumSize: 14pxLine height: 22px
More leads, less work, and smarter strategies
0123456789
X Small
.type-label-xsFamily: MediumSize: 12pxLine height: 20px
More leads, less work, and smarter strategies
0123456789
Paragraph scale
X Large
.type-paragraph-xlFamily: RegularSize: 20pxLine height: 28px
More leads, less work, and smarter strategies
0123456789
Large
.type-paragraph-lgFamily: RegularSize: 18pxLine height: 26px
More leads, less work, and smarter strategies
0123456789
Medium
.type-paragraph-mdFamily: RegularSize: 16pxLine height: 24px
More leads, less work, and smarter strategies
0123456789
Small
.type-paragraph-smFamily: RegularSize: 14pxLine height: 20px
More leads, less work, and smarter strategies
0123456789
X Small
.type-paragraph-xsFamily: RegularSize: 12pxLine height: 18px
More leads, less work, and smarter strategies
0123456789
Legal Small
.type-paragraph-legalFamily: RegularSize: 10pxLine height: 14px
More leads, less work, and smarter strategies
0123456789