Helper Classes

Defined in lib/styles/02-util/_helperclasses.scss and lib/styles/01-base/_fonts.scss.

Backgrounds

Class	Effect
`.bg-gradient-2`	Brand gradient background
`.bg-primary`	Primary brand color background
`.bg-gray-10`	Light gray background
`.dark-background`	Dark footer background with overflow hidden

Typography

`.typography--sans`

Applies sans-serif font to <p> and <li> elements without class attributes. Excludes .longquote p. Does not affect component elements with their own classes.

<main class="typography--sans">
    <p>Sans-serif</p>                          <!-- affected -->
    <p class="highlight-card__text">...</p>   <!-- NOT affected -->
</main>

`.headings--bold`

Sets h2–h6 to bold (700) instead of the default heavy (800).

<main class="headings--bold">
    <h2>Bold heading</h2>
</main>

Service pages typically combine both:

<main class="bg-gradient-2 typography--sans headings--bold">
    ...
</main>

Font Family & Style

Low-level classes for setting font family, weight, and style on individual elements. Each is also available as a Sass placeholder (%body-font-sans etc.) for @extend. Defined in lib/styles/01-base/_fonts.scss.

Use these to override component font styling when .typography--sans doesn't apply (because the element has a class).

Class	Family	Weight	Style
`.body-font-regular`	Serif	normal	normal
`.body-font-italic`	Serif	normal	italic
`.body-font-bold`	Serif	bold	normal
`.body-font-bold-italic`	Serif	bold	italic
`.body-font-sans`	Sans-serif	normal	normal
`.heading-font-regular`	Sans-serif	normal	normal
`.heading-font-bold`	Sans-serif	bold	normal
`.heading-font-heavy`	Sans-serif	800	normal
`.heading-font-ultra`	Sans-serif	1000	normal
`.monospace-font-regular`	Monospace	normal	normal

<!-- Override component font on a specific element -->
<p class="highlight-card__text body-font-sans">Now sans-serif</p>

Spacing

Margin Top

.m-t-0 .m-t-xxs .m-t-xs .m-t-sm .m-t-md .m-t-base .m-t-lg .m-t-xl .m-t-xxl

Margin Bottom

.m-b-0 .m-b-xxs .m-b-xs .m-b-sm .m-b-md .m-b-lg .m-b-xl .m-b-xxl

Gap (for flex/grid)

.gap-sm .gap-md .gap-lg

Flexbox

Class	Effect
`.flex`	`display: flex`
`.flex-direction-column`	`flex-direction: column`
`.flex-align-center`	`align-items: center`

Text

Class	Effect
`.text-align-center`	Centers text
`.center-section`	Alias for `.text-align-center`

Other

Class	Effect
`.faq-section`	Adjusted padding and alignment for FAQ sections