OntoRef

Structure that remembers why โ€” Branding Assets

Logo Variants

Icon Variants

Monochrome Variants

Scalability Test

Icon clarity at different sizes โ€” from favicon to app icon

16ร—16
16ร—16
Favicon
32ร—32
32ร—32
Browser tab
64ร—64
64ร—64
App icon
128ร—128
128ร—128
Apple touch
256ร—256
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.