<retro-displayz/>

HUD component library · Lit web components

Design Tokens

Colors · Canvas

--bg

#06090f

--bg-2

#0c1018

--surface

rgba(255,255,255,0.04)

Colors · Accents

--cyan

#00e5ff

--violet

#7000ff

--red

#ff1744

--amber

#ffab00

Colors · Text

--text

#e2e8f0

--text-dim

#909aa8

--text-faint

#637082

--text-placeholder

#5c6b7a

Colors · Borders & Glows

--border

rgba(cyan,0.18)

--border-bright

rgba(cyan,0.50)

--glow-cyan

rgba(cyan,0.18)

--glow-violet

rgba(violet,0.20)

Typography · Family

ABCDEFGHIJKLMNOPQRSTUVWXYZ & abcdefghijklmnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9 · ! @ # $ % ^ & * ( ) [ ]

--font-mono · IBM Plex Mono · 400

Typography · Scale

--size-2xs · 12pxSignal lock acquired · scanning sector 7-G
--size-xs · 13pxSignal lock acquired · scanning sector 7-G
--size-sm · 14pxSignal lock acquired · scanning sector 7-G
--size-base · 16pxSignal lock acquired
--size-lg · 20pxSignal lock
--size-xl · 24pxSector 7-G

Typography · Letter Spacing

--tracking-wide · 0.06emCALLSIGN · FREQUENCY · SECTOR · OPERATOR
--tracking-wider · 0.12emCLASSIFICATION · RESTRICTED

Spacing

--sp-1 · 4px
--sp-2 · 8px
--sp-3 · 12px
--sp-4 · 16px
--sp-5 · 24px
--sp-6 · 32px
--sp-7 · 48px
--sp-8 · 64px

Motion · Easing

Hover each bar to play the transition.

--ease-out · cubic-bezier(0.16,1,0.3,1)
--duration-fast · 150ms
--duration-base · 240ms
--duration-slow · 400ms

hud-status

hud-progress

Determinate

Indeterminate

Custom max

hud-textarea

Default

With char count

Error state

hud-number

Default

Bounded

Decimal step

hud-gauge

hud-toast

Click a button to show a toast notification.

Info Success Warning Error

hud-button

Ghost Primary Danger Loading Disabled

hud-toggle

hud-checkbox

hud-range

Default

Custom bounds

Disabled

hud-select

Default

With value

Error

hud-input

Default

With value

Error

Disabled

hud-combobox

Typeahead

With value

hud-audio

Frequency visualizer powered by the Web Audio API. Load any audio file via the URL field below.

Form integration

Transmit ↵