229 lines
6.6 KiB
Markdown
229 lines
6.6 KiB
Markdown
# 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.**
|