## Color Palette

Core brand colors with semantic meaning

Primary Blue
#4a9eff
Knowledge & Connection
Accent Green
#3dd68d
Active & Growth
Gold Highlight
#fbbf24
Important & Central
Slate Secondary
#64748b
Secondary & Border
Dark Primary
#1a2744
UI Background
Dark Secondary
#2a3f6a
UI Emphasis

## Logo Variants

Full brand identity in multiple formats

Full Logo
Primary
Dimensions
610×200px
Format
SVG
kogral-h.svg
Horizontal
Layout
Dimensions
1000×300px
Use Case
Banners
kogral-v.svg
Square
Compact
Dimensions
200×200px
Use Case
Apps & UI
kogral-h-static.svg
Horizontal Small
Compact
Dimensions
500×150px
Use Case
Navbars
kogral-v-static.svg
Mono Black H
Mono
Dimensions
610×200px
Use Case
Print, Fax
kogral-mono-black-h.svg
Mono White H
Mono
Dimensions
610×200px
Use Case
Dark Mode
kogral-mono-white-h.svg
Mono Black V
Mono
Dimensions
450×315px
Use Case
Print Vertical
kogral-mono-black-v.svg
Mono White V
Mono
Dimensions
450×315px
Use Case
Dark Mode V
kogral-mono-white-v.svg

## Icon Variants

Scalable icons for every use case

Main Icon
Standard
Dimensions
200×200px
Use Case
Favicons
kogral-icon.svg
Small Icon
Compact
Dimensions
100×100px
Use Case
UI Elements
kogral-icon-static.svg
Black & White Icon
Mono
Dimensions
200×200px
Use Case
Print
kogral-icon-mono-black.svg

## Scalability Test

Icon clarity at different sizes - from favicon to app icons

16×16
Favicon
32×32
Browser tab
64×64
App icon
128×128
Apple touch
256×256
PWA icon

## Typography

Font family, weights, and usage guidelines

Display / Hero
KOGRAL
Family Inter
Weight 800 (ExtraBold)
Size 32-48px
Use Case Hero, H1
Headings / Titles
Knowledge Graphs
Family Inter
Weight 700 (Bold)
Size 20-28px
Use Case H2, H3, Sections
Subheadings
Git-native and local-first
Family Inter
Weight 600 (SemiBold)
Size 16-20px
Use Case H4, Cards
Body Text / Regular
Structured knowledge management that scales from solo projects to organizations. Config-driven architecture for capturing architectural decisions, coding guidelines, and reusable patterns.
Family Inter
Weight 400 (Regular)
Size 16px
Use Case Paragraphs, Body
Small / UI Elements
Markdown · Nickel · SurrealDB · Logseq
Family Inter
Weight 500 (Medium)
Size 14px
Use Case Labels, Badges, UI
Code / Monospace
kogral-h.svg
#4a9eff
Family Courier New
Weight 400 (Regular)
Size 13-14px
Use Case Code, Files, HEX

## Usage Guidelines

Best practices for brand consistency

### 📐 Logo Sizing

Use horizontal variants for banners and headers. Square variants work best for apps and compact spaces. Maintain minimum 20px clear space around all logos. Never distort, rotate, or modify the aspect ratio.

### 🎨 Color Usage

Primary Blue (#4a9eff) is the main brand color. Green (#3dd68d) highlights active states and growth. Gold (#fbbf24) emphasizes central knowledge nodes. Use monochrome variants for print and high-contrast applications.

### 🔤 Typography

Use Inter font family from Google Fonts. Weight 800 for display/hero text, 700 for headings, 600 for subheadings, 400 for body text, and 500 for UI elements. Courier New monospace for code and filenames. Line height 1.3-1.7 for readability.

### 📱 Digital Applications

All assets are SVG format for infinite scalability. Use favicon variants for browser tabs. Icons scale from 16×16 to 512×512 without quality loss. Perfect for web apps, mobile interfaces, and digital signage.

### 🖨️ Print Production

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

### ♿ Accessibility

All color combinations meet WCAG AA standards. Monochrome variants ensure colorblind accessibility. Always provide alt-text: "KOGRAL - Git-native knowledge graphs".

## Variant Comparison

Complete overview of all 8 asset variations

Category | Variant | Dimensions | Best For | Filename
--- | --- | --- | --- | ---
Logos | Full | 610×200px | Primary branding | `kogral-h.svg`
Horizontal | 1000×300px | Banners, headers | `kogral-v.svg`
Square | 200×200px | Apps, UI elements | `kogral-h-static.svg`
Horizontal Small | 500×150px | Navbars, sidebars | `kogral-v-static.svg`
Black & White | 610×200px | Print, documents | `kogral-mono-black-h.svg`
Icons | Main | 200×200px | Favicons, UI | `kogral-icon.svg`
Small | 100×100px | Compact spaces | `kogral-icon-static.svg`
Black & White | 200×200px | Print, monochrome | `kogral-icon-mono-black.svg`