Professional typography using Raleway and Montserrat fonts
Primary font for headers and display text
Display Typography
Professional and Modern
font-primarySecondary font for body text and content
Body Typography
Excellent readability for all content types and lengths
font-secondarytext-display-lgtext-display-lg-regulartext-display-lg-mediumtext-display-lg-semiboldtext-display-lg-boldtext-display-mdtext-display-md-regulartext-display-md-mediumtext-display-md-semiboldtext-display-md-boldtext-display-smtext-display-sm-regulartext-display-sm-mediumtext-display-sm-semiboldtext-display-sm-boldtext-display-xstext-display-xs-regulartext-display-xs-mediumtext-display-xs-semiboldtext-display-xs-boldtext-body-lgLight weight - Perfect for introductory paragraphs and highlighted content that needs to be easily readable.
text-body-lg-regularRegular weight - The standard weight for most body text, providing excellent readability and visual hierarchy.
text-body-lg-mediumMedium weight - Used for emphasis within paragraphs or important information that needs to stand out.
text-body-lg-semiboldSemibold weight - Great for lead text, callouts, or key messages that require more visual weight.
text-body-lg-boldBold weight - Reserved for strong emphasis, warnings, or critical information within body text.
text-body-mdLight weight - Perfect for introductory paragraphs and highlighted content that needs to be easily readable.
text-body-md-regularRegular weight - The standard weight for most body text, providing excellent readability and visual hierarchy.
text-body-md-mediumMedium weight - Used for emphasis within paragraphs or important information that needs to stand out.
text-body-md-semiboldSemibold weight - Great for lead text, callouts, or key messages that require more visual weight.
text-body-md-boldBold weight - Reserved for strong emphasis, warnings, or critical information within body text.
text-body-smLight weight - Perfect for introductory paragraphs and highlighted content that needs to be easily readable.
text-body-sm-regularRegular weight - The standard weight for most body text, providing excellent readability and visual hierarchy.
text-body-sm-mediumMedium weight - Used for emphasis within paragraphs or important information that needs to stand out.
text-body-sm-semiboldSemibold weight - Great for lead text, callouts, or key messages that require more visual weight.
text-body-sm-boldBold weight - Reserved for strong emphasis, warnings, or critical information within body text.
text-body-xsLight weight - Perfect for introductory paragraphs and highlighted content that needs to be easily readable.
text-body-xs-regularRegular weight - The standard weight for most body text, providing excellent readability and visual hierarchy.
text-body-xs-mediumMedium weight - Used for emphasis within paragraphs or important information that needs to stand out.
text-body-xs-semiboldSemibold weight - Great for lead text, callouts, or key messages that require more visual weight.
text-body-xs-boldBold weight - Reserved for strong emphasis, warnings, or critical information within body text.
Using our primary plum color for headers creates strong visual hierarchy and brand recognition.
Blue gem accent for supporting text.
text-primary-plumtext-primary-blue-gemBlue gem provides an alternative primary color for headers and important UI elements.
Plum accent for supporting text.
text-primary-blue-gemtext-primary-plumAll typography automatically scales down on mobile devices (768px and below):
Body Large Semibold - Perfect for lead paragraphs
Body Medium Regular - Standard paragraph text with excellent readability
Body Small Medium - Supporting text and captions
Body Extra Small Regular - Fine print and metadata
Use text-display-* classes for:
Use text-body-* classes for: