Keystone demo

Style + icons + behavior, each loaded from a single tag. This page uses all three; comment any one out in the source to see the others still work.

Buttons

Form (with validation)

Badges, chips & alerts

Neutral Primary Success Warning Error

Chip Selected tag Active Removable Clickable

Heads up

This is an informational alert.

Saved successfully.

Overlays & feedback

Tabs & accordion

Overview content.

Details content.

Activity content.

A three-pillar front-end framework.

No — drop in the files and go.

Data & status

Name	Status	Uptime
Server A	Online	99.98%
Server B	Degraded	97.40%
Server C	Offline	0.00%
Fleet	3 nodes	65.79%

Progress

Loading…

KS

Sound & haptics

Optional official plugins, shipped off in plugins/config.json. Enable them below to feel/hear them — then click any button on the page. Haptics need a device with a vibration motor.

Sounds

Bleeps & bloops Clicks & clacks

Haptics

Stateful fields

Add the stateful attribute and a field remembers its value across reloads — persisted to the browser's private file system (a port of pio). Type below, then refresh.

Your name

Favorite pillar

Remember me

Theme preference — stateful radio group

Auto Light Dark

Requires the File System Access API (Chromium/WebKit). Other browsers no-op silently. Radios persist by group name.

Icons

Rendered from the embedded webfont via .ks-i-<category>-<name>.