KOGRAL Assets Showcase

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

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`