Basira Shared Components
Design System & UI Library

Ready-to-Use Shared UI Components

Standardized, high-contrast, accessible HTML/CSS components shared across the AI Assistant, FrontDesk, and BackHouse decks.

1. Unified Showcase Card (.showcase-item)

01 GET /dashboard/overview

Operations Hub & Executive Cockpit

A clean, high-contrast layout designed for human eye readability. Combines structured route pills, titles, and checked bullet items.

  • ✓ Real-Time Metric Tracking: Automatic telemetry tracking active conversations, appointments, and staff time returned.
  • ✓ Unified Communication Status: Single pane of glass for voice calls, messaging channels, and client tickets.
app.basira.llc/dashboard/overview
Overview Mock
Click to enlarge 
<div class="showcase-item">
  <div class="showcase-text">
    <div class="showcase-meta">
      <span class="showcase-num">01</span>
      <span class="route-pill">GET /endpoint</span>
    </div>
    <h3 class="showcase-title">Title</h3>
    <p class="showcase-desc">Description...</p>
    <ul class="feature-bullets">
      <li><span class="bullet-check">&#10003;</span> <strong>Feature:</strong> Details...</li>
    </ul>
  </div>
  <div class="showcase-ui">
    <div class="browser-frame" onclick="openLightbox('path/to/img.png')">...</div>
  </div>
</div>

2. Metric Statistics Grid (.hero-stats)

< 200ms
Audio Latency
Streaming time-to-first-byte over live Qatar SIP trunks
34 Voices
Neural Personas
Native Khaleeji Arabic and bilingual English dialects
100% Sovereign
In-House Platform
Unified AI engine connecting voice, chat, and email

3. Controls & Capability Matrix (.matrix-grid)

TIER 1 • SIMPLE

Front-Line Operator

Day-to-day settings designed for non-technical staff.

  • Voice Persona: 1-click speaker selection (Khalid, Adam, Fatima).
  • Operating Hours: Automated quiet hours and off-duty triggers.
TIER 2 • PRO

Studio Engineer

Acoustic physics and conversational turn-taking thresholds.

  • Response Eagerness: Fine-tuned pause detection (750ms - 1600ms).
  • Acoustic Shield: Background environment injection for realism.

4. High-Impact Enterprise CTA (.enterprise-cta)

Deploy Sovereign Systems for Your Organization

Unify front-desk operations, guest dining, enterprise ledger accounting, and AI telephony into one private cloud deployment.

Schedule Executive Briefing → Explore AI Assistant Deck