ontoref/assets/branding/README.md

OntoRef Branding Assets

Complete branding system for OntoRef - Structure that remembers why.

Directory Structure

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>

Related Documentation

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