# LOGAR Brand Identity & Design Guide

> **Official Design System & Visual Identity Standards for LOGAR**  
> *Fleet Log Aggregation, PKI Fleet Licensing & Centralized Telemetry Provisioning Hub*

---

## 1. Brand Identity & Positioning

**LOGAR** is an enterprise log aggregation, normalization, and centralized provisioning system built for heterogeneous server fleets (Windows & Linux). It connects lightweight, zero-state edge forwarders to a centralized hub that enforces mutual TLS 1.3 (**mTLS**), cryptographic seat leasing, rolling 12-hour temporal persistence tracking, and direct anomaly streaming to **Hermes AI**.

```mermaid
flowchart LR
    A["Edge Forwarders<br/>(Win & Linux)"] -->|mTLS 1.3 Stream| B["LOGAR Server Hub<br/>(Central Aggregator)"]
    B -->|Verified Telemetry| C["Hermes AI<br/>(Deep Reasoning Engine)"]
    D["License Authority<br/>(Master PKI)"] <==>|WebSocket Quota| B
```

### Brand Positioning Rules:
* **Log Aggregator & Telemetry Hub**: LOGAR is a high-throughput, zero-state log aggregation, filtering, and telemetry provisioning hub.
* **Strict Naming Constraint**: **LOGAR is NOT a SIEM** (Security Information and Event Management) system. It does not provide intrusion detection, security rule engines, or threat intelligence feeds. Never describe LOGAR as a SIEM in documentation, user interfaces, installer scripts, or promotional material.

---

## 2. Logo Anatomy & Symbolism

The LOGAR emblem combines cybersecurity aesthetics with real-time log streaming geometry:

<p align="center">
  <img src="../assets/logo_banner.svg" alt="LOGAR Banner" width="600"/>
</p>

```
       /\           [ Hexagon Shield: PKI Cryptographic Integrity ]
      /  \
     /    \         [ Left 'L' Pillar: Zero-State Forwarder Pipeline ]
    |  ||  |
    |  ||. |        [ Stepped Telemetry Bars: Structured Log Stream ]
    |  |___|
     \    /         [ Spark Points: Dynamic Seat Sync & Handshake ]
      \  /
       \/
```

### Key Components:
1. **Hexagonal Shield**: Represents mutual TLS 1.3 cryptographic verification and authoritative PKI trust boundaries.
2. **The Stylized 'L' Glyph**: Represents the high-performance forwarder pipeline and log ingestion stream.
3. **Stepped Telemetry Bars**: Depicts normalized structured log records propagating from edge forwarders to the central temporal engine.
4. **Spark & Sync Points**: Visualizes live WebSocket connection nodes and mTLS handshake synchronization.

---

## 3. Official Color Palette

LOGAR uses a cyber-slate and neon telemetry palette designed for high contrast in dark mode environments, with seamless light-mode compatibility for native operating system dialogs and installer wizards.

### Primary Colors

