LOGAR/wiki/Branding-Guide.md

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.

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:

       /\           [ 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
	Cyber Cyan	#00E5FF	0, 229, 255	186°, 100%, 50%	Primary brand accent, glowing telemetry lines, active links, primary CTA buttons
	Emerald Pulse	#00FFA3	0, 255, 163	158°, 100%, 50%	Healthy node indicators, approved client seats, online PKI status, success badges
	Electric Blue	#0072FF	0, 114, 255	213°, 100%, 50%	Gradient stop with Cyber Cyan, secondary action highlights
	Dark Navy	#0E1A2E	14, 26, 46	218°, 53%, 12%	Emblem background, card surfaces, modal dialogs
	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
	Crimson Alert	#EF4444	239, 68, 68	Critical anomalies, revoked seats, connection errors
	Amber Warning	#F59E0B	245, 158, 11	Pending enrollment approvals, seat quota thresholds (>85%)
	Text Muted	#94A3B8	148, 163, 184	Table headers, secondary descriptions, timestamps
	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/ directory:

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

python compilation/generate_branding_assets.py