┌─────────────────────────────────────────────────────────────┐
│ [ // RELIC INTERFACE SYSTEM · SYSTEM ARMED · v2.8.0 // ] │
└─────────────────────────────────────────────────────────────┘
🌐 Launch Desktop Specimen • 👓 Optical Waveguide HUD Lab • 📱 Launch Mobile Touch Shell • ⚡ Test Motion Physics • 🎛️ Browse Micro-UI Lab • ⭐ Get Pro Suite ($99)
| ENGINE | COMPLIANCE | REFLOW JANK | MOTION BUDGET | PALETTE |
|---|---|---|---|---|
| CSS + Canvas + Compose | WCAG 2.2 AA (≥ 4.5:1) | 0% (Composited) | 80ms / 140ms / 200ms | Dark HUD · Light Blueprint |
🌐 Live Specimen (Web) · 📱 Mobile Touch Shell · ⚡ Motion & Contrast Lab · 🎛️ Micro-UI Lab · 🤖 Android Compose Port · 🛒 Polar Store
Most cyberpunk UI libraries are unusable in production: neon gradients that fail contrast audits, heavy box-shadow glows that drop GPU frames, and mock charts populated with fake random math.
Relic Interface System (RIS) was built around production constraints:
- Disciplined Graphite Surfaces: 1px crisp borders (
var(--ris-line)) and native 45° chamfers computed via CSSclip-path: polygon(...). No fuzzy shadows or broken border-radius hacks. - Calibrated Motion: 80ms click snap (
scale(0.97)), 140ms hover response, zero-reflow CSS Grid drawers (grid-template-rows: 0fr → 1fr), and an absolute ban onease-infor entering elements. - Zero-Dependency Real Telemetry: Interactive SVG charts with mouse and keyboard scrubbers (
ArrowLeft/ArrowRight) binding 1:1 to real data streams at 60fps. No Chart.js or D3 runtime overhead. - True Dual Theme: High-contrast tactical HUD in Dark mode; calm architectural blueprint cyan/slate (
#1b6b80) on light gray in Light mode. Both pass WCAG 2.2 AA contrast (≥ 4.5:1). - Native Android Parity: Complete Jetpack Compose module sharing identical token values, polygon clip shapes, and Canvas chart renderers.
- Optical Waveguide & AR Eyewear HUD: Ultra-compact 1px vector telemetry for smart glasses (MicroLED/Micro-OLED). Zero foveal occlusion (100% hollow boresight center) and emissive alpha physics where black is pure optical transparency.
A dedicated tactical suite for compact optical waveguides and smart eyewear (Google Glass, RayNeo X2, Even Realities G1, ActiveLook). Built for sub-second peripheral glanceability without occluding the wearer's real-world vision.
- Emissive Alpha Transparency: Black (
#000000) emits zero light on see-through MicroLED displays. UI is drawn with crisp 1px strokes (vector-effect="non-scaling-stroke") and open 45° chamfered brackets without solid card fills. - Foveal Vision Safety: Zero clutter in the central 15° cone. The center remains 100% hollow for safe driving, walking, and natural eye contact.
- 5 Modular Atomic Components:
MicroNavGuidance: Turn-by-turn wayfinding with maneuver countdown and ETA chip.MicroLiveCaptions: Real-time speech transcription within a 38-char foveal comfort boundary.MicroVitalTelemetry: Cardiac BPM with ECG pulse diamond, 5-stage HR zones, altitude, and 4-segment quantized battery gauge.MicroGlanceNotice: Ephemeral upper-periphery alert banner with 4-second auto-decay timer line.MicroSpatialInspection: Central boresight targeting frame with 100% hollow center, LiDAR distance telemetry, and lateral range ruler.
- Turnkey Composite Viewport (
<SmartGlassesHUD />):- 4 specialized operational modes:
ambient(minimalist clock & endurance),commute(navigation & compass heading),meeting(live transcription & glance alerts), andfield-ops(LiDAR boresight & biometrics).
- 4 specialized operational modes:
- Interactive Lens Simulator: Test optical contrast across daylight glare, night traffic, and industrial inspection environments in
docs/eyewear.html.
No local setup is required to evaluate or start building. Launch the full environment right in your browser via GitHub Pages:
Click Use this template on GitHub or clone the repository to spin up a new tactical app:
git clone https://github.com/yuzushi-dev/relic-interface-system.git my-tactical-app
cd my-tactical-app
python3 -m http.server 8080- Web (Vanilla CSS): Import
css/ris-tokens.css+css/ris.css(and optionalcss/ris-skin-cyber.css). Specimen indocs/index.html. - React + TypeScript: Native
@relic-ui/reactcomponents with zero-reflow CSS Grid, typed hooks, form primitives, and charts inreact/. - Figma UI Kit: Turnkey Master Generator script, Tokens Studio JSON, 60+ components with variants, and vector shapes in
figma/. - Tailwind CSS Plugin: Ready preset with
.chamfer-*utilities and design tokens intailwind/. - Android / Compose: Direct drop-in Gradle library module with Maven/JitPack publishing in
compose/. - Pro Next.js Template: Production-ready Forensic Telemetry Dashboard in
templates/forensic-dashboard/. - Agent Prompt: If building with Claude Code, Cursor, or Codex, pass
DESIGN.mddirectly as the system prompt.
Relic Interface System follows an open-core architecture. The foundational design system and primitives are 100% free and open-source under the MIT License, while turn-key application templates, the consolidated Figma Studio kit, and enterprise support are governed by the Commercial Software License.
| Deliverable | Core (Open Source · MIT) | Pro Suite (Commercial License) |
|---|---|---|
| Design Tokens & CSS | Full Dark & Light tokens, 4 Brands (relic, biohub, omnikon, neutral) |
+ 3 High-density Case-Context skins (sealed, field, archive) |
| Figma UI Kit | Community Preview tokens & generator script | Figma Studio Kit Pro: Master generator, 60+ component variants, Auto Layout, Tokens Studio DTCG |
| React Components | Buttons, Panels, Switches, Tabs, Modals | Full @relic-ui/react library + Form controls, Data Table, Alerts, Sonner Toasts, EEG Canvas |
| Next.js Templates | Specimen pages | Forensic Telemetry Dashboard: Complete App Router application with Docker container |
| Android Compose | Core library module | Production suite with hardware-accelerated Canvas charts & dynamic theming |
| Commercial Usage | Unlimited (MIT) | Unlimited commercial products & SaaS without attribution |
All Pro licenses are perpetual (one-time purchase) with lifetime v2.x updates. Tax and VAT are handled automatically via Merchant of Record (Polar.sh). Launch early-bird pricing is pre-applied directly at checkout — no coupon code required:
| License Tier | Launch Early-Bird Price | Standard List Price | Included Deliverables | Direct Checkout |
|---|---|---|---|---|
| Micrographics Vol. 1 | $24 | $34 | 34+ precision HUD SVGs, 8 React TypeScript components, zero-reflow CSS animations, tokens JSON | Buy Micrographics ($24) |
| Figma Studio Kit | $39 | $49 | Turnkey Master script (code.js), Tokens Studio DTCG JSON, 60+ component variants, 130+ SVG vectors |
Buy Figma Kit ($39) |
| Next.js Forensic Dashboard | $49 | $69 | Turn-key Next.js 14 App Router template, interactive telemetry scrubber, Docker container | Buy Dashboard ($49) |
| RIS Pro All-Access (Best Seller) | $99 | $129 | All templates + Figma Studio + React Pro + Compose + Tailwind + Priority Discussions | Buy All-Access ($99) |
| Team License | $249 | $299 | All-Access for up to 10 developers/designers in an organization + 48h SLA support | Contact Team Sales |
ℹ️ Support & Guarantee: 14-day money-back guarantee. Technical support provided via email (
[email protected]) and GitHub Discussions. Perpetual license covers all future v2.x updates. Terms and commercial permissions governed by the RIS Pro Commercial License.
Everything you need to ship a forensic dashboard or hardware workbench:
| Category | Primitives | Highlights |
|---|---|---|
| Buttons & Controls | .ris-btn (Primary, Secondary, Ghost, Danger), .ris-switch |
80ms mechanical snap (scale(0.97)), AAA invert highlight on hover |
| Surfaces & Layout | .ris-panel, .ris-topbar, .ris-rail, .ris-bottomnav |
Clipped 45° corners, bracket accents (.ris-bracket), edge notch rulers |
| Mobile & Touch | .ris-sheet, .ris-sheet-handle, .ris-listrow |
Touch-first bottom sheets, gesture drag dismiss, 44px touch targets, OLED safe |
| Disclosures & Overlays | .ris-acc, .ris-modal-box, .ris-toast-stack |
Zero-reflow CSS Grid drawers (0fr → 1fr), Sonner-style staggered toasts |
| Telemetry & Meters | .ris-stat, .ris-segmeter, .ris-progress, .ris-radar |
Discrete segmented energy blocks, continuous canvas progress, radar sweep |
| Interactive Charts | RisCharts.line, .bars, .gauge, .intraday, .eegWaveform |
Scrubbers with keyboard Arrow control, delta badges, peak threshold warnings |
| Icons | icons/ris-icons.svg |
132 unified technical SVG glyphs (based on Tabler Icons, MIT) |
- Tokens Only: Never hardcode hex values in component CSS. Always use
var(--ris-*). - Accent = Meaning: Colors convey state, not decorative clutter (Amber = CTA/active, Cyan = data/scan, Red = alert/blocked, Green = nominal).
- No Blind State: State is never communicated by color alone (WCAG 1.4.1). Always pair with text labels or icons.
- Composited Motion: Animate only
transformandopacity. Never animateheight,width, ortop. - Strict Real Data: No randomized mock generators or fake hashes in charts. Every displayed readout maps 1:1 to real metrics.
- OLED Safety: Full-height edge rulers (
.ris-ruler) are strictly forbidden on viewports<768pxto prevent optical dead-subpixel illusion.
Serve the repository with any HTTP server (e.g. Python):
python3 -m http.server 8080- Interactive Desktop Specimen:
http://localhost:8080/docs/index.html - Mobile Touch Shell:
http://localhost:8080/docs/mobile.html - Motion & Contrast Lab:
http://localhost:8080/docs/motion-lab.html - Optical Waveguide HUD Lab:
http://localhost:8080/docs/eyewear.html - Micro-UI & Telemetry Graphics Lab:
http://localhost:8080/docs/micro-ui.html
- Open-Source Core: MIT License © 2026 Relic Interface System Contributors (governs CSS tokens, utility classes, core
@relic-ui/reactprimitives, Tailwind preset, and Android Compose library). - Commercial Templates & Studio: Governed by the RIS Pro Commercial License (covers production templates such as
templates/forensic-dashboard/, advanced canvas telemetry engines, and Figma Studio master generator). - Icons: Tabler Icons (MIT License, © Paweł Kuna).
- Typography: Archivo, JetBrains Mono, Chakra Petch, and Rajdhani under the SIL Open Font License.
- Legal Notice: Relic Interface System is an independent, original design system and component architecture. All styling, SVG geometry, color token architectures, Canvas renderers, and motion timings are entirely bespoke and unencumbered.