Type scale
4X-Large — H1 · The Proper Way
3X-Large — H2 · The Proper Way
2X-Large — H3 · The Proper Way
X-Large — H4 · The Proper Way
Large — lead / 20px
Medium — 18px body
Base — 16px. The quick brown fox jumps over the lazy dog.
Small — 14px caption.
MONO — EYEBROW / LABELS 0123456789
Prose flow
Heading level two
Body copy sits here at the base size and line-height, with a plain inline link showing the theme’s default accessible link color and underline treatment before any style override is applied.
Heading level three
This paragraph carries the link-color-primary style — its first link and its second link both underline in the accessible primary orange, while the surrounding text stays contrast-colored.
Heading level four
This paragraph carries the link-color-secondary style instead — its link underlines in navy secondary rather than orange.
Heading level five
Ship it with mpx dev build mp2026 before you push — inline code renders in the theme’s monospace face.
Heading level six
The smallest heading level closes out the flow, sitting above one last paragraph of plain body copy to show baseline rhythm end to end.
Lists
- Circle marker
- Second item
- Third item
- Square marker
- Second item
- Third item
- Diamond marker
- Second item
- Third item
- Unstyled item
- Second item
- Third item
- Numbered item
- Second item
- Third item
Buttons
Separators
Colors
Primary
Secondary
Contrast
Neutral
Primary Text — #c93509
Panel
Demo panel
A neutral-background panel — the same demo-panel treatment used to frame the button groups above, shown standalone as a generic content card with a rounded corner and its own call to action.
Motion
Reusable graphic motion (the mp-motion module, theme/inc/motion.php). Each mark draws itself in once as it scrolls into view, then idles with a subtle pulse; the review stars twinkle. The header/footer logo uses the same toolkit on hover. Everything is disabled under prefers-reduced-motion.
5.0 star
Google review rating
95%
Client retention rate
92
avg Lighthouse score
210
organizations served
Each graphic draws itself in once as it scrolls into view, then idles with a subtle pulse; the review stars twinkle. Hover the logo in the header/footer for the same treatment on the brand mark. All motion is disabled under prefers-reduced-motion.