| Swatch | Color Name | Hex Code | RGB | HSL | Usage |
| :--- | :--- | :--- | :--- | :--- | :--- |
| ![#00E5FF](https://via.placeholder.com/15/00E5FF/000000?text=+) | **Cyber Cyan** | `#00E5FF` | `0, 229, 255` | `186°, 100%, 50%` | Primary brand accent, glowing telemetry lines, active links, primary CTA buttons |
| ![#00FFA3](https://via.placeholder.com/15/00FFA3/000000?text=+) | **Emerald Pulse** | `#00FFA3` | `0, 255, 163` | `158°, 100%, 50%` | Healthy node indicators, approved client seats, online PKI status, success badges |
| ![#0072FF](https://via.placeholder.com/15/0072FF/000000?text=+) | **Electric Blue** | `#0072FF` | `0, 114, 255` | `213°, 100%, 50%` | Gradient stop with Cyber Cyan, secondary action highlights |
| ![#0E1A2E](https://via.placeholder.com/15/0E1A2E/000000?text=+) | **Dark Navy** | `#0E1A2E` | `14, 26, 46` | `218°, 53%, 12%` | Emblem background, card surfaces, modal dialogs |
| ![#070C18](https://via.placeholder.com/15/070C18/000000?text=+) | **Midnight Slate**| `#070C18` | `7, 12, 24` | `222°, 55%, 6%` | Application canvas background, dark-mode body |

### Semantic & Status Colors

| Swatch | Color Name | Hex Code | RGB | Usage |
| :--- | :--- | :--- | :--- | :--- |
| ![#EF4444](https://via.placeholder.com/15/EF4444/000000?text=+) | **Crimson Alert** | `#EF4444` | `239, 68, 68` | Critical anomalies, revoked seats, connection errors |
| ![#F59E0B](https://via.placeholder.com/15/F59E0B/000000?text=+) | **Amber Warning** | `#F59E0B` | `245, 158, 11` | Pending enrollment approvals, seat quota thresholds (>85%) |
| ![#94A3B8](https://via.placeholder.com/15/94A3B8/000000?text=+) | **Text Muted** | `#94A3B8` | `148, 163, 184` | Table headers, secondary descriptions, timestamps |
| ![#FFFFFF](https://via.placeholder.com/15/FFFFFF/000000?text=+) | **Pure White** | `#FFFFFF` | `255, 255, 255` | Installer header background, text on dark cards |

---

## 4. Typography System

LOGAR uses clean, modern sans-serif typography for user interfaces and clear monospace fonts for log telemetry and cryptographic fingerprints.

### Monospace (Telemetry, Fingerprints & Code)
* **Primary**: `'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace`
* **Usage**: Raw log frames, JSON schemas, X.509 serials, SHA-256 fingerprints, port mappings, command-line snippets.

### Interface Sans-Serif (WebUI & Marketing)
* **Primary**: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`
* **Usage**: Headings, navigation bars, modal forms, buttons, dashboard metrics.

### Type Scale
* **Hero Title**: `48px` - `56px` / Bold (900) / Tracking: `-0.02em`
* **Page Header (H1)**: `24px` - `32px` / Extra Bold (800)
* **Section Title (H2)**: `20px` - `24px` / Bold (700)
* **Card Header (H3)**: `16px` - `18px` / Semi-Bold (600)
* **Body Text**: `14px` - `15px` / Regular (400) / Line Height: `1.6`
* **Code / Badges / Monospace**: `12px` - `13px` / Medium (500)

---

## 5. Asset Library Inventory

All brand visual assets are maintained in the central [`assets/`](../assets/) directory:

| Filename | Format | Dimensions | Purpose |
| :--- | :--- | :--- | :--- |
| [`logo.svg`](../assets/logo.svg) | SVG | Vector | Full emblem with dark shield background |
| [`logo_transparent.svg`](../assets/logo_transparent.svg) | SVG | Vector | **Primary WebUI Emblem**: Transparent background for headers, tabs, and light/dark themes |
| [`logo_dark.svg`](../assets/logo_dark.svg) | SVG | Vector | Shield emblem optimized for dark mode backgrounds |
| [`logo_banner.svg`](../assets/logo_banner.svg) | SVG | 960x240 | Wide brand banner with emblem, typography, and tagline |
| [`logo.png`](../assets/logo.png) | PNG (RGBA) | 512x512 | High-resolution master raster asset |
| [`logo_256x256.png`](../assets/logo_256x256.png) | PNG (RGBA) | 256x256 | App icon and README graphics |
| [`logo_128x128.png`](../assets/logo_128x128.png) | PNG (RGBA) | 128x128 | Medium display icon |
| [`logo_64x64.png`](../assets/logo_64x64.png) | PNG (RGBA) | 64x64 | Small UI asset |
| [`logo_32x32.png`](../assets/logo_32x32.png) | PNG (RGBA) | 32x32 | Standard favicon raster |
| [`logo_16x16.png`](../assets/logo_16x16.png) | PNG (RGBA) | 16x16 | Small favicon raster |
| [`logo.ico`](../assets/logo.ico) | ICO | Multi (16-256) | Windows executable icon & installer icon |
| [`favicon.ico`](../assets/favicon.ico) | ICO | Multi (16-256) | WebUI dashboard favicon |
| [`wizard_header.bmp`](../assets/wizard_header.bmp) | BMP (24-bit) | 150x57 | Inno Setup & NSIS top header bitmap (white background) |
| [`wizard_small.bmp`](../assets/wizard_small.bmp) | BMP (24-bit) | 55x55 | Inno Setup small wizard bitmap |
| [`wizard_sidebar.bmp`](../assets/wizard_sidebar.bmp) | BMP (24-bit) | 164x314 | Inno Setup & NSIS welcome wizard sidebar graphic |

---

## 6. Logo Usage Guidelines

### 1. WebUI Navigation & Tabs
* **Rule**: Always use the **transparent background vector emblem** (`logo_transparent.svg`) aligned to the **far left** of headers and tab bars.
* **Style**: `.logo-icon { background: transparent; box-shadow: none; display: flex; align-items: center; justify-content: center; }`
* **Clear Space**: Maintain a minimum margin of `12px` between the logo and adjacent title text.

### 2. Windows Installers & Native Wizards
* **Rule**: The top header banner (`wizard_header.bmp`) uses a pure white background (`#FFFFFF`) with the emblem positioned on the left, blending seamlessly with native Windows wizard backgrounds.
* **Sidebar**: The welcome screen uses `wizard_sidebar.bmp` with cyber-navy gradients and pulse log lines.

### 3. CLI & Linux Setup Scripts
* **Rule**: CLI installers output branded cyan/emerald ANSI banners and formatted step indicators:
  ```
  ============================================================
    LOGAR Fleet Log Aggregation & Centralized Provisioning
  ============================================================
  ```

---

## 7. Dos and Don'ts

| Do | Don't |
| :--- | :--- |
| ✅ **DO** use `assets/logo_transparent.svg` for web tabs and navigation bars. | ❌ **DON'T** put a solid dark box behind the logo in web tabs or navbar headers. |
| ✅ **DO** refer to LOGAR as a **Log Aggregator** or **Telemetry Hub**. | ❌ **DON'T** refer to LOGAR as a **SIEM** or security monitor. |
| ✅ **DO** maintain the SVG aspect ratio (`1:1` for emblem, `4:1` for banner). | ❌ **DON'T** stretch or skew the logo geometry. |
| ✅ **DO** use the official Cyber Cyan (`#00E5FF`) and Emerald (`#00FFA3`) accent colors. | ❌ **DON'T** substitute arbitrary neon colors (such as hot pink or bright orange). |
| ✅ **DO** link to documentation using standard Gitea Wiki URLs. | ❌ **DON'T** hardcode stale wiki links in installer dialogs. |

---

## 8. Regenerating Branding Assets

To programmatically regenerate all vector, raster, icon, and installer bitmap assets across the codebase:

```bash
python compilation/generate_branding_assets.py
```