kogral/assets/branding/README.md

KOGRAL Branding Assets

Complete branding system for KOGRAL (KOwledge GRAphs, Local-first) - Git-native knowledge graphs for developer teams.

Directory Structure

branding/
├── README.md                         # This file
├── index.html                        # Quick reference showcase
└── kogral-assets-showcase.html       # Comprehensive assets catalog

Quick Start

Open either HTML file in your browser to view the interactive branding showcase:

• index.html - Compact version with dark/light mode toggle
• kogral-assets-showcase.html - Full-featured showcase with navigation, comparison tables, and detailed guidelines

Logo Variants

All logos are available in the ../logos/ directory with these suffixes:

Suffix	Variant	Dimensions	Use Case
(none)	Full logo	610×200px	Primary branding
-h	Horizontal	1000×300px	Banners, headers
-s	Square	200×200px	Apps, UI, icons
-h-s	Horizontal small	500×150px	Navbars, sidebars
-bn	Black & white	610×200px	Print, documents

Icon Variants

All icons are available in the ../icons/ directory:

Variant	Dimensions	Use Case
kogral-icon.svg	200×200px	Standard favicon, UI elements
kogral-icon-s.svg	100×100px	Compact spaces, mobile UI
kogral-icon-bn.svg	200×200px	Print, monochrome contexts

Color Palette

Core brand colors with semantic meaning:

• Primary Blue (#4a9eff) - Knowledge, connectivity, main interactions
• Accent Green (#3dd68d) - Active states, growth, highlights
• Gold (#fbbf24) - Important elements, central focal point
• Slate Secondary (#64748b) - Secondary elements, borders
• Dark Primary (#1a2744) - UI backgrounds, primary dark
• Dark Secondary (#2a3f6a) - UI emphasis, secondary dark

Usage Guidelines

Logo Sizing

• Use the full logo for primary brand identification
• Maintain minimum 20px whitespace around all sides
• Never distort or rotate the logo
• For small spaces, prefer square or horizontal-small variants

Color Usage

• Primary Blue for main interactions and hierarchy
• Accent Green highlights active states and positive actions
• Gold emphasizes central knowledge nodes and critical elements
• Use monochrome variants on dark/light backgrounds for accessibility

Digital Applications

• All assets are SVG format for infinite scalability
• Use in web apps, mobile interfaces, and digital signage
• Animations are preserved and scale responsively
• Export to PNG at 2x resolution for high-DPI displays

Print Production

• Always use black & white variants for print materials
• Ensure minimum 1/4" clear space around logo
• Test colors on actual materials before final production
• Monochrome is preferred for single-color prints

Social Media

• Use square logo (200×200px) for profile pictures
• Horizontal variants (1000×300px) for banners and covers
• Export PNG at 2x scale for high-DPI displays
• Use full logo for primary brand identification

Accessibility

• All color combinations meet WCAG AA standards
• Monochrome variants ensure colorblind accessibility
• Use descriptive alt-text: "KOGRAL - Git-native knowledge graphs"

Asset Features

✨ Interactive HTML Showcases

• Dark/light mode toggle with persistent storage
• Responsive grid layouts
• One-click filename copy
• Sticky navigation (showcase version)
• Color palette visualization
• Comparison tables

🎨 SVG Animations

• Pulsing central node
• Flowing connection lines
• Rotating hexagon outlines
• Synchronized glow effects

📊 Format & Scalability

• All assets in SVG format
• Infinite scalability without quality loss
• Animations preserved across all sizes
• Print-ready monochrome variants

File Sizes

• Full logos: ~3-5KB each
• Icons: ~2-3KB each
• HTML showcases: ~20-29KB

Version Information

• Last Updated: 2026-01-18
• Version: 1.0
• Format: SVG + HTML5
• Compatibility: All modern browsers

Brand Identity

KOGRAL represents:

• 🧠 Knowledge graphs for intelligent organization
• 🔗 Connected nodes and relationships
• 💾 Git-native, local-first architecture
• 🌍 Distributed, team-friendly knowledge management
• ✨ Elegant, animated visual identity

Related Assets

• Logos: /assets/logos/
• Icons: /assets/icons/
• Main logo file: /assets/kogral-logo.svg

Contact & Updates

For asset requests or updates, refer to the KOGRAL project documentation.

---

All assets in KOGRAL branding system are optimized for scalability, accessibility, and brand consistency.