1553 lines
49 KiB
HTML
1553 lines
49 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>KOGRAL Assets Showcase</title>
|
|||
|
|
<link
|
|||
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
|
|||
|
|
rel="stylesheet"
|
|||
|
|
/>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--kogral-primary: #4a9eff;
|
|||
|
|
--kogral-secondary: #1a2744;
|
|||
|
|
--kogral-blue: #4a9eff;
|
|||
|
|
--kogral-green: #3dd68d;
|
|||
|
|
--kogral-gold: #fbbf24;
|
|||
|
|
--kogral-slate: #64748b;
|
|||
|
|
--kogral-dark: #0f0f1e;
|
|||
|
|
|
|||
|
|
/* Light mode */
|
|||
|
|
--bg-primary: #ffffff;
|
|||
|
|
--bg-secondary: #f8f9fa;
|
|||
|
|
--text-primary: #1f2937;
|
|||
|
|
--text-secondary: #6b7280;
|
|||
|
|
--border-color: #e5e7eb;
|
|||
|
|
--card-bg: #ffffff;
|
|||
|
|
--card-shadow: rgba(74, 158, 255, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode {
|
|||
|
|
--bg-primary: #0f0f1e;
|
|||
|
|
--bg-secondary: #0a0a14;
|
|||
|
|
--text-primary: #f1f5f9;
|
|||
|
|
--text-secondary: #cbd5e1;
|
|||
|
|
--border-color: #404040;
|
|||
|
|
--card-bg: #1a1a2e;
|
|||
|
|
--card-shadow: rgba(74, 158, 255, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html {
|
|||
|
|
scroll-behavior: smooth;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family:
|
|||
|
|
"Inter",
|
|||
|
|
-apple-system,
|
|||
|
|
BlinkMacSystemFont,
|
|||
|
|
"Segoe UI",
|
|||
|
|
"Roboto",
|
|||
|
|
sans-serif;
|
|||
|
|
background: var(--bg-primary);
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
transition:
|
|||
|
|
background 0.3s ease,
|
|||
|
|
color 0.3s ease;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1600px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 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.8);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode nav {
|
|||
|
|
background-color: rgba(15, 15, 30, 0.8);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav .container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav h2 {
|
|||
|
|
font-size: 1.3rem;
|
|||
|
|
background: linear-gradient(135deg, var(--kogral-blue), var(--kogral-green));
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
background-clip: text;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav ul {
|
|||
|
|
display: flex;
|
|||
|
|
list-style: none;
|
|||
|
|
gap: 30px;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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(--kogral-blue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-toggle {
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
background: rgba(74, 158, 255, 0.15);
|
|||
|
|
border: 2px solid var(--kogral-blue);
|
|||
|
|
color: var(--kogral-blue);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-weight: 600;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-toggle:hover {
|
|||
|
|
background: var(--kogral-blue);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Header */
|
|||
|
|
header {
|
|||
|
|
padding: 60px 20px;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
135deg,
|
|||
|
|
var(--kogral-secondary) 0%,
|
|||
|
|
var(--kogral-blue) 50%,
|
|||
|
|
var(--kogral-green) 100%
|
|||
|
|
);
|
|||
|
|
color: white;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header h1 {
|
|||
|
|
font-size: 3rem;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
font-weight: 800;
|
|||
|
|
letter-spacing: -1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header p {
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header .stats {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 40px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-top: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-number {
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--kogral-gold);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-label {
|
|||
|
|
opacity: 0.85;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Sections */
|
|||
|
|
section {
|
|||
|
|
margin-bottom: 80px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 2.2rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
background: linear-gradient(135deg, var(--kogral-blue), var(--kogral-green));
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
background-clip: text;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
position: relative;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title::after {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -10px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 60px;
|
|||
|
|
height: 4px;
|
|||
|
|
background: var(--kogral-gold);
|
|||
|
|
border-radius: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-subtitle {
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
margin-top: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Color Section */
|
|||
|
|
.color-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-card {
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border: 2px solid var(--border-color);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-card:hover {
|
|||
|
|
transform: scale(1.08);
|
|||
|
|
box-shadow: 0 12px 24px var(--card-shadow);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-display {
|
|||
|
|
height: 100px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-info {
|
|||
|
|
padding: 15px;
|
|||
|
|
background: var(--card-bg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-name {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-hex {
|
|||
|
|
font-family: "Courier New", monospace;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-usage {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--kogral-blue);
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Gallery */
|
|||
|
|
.asset-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 30px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-card {
|
|||
|
|
background: var(--card-bg);
|
|||
|
|
border: 2px solid var(--border-color);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-card:hover {
|
|||
|
|
box-shadow: 0 16px 32px var(--card-shadow);
|
|||
|
|
transform: translateY(-8px);
|
|||
|
|
border-color: var(--kogral-blue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-preview {
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
padding: 40px 20px;
|
|||
|
|
display: flex;
|
|||
|
|
height: 280px;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
min-height: 250px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-preview img {
|
|||
|
|
max-width: 100%;
|
|||
|
|
max-height: 95%;
|
|||
|
|
width: auto;
|
|||
|
|
height: auto;
|
|||
|
|
object-fit: contain;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: opacity 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-preview img:hover {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-info {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-title {
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--kogral-blue);
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-badge {
|
|||
|
|
display: inline-block;
|
|||
|
|
background: rgba(74, 158, 255, 0.15);
|
|||
|
|
color: var(--kogral-blue);
|
|||
|
|
padding: 4px 12px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-details {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px;
|
|||
|
|
margin: 12px 0;
|
|||
|
|
padding: 12px 0;
|
|||
|
|
border-top: 1px solid var(--border-color);
|
|||
|
|
border-bottom: 1px solid var(--border-color);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-item {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-label {
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-value {
|
|||
|
|
color: var(--kogral-blue);
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-filename {
|
|||
|
|
font-family: "Courier New", monospace;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
margin-top: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-filename:hover {
|
|||
|
|
background: rgba(74, 158, 255, 0.15);
|
|||
|
|
color: var(--kogral-blue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.copy-btn {
|
|||
|
|
background: none;
|
|||
|
|
border: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
color: inherit;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Guidelines Section */
|
|||
|
|
.guideline-cards {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|||
|
|
gap: 25px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guideline-card {
|
|||
|
|
background: var(--card-bg);
|
|||
|
|
border-left: 4px solid var(--kogral-blue);
|
|||
|
|
padding: 25px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guideline-card h3 {
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
color: var(--kogral-blue);
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guideline-card p {
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
line-height: 1.7;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Variant Comparison */
|
|||
|
|
.comparison-table {
|
|||
|
|
width: 100%;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
background: var(--card-bg);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comparison-table thead {
|
|||
|
|
background: linear-gradient(90deg, var(--kogral-secondary), var(--kogral-blue));
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comparison-table th {
|
|||
|
|
padding: 15px;
|
|||
|
|
text-align: left;
|
|||
|
|
font-weight: 600;
|
|||
|
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comparison-table th:last-child {
|
|||
|
|
border-right: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comparison-table td {
|
|||
|
|
padding: 15px;
|
|||
|
|
border-bottom: 1px solid var(--border-color);
|
|||
|
|
border-right: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comparison-table td:last-child {
|
|||
|
|
border-right: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comparison-table tbody tr:last-child td {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comparison-table tbody tr:hover {
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.variant-name {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--kogral-blue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Footer */
|
|||
|
|
footer {
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
padding: 40px 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
border-top: 2px solid var(--border-color);
|
|||
|
|
margin-top: 80px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer p {
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Responsive */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
header h1 {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header .stats {
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-number {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav ul {
|
|||
|
|
gap: 15px;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 1.6rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-grid,
|
|||
|
|
.color-grid {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comparison-table {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comparison-table th,
|
|||
|
|
.comparison-table td {
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Typography */
|
|||
|
|
.typography-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|||
|
|
gap: 25px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-sample {
|
|||
|
|
background: var(--card-bg);
|
|||
|
|
border: 2px solid var(--border-color);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 25px;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-sample:hover {
|
|||
|
|
border-color: var(--kogral-blue);
|
|||
|
|
box-shadow: 0 10px 20px var(--card-shadow);
|
|||
|
|
transform: translateY(-4px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-label {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-display {
|
|||
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-specs {
|
|||
|
|
margin-top: 15px;
|
|||
|
|
padding-top: 15px;
|
|||
|
|
border-top: 1px solid var(--border-color);
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 12px;
|
|||
|
|
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: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-spec-value {
|
|||
|
|
color: var(--kogral-blue);
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-family: "Courier New", monospace;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Scalability Test */
|
|||
|
|
.scalability-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 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: 15px;
|
|||
|
|
height: 200px;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scalability-item-display:hover {
|
|||
|
|
border-color: var(--kogral-blue);
|
|||
|
|
box-shadow: 0 8px 16px var(--card-shadow);
|
|||
|
|
transform: translateY(-4px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scalability-item-display img {
|
|||
|
|
max-width: 100%;
|
|||
|
|
max-height: 100%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: opacity 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scalability-item-display img:hover {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scalability-size {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
font-size: 1rem;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scalability-use {
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Animations */
|
|||
|
|
@keyframes slideIn {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(20px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
section {
|
|||
|
|
animation: slideIn 0.6s ease-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Utilities */
|
|||
|
|
.text-center {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mt-40 {
|
|||
|
|
margin-top: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mb-40 {
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<!-- Navigation -->
|
|||
|
|
<nav>
|
|||
|
|
<div class="container">
|
|||
|
|
<h2>KOGRAL Assets</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#colors">Colors</a></li>
|
|||
|
|
<li><a href="#logos">Logos</a></li>
|
|||
|
|
<li><a href="#icons">Icons</a></li>
|
|||
|
|
<li><a href="#scalability">Scalability</a></li>
|
|||
|
|
<li><a href="#typography">Typography</a></li>
|
|||
|
|
<li><a href="#guidelines">Guidelines</a></li>
|
|||
|
|
<li><a href="#variants">Variants</a></li>
|
|||
|
|
<button class="theme-toggle" onclick="toggleTheme()">🌙 Dark</button>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<!-- Header -->
|
|||
|
|
<header>
|
|||
|
|
<div class="container">
|
|||
|
|
<h1>KOGRAL Branding Assets</h1>
|
|||
|
|
<p>Complete design system for git-native knowledge graphs</p>
|
|||
|
|
<div class="stats">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-number">13</div>
|
|||
|
|
<div class="stat-label">Total Assets</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-number">10</div>
|
|||
|
|
<div class="stat-label">Logo Variants</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-number">3</div>
|
|||
|
|
<div class="stat-label">Icon Variants</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-number">6</div>
|
|||
|
|
<div class="stat-label">Brand Colors</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-number">SVG</div>
|
|||
|
|
<div class="stat-label">Format</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<main>
|
|||
|
|
<!-- Colors Section -->
|
|||
|
|
<section id="colors">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2 class="section-title">Color Palette</h2>
|
|||
|
|
<p class="section-subtitle">Core brand colors with semantic meaning</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="color-grid">
|
|||
|
|
<div class="color-card">
|
|||
|
|
<div class="color-display" style="background: #4a9eff"></div>
|
|||
|
|
<div class="color-info">
|
|||
|
|
<div class="color-name">Primary Blue</div>
|
|||
|
|
<div class="color-hex">#4a9eff</div>
|
|||
|
|
<div class="color-usage">Knowledge & Connection</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="color-card">
|
|||
|
|
<div class="color-display" style="background: #3dd68d"></div>
|
|||
|
|
<div class="color-info">
|
|||
|
|
<div class="color-name">Accent Green</div>
|
|||
|
|
<div class="color-hex">#3dd68d</div>
|
|||
|
|
<div class="color-usage">Active & Growth</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="color-card">
|
|||
|
|
<div class="color-display" style="background: #fbbf24"></div>
|
|||
|
|
<div class="color-info">
|
|||
|
|
<div class="color-name">Gold Highlight</div>
|
|||
|
|
<div class="color-hex">#fbbf24</div>
|
|||
|
|
<div class="color-usage">Important & Central</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="color-card">
|
|||
|
|
<div class="color-display" style="background: #64748b"></div>
|
|||
|
|
<div class="color-info">
|
|||
|
|
<div class="color-name">Slate Secondary</div>
|
|||
|
|
<div class="color-hex">#64748b</div>
|
|||
|
|
<div class="color-usage">Secondary & Border</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="color-card">
|
|||
|
|
<div class="color-display" style="background: #1a2744"></div>
|
|||
|
|
<div class="color-info">
|
|||
|
|
<div class="color-name">Dark Primary</div>
|
|||
|
|
<div class="color-hex">#1a2744</div>
|
|||
|
|
<div class="color-usage">UI Background</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="color-card">
|
|||
|
|
<div class="color-display" style="background: #2a3f6a"></div>
|
|||
|
|
<div class="color-info">
|
|||
|
|
<div class="color-name">Dark Secondary</div>
|
|||
|
|
<div class="color-hex">#2a3f6a</div>
|
|||
|
|
<div class="color-usage">UI Emphasis</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Logos Section -->
|
|||
|
|
<section id="logos">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2 class="section-title">Logo Variants</h2>
|
|||
|
|
<p class="section-subtitle">Full brand identity in multiple formats</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="asset-grid">
|
|||
|
|
<!-- Full Logo -->
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="asset-preview">
|
|||
|
|
<img src="../logos/kogral-h.svg" alt="Full Logo" />
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-title">Full Logo</div>
|
|||
|
|
<div class="asset-badge">Primary</div>
|
|||
|
|
<div class="asset-details">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Dimensions</div>
|
|||
|
|
<div class="detail-value">610×200px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Format</div>
|
|||
|
|
<div class="detail-value">SVG</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-filename">
|
|||
|
|
<span>kogral-h.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Horizontal Logo -->
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="asset-preview">
|
|||
|
|
<img src="../logos/kogral-v.svg" alt="Horizontal Logo" />
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-title">Horizontal</div>
|
|||
|
|
<div class="asset-badge">Layout</div>
|
|||
|
|
<div class="asset-details">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Dimensions</div>
|
|||
|
|
<div class="detail-value">1000×300px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Use Case</div>
|
|||
|
|
<div class="detail-value">Banners</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-filename">
|
|||
|
|
<span>kogral-v.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Square Logo -->
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="asset-preview">
|
|||
|
|
<img src="../logos/kogral-h-static.svg" alt="Square Logo" />
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-title">Square</div>
|
|||
|
|
<div class="asset-badge">Compact</div>
|
|||
|
|
<div class="asset-details">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Dimensions</div>
|
|||
|
|
<div class="detail-value">200×200px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Use Case</div>
|
|||
|
|
<div class="detail-value">Apps & UI</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-filename">
|
|||
|
|
<span>kogral-h-static.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Horizontal Small -->
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="asset-preview">
|
|||
|
|
<img src="../logos/kogral-v-static.svg" alt="Horizontal Small Logo" />
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-title">Horizontal Small</div>
|
|||
|
|
<div class="asset-badge">Compact</div>
|
|||
|
|
<div class="asset-details">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Dimensions</div>
|
|||
|
|
<div class="detail-value">500×150px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Use Case</div>
|
|||
|
|
<div class="detail-value">Navbars</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-filename">
|
|||
|
|
<span>kogral-v-static.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Mono Black H Logo -->
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="asset-preview" style="background: var(--bg-secondary)">
|
|||
|
|
<img src="../logos/kogral-mono-black-h.svg" alt="Mono Black H Logo" />
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-title">Mono Black H</div>
|
|||
|
|
<div class="asset-badge">Mono</div>
|
|||
|
|
<div class="asset-details">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Dimensions</div>
|
|||
|
|
<div class="detail-value">610×200px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Use Case</div>
|
|||
|
|
<div class="detail-value">Print, Fax</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-filename">
|
|||
|
|
<span>kogral-mono-black-h.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Mono White H Logo -->
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="asset-preview" style="background: #1a1a2e">
|
|||
|
|
<img src="../logos/kogral-mono-white-h.svg" alt="Mono White H Logo" />
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-title">Mono White H</div>
|
|||
|
|
<div class="asset-badge">Mono</div>
|
|||
|
|
<div class="asset-details">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Dimensions</div>
|
|||
|
|
<div class="detail-value">610×200px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Use Case</div>
|
|||
|
|
<div class="detail-value">Dark Mode</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-filename">
|
|||
|
|
<span>kogral-mono-white-h.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Mono Black V Logo -->
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="asset-preview" style="background: var(--bg-secondary)">
|
|||
|
|
<img src="../logos/kogral-mono-black-v.svg" alt="Mono Black V Logo" />
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-title">Mono Black V</div>
|
|||
|
|
<div class="asset-badge">Mono</div>
|
|||
|
|
<div class="asset-details">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Dimensions</div>
|
|||
|
|
<div class="detail-value">450×315px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Use Case</div>
|
|||
|
|
<div class="detail-value">Print Vertical</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-filename">
|
|||
|
|
<span>kogral-mono-black-v.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Mono White V Logo -->
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="asset-preview" style="background: #1a1a2e">
|
|||
|
|
<img src="../logos/kogral-mono-white-v.svg" alt="Mono White V Logo" />
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-title">Mono White V</div>
|
|||
|
|
<div class="asset-badge">Mono</div>
|
|||
|
|
<div class="asset-details">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Dimensions</div>
|
|||
|
|
<div class="detail-value">450×315px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Use Case</div>
|
|||
|
|
<div class="detail-value">Dark Mode V</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-filename">
|
|||
|
|
<span>kogral-mono-white-v.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Icons Section -->
|
|||
|
|
<section id="icons">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2 class="section-title">Icon Variants</h2>
|
|||
|
|
<p class="section-subtitle">Scalable icons for every use case</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="asset-grid">
|
|||
|
|
<!-- Main Icon -->
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="asset-preview">
|
|||
|
|
<img src="../icons/kogral-icon.svg" alt="Main Icon" />
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-title">Main Icon</div>
|
|||
|
|
<div class="asset-badge">Standard</div>
|
|||
|
|
<div class="asset-details">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Dimensions</div>
|
|||
|
|
<div class="detail-value">200×200px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Use Case</div>
|
|||
|
|
<div class="detail-value">Favicons</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-filename">
|
|||
|
|
<span>kogral-icon.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Small Icon -->
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="asset-preview">
|
|||
|
|
<img src="../icons/kogral-icon-static.svg" alt="Small Icon" />
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-title">Small Icon</div>
|
|||
|
|
<div class="asset-badge">Compact</div>
|
|||
|
|
<div class="asset-details">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Dimensions</div>
|
|||
|
|
<div class="detail-value">100×100px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Use Case</div>
|
|||
|
|
<div class="detail-value">UI Elements</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-filename">
|
|||
|
|
<span>kogral-icon-static.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Black & White Icon -->
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="asset-preview" style="background: var(--bg-secondary)">
|
|||
|
|
<img src="../icons/kogral-icon-mono-black.svg" alt="Black & White Icon" />
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-title">Black & White Icon</div>
|
|||
|
|
<div class="asset-badge">Mono</div>
|
|||
|
|
<div class="asset-details">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Dimensions</div>
|
|||
|
|
<div class="detail-value">200×200px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<div class="detail-label">Use Case</div>
|
|||
|
|
<div class="detail-value">Print</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-filename">
|
|||
|
|
<span>kogral-icon-mono-black.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Scalability Test Section -->
|
|||
|
|
<section id="scalability">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2 class="section-title">Scalability Test</h2>
|
|||
|
|
<p class="section-subtitle">
|
|||
|
|
Icon clarity at different sizes - from favicon to app icons
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="scalability-grid">
|
|||
|
|
<div class="scalability-item">
|
|||
|
|
<div class="scalability-item-display">
|
|||
|
|
<img
|
|||
|
|
src="../icons/kogral-icon.svg"
|
|||
|
|
width="16"
|
|||
|
|
height="16"
|
|||
|
|
alt="16×16 Icon"
|
|||
|
|
/>
|
|||
|
|
</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="../icons/kogral-icon.svg"
|
|||
|
|
width="32"
|
|||
|
|
height="32"
|
|||
|
|
alt="32×32 Icon"
|
|||
|
|
/>
|
|||
|
|
</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="../icons/kogral-icon.svg"
|
|||
|
|
width="64"
|
|||
|
|
height="64"
|
|||
|
|
alt="64×64 Icon"
|
|||
|
|
/>
|
|||
|
|
</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="../icons/kogral-icon.svg"
|
|||
|
|
width="128"
|
|||
|
|
height="128"
|
|||
|
|
alt="128×128 Icon"
|
|||
|
|
/>
|
|||
|
|
</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="../icons/kogral-icon.svg"
|
|||
|
|
width="256"
|
|||
|
|
height="256"
|
|||
|
|
alt="256×256 Icon"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="scalability-size">256×256</div>
|
|||
|
|
<div class="scalability-use">PWA icon</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Typography Section -->
|
|||
|
|
<section id="typography">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2 class="section-title">Typography</h2>
|
|||
|
|
<p class="section-subtitle">Font family, weights, and usage guidelines</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="typography-grid">
|
|||
|
|
<div class="font-sample">
|
|||
|
|
<div class="font-label">Display / Hero</div>
|
|||
|
|
<div class="font-display" style="font-size: 2.2rem; font-weight: 800">
|
|||
|
|
KOGRAL
|
|||
|
|
</div>
|
|||
|
|
<div class="font-specs">
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Family</span>
|
|||
|
|
<span class="font-spec-value">Inter</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Weight</span>
|
|||
|
|
<span class="font-spec-value">800 (ExtraBold)</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Size</span>
|
|||
|
|
<span class="font-spec-value">32-48px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Use Case</span>
|
|||
|
|
<span class="font-spec-value">Hero, H1</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="font-sample">
|
|||
|
|
<div class="font-label">Headings / Titles</div>
|
|||
|
|
<div class="font-display" style="font-size: 1.6rem; font-weight: 700">
|
|||
|
|
Knowledge Graphs
|
|||
|
|
</div>
|
|||
|
|
<div class="font-specs">
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Family</span>
|
|||
|
|
<span class="font-spec-value">Inter</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Weight</span>
|
|||
|
|
<span class="font-spec-value">700 (Bold)</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Size</span>
|
|||
|
|
<span class="font-spec-value">20-28px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Use Case</span>
|
|||
|
|
<span class="font-spec-value">H2, H3, Sections</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="font-sample">
|
|||
|
|
<div class="font-label">Subheadings</div>
|
|||
|
|
<div class="font-display" style="font-size: 1.15rem; font-weight: 600">
|
|||
|
|
Git-native and local-first
|
|||
|
|
</div>
|
|||
|
|
<div class="font-specs">
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Family</span>
|
|||
|
|
<span class="font-spec-value">Inter</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Weight</span>
|
|||
|
|
<span class="font-spec-value">600 (SemiBold)</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Size</span>
|
|||
|
|
<span class="font-spec-value">16-20px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Use Case</span>
|
|||
|
|
<span class="font-spec-value">H4, Cards</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="font-sample">
|
|||
|
|
<div class="font-label">Body Text / Regular</div>
|
|||
|
|
<div
|
|||
|
|
class="font-display"
|
|||
|
|
style="font-size: 1rem; font-weight: 400; line-height: 1.7"
|
|||
|
|
>
|
|||
|
|
Structured knowledge management that scales from solo projects to
|
|||
|
|
organizations. Config-driven architecture for capturing architectural
|
|||
|
|
decisions, coding guidelines, and reusable patterns.
|
|||
|
|
</div>
|
|||
|
|
<div class="font-specs">
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Family</span>
|
|||
|
|
<span class="font-spec-value">Inter</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Weight</span>
|
|||
|
|
<span class="font-spec-value">400 (Regular)</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 Case</span>
|
|||
|
|
<span class="font-spec-value">Paragraphs, Body</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="font-sample">
|
|||
|
|
<div class="font-label">Small / UI Elements</div>
|
|||
|
|
<div class="font-display" style="font-size: 0.875rem; font-weight: 500">
|
|||
|
|
Markdown · Nickel · SurrealDB · Logseq
|
|||
|
|
</div>
|
|||
|
|
<div class="font-specs">
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Family</span>
|
|||
|
|
<span class="font-spec-value">Inter</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Weight</span>
|
|||
|
|
<span class="font-spec-value">500 (Medium)</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 Case</span>
|
|||
|
|
<span class="font-spec-value">Labels, Badges, UI</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: 'Courier New', monospace"
|
|||
|
|
>
|
|||
|
|
kogral-h.svg<br />
|
|||
|
|
#4a9eff
|
|||
|
|
</div>
|
|||
|
|
<div class="font-specs">
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Family</span>
|
|||
|
|
<span class="font-spec-value">Courier New</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Weight</span>
|
|||
|
|
<span class="font-spec-value">400 (Regular)</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Size</span>
|
|||
|
|
<span class="font-spec-value">13-14px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Use Case</span>
|
|||
|
|
<span class="font-spec-value">Code, Files, HEX</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Guidelines Section -->
|
|||
|
|
<section id="guidelines">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2 class="section-title">Usage Guidelines</h2>
|
|||
|
|
<p class="section-subtitle">Best practices for brand consistency</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="guideline-cards">
|
|||
|
|
<div class="guideline-card">
|
|||
|
|
<h3>📐 Logo Sizing</h3>
|
|||
|
|
<p>
|
|||
|
|
Use horizontal variants for banners and headers. Square variants work
|
|||
|
|
best for apps and compact spaces. Maintain minimum 20px clear space
|
|||
|
|
around all logos. Never distort, rotate, or modify the aspect ratio.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="guideline-card">
|
|||
|
|
<h3>🎨 Color Usage</h3>
|
|||
|
|
<p>
|
|||
|
|
Primary Blue (#4a9eff) is the main brand color. Green (#3dd68d)
|
|||
|
|
highlights active states and growth. Gold (#fbbf24) emphasizes central
|
|||
|
|
knowledge nodes. Use monochrome variants for print and high-contrast
|
|||
|
|
applications.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="guideline-card">
|
|||
|
|
<h3>🔤 Typography</h3>
|
|||
|
|
<p>
|
|||
|
|
Use Inter font family from Google Fonts. Weight 800 for display/hero
|
|||
|
|
text, 700 for headings, 600 for subheadings, 400 for body text, and 500
|
|||
|
|
for UI elements. Courier New monospace for code and filenames. Line
|
|||
|
|
height 1.3-1.7 for readability.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="guideline-card">
|
|||
|
|
<h3>📱 Digital Applications</h3>
|
|||
|
|
<p>
|
|||
|
|
All assets are SVG format for infinite scalability. Use favicon variants
|
|||
|
|
for browser tabs. Icons scale from 16×16 to 512×512 without quality
|
|||
|
|
loss. Perfect for web apps, mobile interfaces, and digital signage.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="guideline-card">
|
|||
|
|
<h3>🖨️ Print Production</h3>
|
|||
|
|
<p>
|
|||
|
|
Use black & white variants for print materials. Ensure minimum 1/4"
|
|||
|
|
clear space around logo. Test colors on actual materials before
|
|||
|
|
production. Monochrome is preferred for single-color prints.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="guideline-card">
|
|||
|
|
<h3>♿ Accessibility</h3>
|
|||
|
|
<p>
|
|||
|
|
All color combinations meet WCAG AA standards. Monochrome variants
|
|||
|
|
ensure colorblind accessibility. Always provide alt-text: "KOGRAL -
|
|||
|
|
Git-native knowledge graphs".
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Variants Comparison -->
|
|||
|
|
<section id="variants">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2 class="section-title">Variant Comparison</h2>
|
|||
|
|
<p class="section-subtitle">Complete overview of all 8 asset variations</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<table class="comparison-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>Category</th>
|
|||
|
|
<th>Variant</th>
|
|||
|
|
<th>Dimensions</th>
|
|||
|
|
<th>Best For</th>
|
|||
|
|
<th>Filename</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td rowspan="5"><strong>Logos</strong></td>
|
|||
|
|
<td><span class="variant-name">Full</span></td>
|
|||
|
|
<td>610×200px</td>
|
|||
|
|
<td>Primary branding</td>
|
|||
|
|
<td><code>kogral-h.svg</code></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><span class="variant-name">Horizontal</span></td>
|
|||
|
|
<td>1000×300px</td>
|
|||
|
|
<td>Banners, headers</td>
|
|||
|
|
<td><code>kogral-v.svg</code></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><span class="variant-name">Square</span></td>
|
|||
|
|
<td>200×200px</td>
|
|||
|
|
<td>Apps, UI elements</td>
|
|||
|
|
<td><code>kogral-h-static.svg</code></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><span class="variant-name">Horizontal Small</span></td>
|
|||
|
|
<td>500×150px</td>
|
|||
|
|
<td>Navbars, sidebars</td>
|
|||
|
|
<td><code>kogral-v-static.svg</code></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><span class="variant-name">Black & White</span></td>
|
|||
|
|
<td>610×200px</td>
|
|||
|
|
<td>Print, documents</td>
|
|||
|
|
<td><code>kogral-mono-black-h.svg</code></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td rowspan="3"><strong>Icons</strong></td>
|
|||
|
|
<td><span class="variant-name">Main</span></td>
|
|||
|
|
<td>200×200px</td>
|
|||
|
|
<td>Favicons, UI</td>
|
|||
|
|
<td><code>kogral-icon.svg</code></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><span class="variant-name">Small</span></td>
|
|||
|
|
<td>100×100px</td>
|
|||
|
|
<td>Compact spaces</td>
|
|||
|
|
<td><code>kogral-icon-static.svg</code></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><span class="variant-name">Black & White</span></td>
|
|||
|
|
<td>200×200px</td>
|
|||
|
|
<td>Print, monochrome</td>
|
|||
|
|
<td><code>kogral-icon-mono-black.svg</code></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<!-- Footer -->
|
|||
|
|
<footer>
|
|||
|
|
<div class="container">
|
|||
|
|
<p><strong>KOGRAL Branding System</strong></p>
|
|||
|
|
<p>
|
|||
|
|
8 Total Assets • 5 Logo Variants • 3 Icon Variants • 6 Brand Colors
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
All assets in SVG format • Fully scalable • Print-ready • Accessible
|
|||
|
|
</p>
|
|||
|
|
<p style="margin-top: 20px; opacity: 0.6">
|
|||
|
|
Last updated: 2026-01-23 • Version 1.0
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function toggleTheme() {
|
|||
|
|
const isDark = document.body.classList.toggle("dark-mode");
|
|||
|
|
const button = document.querySelector(".theme-toggle");
|
|||
|
|
button.textContent = isDark ? "☀️ Light" : "🌙 Dark";
|
|||
|
|
localStorage.setItem("kogral-showcase-theme", isDark ? "dark" : "light");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function copyToClipboard(button) {
|
|||
|
|
const filename = button.parentElement
|
|||
|
|
.querySelector("span")
|
|||
|
|
.textContent.trim();
|
|||
|
|
navigator.clipboard.writeText(filename).then(() => {
|
|||
|
|
button.textContent = "✓";
|
|||
|
|
setTimeout(() => {
|
|||
|
|
button.textContent = "📋";
|
|||
|
|
}, 2000);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Load saved theme
|
|||
|
|
const savedTheme = localStorage.getItem("kogral-showcase-theme");
|
|||
|
|
if (savedTheme === "dark") {
|
|||
|
|
document.body.classList.add("dark-mode");
|
|||
|
|
document.querySelector(".theme-toggle").textContent = "☀️ Light";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Make all images clickable to open in new tab
|
|||
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|||
|
|
document
|
|||
|
|
.querySelectorAll(".asset-preview img, .scalability-item-display img")
|
|||
|
|
.forEach((img) => {
|
|||
|
|
img.style.cursor = "pointer";
|
|||
|
|
img.addEventListener("click", function () {
|
|||
|
|
window.open(this.src, "_blank");
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|