## Color Palette

Primary Blue
#4a9eff
Accent Green
#3dd68d
Gold Highlight
#fbbf24
Slate Secondary
#64748b
Dark Primary
#1a2744
Dark Secondary
#2a3f6a

## Logo Variants

Horizontal
MAIN
Size 610x200px
Format SVG Animated
kogral-h.svg
Horizontal Static
STATIC
Size 610x200px
Use Print, Email
kogral-h-static.svg
Vertical
STACKED
Size 450x315px
Use Posters, Apps
kogral-v.svg
Vertical Static
STACKED
Size 450x315px
Use Print
kogral-v-static.svg
Mono Black H
MONO
Size 610x200px
Use Print, Fax
kogral-mono-black-h.svg
Mono White H
MONO
Size 610x200px
Use Dark Mode
kogral-mono-white-h.svg
Mono Black V
MONO
Size 450x315px
Use Print Vertical
kogral-mono-black-v.svg
Mono White V
MONO
Size 450x315px
Use Dark Mode V
kogral-mono-white-v.svg
Favicon 16×16
FAVICON
Size 16x16px
Use Browser Tab
kogral-favicon-16.svg
Favicon 32×32
FAVICON
Size 32x32px
Use Retina Displays
kogral-favicon-32.svg

## Icon Variants

Icon
ANIMATED
Size 200x200px
Use Apps, Web
kogral-icon.svg
Icon Static
STATIC
Size 200x200px
Use Print, Email
kogral-icon-static.svg
Icon Monochrome
MONO
Size 200x200px
Use Print, Fax
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

Display / Headings
KOGRAL
Family Inter
Weight 800
Size 32px+
Use Hero, H1
Headings / Titles
Knowledge Graphs
Family Inter
Weight 700
Size 24px
Use H2, H3
Body / Regular
Git-native knowledge graphs for developer teams with structured knowledge management.
Family Inter
Weight 400
Size 16px
Use Body text
Emphasis / Semibold
Local-first architecture with config-driven behavior
Family Inter
Weight 600
Size 16px
Use Emphasis
Small / UI Elements
Markdown · Nickel · SurrealDB
Family Inter
Weight 500
Size 14px
Use Labels, UI
Code / Monospace
kogral-h.svg
Family Courier
Weight 400
Size 14px
Use Code, files

### Font Usage

Inter is used for all typography in KOGRAL branding. The font is clean, modern, and highly readable at all sizes.

Import from Google Fonts:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

## Usage Guidelines

### Logo Usage

Use the full logo for primary brand identification on websites, marketing materials, and product pages. The horizontal variant works well for header areas and social media. For small spaces, use the square or horizontal-small variants. Always maintain sufficient whitespace around the logo (minimum 20px).

### Color Palette

Primary Blue (#4a9eff) is the main brand color representing knowledge and connectivity. Accent Green (#3dd68d) highlights active states and interactions. Gold (#fbbf24) emphasizes important elements like the central knowledge node. Use the black & white variants for print and high-contrast applications.

### Typography

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

### Icon Usage

Use kogral-icon.svg (200x200px) for most applications including favicons and UI elements. The small variant is optimized for tight spaces and mobile interfaces. The monochrome versions are suitable for print, document headers, and accessibility contexts.