v2026.1 · OKLCH · no polyfills

Semantic HTML is the API.

Write the HTML spec. It comes out styled, dark-mode aware, and accessible. Reach for hs-* only when the platform is missing a verb.

Get started See the elements

No classes. The stylesheet styles the tags.

Zero build

Two tags. Done.

A build step is only needed inside another framework, which already has one. ES modules need HTTP, not a bundler — any static server works. Opening from file://? Use the classic script build.

<link rel="stylesheet" href="css/html.style.css">
<script type="module" src="js/html.style.js"></script>
<script type="module" src="js/html.style.components.js"></script>

Copy

Against utility soup

The HTML is the design system.

html.style

<h1>Settings</h1>
<form>
  <label for="email">Email</label>
  <input id="email" type="email" required>
  <button>Save</button>
</form>

Utility CSS

<div class="mx-auto max-w-lg p-8">
  <h1 class="text-3xl font-bold tracking-tight">Settings</h1>
  <form class="mt-6 flex flex-col gap-4">
    <label class="text-sm font-medium text-zinc-600">Email</label>
    <input class="rounded-md border border-zinc-300 px-3 py-2" />
    <button class="rounded-md bg-zinc-900 px-4 py-2 text-white">Save</button>
  </form>
</div>

Additive, not a second vocabulary

Elements wrap the platform.

<article> is already a styled article. <hs-card> adds container-query padding. <hs-dialog> is a real <dialog> — top layer, backdrop, focus trap, Escape, <form method="dialog"> still close it.

Panels you wrote. The tablist is derived.

Arrow keys, Home, End. Optional manual activation.

What if JavaScript is off?

Atoms and layout still work. Light-DOM elements look right before they upgrade. Shadow widgets reserve their box so the layout does not jump.

Do I need a class?

No. Tags are styled. Classes are opt-in atoms and variants.

Delete this?

The platform does the hard part. This component only opens modal.

Same tokens on <p> and <hs-combobox>.

Theme without a rebuild

One hue. The whole page follows.

Brand hue 58

One custom property. Surfaces, borders, and text pick up a trace of the same hue. Nothing to rebuild.

Modern CSS

OKLCH, container queries, cascade layers, light-dark(), relative color. Locked to the 2026 snapshot. No polyfills.

For agents

A generated custom-elements.json, predictable hs-* names, docs written so a coding agent can use the library without extra guidance.

Extend, don’t fork

Override tokens on :root or a subtree. Compose layout atoms. Write your own component that still drinks --p-*.

How to extend html.style →