The bare reset from elements.css
grounds raw HTML in the design system, but it deliberately ships zero vertical rhythm —
no heading margins, no paragraph spacing, no list padding. Drop
class="hp-prose" on any container to opt into rhythm for long-form content.
Same HTML, with and without the wrapper. Both screens use the same elements.css
baseline; .hp-prose only adds the rhythm.
Every hex has a bounding box of w × (w · 2/√3). Axial
coordinates project to pixels as x = w · (q + r/2),
y = w · √3/2 · r.
The grid uses an effective cell width of w − hex-stroke so
adjacent hexes' stroke bands coincide into a single shared edge.
size="md".bondable attribute.
Every hex has a bounding box of w × (w · 2/√3). Axial
coordinates project to pixels as x = w · (q + r/2),
y = w · √3/2 · r.
The grid uses an effective cell width of w − hex-stroke so
adjacent hexes' stroke bands coincide into a single shared edge.
size="md".bondable attribute.The rhythm rules in plain English:
> * + * sets a top margin of
--hp-md between siblings, so paragraphs, lists, and blocks of code
breathe.
--hp-xl top + --hp-sm bottom,
so a new section visibly separates from the prose above it. The first child resets
to zero so a heading at the top of the wrapper doesn't push everything down.
ul / ol get
padding-left: --hp-lg + bullet marker tint. Nested lists tighten so
they hug their parent item.
--hp-md outer margins for consistent
cadence.
Two headings stacked back-to-back don't get the full
--hp-xl gap — they tighten so a subtitle hugs its parent. Below the
second heading, paragraphs resume normal rhythm.
A follow-up paragraph spaces normally — --hp-md from the previous
block.
And a new section starts again.
70ch caps or sibling margins.
<hp-*> elements own their
shadow DOM; .hp-prose can't and shouldn't reach into them.
<article class="hp-prose"> around the rendered body and leaves
nav / sidebar / footer outside the wrapper.