Swarm Design System Documentation

Typography

All of the metrics in Swarm Design System are based in our typography and our typographic scale. Text is the most common way information is displayed in Meetup’s products, so we’ve developed a polished typographic system that provides hierarchy and ensures our content is always readable.

<>
<h1 className="text--display">Display Text</h1>
<h2 className="text--pageTitle">Page Title</h2>
<h3 className="text--big">Large Text</h3>
<h3 className="text--sectionTitle">Section Title</h3>
<h3 className="text--kickerText">Kicker Text</h3>
<a className="text--link" href="#">Link Text</a>
<p className="text--tiny">Tiny Text</p>
<p className="text--body">Body text</p>
<p className="text--small">Small text</p>
<div className="inverted" style={{ backgroundColor: 'black' }}>
    <h1 className="text--display">Display Text</h1>
    <h2 className="text--pageTitle">Page Title</h2>
    <h3 className="text--big">Large Text</h3>
    <h3 className="text--sectionTitle">Section Title</h3>
    <h3 className="text--kickerText">Kicker Text</h3>
    <a className="text--link" href="#">Link Text</a>
    <p className="text--tiny">Tiny Text</p>
    <p className="text--body">Body text</p>
    <p className="text--small">Small text</p>
</div>
</>

Display Text

Page Title

Large Text

Section Title

Kicker Text

Link Text

Tiny Text

Body text

Small text