# KOGRAL Branding Assets

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

## Directory Structure

```text
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.**