## Logo Variants

Horizontal
ANIMATED
ViewBox 575×250
Use Headers
ontoref-h.svg
Vertical
ANIMATED
ViewBox 380×340
Use Mobile
ontoref-v.svg
Horizontal Static
STATIC
ViewBox 575×250
Use Print
ontoref-h-static.svg
Vertical Static
STATIC
ViewBox 380×340
Use Print
ontoref-v-static.svg
Dark Horizontal
DARK
ViewBox 575×250
Use Dark BG
ontoref-dark-h.svg
Dark Vertical
DARK
ViewBox 380×340
Use Dark BG
ontoref-dark-v.svg

## Icon Variants

Icon
ANIMATED
ViewBox 600×700
Use Apps
ontoref-icon.svg
Icon Static
STATIC
ViewBox 600×700
Use Print
ontoref-icon-static.svg
Text / Wordmark
ANIMATED
ViewBox 400×180
Use Wordmark
ontoref-text.svg

## Monochrome Variants

Mono Black Horizontal
MONO
Use Light BG
Format SVG
ontoref-mono-black-h.svg
Mono Black Vertical
MONO
Use Light BG
Format SVG
ontoref-mono-black-v.svg
Mono White Horizontal
MONO
Use Dark BG
Format SVG
ontoref-mono-white-h.svg
Mono White Vertical
MONO
Use Dark BG
Format SVG
ontoref-mono-white-v.svg

## Scalability Test

Icon clarity at different sizes — from favicon to app icon

16×16
Favicon
32×32
Browser tab
64×64
App icon
128×128
Apple touch
256×256
PWA icon

## Color Palette

Silver
#C0CCD8📋
Amber
#E8A838📋
Dark
#0F1319📋
Gray
#8090A4📋
Gray Dark
#5A6A7C📋
Silver Light
#E6ECF2📋

## Typography

Display / Headings
OntoRef
Family IBM Plex Mono
Weight 600
Size 32px+
Use Logo, H1
Body / UI
Structure that remembers why
Family System Stack
Weight 400
Size 16px
Use Body text
Subtitle
Structure that remembers why.
Family IBM Plex Sans
Weight 500
Size 22px
Use Tagline
Code / Monospace
ontoref-h.svg
Family Monaco
Weight 400
Size 14px
Use Code, files

### Font Usage

IBM Plex Mono for the wordmark, IBM Plex Sans for the tagline. System font stack for all UI elements.

Google Fonts import:
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500&display=swap');
CSS Font-family (UI):
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

## Usage Guidelines

### Logo Usage

Use the horizontal logo for primary brand identification on websites, headers, and marketing materials. The vertical variant works well for mobile, splash screens, and posters. For print and PDFs, always use the static variants. Maintain a minimum of 15px clear space around all logos. Never distort, rotate, or modify the aspect ratio.

### Color Palette

Silver (#C0CCD8) represents the Ref side — structure, organization, and reference data. Amber (#E8A838) represents the Onto side — ontology, graph relationships, and dynamic connections. Use the dark background (#0F1319) for optimal contrast in dark-mode contexts. Monochrome variants are for print and accessibility requirements.

### Typography

Use IBM Plex Mono (weight 600) for the wordmark logotype. Use IBM Plex Sans (weight 500) for the tagline "Structure that remembers why". For all UI elements and body text, use the system font stack. Use Monaco / Courier New monospace for filenames, code snippets, and HEX values.

### Icon Usage

Use ontoref-icon.svg for digital applications with animation support. Use ontoref-icon-static.svg for favicons, print, and contexts where animation is not appropriate. The icon features the dual-region octagon — silver (Ref/Structure) on the left and amber (Onto/Graph) on the right, separated by the S-curve representing duality and balance.

### Dark Mode

Dark backgrounds of #0F1319 or darker provide optimal contrast. Use ontoref-dark-h.svg and ontoref-dark-v.svg for dark UI applications. Silver elements remain bright on dark backgrounds while the Amber accent stands out clearly. Avoid placing the standard logo on dark backgrounds without using the dark-specific variants.