Relic Interface System

Cyberpunk/HUD visual language: graphite surfaces, sharp 1px borders, clipped corners, disciplined neon accents (tactical cyber palette), grid + scanline textures, mechanical 90–160ms motion. Dark and light, desktop and mobile, multi-brand. State is never color alone: always accompanied by label or icon. WCAG 2.2 AA compliant: verified contrast, visible focus, prefers-reduced-motion, target ≥24px.

Launch Mobile Touch Shell Open Motion & Contrast Lab Micro-UI & Telemetry Lab Smart Glasses HUD Lab Explore Pro Suite ($99) GitHub Repository ↗

RIS PRO SUITE COMMERCIAL PRODUCTION PACKAGES · v2.8

EARLY-BIRD TIER ACTIVE

The open-source core provides all essential primitives under MIT. Upgrade to the Pro Suite for turn-key application templates, full Figma variables studio kit, multi-channel telemetry scrubbers, and priority enterprise licensing.

MICROGRAPHICS VOL. 1 $24 $34

34+ standalone HUD SVGs, 8 React components, dials, reticles, matrices, and zero-reflow CSS animations.

Buy Micrographics ($24) ↗

FIGMA STUDIO KIT $39 $49

Turnkey plugin script (code.js), Tokens Studio DTCG JSON, 60+ button variants, panels, switches, 1440px HUD & 390px Mobile layouts.

Buy Figma Kit ($39) ↗

NEXT.JS DASHBOARD $49 $69

Next.js App Router Forensic Dashboard, Docker standalone, live telemetry scrubber & log stream.

Buy Next.js Template ($49) ↗

PRO ALL-ACCESS $99 $129

All templates + Figma Studio + React Suite + Jetpack Compose + Tailwind preset + Lifetime v2.x updates.

Get All-Access Suite ($99) ↗

Visit Official Polar Store ↗ ◈ RIS Pro Licensing & Pricing ↗ ◈ GitHub Repository ↗

Skin Cyber

data-skin="cyber" · opt-in · ris-skin-cyber.css loaded last

Applies tactical cyber look & feel over the default forensic base without altering its core: structural red, crimson-to-black gradient, scanlines + grain, key chrome glows, techno display font (Chakra Petch), telemetry chrome. Neons calibrated to remain WCAG AA compliant. Toggle off to inspect the disciplined default.

Mobile: this specimen is fully responsive — open it on a phone (or shrink window to <768px) and all components adapt, swapping rail navigation for a sticky bottomnav. The button below opens a compact mobile app-shell (contacts).

Mobile App-Shell Specimen (topbar + bottomnav)

List-row · selection = solid fill

Telemetry Stream Sync — Buffer-07

Sector 04 · Polarity Nominal · Channel A

15:10

Diagnostics: Memory Integrity — Check-06

RAM Core · Hash Verified · Channel B

15:08

Radio Carrier Handshake — Packet-04

Uplink Lock · Latency 4ms · Channel C

14:52

Topbar stats · telemetry chrome

98%Bus Load 4msPTT Latency

0x00 0f 04 0c 10 00 00 00 00 00   00 01 00 00 bf 22 ee dd ee
0x10 1f 69 05 00 00 00 0f cc 99   dd 00 cc 00 13 03 13 03

↞ binary stream · screen edge rulers · bottom-left ticker

Palette

contextual tokens — AA on bg/surface across both themes · fills remain high-contrast

Typography

Archivo · JetBrains Mono

.ris-hero 44Cybernetic

.ris-h1 32System Interface

.ris-h2 24Biometric Telemetry

.ris-h3 19Acquisition Session

.ris-body 16Body copy uses Archivo: grotesk, legible, instrument-grade.

.ris-label 11Uppercase label — the system workhorse

.ris-mono 14HR 62 bpm · HRV 48 ms · SpO₂ 98%

.ris-numeric87.05 KG

Buttons

36px min · clip 6px (clip-sm) · hover inset accent

Chip · Stream · Risk · Badge

state never color alone — always labeled

Neutral Accent Pending Sync Online Error Inference Gumi Correction

evidence inference pending approved blocked gumi runtime correction

Risk: none Risk: low Risk: medium Risk: high 3 12 YZ

Form

always-visible labels · textual errors, not border alone · target ≥24px

Subject identifier Format: subj_NNN

Email [!] Invalid email address

Data source

Session notes

Remember credentials (encrypted) Include raw EEG data Auto-sync every 3h Manual only Booster online · Omnikon /validate Scanline overlay

HR threshold — 120 bpm

Table

dense · sticky head · aria-sort sorting · selection with accent bar

Timestamp	Metric	Source	Value	Status
06-10 23:41	HRV (RMSSD)	Helio Ring	48 ms	evidence
06-10 23:40	Heart rate	TicWatch Pro 5	62 bpm	approved
06-10 23:38	SpO₂	Zepp Cloud	98 %	pending
06-10 23:31	Weight + BIA	OKOK C0 (BLE)	87.05 kg	evidence
06-10 23:15	EEG alpha	Muse 2	0.82	inference

Modal · Toast · Alert

role="dialog" aria-modal · toast role="status" in aria-live stack

InfoAuto-sync worker active: 3h interval, KEEP policy.

WarningZepp credentials expiring. Renew login.

ErrorSecurityException: READ_HEART_RATE permission missing.

OKDatabase deduplicated: 731,505 → 12,410 rows.

Tabs · Navigation

role="tablist" · breadcrumb aria-current · pagination

Meter · KPI · Facet

