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