From ac339bc3956bc9475642864b8151e93bda25e31c Mon Sep 17 00:00:00 2001 From: max Date: Sun, 27 Sep 2026 17:54:25 +0200 Subject: [PATCH] Add Branding and Asset Guide page and index entry --- Branding-Guide.md | 154 ++++++++++++++++++++++++++++++++++++++++++++++ Home.md | 5 ++ 2 files changed, 159 insertions(+) create mode 100644 Branding-Guide.md diff --git a/Branding-Guide.md b/Branding-Guide.md new file mode 100644 index 0000000..136e0f7 --- /dev/null +++ b/Branding-Guide.md @@ -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. + +

+ LOGAR Banner +

+ +``` + /\ [ 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 +``` diff --git a/Home.md b/Home.md index a27b3f4..89fbb8a 100644 --- a/Home.md +++ b/Home.md @@ -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