148 lines
4.6 KiB
Markdown
148 lines
4.6 KiB
Markdown
# 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.**
|