Style every element.

Each element includes its own neutral base. Change inherited --hp-* tokens for colors, radius, and surface depth, or use a recipe for a specific part. Compare Layered and Flat with the Surface picker. The Appearance picker applies the same light and dark presets as the playground.

To reuse an existing shadcn theme, load the adapter and add hp-shadcn to its scope. It reads your existing semantic variables, including nested dark scopes. Explicit --hp-* overrides take precedence.

<link rel="stylesheet" href="./htmlplus-shadcn.css">
<form class="hp-shadcn">
  <!-- Your shadcn theme supplies --background, --primary, etc. -->
</form>

These examples use plain CSS. They do not require React, Tailwind, or shadcn/ui.