me0nline/LOGAR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Add Branding and Asset Guide page and index entry

me0nline
2026-09-27 17:54:25 +02:00
parent f919ced08c
commit ac339bc395
2 changed files with 159 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Branding-Guide.md
+154
@@ -0,0 +1,154 @@
# LOGAR Branding & Asset Guide
Official branding, visual identity specifications, asset inventory, and design guidelines for the **LOGAR** project.
---
## 1. Brand Identity & Positioning
* **Project Name**: **LOGAR** (Log Aggregator & Centralized Provisioning)
* **Tagline**: *Zero-Trust Fleet Log Aggregation & Centralized Provisioning*
* **Core Philosophy**: LOGAR provides deterministic, tamper-resistant log forwarding and central aggregation across heterogeneous fleets. It bridges bare-metal edge environments with centralized analysis layers (such as the Hermes AI engine).
* **Scope & Categorization**: LOGAR is a **Log Aggregator and Telemetry Delivery Hub**. It is **not** a SIEM and does not perform real-time security alerting or IDS/IPS tasks.
---
## 2. The LOGAR Emblem & Logo Concept
The LOGAR logo is engineered to symbolize cryptographic trust, directional data streams, and operational resilience.
<p align="center">
<img src="https://gitea.eibl.tech/me0nline/LOGAR/raw/branch/main/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/`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets) directory:
| Filename | Format | Dimensions | Purpose |
| :--- | :--- | :--- | :--- |
| [`logo.svg`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/logo.svg) | SVG | Vector | Full emblem with dark shield background |
| [`logo_transparent.svg`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/logo_transparent.svg) | SVG | Vector | **Primary WebUI Emblem**: Transparent background for headers, tabs, and light/dark themes |
| [`logo_dark.svg`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/logo_dark.svg) | SVG | Vector | Shield emblem optimized for dark mode backgrounds |
| [`logo_banner.svg`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/logo_banner.svg) | SVG | 960x240 | Wide brand banner with emblem, typography, and tagline |
| [`logo.png`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/logo.png) | PNG (RGBA) | 512x512 | High-resolution master raster asset |
| [`logo_256x256.png`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/logo_256x256.png) | PNG (RGBA) | 256x256 | App icon and README graphics |
| [`logo_128x128.png`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/logo_128x128.png) | PNG (RGBA) | 128x128 | Medium display icon |
| [`logo_64x64.png`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/logo_64x64.png) | PNG (RGBA) | 64x64 | Small UI asset |
| [`logo_32x32.png`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/logo_32x32.png) | PNG (RGBA) | 32x32 | Standard favicon raster |
| [`logo_16x16.png`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/logo_16x16.png) | PNG (RGBA) | 16x16 | Small favicon raster |
| [`logo.ico`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/logo.ico) | ICO | Multi (16-256) | Windows executable icon & installer icon |
| [`favicon.ico`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/favicon.ico) | ICO | Multi (16-256) | WebUI dashboard favicon |
| [`wizard_header.bmp`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/wizard_header.bmp) | BMP (24-bit) | 150x57 | Inno Setup & NSIS top header bitmap (white background) |
| [`wizard_small.bmp`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/assets/wizard_small.bmp) | BMP (24-bit) | 55x55 | Inno Setup small wizard bitmap |
| [`wizard_sidebar.bmp`](https://gitea.eibl.tech/me0nline/LOGAR/src/branch/main/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
```
Home.md
+5
@@ -46,6 +46,11 @@ Welcome to the official technical documentation wiki for **LOGAR: Fleet Log Aggr
- Automated cross-compilation release workflow (`release.yml`)
- Local binary packaging & Gitea asset publisher
7. **[Branding and Asset Guide](Branding-Guide)**
- Visual identity, logo geometry & color palette
- Asset inventory, icons, and installer graphics
- Logo usage rules, dos and don'ts, and asset regeneration
---
## High-Level Architecture Overview