# OntoRef Branding Assets

Complete branding system for OntoRef - Structure that remembers why.

## Directory Structure

```text
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
```html
<img src="ontoref-h.svg" alt="OntoRef - Structure that remembers why" class="logo">
```

### CSS Sizing
```css
.logo {
  max-width: 100%;
  height: auto;
  width: 100%;
}

.logo-small {
  width: 200px;
}

.logo-large {
  width: 800px;
}
```

### SVG Inline
```html
<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.**