role="meter"/"progressbar" with aria-valuenow

Steps Today

8 412

▲ 12% vs 7d

Resting HR

54bpm

▼ 2 bpm

Night HRV

48ms

▲ 6 ms

Sleep

7:24h

— stable

Skeleton · Empty · Log

No recorded sessions Start a Muse recording or import a Mind Monitor CSV.

val composition = BodyComposition.compute(
  weightKg = 87.05, impedanceOhm = 600.0,
  heightCm = profile.heightCm, age = profile.age,
)

23:41:02 [OK] BLE scan: OKOK C0 A0:77:9E:58:BA:2A

23:41:04 [WARN] frame unstable, bit0=0 — retry

23:41:07 [OK] weight 87.05 kg · Z 600.0 Ω → BIA

23:41:08 [ERR] missing user profile: height required

Shortcuts: Ctrl K command palette · / search

Advanced Components

accordion · stepper · drawer · command palette · dropzone

Profile

Permissions

Sources

Sync

Health Connect

14 record types synced. Last sync 23:41 — 142 samples.

Zepp Cloud

Login email+password (AES 2-step). Stress + SpO₂ events.

Muse 2 — EEG

OSC UDP listener on :5000 + Mind Monitor CSV import.

Drop Gadgetbridge.db or click — SQLite, max 256 MB

Interactive States

default · hover · focus-visible · active · disabled · selected · invalid · loading

State	Button	Input	Nav Link
Default			Home
Hover / Focus	border + inset accent, 2px cyan ring on `:focus-visible`	cyan border + inset glow	fg1 + surface-2
Selected / Active			Home
Disabled			fg4, no hover
Invalid	—		—
Loading			skeleton
Updated

Charts

js/ris-charts.js · SVG, zero dependencies · neon glow · Tactical HUD Scrubber (hover/touch or keyboard arrows) · phosphor micro-sweep · 100% real data

Continuous 4.5s phosphor sweep · entry animation on viewport scroll

HR · 7 Daysline

Steps · Weeklybars

Live EEGwave

EEG Bandsbands

Stress · Todayintraday

sparkline: gauge:

FX — minimal · opt-in

css/ris-fx.css · decorative, opt-in, never enforced by components · disabled under reduced-motion

RELIC loading

Active / live states — motion = enhancement, always labeled · motionless under reduced-motion

Live acquisition

Breathing border · .ris-acquiring on panel.

Rec

Recording

Pulsing red dot · .ris-rec.

Rec · 00:42

Playing

Equalizer · .ris-playing (4 <i>).

Live EEG

Scanning

Sweep · .ris-scan · BLE scan / search.

Holo (logos/brands only)

Signature brand accent: trademark shimmer. The only gradient-text in the system.

Signal OK

Terminal caret

Streaming cursor for live console / text output.

NO SIGNAL

Boot reveal

Subtle entrance stagger on view mount (opt-in, disabled under reduced-motion).

Module 1

ON

Module 2

ON

Module 3

ON

Motion System v2 (Tactical Cyber HUD Architecture)

Zero reflow · 60fps · CSS Grid disclosure · HUD Radar Sweep · WCAG 2.2 AA

Open Interactive Motion Lab (A11y & LAN Test) →

1. Accordion Disclosure (.ris-acc)

Smooth CSS Grid 0fr → 1fr transition in 200ms (--ris-dur-base). Zero reflow/jank.

Asymmetric decryption key verified.

2. Radar Sweep HUD (.ris-radar)

BEARING: 084° FREQ: 14.82 GHz

• ACTIVE SWEEP (2.2s) •

TARGETS: 0 IDENTIFIED · STATUS: LOCK

3. Micro-Interactions & HUD Toast

ACTIVE NEURAL OVERLAY

PRESS FEEDBACK: 80ms SNAP · SCALE 0.97

Micro-UI & Telemetry Graphics (v2.8)

High-Density Tactical Vector Atoms · 34+ Presets · 8 Families · Turnkey Composite Clusters

Open Micro-UI Laboratory (34+ SVGs & React Primitives) →

Precision geometric micro-graphics for heads-up displays, telemetry readouts, radar reticles, frequency equalizers, and cryptographic stamps. Engineered with 1px hairline vectors, 45° chamfers, hardware-accelerated zero-reflow animations, and multi-brand token integration.

ATOMS & RETICLES MicroReticle & MicroCaliper

Target locks, optic grids, corner brackets, millimeter calipers, and 45° leader lines.

DIALS & GAUGES MicroDial & MicroEqualizer

Radial dials, azimuth needles, audio-spectrum quantizers, and dynamic sweep indicators.

MATRICES & RELAYS MicroMatrix & MicroConstellation

LED dot grids, binary status registers, orbital relays, and beacon pulse network nodes.

CLUSTERS & STAMPS MicroStamp & MicroCluster

Barcodes, hex stamps, and 8 turnkey composite telemetry clusters (Sensor Lock, Node Health, Power Module).

Icons (Tabler Icons · MIT License)

sprite ris-icons.svg · Tabler Icons MIT · 24×24 · stroke 1.75 currentColor

Accessibility — Summary

Token contrast verified ≥4.5:1 (normal text) on bg/surface across both themes; fg4 reserved for placeholder/disabled. 2px cyan focus ring on :focus-visible. All animations halt under prefers-reduced-motion. Minimum targets: buttons 36px, form controls ≥24px (WCAG 2.5.8). State never communicated by color alone. Skip-nav included. ARIA patterns documented in COMPONENTS.md.