branding/
├── README.md                    # This file
├── ontoref-h.svg               # Horizontal logo (animated)
├── ontoref-v.svg               # Vertical logo (animated)
├── ontoref-icon.svg            # Icon variant (image only)
└── ontoref-text.svg            # Text variant (wordmark only)

Logo Variants

Primary Logos (4 total)

Variant	Use Case
`ontoref-h.svg`	Horizontal, animated — Banners, headers
`ontoref-v.svg`	Vertical, animated — Posters, mobile
`ontoref-icon.svg`	Icon, animated — Standalone image
`ontoref-text.svg`	Wordmark — Text-only variant

Static Variants (3 total - no animations)

Variant	Use Case
`ontoref-h-static.svg`	Print, documents (light background)
`ontoref-v-static.svg`	Print, posters (light background)
`ontoref-icon-static.svg`	Print, icons (light background)

Dark Mode Variants (2 total - dark background)

Variant	Use Case
`ontoref-dark-h.svg`	Dark UI, dark mode apps, dark websites
`ontoref-dark-v.svg`	Dark backgrounds, dark applications

Monochrome Variants (4 total - black and white)

Variant	Use Case
`ontoref-mono-black-h.svg`	Print, documents (light background)
`ontoref-mono-black-v.svg`	Print documents (light background)
`ontoref-mono-white-h.svg`	Dark backgrounds, dark print
`ontoref-mono-white-v.svg`	Dark backgrounds, dark print

Note: Black and white variants are identical in this version.

Color Palette

Core brand colors:

Silver (#C0CCD8) - Ref/Structure side, light elements
Amber (#E8A838) - Onto/Graph side, accent color
Dark Background (#0F1319) - Dark mode backgrounds
Gray (#8090A4, #5A6A7C) - Secondary elements

Usage Guidelines

Responsive Design

All logos are designed with viewBox only (no fixed width/height) for maximum responsiveness:

Use in HTML with CSS sizing: <img src="ontoref-h.svg" class="logo">
Add CSS: .logo { max-width: 100%; height: auto; }
Logo scales proportionally to its container

Logo Sizing Recommendations

Horizontal (-h): Use for banners, headers, wide layouts
Vertical (-v): Use for posters, splash screens, vertical layouts
Icon: Use as symbol, favicon, or standalone image
Text: Use as wordmark, branding element

Layout Rules

Maintain minimum 15px clear space around logos
Never distort, rotate, or modify aspect ratio
Prefer animated variants for digital displays
Use static variants for print, PDFs, email

Dark Mode

Dark backgrounds (#0F1319 or darker) provide optimal contrast
Logos automatically adapt due to color scheme design
Silver elements bright on dark, Amber accent stands out

Accessibility

All color combinations meet WCAG AA contrast standards
Logos use geometric shapes (octagon, circles, rectangles) for clarity
Descriptive alt-text: "OntoRef - Structure that remembers why"
No flashing or strobing animations

Design Elements

Octagon Frame: Eight-sided structure representing solid foundation
Silver Region (Left): Represents Ref (reference), structure, organization
Amber Region (Right): Represents Onto (ontology), graph, relationships
S-Curve: Dividing line showing duality and balance
Seed Elements: Small visual markers in each region
DAG Visualization: Shows graph relationships in Onto region
Grid Pattern: Shows structured data in Ref region

Asset Features

✨ Responsive SVG

No fixed dimensions - scales to any size
ViewBox-based for perfect proportions
Works in all modern browsers

🎨 Animated Elements

Floating elements with subtle motion
Pulsing visual elements
Smooth opacity transitions

📊 Dual-Region Design

Left side: Silver (Structure/Reference)
Right side: Amber (Ontology/Graph)
Represents the duality of OntoRef

Technical Specifications

SVG Features

Linear gradients for depth and visual interest
SMIL animations for smooth motion effects
Responsive viewBox dimensions
Clean, minimal markup for fast loading

Color Gradients

Silver Gradient: #E6ECF2 → #BCC8D4 → #8090A4
Amber Gradient: #B87000 → #E0B040 → #F8D860
Node Gradients: Silver and Amber variants for visual hierarchy

Animations

Animated Elements

Floating motion: Subtle translateY animation on main symbol
Pulsing opacity: Grid blocks and nodes fade in/out
Drawing effects: DAG lines animate with stroke-dashoffset
Glow effects: Soft gaussian blur on animated elements

Animation Timing

Base cycle: 3.5s - 7s for different elements
Ease-in-out interpolation for smooth motion
Staggered delays for visual sequence
Infinite loop for continuous operation

File Information

All Variants

Primary Animated (4 files): ~13KB each (h, v, icon) + ~1KB (text)
Static Variants (3 files): ~13KB each
Dark Variants (2 files): ~13KB each
Monochrome Variants (4 files): ~13KB each

Total Assets: 13 SVG files (~150KB total)

All files are SVG format with responsive viewBox (no fixed dimensions).

Version Information

Created: 2026-03-11
Version: 1.0
Format: SVG + responsive design
Compatibility: All modern browsers
Total Assets: 4 (2 logos, 1 icon, 1 text)

Brand Philosophy

OntoRef represents:

🏗️ Duality: Structure (Ref) and Ontology (Onto) working together
🔗 Connection: Relationships between data and organization
💾 Memory: "Structure that remembers why"
📊 Organization: Clear, hierarchical representation
✨ Motion: Active, living data structures
🎯 Balance: Symmetry between form and function

Usage Examples

HTML Image

<img src="ontoref-h.svg" alt="OntoRef - Structure that remembers why" class="logo">

CSS Sizing

.logo {
  max-width: 100%;
  height: auto;
  width: 100%;
}

.logo-small {
  width: 200px;
}

.logo-large {
  width: 800px;
}

SVG Inline

<svg viewBox="0 0 575 250">
  <!-- Logo content scales responsively -->
</svg>

Main project: /Users/Akasha/Development/ontoref/
Logo files location: /assets/branding/
Original SVG files: /assets/ontoref*.svg

All assets in the OntoRef branding system are optimized for scalability, accessibility, and brand consistency across digital and print media.

README.md

OntoRef Branding Assets

Directory Structure