# BV-SIS Design System Report — "Aurora" Premium Enterprise Theme

**Prepared by:** BIG VOICE TECHNOLOGIES
**Scope:** Full UI/UX design-system rebuild (pre-module development)
**Theme:** Dark-mode-first · Glassmorphism · Orange neon glow
**Primary stylesheet:** `resources/css/bv-sis.css`

---

## 1. Design Language

The system adopts a **modern enterprise ERP** aesthetic inspired by the supplied ICOF
portal design *language* (not a copy). Core principles:

- Dark-mode first, high contrast, professional and premium
- Glassmorphism (soft blur, translucent surfaces) on cards, header, dropdowns, modals
- Orange neon glow as the signature accent
- Large spacing, rounded corners, rich layered shadows
- Floating cards, animated gradients, micro-interactions and smooth transitions

---

## 2. Official Colour Palette

All tokens are defined as CSS custom properties on `:root` / `[data-bs-theme="dark"]`.

| Token | Value | Usage |
|-------|-------|-------|
| Primary Background | `#08111F` | App body base |
| Secondary Background | `#101A33` | Elevated surfaces |
| Card Background | `rgba(16,26,51,0.88)` | Glass cards, widgets, tables |
| Sidebar | `#0B1220` | Navigation shell |
| Orange Primary | `#FF7A00` | Brand / primary actions |
| Orange Secondary | `#FF9100` | Gradient step / hover |
| Orange Glow | `#FFB347` | Glow, active text, highlights |
| Gold Highlight | `#FCD34D` | Warnings, accents, awards |
| Blue Accent | `#00D9FF` | Secondary/info data |
| Green Success | `#00D084` | Success states |
| Red Danger | `#FF4D4F` | Errors, destructive actions |
| Border | `rgba(255,255,255,.08)` | Hairline separators |

### Gradients
`--grad-orange`, `--grad-blue`, `--grad-green`, `--grad-gold`, `--grad-red`,
`--grad-surface`, `--grad-sidebar`, `--grad-body` (radial aurora background).

### Glow shadows
`--glow-orange`, `--glow-orange-soft`, `--glow-blue`.

---

## 3. Theming Architecture

- **Semantic remapping:** every legacy `--color-*` token now points at the new
  brand palette, so **all existing components inherited the new look** without
  markup changes.
- **Dark-first default:** `data-bs-theme="dark"` on `<html>`, with an inline
  bootstrap script that reads `localStorage['bv-sis-theme']` before paint to
  prevent flash-of-wrong-theme.
- **Light mode** is a fully-defined alternative (`[data-bs-theme="light"]`) with a
  clean light surface set and a retained dark sidebar for a premium feel.
- Bootstrap 5 variables (`--bs-*`) are overridden to align Bootstrap components
  with the design system.

---

## 4. Typography

| Role | Font | Notes |
|------|------|-------|
| Display / headings | **Sora** (600–800) | KPI values, page & hero titles |
| Body / UI | **Inter** (400–800) | Default interface font |
| Monospace | JetBrains Mono / Consolas | References, IDs, amounts |

Loaded via Google Fonts. Headings use tight negative letter-spacing for a modern
hierarchy; `.text-gradient` renders orange gradient text.

---

## 5. Spacing, Radii & Motion

- **Spacing scale:** `--space-1` (4px) → `--space-12` (48px)
- **Radii:** `sm 8px`, `md 14px`, `lg 20px`, `xl 28px`, `pill 999px`
- **Motion:** `--transition-fast/base/slow` plus a spring easing
  (`--ease-spring`) for entrance animations.

---

## 6. Iconography

- **Bootstrap Icons 1.11.3** loaded via CDN `<link>` in every layout `<head>`.
- The previous bundled `@import` was **removed** because this environment strips
  binary font files, which caused the missing-glyph / placeholder-square problem.
- CDN delivery guarantees every glyph renders with no local font dependency.

---

## 7. Accessibility & Performance

- `prefers-reduced-motion` disables animations for sensitive users.
- Visible focus rings (`:focus-visible`) in brand orange.
- Skip-to-content link retained.
- Custom thin scrollbars; backdrop blur used judiciously.
- Production CSS bundle: ~316 KB (44.7 KB gzipped) including Bootstrap + DataTables.

---

## 8. Files Touched

- `resources/css/bv-sis.css` — full rewrite (design system core)
- `resources/css/app.css` — removed broken bootstrap-icons import
- `resources/js/bv-sis.js` — dark default, clock, fullscreen, sidebar search, counters, chart theming
- `resources/js/pages/dashboard.js` — executive charts (Aurora palette)
- `vite.config.js` — added page entry points
- Layouts: `admin`, `auth`, `guest` — fonts, icons, dark default
- `app/Providers/AppServiceProvider.php` — Bootstrap 5 pagination
