@hexpunk/core/elements.css ships a token-driven baseline for native HTML
primitives — paragraphs, links, lists, tables, code, form fields. Import it once at the
document root and raw HTML in your app picks up the design system's typography, colour,
focus ring, and forced-colors fallbacks. No <hp-*> wrapper required.
Two layers in one file. The bare reset auto-applies to every native
element. The .hp-prose class is an opt-in rhythm scope for long-form
content — see the Prose page.
Installation
<!-- Import the three CSS files once at your app's entry. -->
<link rel="stylesheet" href="/path/to/@hexpunk/core/tokens.dark.css" />
<link rel="stylesheet" href="/path/to/@hexpunk/core/tokens.light.css" />
<link rel="stylesheet" href="/path/to/@hexpunk/core/elements.css" />
<!-- Then write plain HTML — every native element picks up the
design system's tokens automatically. -->
<p>Hello, hex world.</p>
Or, if your build pipeline supports CSS-via-JS imports (Vite, Astro, Next, etc.):
Headings carry zero default margin so they compose freely. Use .hp-prose
on a wrapping element to opt into vertical rhythm.
Inline text
Paragraphs default to --hp-on-surface. Strong and
b tighten weight; emphasis and i italicise.
Small text drops to body-sm.
Marked text uses the warn container tokens.
Deleted strikes through; inserted underlines with the
secondary hue. Press Ctrl + K for command palettes —
kbd reads as a key cap.
H2O and E = mc2. Variables read as x, samples as
OK.
<body>
<p>
Visit <a href="https://example.com">example.com</a> for details.
</p>
</body>
Code
For syntax-highlighted code with line numbers, per-line hover, and a copy button,
reach for <hp-code> —
it accepts a consumer-registered highlighter (Shiki, highlight.js, Prism). The raw
primitives below are the right call for short inline snippets and unhighlighted
block samples.
Inline const x = 1 renders as a chip. Block-level code uses
<pre><code>:
function hex(q, r) {
return [q * (3 / 2), r * Math.sqrt(3) + q * Math.sqrt(3) / 2];
}
<body>
<p>Inline <code>const x = 1</code> reads as a chip.</p>
<pre>
<code>
function hex(q, r) {
return [q * (3 / 2), r * Math.sqrt(3) + q * Math.sqrt(3) / 2];
}
</code>
</pre>
</body>
Blockquote
The system is the source of truth — the chrome is just the surface.
— Hexpunk DESIGN.md
<body>
<blockquote>
<p>The system is the source of truth — the chrome is just the surface.</p>
<cite>— Hexpunk DESIGN.md</cite>
</blockquote>
</body>
Bullet glyphs use the secondary hue via ::marker. Padding shown here comes
from the .hp-prose wrapper — bare-reset lists ship with zero padding so
consumers control list indentation per-surface.
Hexagons are the densest regular tiling of the plane — six neighbours per cell,
uniform distance, and a directionality that maps cleanly to a six-state colour
system. Every Hexpunk component starts from that geometry.
What's the difference between hp-cell and hp-hex?
<hp-hex> is the raw geometric primitive — pure shape, no
semantics. <hp-cell> is the universal labelled atom built
on top, with interactive variants (anchor / action / secondary / utility) and
decorative variants (content / support / slot).
Open by default
The open attribute starts the disclosure expanded.
<body>
<details>
<summary>Why hexagons?</summary>
<p>Hexagons are the densest regular tiling of the plane...</p>
</details>
<details open>
<summary>Open by default</summary>
<p>The <code>open</code> attribute starts expanded.</p>
</details>
</body>
Horizontal rule
For dividers with orientation (horizontal / vertical), tone, and optional centred
marks, use <hp-separator>.
Raw <hr> stays useful for inline section breaks inside long-form
content.
Above the rule.
Below the rule.
<body>
<p>Above the rule.</p>
<hr />
<p>Below the rule.</p>
</body>
Form primitives
Raw form inputs get tokenised typography, restrained borders, and a focus ring that
matches the rest of the system. They deliberately don't carry hex geometry — for
the full Hexpunk aesthetic (hex buttons, hex-bonded toggles, single/multi toggle
groups, sliders, labelled selects, form-association via
<hp-form>), reach for:
hp-button ·
hp-checkbox ·
hp-radio ·
hp-select ·
hp-slider ·
hp-toggle ·
hp-toggle-group ·
hp-label.
<body>
<form>
<label>
Name
<input type="text" placeholder="Hissalia" />
</label>
<label>
Email
<input type="email" required placeholder="izzy@example.com" />
</label>
<label>
Bio
<textarea></textarea>
</label>
<label>
Country
<select>
<option>United Kingdom</option>
<option>United States</option>
</select>
</label>
</form>
</body>