Skip to content

Style Guide

All available styles on this site. Use this as a reference when building new modules.

Typography — Headings

Heading 1 — The quick brown fox

h1 / .h1 — 4rem, weight 700, line-height 1.1 (40px at ≤600px)

Heading 2 — The quick brown fox

h2 / .h2 — 3rem, weight 700, line-height 1.1 (28px at ≤600px)

Heading 3 — The quick brown fox

h3 / .h3 — 2rem, weight 700, line-height 1.2

Heading 4 — The quick brown fox

h4 / .h4 — inherits body size
Heading 5 — The quick brown fox
h5 / .h5 — inherits body size
Heading 6 — The quick brown fox
h6 / .h6 — uppercase, letter-spacing 1px, color: --theme-color-1
Typography — Body & Sizes

This is standard body text. The default font is set via ACF options (typically "Milo Serif OT"). Base size is 1.75rem with a line-height of 1.5. The color is var(--theme-color-1) (dark green).

This is .font-size-small (15px) — used for captions, metadata, and secondary text.

This is .font-size-extra-small (12px) — used for fine print and legal text.

This is .font-size-large (2rem) — used for lead paragraphs or emphasis.

This is a standard link — bold, underlined, blue (#0E608B), hover transitions to dark green.

This text has the .underline class — decorative green squiggle background.

Colors — Brand Palette
Dark Green --theme-color-1
#173e2f
Light Green --theme-color-2
#e3eba3
Tan --theme-color-3
#f4f1e9
Blue $blue (SCSS only)
#0E608B
Tan w/ Texture .has-tan-w-bg-background-color
#EFEADE
Black .has-black-background-color
#000
Background Color Classes

has-theme-color-1-background-color

Dark green background. Text becomes tan. Links become light green. Link example.

Button (light) Outline (light)

has-theme-color-2-background-color

Light green background. Default text colors. Link example.

has-theme-color-3-background-color

Tan background. Default text colors. Link example.

has-blue-background-color

Blue background. Text becomes tan. Links become white. Link example.

Buttons — No Icons
Default Button Outline Button Arrow Button Small Button CTA Link
Buttons — Leading Icon (document)
Read the Plan Read the Plan Read the Plan
Buttons — Trailing Icon (arrow)
Learn More Learn More Learn More
Buttons on Dark Background
Read the Plan Learn More No Icon No Icon
Cards

Static Card

Non-linked card with .card class. Tan bg, 8px radius.

Linked Card

With hover shadow and arrow icon.

Card with Icon

Icons positioned absolute, bottom-left.

Lists

Standard List

  • Standard unordered list item
  • Another list item with a link
  • Third item for spacing reference

Checklist

  • Checklist item with blue circle checkmark
  • Another checklist item
  • Third checklist item for spacing

Checklist H3 Title

An h3 with the .checklist-title class gets the blue circle checkmark icon.

Blockquote

This is a blockquote. It uses "Milo Serif OT" at 4rem, 500 weight, with tan background and 8px radius. Responsive down to 20px at ≤500px.

Form Elements




Spacing Reference
Variable Value Usage
$section-padding 4rem Default block top/bottom padding
$section-padding-background-color 6rem Block padding when has-background
$standard-spacing 2rem Paragraph/list margin
$column-gutter 4rem Column gap
$col-width 90vw Container width
$max-col-width 1300px Container max-width