01 / what it is

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.

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.

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.