1195 lines
40 KiB
HTML
1195 lines
40 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>OntoRef Branding Assets</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
:root {
|
||
--onto-silver: #C0CCD8;
|
||
--onto-amber: #E8A838;
|
||
--onto-dark: #0F1319;
|
||
--onto-gray: #8090A4;
|
||
|
||
--bg-primary: #ffffff;
|
||
--bg-secondary: #f8f9fa;
|
||
--text-primary: #1f2937;
|
||
--text-secondary: #6b7280;
|
||
--border-color: #e5e7eb;
|
||
--card-bg: #ffffff;
|
||
--card-shadow: rgba(192, 204, 216, 0.2);
|
||
}
|
||
|
||
body.dark-mode {
|
||
--bg-primary: #0f1319;
|
||
--bg-secondary: #1e293b;
|
||
--text-primary: #e5e7eb;
|
||
--text-secondary: #a8b4c8;
|
||
--border-color: #334155;
|
||
--card-bg: #1a2030;
|
||
--card-shadow: rgba(232, 168, 56, 0.15);
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
transition: background 0.3s ease, color 0.3s ease;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 40px;
|
||
padding: 30px;
|
||
background: linear-gradient(135deg, #C0CCD8 0%, #E8A838 100%);
|
||
color: white;
|
||
border-radius: 12px;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
|
||
body.dark-mode header {
|
||
background: linear-gradient(135deg, #1e293b 0%, #0f1319 100%);
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
header p {
|
||
opacity: 0.9;
|
||
font-size: 0.95rem;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* Navigation */
|
||
nav {
|
||
position: sticky;
|
||
top: 0;
|
||
background: var(--card-bg);
|
||
border-bottom: 2px solid var(--border-color);
|
||
padding: 15px 0;
|
||
z-index: 100;
|
||
backdrop-filter: blur(10px);
|
||
background-color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
|
||
body.dark-mode nav {
|
||
background-color: rgba(15, 19, 25, 0.85);
|
||
}
|
||
|
||
nav .nav-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
}
|
||
|
||
nav h2 {
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, var(--onto-silver), var(--onto-amber));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin: 0;
|
||
}
|
||
|
||
nav ul {
|
||
display: flex;
|
||
list-style: none;
|
||
gap: 20px;
|
||
align-items: center;
|
||
margin: 0;
|
||
padding: 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
nav a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
nav a:hover {
|
||
color: var(--onto-amber);
|
||
}
|
||
|
||
nav .theme-toggle {
|
||
padding: 8px 16px;
|
||
background: rgba(232, 168, 56, 0.12);
|
||
border: 2px solid var(--onto-amber);
|
||
color: var(--onto-amber);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
nav .theme-toggle:hover {
|
||
background: var(--onto-amber);
|
||
color: white;
|
||
}
|
||
|
||
section {
|
||
scroll-margin-top: 80px;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 1.6rem;
|
||
font-weight: 700;
|
||
color: var(--onto-amber);
|
||
margin: 40px 0 20px 0;
|
||
padding-bottom: 10px;
|
||
border-bottom: 3px solid var(--onto-silver);
|
||
}
|
||
|
||
body.dark-mode .section-title {
|
||
color: var(--onto-amber);
|
||
border-bottom-color: var(--onto-silver);
|
||
}
|
||
|
||
.gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 25px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
/* Cards */
|
||
.card {
|
||
background: var(--card-bg);
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card:hover {
|
||
box-shadow: 0 12px 24px var(--card-shadow);
|
||
transform: translateY(-4px);
|
||
border-color: var(--onto-amber);
|
||
}
|
||
|
||
.card-preview {
|
||
background: var(--bg-secondary);
|
||
padding: 30px;
|
||
height: 280px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-bottom: 1px solid var(--border-color);
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.card-preview:hover {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.card-preview img {
|
||
max-width: 100%;
|
||
max-height: 95%;
|
||
width: auto;
|
||
height: auto;
|
||
}
|
||
|
||
.card-info {
|
||
padding: 20px;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: var(--onto-amber);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
body.dark-mode .card-title {
|
||
color: var(--onto-amber);
|
||
}
|
||
|
||
.card-label {
|
||
display: inline-block;
|
||
background: rgba(232, 168, 56, 0.12);
|
||
color: var(--onto-amber);
|
||
padding: 3px 10px;
|
||
border-radius: 4px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
width: fit-content;
|
||
}
|
||
|
||
.card-label.label-static {
|
||
background: rgba(192, 204, 216, 0.15);
|
||
color: var(--onto-silver);
|
||
}
|
||
|
||
.card-label.label-dark {
|
||
background: rgba(128, 144, 164, 0.15);
|
||
color: var(--onto-gray);
|
||
}
|
||
|
||
.card-label.label-mono {
|
||
background: rgba(128, 144, 164, 0.12);
|
||
color: var(--onto-gray);
|
||
}
|
||
|
||
.card-specs {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
margin: 15px 0;
|
||
padding: 15px 0;
|
||
border-top: 1px solid var(--border-color);
|
||
border-bottom: 1px solid var(--border-color);
|
||
flex-grow: 1;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.spec-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.spec-label {
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.spec-value {
|
||
color: var(--onto-amber);
|
||
font-weight: 600;
|
||
}
|
||
|
||
body.dark-mode .spec-value {
|
||
color: var(--onto-silver);
|
||
}
|
||
|
||
.file-name-row {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.file-name {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 10px;
|
||
border-radius: 4px;
|
||
background: rgba(232, 168, 56, 0.06);
|
||
font-family: 'Monaco', 'Courier New', monospace;
|
||
font-size: 0.82rem;
|
||
color: var(--text-secondary);
|
||
justify-content: space-between;
|
||
}
|
||
|
||
body.dark-mode .file-name {
|
||
background: rgba(192, 204, 216, 0.06);
|
||
}
|
||
|
||
.copy-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
padding: 2px 6px;
|
||
transition: transform 0.2s ease;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
/* Color Palette */
|
||
.color-palette {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||
gap: 15px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.color-box {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
border: 2px solid var(--border-color);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.color-box:hover {
|
||
transform: scale(1.05);
|
||
border-color: var(--onto-amber);
|
||
}
|
||
|
||
.color-sample {
|
||
height: 80px;
|
||
width: 100%;
|
||
}
|
||
|
||
.color-name {
|
||
padding: 10px;
|
||
background: var(--card-bg);
|
||
text-align: center;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.color-value {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 5px 10px;
|
||
background: var(--bg-secondary);
|
||
font-family: 'Monaco', 'Courier New', monospace;
|
||
font-size: 0.75rem;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.color-value:hover {
|
||
color: var(--onto-amber);
|
||
}
|
||
|
||
/* Typography */
|
||
.typography-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 25px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.font-sample {
|
||
background: var(--card-bg);
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 8px;
|
||
padding: 25px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.font-sample:hover {
|
||
border-color: var(--onto-amber);
|
||
box-shadow: 0 8px 16px var(--card-shadow);
|
||
}
|
||
|
||
.font-label {
|
||
font-size: 0.78rem;
|
||
color: var(--text-secondary);
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.8px;
|
||
}
|
||
|
||
.font-display {
|
||
color: var(--text-primary);
|
||
margin-bottom: 15px;
|
||
line-height: 1.3;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.font-specs {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.font-spec-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.font-spec-label {
|
||
color: var(--text-secondary);
|
||
font-size: 0.75rem;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.font-spec-value {
|
||
color: var(--onto-amber);
|
||
font-weight: 600;
|
||
font-family: 'Monaco', 'Courier New', monospace;
|
||
}
|
||
|
||
body.dark-mode .font-spec-value {
|
||
color: var(--onto-silver);
|
||
}
|
||
|
||
/* Info box */
|
||
.info-box {
|
||
background: var(--card-bg);
|
||
border-left: 4px solid var(--onto-amber);
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--border-color);
|
||
border-left: 4px solid var(--onto-amber);
|
||
}
|
||
|
||
.info-box h3 {
|
||
color: var(--onto-amber);
|
||
margin-bottom: 10px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.info-box p {
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Scalability */
|
||
.scalability-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: 30px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.scalability-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.scalability-item-display {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--bg-secondary);
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 8px;
|
||
margin-bottom: 12px;
|
||
height: 260px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.scalability-item-display:hover {
|
||
border-color: var(--onto-amber);
|
||
box-shadow: 0 8px 16px var(--card-shadow);
|
||
}
|
||
|
||
.scalability-size {
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
font-size: 1rem;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.scalability-use {
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
footer {
|
||
margin-top: 60px;
|
||
padding: 30px;
|
||
border-top: 1px solid var(--border-color);
|
||
text-align: center;
|
||
color: var(--text-secondary);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
header { flex-direction: column; text-align: center; }
|
||
.section-title { font-size: 1.3rem; }
|
||
.gallery { grid-template-columns: 1fr; }
|
||
nav ul { gap: 12px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav>
|
||
<div class="nav-container">
|
||
<h2>OntoRef Branding</h2>
|
||
<ul>
|
||
<li><a href="#logos">Logos</a></li>
|
||
<li><a href="#icons">Icons</a></li>
|
||
<li><a href="#mono">Monochrome</a></li>
|
||
<li><a href="#scalability">Scalability</a></li>
|
||
<li><a href="#colors">Colors</a></li>
|
||
<li><a href="#typography">Typography</a></li>
|
||
<li><a href="#guidelines">Guidelines</a></li>
|
||
<button class="theme-toggle" onclick="toggleTheme()">🌙 Dark</button>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container">
|
||
<!-- Header -->
|
||
<header>
|
||
<div>
|
||
<h1>OntoRef</h1>
|
||
<p>Structure that remembers why — Branding Assets</p>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Logo Variants -->
|
||
<section id="logos">
|
||
<h2 class="section-title">Logo Variants</h2>
|
||
<div class="gallery">
|
||
|
||
<div class="card">
|
||
<div class="card-preview" onclick="window.open('ontoref-h.svg','_blank')">
|
||
<img src="ontoref-h.svg" alt="OntoRef Horizontal"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Horizontal</div>
|
||
<div class="card-label">ANIMATED</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">ViewBox</span>
|
||
<span class="spec-value">575×250</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Headers</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-h.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview" onclick="window.open('ontoref-v.svg','_blank')">
|
||
<img src="ontoref-v.svg" alt="OntoRef Vertical"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Vertical</div>
|
||
<div class="card-label">ANIMATED</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">ViewBox</span>
|
||
<span class="spec-value">380×340</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Mobile</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-v.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview" onclick="window.open('ontoref-h-static.svg','_blank')">
|
||
<img src="ontoref-h-static.svg" alt="OntoRef Horizontal Static"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Horizontal Static</div>
|
||
<div class="card-label label-static">STATIC</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">ViewBox</span>
|
||
<span class="spec-value">575×250</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Print</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-h-static.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview" onclick="window.open('ontoref-v-static.svg','_blank')">
|
||
<img src="ontoref-v-static.svg" alt="OntoRef Vertical Static"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Vertical Static</div>
|
||
<div class="card-label label-static">STATIC</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">ViewBox</span>
|
||
<span class="spec-value">380×340</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Print</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-v-static.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview" style="background:#0F1319;" onclick="window.open('ontoref-dark-h.svg','_blank')">
|
||
<img src="ontoref-dark-h.svg" alt="OntoRef Dark Horizontal"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Dark Horizontal</div>
|
||
<div class="card-label label-dark">DARK</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">ViewBox</span>
|
||
<span class="spec-value">575×250</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Dark BG</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-dark-h.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview" style="background:#0F1319;" onclick="window.open('ontoref-dark-v.svg','_blank')">
|
||
<img src="ontoref-dark-v.svg" alt="OntoRef Dark Vertical"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Dark Vertical</div>
|
||
<div class="card-label label-dark">DARK</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">ViewBox</span>
|
||
<span class="spec-value">380×340</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Dark BG</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-dark-v.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Icon Variants -->
|
||
<section id="icons">
|
||
<h2 class="section-title">Icon Variants</h2>
|
||
<div class="gallery">
|
||
|
||
<div class="card">
|
||
<div class="card-preview" onclick="window.open('ontoref-icon.svg','_blank')">
|
||
<img src="ontoref-icon.svg" alt="OntoRef Icon"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Icon</div>
|
||
<div class="card-label">ANIMATED</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">ViewBox</span>
|
||
<span class="spec-value">600×700</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Apps</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-icon.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview" onclick="window.open('ontoref-icon-static.svg','_blank')">
|
||
<img src="ontoref-icon-static.svg" alt="OntoRef Icon Static"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Icon Static</div>
|
||
<div class="card-label label-static">STATIC</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">ViewBox</span>
|
||
<span class="spec-value">600×700</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Print</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-icon-static.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview" onclick="window.open('ontoref-text.svg','_blank')">
|
||
<img src="ontoref-text.svg" alt="OntoRef Wordmark"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Text / Wordmark</div>
|
||
<div class="card-label">ANIMATED</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">ViewBox</span>
|
||
<span class="spec-value">400×180</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Wordmark</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-text.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Monochrome -->
|
||
<section id="mono">
|
||
<h2 class="section-title">Monochrome Variants</h2>
|
||
<div class="gallery">
|
||
|
||
<div class="card">
|
||
<div class="card-preview" style="background:#ffffff;" onclick="window.open('ontoref-mono-black-h.svg','_blank')">
|
||
<img src="ontoref-mono-black-h.svg" alt="OntoRef Mono Black Horizontal"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Mono Black Horizontal</div>
|
||
<div class="card-label label-mono">MONO</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Light BG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-mono-black-h.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview" style="background:#ffffff;" onclick="window.open('ontoref-mono-black-v.svg','_blank')">
|
||
<img src="ontoref-mono-black-v.svg" alt="OntoRef Mono Black Vertical"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Mono Black Vertical</div>
|
||
<div class="card-label label-mono">MONO</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Light BG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-mono-black-v.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview" style="background:#0F1319;" onclick="window.open('ontoref-mono-white-h.svg','_blank')">
|
||
<img src="ontoref-mono-white-h.svg" alt="OntoRef Mono White Horizontal"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Mono White Horizontal</div>
|
||
<div class="card-label label-mono">MONO</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Dark BG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-mono-white-h.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview" style="background:#0F1319;" onclick="window.open('ontoref-mono-white-v.svg','_blank')">
|
||
<img src="ontoref-mono-white-v.svg" alt="OntoRef Mono White Vertical"/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Mono White Vertical</div>
|
||
<div class="card-label label-mono">MONO</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use</span>
|
||
<span class="spec-value">Dark BG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<div class="file-name">
|
||
<span>ontoref-mono-white-v.svg</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Scalability Test -->
|
||
<section id="scalability">
|
||
<h2 class="section-title">Scalability Test</h2>
|
||
<div class="info-box" style="margin-bottom:30px;">
|
||
<p>Icon clarity at different sizes — from favicon to app icon</p>
|
||
</div>
|
||
<div class="scalability-grid">
|
||
<div class="scalability-item">
|
||
<div class="scalability-item-display">
|
||
<img src="ontoref-icon-static.svg" width="16" height="16" alt="16×16"/>
|
||
</div>
|
||
<div class="scalability-size">16×16</div>
|
||
<div class="scalability-use">Favicon</div>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<div class="scalability-item-display">
|
||
<img src="ontoref-icon-static.svg" width="32" height="32" alt="32×32"/>
|
||
</div>
|
||
<div class="scalability-size">32×32</div>
|
||
<div class="scalability-use">Browser tab</div>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<div class="scalability-item-display">
|
||
<img src="ontoref-icon-static.svg" width="64" height="64" alt="64×64"/>
|
||
</div>
|
||
<div class="scalability-size">64×64</div>
|
||
<div class="scalability-use">App icon</div>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<div class="scalability-item-display">
|
||
<img src="ontoref-icon-static.svg" width="128" height="128" alt="128×128"/>
|
||
</div>
|
||
<div class="scalability-size">128×128</div>
|
||
<div class="scalability-use">Apple touch</div>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<div class="scalability-item-display">
|
||
<img src="ontoref-icon-static.svg" width="256" height="256" alt="256×256"/>
|
||
</div>
|
||
<div class="scalability-size">256×256</div>
|
||
<div class="scalability-use">PWA icon</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Color Palette -->
|
||
<section id="colors">
|
||
<h2 class="section-title">Color Palette</h2>
|
||
<div class="color-palette">
|
||
<div class="color-box">
|
||
<div class="color-sample" style="background:#C0CCD8;"></div>
|
||
<div class="color-name">Silver</div>
|
||
<div class="color-value" onclick="copyColorValue(this)"><span>#C0CCD8</span><span>📋</span></div>
|
||
</div>
|
||
<div class="color-box">
|
||
<div class="color-sample" style="background:#E8A838;"></div>
|
||
<div class="color-name">Amber</div>
|
||
<div class="color-value" onclick="copyColorValue(this)"><span>#E8A838</span><span>📋</span></div>
|
||
</div>
|
||
<div class="color-box">
|
||
<div class="color-sample" style="background:#0F1319;"></div>
|
||
<div class="color-name">Dark</div>
|
||
<div class="color-value" onclick="copyColorValue(this)"><span>#0F1319</span><span>📋</span></div>
|
||
</div>
|
||
<div class="color-box">
|
||
<div class="color-sample" style="background:#8090A4;"></div>
|
||
<div class="color-name">Gray</div>
|
||
<div class="color-value" onclick="copyColorValue(this)"><span>#8090A4</span><span>📋</span></div>
|
||
</div>
|
||
<div class="color-box">
|
||
<div class="color-sample" style="background:#5A6A7C;"></div>
|
||
<div class="color-name">Gray Dark</div>
|
||
<div class="color-value" onclick="copyColorValue(this)"><span>#5A6A7C</span><span>📋</span></div>
|
||
</div>
|
||
<div class="color-box">
|
||
<div class="color-sample" style="background:#E6ECF2;"></div>
|
||
<div class="color-name">Silver Light</div>
|
||
<div class="color-value" onclick="copyColorValue(this)"><span>#E6ECF2</span><span>📋</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Typography -->
|
||
<section id="typography">
|
||
<h2 class="section-title">Typography</h2>
|
||
<div class="typography-grid">
|
||
|
||
<div class="font-sample">
|
||
<div class="font-label">Display / Headings</div>
|
||
<div class="font-display" style="font-size:2rem; font-weight:700;">OntoRef</div>
|
||
<div class="font-specs">
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Family</span>
|
||
<span class="font-spec-value">IBM Plex Mono</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Weight</span>
|
||
<span class="font-spec-value">600</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Size</span>
|
||
<span class="font-spec-value">32px+</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Use</span>
|
||
<span class="font-spec-value">Logo, H1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="font-sample">
|
||
<div class="font-label">Body / UI</div>
|
||
<div class="font-display" style="font-size:1rem; font-weight:400;">Structure that remembers why</div>
|
||
<div class="font-specs">
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Family</span>
|
||
<span class="font-spec-value">System Stack</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Weight</span>
|
||
<span class="font-spec-value">400</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Size</span>
|
||
<span class="font-spec-value">16px</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Use</span>
|
||
<span class="font-spec-value">Body text</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="font-sample">
|
||
<div class="font-label">Subtitle</div>
|
||
<div class="font-display" style="font-size:1rem; font-weight:500; color:#A8B4C8;">Structure that remembers why.</div>
|
||
<div class="font-specs">
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Family</span>
|
||
<span class="font-spec-value">IBM Plex Sans</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Weight</span>
|
||
<span class="font-spec-value">500</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Size</span>
|
||
<span class="font-spec-value">22px</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Use</span>
|
||
<span class="font-spec-value">Tagline</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="font-sample">
|
||
<div class="font-label">Code / Monospace</div>
|
||
<div class="font-display" style="font-size:0.9rem; font-family:'Monaco','Courier New',monospace;">ontoref-h.svg</div>
|
||
<div class="font-specs">
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Family</span>
|
||
<span class="font-spec-value">Monaco</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Weight</span>
|
||
<span class="font-spec-value">400</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Size</span>
|
||
<span class="font-spec-value">14px</span>
|
||
</div>
|
||
<div class="font-spec-item">
|
||
<span class="font-spec-label">Use</span>
|
||
<span class="font-spec-value">Code, files</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="info-box" style="margin-top:30px;">
|
||
<h3>Font Usage</h3>
|
||
<p style="margin-bottom:16px;">IBM Plex Mono for the wordmark, IBM Plex Sans for the tagline. System font stack for all UI elements.</p>
|
||
<div style="font-weight:600; color:var(--text-primary); margin-bottom:8px; font-size:0.9rem;">Google Fonts import:</div>
|
||
<div class="file-name" style="margin-bottom:12px;">
|
||
<span>@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500&display=swap');</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
<div style="font-weight:600; color:var(--text-primary); margin-bottom:8px; font-size:0.9rem;">CSS Font-family (UI):</div>
|
||
<div class="file-name">
|
||
<span>font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;</span>
|
||
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Guidelines -->
|
||
<section id="guidelines">
|
||
<h2 class="section-title">Usage Guidelines</h2>
|
||
|
||
<div class="info-box">
|
||
<h3>Logo Usage</h3>
|
||
<p>Use the <strong>horizontal logo</strong> 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 <strong>static variants</strong>. Maintain a minimum of 15px clear space around all logos. Never distort, rotate, or modify the aspect ratio.</p>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<h3>Color Palette</h3>
|
||
<p><strong>Silver (#C0CCD8)</strong> represents the Ref side — structure, organization, and reference data. <strong>Amber (#E8A838)</strong> represents the Onto side — ontology, graph relationships, and dynamic connections. Use the <strong>dark background (#0F1319)</strong> for optimal contrast in dark-mode contexts. Monochrome variants are for print and accessibility requirements.</p>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<h3>Typography</h3>
|
||
<p>Use <strong>IBM Plex Mono</strong> (weight 600) for the wordmark logotype. Use <strong>IBM Plex Sans</strong> (weight 500) for the tagline "Structure that remembers why". For all UI elements and body text, use the <strong>system font stack</strong>. Use <strong>Monaco / Courier New</strong> monospace for filenames, code snippets, and HEX values.</p>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<h3>Icon Usage</h3>
|
||
<p>Use <strong>ontoref-icon.svg</strong> for digital applications with animation support. Use <strong>ontoref-icon-static.svg</strong> 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.</p>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<h3>Dark Mode</h3>
|
||
<p>Dark backgrounds of <strong>#0F1319</strong> or darker provide optimal contrast. Use <strong>ontoref-dark-h.svg</strong> and <strong>ontoref-dark-v.svg</strong> 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.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>OntoRef Branding System v1.0 · Structure that remembers why · All assets SVG format</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
function toggleTheme() {
|
||
const isDark = document.body.classList.toggle('dark-mode');
|
||
const btn = document.querySelector('nav .theme-toggle');
|
||
btn.textContent = isDark ? '☀️ Light' : '🌙 Dark';
|
||
localStorage.setItem('ontoref-theme', isDark ? 'dark' : 'light');
|
||
}
|
||
|
||
window.addEventListener('DOMContentLoaded', () => {
|
||
const saved = localStorage.getItem('ontoref-theme');
|
||
if (saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||
document.body.classList.add('dark-mode');
|
||
document.querySelector('nav .theme-toggle').textContent = '☀️ Light';
|
||
}
|
||
});
|
||
|
||
function copyToClipboard(button) {
|
||
const text = button.parentElement.querySelector('span').textContent.trim();
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
const original = button.textContent;
|
||
button.textContent = '✓';
|
||
setTimeout(() => { button.textContent = original; }, 2000);
|
||
});
|
||
}
|
||
|
||
function copyColorValue(element) {
|
||
const hex = element.querySelector('span').textContent.trim();
|
||
navigator.clipboard.writeText(hex).then(() => {
|
||
const icon = element.querySelectorAll('span')[1];
|
||
icon.textContent = '✓';
|
||
setTimeout(() => { icon.textContent = '📋'; }, 2000);
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|