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

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 / registers

registers are named aesthetic states. apply one and the ambient properties shift.

<script>
	import { applyRegister } from '@hyvnt/hyvui';
	onMount(() => applyRegister('mission-control'));
</script>

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

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.