html.style

Same tokens, your markup

Extend

You never rebuild html.style to invent a page. Restyle tokens, compose atoms, or wrap an hs-*. A new custom element is for behaviour, not for looking on-brand.

1

Tokens on any element

Use --p-* and --color-* on native HTML and on classes you own. Scope globally on :root or locally on a subtree.

.pricing-tile {
  padding: var(--p-space-lg);
  border-radius: var(--p-radius-lg);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}
Copy
2

Atoms on foreign markup

.stack, .cluster, .switcher, .card-grid are the way to invent pages this library did not design.

Personal

Tokens only.

Team

Same atoms, different copy.

3

Restyle shipped elements

Theme tokens for the whole product. Group tokens for all fields. ::part() and local custom properties for one widget.

[data-tenant="acme"] {
  --p-brand-hue: 210;
  --color-action-primary: oklch(0.55 0.18 var(--p-brand-hue));
}
Copy

Acme tenant

This subtree sets --p-brand-hue: 210. The button follows. Nothing was rebuilt.

4

Your own component, still on the system

Light DOM in @layer product, or an app-* element that inherits --p-* through :host.

@layer reset, tokens, atoms, molecules, organisms, templates, product;

@layer product {
  .invoice-row {
    display: grid;
    gap: var(--hs-space-3, var(--p-space-md));
    container-type: inline-size;
  }
}
Copy
5

Framework adapters last

Import the CSS. Register elements. Only wrap if the host framework needs it. See docs/frameworks.md in the repo.

Three pages built only with html.style →