██╗  ██╗██╗   ██╗██╗   ██╗    ██╗   ██╗██╗
 ██║  ██║╚██╗ ██╔╝██║   ██║    ██║   ██║██║
 ███████║ ╚████╔╝ ██║   ██║    ██║   ██║██║
 ██╔══██║  ╚██╔╝  ╚██╗ ██╔╝    ██║   ██║██║
 ██║  ██║   ██║    ╚████╔╝      ╚████╔╝ ██║
 ╚═╝  ╚═╝   ╚═╝     ╚═══╝        ╚═══╝  ╚═╝

_{svelte 5 · typescript · tailwind v4 · dark by default}

01 / what it is [ OK ] component library for svelte 5 [ OK ] token-driven, no hardcoded values [ OK ] operator aesthetic, not startup aesthetic [WARN] opinionated about how things should feel built for interfaces that should feel like they are paying attention. </td> <td width="48%" valign="top"> 02 / what it is not a general-purpose design system configurable to any aesthetic optimized for light mode trying to look like everything else the palette is two colors and they do not negotiate. </td>

---

03 / install

npm install @hyvnt/hyvui

<script>
  import { Button, Text, FloatCard } from "@hyvnt/hyvui";
</script>

import the styles once at the root of your app:

// app.css or root layout
import "@hyvnt/hyvui/styles.css";

---

04 / structure

primitives Text Label Icon Divider Surface inputs Button Input Textarea Select Checkbox Toggle FileUpload feedback Alert Toast StatusDot StatusLine Skeleton EmptyState ErrorState </td> <td valign="top" width="33%"> layout Stack Grid Card Panel Modal Drawer Popover navigation Topbar SidebarNav Tabs Breadcrumb DropdownMenu display Badge Avatar Table CodeBlock MetricCard Blockquote </td> <td valign="top" width="33%"> ambient GridOverlay CornerBrackets ScanBand Vignette ParallaxLayer SignalRing GlyphMark DataStream ThreadLine HexGrid BrassFiligree CrystalShard ArcaneVein EnergyArc ShimmerCloud depth DepthStage DepthLayer FloatCard HorizonGrid Plinth scenes NarrativeScene ReadoutScene StageScene ArchiveScene LogScene </td>

---

05 / layers

the library is organized in three additive layers. each one works without the next.

[ base ]       75 components. tokens. css custom properties throughout.
               nothing hardcoded. nothing fighting your cascade.

[ expressive ] weights and themes shift the ambient mood of a section.
               expressions carry semantic intent through typography.
               four actions compose onto any element.

[ spatial ]    CSS 3D depth system. perspective stages. tilt on pointer.
               receding grids. a plinth to stand things on.

---

06 / weights and themes

weights and themes are separate. weights shift density and voice. themes shift palette and motif.

<script>
  import { applyWeight, applyTheme } from "@hyvnt/hyvui";
  onMount(() => {
    applyWeight("mission-control");
    applyTheme("hextech");
  });
</script>

weight	character
field-notebook	warm, worn, analog
mission-control	cold, precise, dense
archive	flat, institutional, drained

theme	character
hextech	piltover-refined. brass, crystal, mechanical
arcane	zaun-unstable. shimmer, shards, organic glow

the hextech and arcane themes ship their own palette and motif token files. import the ones you use:

import "@hyvnt/hyvui/styles.css"; // base tokens + weight registers
import "@hyvnt/hyvui/tokens/hextech.css"; // --htx-* palette + motif tokens
import "@hyvnt/hyvui/tokens/arcane.css"; // --arc-* palette + motif tokens

motif tokens (themes only):

--orn-hex-density     /* hex grid tile density */
--orn-vein-intensity  /* arcane crack-vein strength, 0–1 */
--orn-shimmer-rate    /* particle drift / shimmer speed */

use RegisterSwitcher from the patterns layer to let users toggle weights and themes at runtime:

<script>
  import { RegisterSwitcher } from "@hyvnt/hyvui";
</script>

<RegisterSwitcher />

---

07 / expressions

text expressions carry intent beyond variant. pass them to any Text component.

<Text expression="title-card">the coordinates are empty now</Text>
<Text expression="readout">signal: –42 dbm</Text>
<Text expression="manifesto">something was here before we arrived.</Text>

---

08 / depth

<DepthStage perspective="mid">
  <DepthLayer level="ground">
    <HorizonGrid rows={16} cols={10} vanishY={0.35} />
  </DepthLayer>
  <DepthLayer level="raised">
    <FloatCard tiltMax={6}>
      <Label color="muted">signal strength</Label>
      <Text variant="heading" color="primary">–42 dbm</Text>
    </FloatCard>
  </DepthLayer>
</DepthStage>

all 3D transforms are disabled under prefers-reduced-motion.

---

09 / tokens

two accent colors. everything else is neutral.

--accent      /* gold  — #c79c57 — warmth, action, age      */
--signal      /* teal  — #79a6a3 — data, status, precision  */

override per-section with --reg-* properties. documented in override-template.css.

---

10 / notes

the library assumes you want the interface to have a mood.
if you do not want that, it will still work. it will just feel a little contained.

svelte 5 only. no compatibility shims.