Lift to Rise
Typography Styleguide
Extracted from Figma — resize the window to see the responsive scale (mobile / 768px / 1024px). This page renders in whichever brand the site has selected under Theme Settings → Branding.
Super Display — .type-super-display-*
Super Display 1
Super Display 2
Headings — h1–h6
Heading 1 — Display 1
Heading 2 — Display 2
Heading 3 — Display 3
Heading 4 — Subhead 1
Heading 5 — Subhead 2
Heading 6 — Subhead 3
Body & prose
Body Large (default <p>). The quick brown fox jumped over the
lazy dog. The five boxing wizards jump quickly, and here is an
inline underlined link inside the paragraph.
Body Small — .type-body-small. Sphinx of black quartz, judge my vow.
Sixty zippers were quickly picked from the woven jute bag.
- Unordered list item one
- Unordered list item two
- Ordered list item one
- Ordered list item two
Supporting
Subhead 4 — .type-subhead-4
UI Text — .type-ui-text (buttons, labels, meta)
Eyebrow — uppercase kicker
Color palette — slot names and this brand's Figma labels
Yellow
.bg-brand-1 · #FCCA17
Tangerine
.bg-brand-2 · #FCAF17
Orange
.bg-brand-3 · #FF7F35
Red
.bg-brand-4 · #FF4750
Purple
.bg-brand-5 · #BB3E97
Dark Purple
.bg-brand-6 · #7F1460
LTR Black
.bg-ink · #1C1C1C
LTR Black
.bg-ink-deep · #1C1C1C
Text Grey
.bg-text-grey · #555555
Background Gray
.bg-background-gray · #F2F3F4
White
.bg-white · #FFFFFF
Gradients — block/component backgrounds
Headings fill with --brand-gradient-heading and the primary CTA with
--brand-gradient-cta — this brand points both at whichever of the five it uses.
Buttons — variants & states
Solid / Fill (primary)
Solid / White (for dark / gradient backgrounds)
Text (link-style)