Skip to content

We Lift Catalyst Fund

Typography Styleguide

Extracted from Figma — resize the window to see the responsive scale (mobile / 768px / 1024px).

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
  1. Ordered list item one
  2. Ordered list item two

Supporting

Subhead 4 — .type-subhead-4

UI Text — .type-ui-text (buttons, labels, meta)

Eyebrow — uppercase kicker

Body Large Link

Body Small Link

Color palette — Figma label names

WL Light Blue

#81C1FF

WL Blue

#0081FF

WL Dark Blue

#004C97

WL Darkest Blue

#00264B

LTR Purple

#BB3E97

LTR Dark Purple

#7F1460

WL Black

#001224

Text Grey

#555555

Background Gray

#F2F3F4

White

#FFFFFF

Gradients — block/component backgrounds

WL Gradient 1
WL Gradient 2
WL Gradient 3
WL Gradient 4
WL Gradient 5

Buttons — variants & states

Solid / Fill (primary)

(hover · focus · active are interactive)

Solid / White (for dark / gradient backgrounds)

Text (link-style)