This site uses two font families — Recoleta and Gibson. Recoleta is a custom font loaded locally, and Sofia Pro is from Adobe Fonts with a fallback of the system fonts. Weight are 400, 500, or 600 in most cases, with lighter and heavier options available. Sizing is done using clamp() to provide the best responsive solution. The font sizes are available in the global typography options and the CSS as easy-to-use variables. All fonts are rem-based with the root font size set at 100% (16px).

  • Display: –font-size-xxxxl: clamp(3.05rem, 5.66vw + 1.64rem, 5.26rem);
  • Heading 1: –font-size-xxxl: clamp(2.44rem, 3.86vw + 1.48rem, 3.95rem);
  • Heading 2: –font-size-xxl: clamp(1.95rem, 2.58vw + 1.31rem, 2.96rem);
  • Heading 3: –font-size-xl: clamp(1.56rem, 1.69vw + 1.14rem, 2.22rem);
  • Heading 4: –font-size-lg: clamp(1.25rem, 1.07vw + 0.98rem, 1.67rem);
  • Heading 5: –font-size-md: clamp(1.2rem, 1.07vw + 0.98rem, 1.5rem);
  • Heading 6: –font-size-sm: clamp(0.8rem, 0.35vw + 0.71rem, 0.94rem);
  • Lead: clamp(1.1rem, 0.5vw + 0.9rem, 1.4rem)
  • Subheading: clamp(1.2rem, 0.8vw + 1.1rem, 1.5rem)
  • Body: –font-size-base: clamp(1rem, 0.64vw + 0.84rem, 1.25rem);
  • Small: clamp(0.8rem, 0.3vw + 0.7rem, 0.9rem);


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6



Body text

Small text


The color palette is very basic and blue-based to minimize color perception issues. White, gray, UN Blue and Jordy Blue are rarely used




Primary Alt

Rich Black

Bleu de France



UN Blue

Jordy Blue