BetterRX · Design system
Design system reference
The internal reference for BetterRX's design system — the single place to check how a shared UI piece looks, what it is called, and how to use it. Every example below is rendered live by the real component, so what you see is exactly what ships. v1 documents the heading system; the reference grows one section at a time.
Headings brx-heading
The BetterRX heading system ships two ways with identical results:
- 1. The
brx-headingmodule — drag-drop in the page editor; you pick Tag / Size / Color from menus and it writes the classes for you. The demos below are all live module instances. - 2. Raw class names — for rich-text contexts (like a Hero) where a module can't be dropped. You write the markup and copy the class string (see the parity section).
The pattern is base + size + color:
<h2 class="brx-heading brx-h-size--xl brx-h-color--dark">…</h2>.
Alignment and spacing are optional extra classes.
Tag ≠ Size
Tag (h1–h6) is the outline
level search engines & screen readers read. Size is visual only. They are
independent — an h2 can look as large as an h1
while staying a semantic h2.
One H1 per page
Use exactly one h1 — the page title. Everything below it is
h2/h3/… by outline depth, regardless of how
big it looks.
3XL = hero only
3xl (~92px) is the explicit hero size — set it by hand on the one hero
heading. A default Auto H1 is 2xl (~70px), matching the site.
Size scale brx-h-size--*
The 6-step scale. Each size is fluid — it scales with the viewport between the px targets shown. Line-height is a uniform 1.10 at every step.
| Size class | px range (min → max) | Line-height | Letter-spacing | Auto tag |
|---|---|---|---|---|
brx-h-size--3xl | 38 → 92 px | 1.10 | -0.02em | — hero only (explicit) |
brx-h-size--2xl | 32 → 70 px | 1.10 | -0.015em | h1 |
brx-h-size--xl | 28 → 52 px | 1.10 | -0.01em | h2 |
brx-h-size--lg | 26 → 39 px | 1.10 | normal | h3 |
brx-h-size--md | 22 → 29 px | 1.10 | normal | h4 |
brx-h-size--sm | 19 → 22 px | 1.10 | normal | h5 · h6 |
Auto map size: auto → tag
When the module's Size is left on Auto, it picks a size from the heading's Tag. Set only text + tag and you get a correct, consistent, accessible heading with no size decision needed.
h1→brx-h-size--2xlpage title — one per page
h2→brx-h-size--xlsection heading
h3→brx-h-size--lgsub-section
h4→brx-h-size--mdsub-point
h5→brx-h-size--smminor sub-point
h6→brx-h-size--smsmallest sub-point
brx-h-size--3xl (~92px) is explicit / hero only — not an Auto
target. Reach for it by hand when a section needs deliberate weight.
Auto map — live set only Tag; Size = Auto
Each card is a real module instance with Size = Auto — HubSpot resolves the size from the tag when the page renders. This is the live proof the Auto map runs server-side.
All sizes — explicit Size field
Each card is an h2 with an explicit Size.
The tag stays h2 throughout — only the visual size changes (decoupling).
3xl is the hero-only step.
Colors brx-h-color--*
Two colors are for light backgrounds, two for dark. The dark-only colors are shown on the real site navy below — the only honest place to preview them.
On light backgrounds
In context · dark section #24333f — real site navy
White — brx-h-color--white · 12.96:1 on navy
Brand orange — brx-h-color--orange · 4.67:1 on navy · dark backgrounds only
Swatch reference
Dark
brx-h-color--darkDefault near-black — light backgrounds.Muted
brx-h-color--mutedSecondary dark text — light backgrounds.White
brx-h-color--whiteDark backgrounds only.Brand orange
brx-h-color--orangeDark backgrounds only — fails contrast on light.Alignment brx-h-align--* · opt-in
Opt-in. Omit these classes to inherit the section/container alignment
(the zero-shift default). Each card is an h3.
Gap below brx-h-gap--* · opt-in
Two near-synonyms with opposite behavior lead the list.
Default emits no class — it keeps the theme's spacing
(≈9px), the zero-shift migration default. None emits
brx-h-gap--none, force-collapsing the gap to 0. Then the
t-shirt scale Small→2XL (each scales with the heading's own size). The dashed line marks the heading's
bottom edge; the space below it is the gap.
Following paragraph — the space above is the theme's default ≈9px.
Following paragraph — no space above (force-collapsed to 0).
Following paragraph.
Following paragraph.
Following paragraph.
Following paragraph.
Following paragraph.
Raw-class parity module ≡ hand-typed
For rich-text contexts (like a Hero) where a module can't be dropped, write the markup by hand with the same classes — the render is identical. Module on the left, the equivalent hand-typed markup on the right.
Better hospice pharmacy
<h2 class="brx-heading brx-h-size--xl brx-h-color--dark">…</h2>Copy-paste strings for common contexts:
<h1 class="brx-heading brx-h-size--3xl brx-h-color--dark">…</h1><h2 class="brx-heading brx-h-size--xl brx-h-color--white">…</h2>Full class reference
Base (required)
brx-heading
Size (required)
brx-h-size--3xlhero onlybrx-h-size--2xlbrx-h-size--xlbrx-h-size--lgbrx-h-size--mdbrx-h-size--sm
Color
brx-h-color--darklightbrx-h-color--mutedlightbrx-h-color--whitedark onlybrx-h-color--orangedark only
Alignment (opt-in)
brx-h-align--leftbrx-h-align--centerbrx-h-align--right
Gap (opt-in)
brx-h-gap--none0 — vs Default ≈9pxbrx-h-gap--smbrx-h-gap--mdbrx-h-gap--lgbrx-h-gap--xlbrx-h-gap--2xl