1954 lines
62 KiB
Plaintext
1954 lines
62 KiB
Plaintext
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>SecretumVault — Branding Assets Showcase</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--quantum-deep: #0a1929;
|
||
|
|
--quantum-blue: #1a2744;
|
||
|
|
--quantum-cyan: #00d9ff;
|
||
|
|
--vault-gold: #ffd700;
|
||
|
|
--quantum-violet: #8b5cf6;
|
||
|
|
--rust-orange: #ce412b;
|
||
|
|
--vault-silver: #c0c0c0;
|
||
|
|
--text-light: #f5f5f5;
|
||
|
|
--border-color: #2a3f6a;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family:
|
||
|
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||
|
|
"Space Grotesk", sans-serif;
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
var(--quantum-deep) 0%,
|
||
|
|
var(--quantum-blue) 100%
|
||
|
|
);
|
||
|
|
color: var(--text-light);
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
background: rgba(10, 25, 41, 0.95);
|
||
|
|
border-bottom: 2px solid var(--quantum-cyan);
|
||
|
|
padding: 3rem 2rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
header h1 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
var(--quantum-cyan),
|
||
|
|
var(--vault-gold)
|
||
|
|
);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
|
||
|
|
header p {
|
||
|
|
color: var(--vault-silver);
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav {
|
||
|
|
background: var(--quantum-blue);
|
||
|
|
padding: 1rem 2rem;
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
z-index: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav ul {
|
||
|
|
list-style: none;
|
||
|
|
display: flex;
|
||
|
|
gap: 2rem;
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav a {
|
||
|
|
color: var(--quantum-cyan);
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 600;
|
||
|
|
transition: color 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav a:hover {
|
||
|
|
color: var(--vault-gold);
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
section {
|
||
|
|
margin: 3rem 0;
|
||
|
|
padding: 2rem;
|
||
|
|
background: rgba(26, 39, 68, 0.6);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
section h2 {
|
||
|
|
font-size: 2rem;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
color: var(--quantum-cyan);
|
||
|
|
border-bottom: 2px solid var(--vault-gold);
|
||
|
|
padding-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
section h3 {
|
||
|
|
font-size: 1.3rem;
|
||
|
|
margin: 1.5rem 0 1rem;
|
||
|
|
color: var(--vault-gold);
|
||
|
|
}
|
||
|
|
|
||
|
|
.showcase-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.showcase-item {
|
||
|
|
background: rgba(10, 25, 41, 0.8);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 1.5rem;
|
||
|
|
text-align: center;
|
||
|
|
transition: all 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.showcase-item:hover {
|
||
|
|
border-color: var(--quantum-cyan);
|
||
|
|
box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.showcase-item img,
|
||
|
|
.showcase-item svg {
|
||
|
|
max-width: 100%;
|
||
|
|
height: auto;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-title {
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--vault-gold);
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-desc {
|
||
|
|
font-size: 0.95rem;
|
||
|
|
color: var(--vault-silver);
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.size-variants {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.size-box {
|
||
|
|
background: rgba(0, 217, 255, 0.1);
|
||
|
|
border: 1px solid var(--quantum-cyan);
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 0.75rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
min-height: 80px;
|
||
|
|
flex: 1;
|
||
|
|
min-width: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.size-box img,
|
||
|
|
.size-box svg {
|
||
|
|
max-height: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.size-label {
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: var(--quantum-cyan);
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-palette {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-swatch {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 150px;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 2px solid var(--border-color);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
transition: transform 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-swatch:hover .color-box {
|
||
|
|
transform: scale(1.05);
|
||
|
|
border-color: var(--quantum-cyan);
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-info {
|
||
|
|
color: var(--vault-silver);
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-name {
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-light);
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-hex {
|
||
|
|
font-family: "Courier New", monospace;
|
||
|
|
color: var(--quantum-cyan);
|
||
|
|
font-size: 0.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-example {
|
||
|
|
background: rgba(10, 25, 41, 0.9);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-example h4 {
|
||
|
|
color: var(--vault-gold);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-preview {
|
||
|
|
background: var(--quantum-deep);
|
||
|
|
border: 1px dashed var(--quantum-cyan);
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 1rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
min-height: 100px;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-preview img,
|
||
|
|
.usage-preview svg {
|
||
|
|
max-width: 100%;
|
||
|
|
max-height: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-desc {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: var(--vault-silver);
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.specs-table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.specs-table th,
|
||
|
|
.specs-table td {
|
||
|
|
padding: 1rem;
|
||
|
|
text-align: left;
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.specs-table th {
|
||
|
|
background: rgba(0, 217, 255, 0.1);
|
||
|
|
color: var(--quantum-cyan);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.specs-table tr:hover {
|
||
|
|
background: rgba(0, 217, 255, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.code-block {
|
||
|
|
background: var(--quantum-deep);
|
||
|
|
border-left: 4px solid var(--vault-gold);
|
||
|
|
padding: 1rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
border-radius: 4px;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
code {
|
||
|
|
font-family: "Courier New", monospace;
|
||
|
|
color: var(--quantum-cyan);
|
||
|
|
font-size: 0.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
background: var(--quantum-deep);
|
||
|
|
border-top: 1px solid var(--border-color);
|
||
|
|
padding: 2rem;
|
||
|
|
text-align: center;
|
||
|
|
color: var(--vault-silver);
|
||
|
|
margin-top: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkmark {
|
||
|
|
color: var(--quantum-cyan);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
header h1 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav ul {
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.showcase-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-palette {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
section {
|
||
|
|
padding: 1.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.animated-logo {
|
||
|
|
border: 2px dashed var(--quantum-cyan);
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.badge {
|
||
|
|
display: inline-block;
|
||
|
|
background: var(--rust-orange);
|
||
|
|
color: white;
|
||
|
|
padding: 0.25rem 0.75rem;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>🔐 SecretumVault</h1>
|
||
|
|
<p>Branding Assets & Design System</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<nav>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#logos">Logos</a></li>
|
||
|
|
<li><a href="#icons">Icons</a></li>
|
||
|
|
<li><a href="#colors">Colors</a></li>
|
||
|
|
<li><a href="#usage">Usage</a></li>
|
||
|
|
<li><a href="#specs">Specifications</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<!-- LOGOS SECTION -->
|
||
|
|
<section id="logos">
|
||
|
|
<h2>🎨 Logo Variations</h2>
|
||
|
|
|
||
|
|
<h3>Full Logo (Static)</h3>
|
||
|
|
<div class="showcase-grid">
|
||
|
|
<div class="showcase-item">
|
||
|
|
<div class="size-box">
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 200 200"
|
||
|
|
style="width: 100px; height: 100px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient
|
||
|
|
id="vaultGrad"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="50%" style="stop-color: #2a3f6a" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="goldAccent"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="cyanGlow"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #00d9ff" />
|
||
|
|
<stop offset="100%" style="stop-color: #0099cc" />
|
||
|
|
</linearGradient>
|
||
|
|
<filter id="glow">
|
||
|
|
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur" />
|
||
|
|
<feMergeNode in="SourceGraphic" />
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="85"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#vaultGrad)"
|
||
|
|
stroke-width="8"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="65"
|
||
|
|
fill="url(#vaultGrad)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="3"
|
||
|
|
/>
|
||
|
|
<g filter="url(#glow)" opacity="0.8">
|
||
|
|
<circle cx="100" cy="100" r="8" fill="url(#cyanGlow)" />
|
||
|
|
<circle cx="100" cy="60" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="140" cy="100" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="140" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="60" cy="100" r="4" fill="#00d9ff" />
|
||
|
|
</g>
|
||
|
|
<rect
|
||
|
|
x="97"
|
||
|
|
y="80"
|
||
|
|
width="6"
|
||
|
|
height="40"
|
||
|
|
rx="5"
|
||
|
|
fill="url(#goldAccent)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="20"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#goldAccent)"
|
||
|
|
stroke-width="4"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p class="item-title">secretumvault-logo.svg</p>
|
||
|
|
<p class="item-desc">
|
||
|
|
Standard full logo. Best for dark backgrounds.
|
||
|
|
</p>
|
||
|
|
<div class="size-variants">
|
||
|
|
<span style="font-size: 0.85rem; color: var(--quantum-cyan)"
|
||
|
|
>Min: 120px</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="showcase-item">
|
||
|
|
<div class="size-box">
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 200 200"
|
||
|
|
style="width: 100px; height: 100px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient
|
||
|
|
id="vaultGrad_s"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #0a1929" />
|
||
|
|
<stop offset="50%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="100%" style="stop-color: #2a3f6a" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="goldAccent_s"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="cyanGlow_s"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #00d9ff" />
|
||
|
|
<stop offset="100%" style="stop-color: #0099cc" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="85"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#vaultGrad_s)"
|
||
|
|
stroke-width="8"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="65"
|
||
|
|
fill="url(#vaultGrad_s)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="3"
|
||
|
|
/>
|
||
|
|
<circle cx="100" cy="100" r="8" fill="url(#cyanGlow_s)" />
|
||
|
|
<circle cx="100" cy="60" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="140" cy="100" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="140" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="60" cy="100" r="4" fill="#00d9ff" />
|
||
|
|
<rect
|
||
|
|
x="97"
|
||
|
|
y="80"
|
||
|
|
width="6"
|
||
|
|
height="40"
|
||
|
|
rx="5"
|
||
|
|
fill="url(#goldAccent_s)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="20"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#goldAccent_s)"
|
||
|
|
stroke-width="4"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p class="item-title">secretumvault-logo-s.svg</p>
|
||
|
|
<p class="item-desc">
|
||
|
|
Simplified variant. Good for light backgrounds.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="showcase-item">
|
||
|
|
<div class="size-box" style="background: white">
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 200 200"
|
||
|
|
style="width: 100px; height: 100px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient
|
||
|
|
id="vaultGrad_bn"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #ffffff" />
|
||
|
|
<stop offset="50%" style="stop-color: #e6e6e6" />
|
||
|
|
<stop offset="100%" style="stop-color: #cccccc" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="goldAccent_bn"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #c0a000" />
|
||
|
|
<stop offset="100%" style="stop-color: #8b6914" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="cyanGlow_bn"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #0088aa" />
|
||
|
|
<stop offset="100%" style="stop-color: #005577" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="85"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#vaultGrad_bn)"
|
||
|
|
stroke-width="8"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="65"
|
||
|
|
fill="url(#vaultGrad_bn)"
|
||
|
|
stroke="#b3b3b3"
|
||
|
|
stroke-width="3"
|
||
|
|
/>
|
||
|
|
<circle cx="100" cy="100" r="8" fill="url(#cyanGlow_bn)" />
|
||
|
|
<circle cx="100" cy="60" r="4" fill="#0088aa" />
|
||
|
|
<circle cx="140" cy="100" r="4" fill="#0088aa" />
|
||
|
|
<circle cx="100" cy="140" r="4" fill="#0088aa" />
|
||
|
|
<circle cx="60" cy="100" r="4" fill="#0088aa" />
|
||
|
|
<rect
|
||
|
|
x="97"
|
||
|
|
y="80"
|
||
|
|
width="6"
|
||
|
|
height="40"
|
||
|
|
rx="5"
|
||
|
|
fill="url(#goldAccent_bn)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="20"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#goldAccent_bn)"
|
||
|
|
stroke-width="4"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p class="item-title">secretumvault-logo-bn.svg</p>
|
||
|
|
<p class="item-desc">Black/night variant. For dark backgrounds.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Horizontal Logo</h3>
|
||
|
|
<div class="showcase-item" style="text-align: left; max-width: 100%">
|
||
|
|
<p class="item-title" style="text-align: center">
|
||
|
|
secretumvault-logo-h.svg
|
||
|
|
</p>
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 400 120"
|
||
|
|
style="
|
||
|
|
width: 100%;
|
||
|
|
max-width: 400px;
|
||
|
|
margin: 1rem auto;
|
||
|
|
display: block;
|
||
|
|
"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient
|
||
|
|
id="vaultGrad_h"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="50%" style="stop-color: #2a3f6a" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="goldAccent_h"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="cyanGlow_h"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #00d9ff" />
|
||
|
|
<stop offset="100%" style="stop-color: #0099cc" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<g>
|
||
|
|
<circle
|
||
|
|
cx="60"
|
||
|
|
cy="60"
|
||
|
|
r="45"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#vaultGrad_h)"
|
||
|
|
stroke-width="5"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="60"
|
||
|
|
cy="60"
|
||
|
|
r="35"
|
||
|
|
fill="url(#vaultGrad_h)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="2"
|
||
|
|
/>
|
||
|
|
<circle cx="60" cy="60" r="5" fill="url(#cyanGlow_h)" />
|
||
|
|
<circle cx="60" cy="38" r="2.5" fill="#00d9ff" />
|
||
|
|
<circle cx="82" cy="60" r="2.5" fill="#00d9ff" />
|
||
|
|
<circle cx="60" cy="82" r="2.5" fill="#00d9ff" />
|
||
|
|
<circle cx="38" cy="60" r="2.5" fill="#00d9ff" />
|
||
|
|
<rect
|
||
|
|
x="58"
|
||
|
|
y="48"
|
||
|
|
width="4"
|
||
|
|
height="24"
|
||
|
|
rx="2"
|
||
|
|
fill="url(#goldAccent_h)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="60"
|
||
|
|
cy="60"
|
||
|
|
r="13"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#goldAccent_h)"
|
||
|
|
stroke-width="2.5"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<text
|
||
|
|
x="150"
|
||
|
|
y="72"
|
||
|
|
font-family="system-ui, sans-serif"
|
||
|
|
font-size="32"
|
||
|
|
font-weight="700"
|
||
|
|
fill="#0a1929"
|
||
|
|
>
|
||
|
|
SecretumVault
|
||
|
|
</text>
|
||
|
|
<line
|
||
|
|
x1="150"
|
||
|
|
y1="82"
|
||
|
|
x2="380"
|
||
|
|
y2="82"
|
||
|
|
stroke="url(#cyanGlow_h)"
|
||
|
|
stroke-width="2"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<p class="item-desc" style="text-align: center; margin-top: 1rem">
|
||
|
|
Perfect for headers and horizontal layouts. Minimum width: 240px.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Animated Logo <span class="badge">Interactive</span></h3>
|
||
|
|
<div class="showcase-item animated-logo" style="text-align: center">
|
||
|
|
<p class="item-title">secretumvault-quantum-vault.svg</p>
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 200 200"
|
||
|
|
style="
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
margin: 1rem auto;
|
||
|
|
display: block;
|
||
|
|
"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient
|
||
|
|
id="vaultGrad_anim"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="50%" style="stop-color: #2a3f6a" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="goldAccent_anim"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="cyanGlow_anim"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #00d9ff" />
|
||
|
|
<stop offset="100%" style="stop-color: #0099cc" />
|
||
|
|
</linearGradient>
|
||
|
|
<filter id="glow_anim">
|
||
|
|
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur" />
|
||
|
|
<feMergeNode in="SourceGraphic" />
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="85"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#vaultGrad_anim)"
|
||
|
|
stroke-width="8"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="85"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#cyanGlow_anim)"
|
||
|
|
stroke-width="1"
|
||
|
|
stroke-dasharray="8 12"
|
||
|
|
opacity="0.6"
|
||
|
|
>
|
||
|
|
<animateTransform
|
||
|
|
attributeName="transform"
|
||
|
|
type="rotate"
|
||
|
|
from="0 100 100"
|
||
|
|
to="360 100 100"
|
||
|
|
dur="20s"
|
||
|
|
repeatCount="indefinite"
|
||
|
|
/>
|
||
|
|
</circle>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="65"
|
||
|
|
fill="url(#vaultGrad_anim)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="3"
|
||
|
|
/>
|
||
|
|
<g filter="url(#glow_anim)" opacity="0.8">
|
||
|
|
<circle cx="100" cy="100" r="8" fill="url(#cyanGlow_anim)">
|
||
|
|
<animate
|
||
|
|
attributeName="r"
|
||
|
|
values="8;10;8"
|
||
|
|
dur="2s"
|
||
|
|
repeatCount="indefinite"
|
||
|
|
/>
|
||
|
|
</circle>
|
||
|
|
<g>
|
||
|
|
<animateTransform
|
||
|
|
attributeName="transform"
|
||
|
|
type="rotate"
|
||
|
|
from="0 100 100"
|
||
|
|
to="360 100 100"
|
||
|
|
dur="8s"
|
||
|
|
repeatCount="indefinite"
|
||
|
|
/>
|
||
|
|
<circle cx="100" cy="60" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="140" cy="100" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="140" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="60" cy="100" r="4" fill="#00d9ff" />
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<animateTransform
|
||
|
|
attributeName="transform"
|
||
|
|
type="rotate"
|
||
|
|
from="360 100 100"
|
||
|
|
to="0 100 100"
|
||
|
|
dur="12s"
|
||
|
|
repeatCount="indefinite"
|
||
|
|
/>
|
||
|
|
<circle cx="128" cy="72" r="3" fill="#8b5cf6" />
|
||
|
|
<circle cx="128" cy="128" r="3" fill="#8b5cf6" />
|
||
|
|
<circle cx="72" cy="128" r="3" fill="#8b5cf6" />
|
||
|
|
<circle cx="72" cy="72" r="3" fill="#8b5cf6" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M100 92 L100 60 M108 100 L140 100 M100 108 L100 140 M92 100 L60 100"
|
||
|
|
stroke="#00d9ff"
|
||
|
|
stroke-width="1"
|
||
|
|
opacity="0.5"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<rect
|
||
|
|
x="97"
|
||
|
|
y="80"
|
||
|
|
width="6"
|
||
|
|
height="40"
|
||
|
|
rx="5"
|
||
|
|
fill="url(#goldAccent_anim)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="20"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#goldAccent_anim)"
|
||
|
|
stroke-width="4"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<p class="item-desc">
|
||
|
|
Full animated version with orbiting electrons and pulsing core.
|
||
|
|
Great for loading states and interactive sections.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ICONS SECTION -->
|
||
|
|
<section id="icons">
|
||
|
|
<h2>⚛️ Icon Variations</h2>
|
||
|
|
|
||
|
|
<div class="showcase-grid">
|
||
|
|
<div class="showcase-item">
|
||
|
|
<div class="size-variants">
|
||
|
|
<div class="size-box">
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 200 200"
|
||
|
|
style="width: 32px; height: 32px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient
|
||
|
|
id="ig1"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="ig2"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="95"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#ig1)"
|
||
|
|
stroke-width="6"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="75"
|
||
|
|
fill="url(#ig1)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="2.5"
|
||
|
|
/>
|
||
|
|
<circle cx="100" cy="100" r="10" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="65" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="135" cy="100" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="135" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="65" cy="100" r="5" fill="#00d9ff" />
|
||
|
|
<rect
|
||
|
|
x="97"
|
||
|
|
y="75"
|
||
|
|
width="6"
|
||
|
|
height="50"
|
||
|
|
rx="3"
|
||
|
|
fill="url(#ig2)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="25"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#ig2)"
|
||
|
|
stroke-width="3"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<div class="size-label">32px</div>
|
||
|
|
</div>
|
||
|
|
<div class="size-box">
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 200 200"
|
||
|
|
style="width: 48px; height: 48px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient
|
||
|
|
id="ig3"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="ig4"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="95"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#ig3)"
|
||
|
|
stroke-width="6"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="75"
|
||
|
|
fill="url(#ig3)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="2.5"
|
||
|
|
/>
|
||
|
|
<circle cx="100" cy="100" r="10" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="65" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="135" cy="100" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="135" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="65" cy="100" r="5" fill="#00d9ff" />
|
||
|
|
<rect
|
||
|
|
x="97"
|
||
|
|
y="75"
|
||
|
|
width="6"
|
||
|
|
height="50"
|
||
|
|
rx="3"
|
||
|
|
fill="url(#ig4)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="25"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#ig4)"
|
||
|
|
stroke-width="3"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<div class="size-label">48px</div>
|
||
|
|
</div>
|
||
|
|
<div class="size-box">
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 200 200"
|
||
|
|
style="width: 64px; height: 64px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient
|
||
|
|
id="ig5"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="ig6"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="95"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#ig5)"
|
||
|
|
stroke-width="6"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="75"
|
||
|
|
fill="url(#ig5)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="2.5"
|
||
|
|
/>
|
||
|
|
<circle cx="100" cy="100" r="10" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="65" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="135" cy="100" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="135" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="65" cy="100" r="5" fill="#00d9ff" />
|
||
|
|
<rect
|
||
|
|
x="97"
|
||
|
|
y="75"
|
||
|
|
width="6"
|
||
|
|
height="50"
|
||
|
|
rx="3"
|
||
|
|
fill="url(#ig6)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="25"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#ig6)"
|
||
|
|
stroke-width="3"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<div class="size-label">64px</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="item-title">secretumvault-icon.svg</p>
|
||
|
|
<p class="item-desc">
|
||
|
|
Standard vault icon. Scalable from 16px to 512px. Use for UI
|
||
|
|
elements and buttons.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="showcase-item">
|
||
|
|
<div class="size-box">
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 200 200"
|
||
|
|
style="width: 48px; height: 48px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="is1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="50%" style="stop-color: #2a3f6a" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="is2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="95"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#is1)"
|
||
|
|
stroke-width="8"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="75"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#is2)"
|
||
|
|
stroke-width="3"
|
||
|
|
/>
|
||
|
|
<circle cx="100" cy="100" r="8" fill="url(#is2)" />
|
||
|
|
<rect
|
||
|
|
x="97"
|
||
|
|
y="70"
|
||
|
|
width="6"
|
||
|
|
height="60"
|
||
|
|
rx="3"
|
||
|
|
fill="url(#is2)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="20"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#is2)"
|
||
|
|
stroke-width="2.5"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p class="item-title">secretumvault-icon-s.svg</p>
|
||
|
|
<p class="item-desc">
|
||
|
|
Simplified vault icon. Minimal design for small sizes and simple
|
||
|
|
use cases.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="showcase-item"
|
||
|
|
style="background: white; color: var(--quantum-deep)"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="size-box"
|
||
|
|
style="background: #f0f0f0; border-color: var(--quantum-blue)"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 32 32"
|
||
|
|
style="width: 32px; height: 32px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="fav1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="fav2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<rect width="32" height="32" fill="#0a1929" />
|
||
|
|
<circle
|
||
|
|
cx="16"
|
||
|
|
cy="16"
|
||
|
|
r="14"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#fav1)"
|
||
|
|
stroke-width="1.5"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="16"
|
||
|
|
cy="16"
|
||
|
|
r="11"
|
||
|
|
fill="url(#fav1)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="1"
|
||
|
|
/>
|
||
|
|
<circle cx="16" cy="16" r="2" fill="#00d9ff" />
|
||
|
|
<circle cx="16" cy="10" r="1" fill="#00d9ff" />
|
||
|
|
<circle cx="22" cy="16" r="1" fill="#00d9ff" />
|
||
|
|
<circle cx="16" cy="22" r="1" fill="#00d9ff" />
|
||
|
|
<circle cx="10" cy="16" r="1" fill="#00d9ff" />
|
||
|
|
<rect
|
||
|
|
x="15"
|
||
|
|
y="12"
|
||
|
|
width="2"
|
||
|
|
height="8"
|
||
|
|
rx="1"
|
||
|
|
fill="url(#fav2)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="16"
|
||
|
|
cy="16"
|
||
|
|
r="4"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#fav2)"
|
||
|
|
stroke-width="0.8"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p class="item-title" style="color: var(--vault-gold)">
|
||
|
|
favicon.svg
|
||
|
|
</p>
|
||
|
|
<p class="item-desc" style="color: var(--quantum-blue)">
|
||
|
|
Favicon for browser tabs. Optimized for 16px and 32px sizes.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- COLORS SECTION -->
|
||
|
|
<section id="colors">
|
||
|
|
<h2>🎨 Color Palette</h2>
|
||
|
|
|
||
|
|
<h3>Primary Colors</h3>
|
||
|
|
<div class="color-palette">
|
||
|
|
<div class="color-swatch">
|
||
|
|
<div class="color-box" style="background: #0a1929"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<div class="color-name">Quantum Deep</div>
|
||
|
|
<div class="color-hex">#0A1929</div>
|
||
|
|
<p style="font-size: 0.85rem; margin-top: 0.5rem">
|
||
|
|
Primary backgrounds, depth
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-swatch">
|
||
|
|
<div class="color-box" style="background: #1a2744"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<div class="color-name">Quantum Blue</div>
|
||
|
|
<div class="color-hex">#1A2744</div>
|
||
|
|
<p style="font-size: 0.85rem; margin-top: 0.5rem">
|
||
|
|
Secondary surfaces
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-swatch">
|
||
|
|
<div class="color-box" style="background: #00d9ff"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<div class="color-name">Quantum Cyan</div>
|
||
|
|
<div class="color-hex">#00D9FF</div>
|
||
|
|
<p style="font-size: 0.85rem; margin-top: 0.5rem">
|
||
|
|
Accents, interactive
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-swatch">
|
||
|
|
<div class="color-box" style="background: #ffd700"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<div class="color-name">Vault Gold</div>
|
||
|
|
<div class="color-hex">#FFD700</div>
|
||
|
|
<p style="font-size: 0.85rem; margin-top: 0.5rem">
|
||
|
|
Premium, security
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Secondary Colors</h3>
|
||
|
|
<div class="color-palette">
|
||
|
|
<div class="color-swatch">
|
||
|
|
<div class="color-box" style="background: #8b5cf6"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<div class="color-name">Quantum Violet</div>
|
||
|
|
<div class="color-hex">#8B5CF6</div>
|
||
|
|
<p style="font-size: 0.85rem; margin-top: 0.5rem">
|
||
|
|
Gradients, quantum
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-swatch">
|
||
|
|
<div class="color-box" style="background: #ce412b"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<div class="color-name">Rust Orange</div>
|
||
|
|
<div class="color-hex">#CE412B</div>
|
||
|
|
<p style="font-size: 0.85rem; margin-top: 0.5rem">
|
||
|
|
Rust references, CTAs
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-swatch">
|
||
|
|
<div class="color-box" style="background: #c0c0c0"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<div class="color-name">Vault Silver</div>
|
||
|
|
<div class="color-hex">#C0C0C0</div>
|
||
|
|
<p style="font-size: 0.85rem; margin-top: 0.5rem">Text on dark</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- USAGE SECTION -->
|
||
|
|
<section id="usage">
|
||
|
|
<h2>📖 Usage Examples</h2>
|
||
|
|
|
||
|
|
<h3>Web Header</h3>
|
||
|
|
<div class="usage-grid">
|
||
|
|
<div class="usage-example">
|
||
|
|
<h4>Horizontal Logo</h4>
|
||
|
|
<div class="usage-preview">
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 400 120"
|
||
|
|
style="width: 100%; max-width: 300px; height: auto"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="uh1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="50%" style="stop-color: #2a3f6a" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="uh2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="uh3" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color: #00d9ff" />
|
||
|
|
<stop offset="100%" style="stop-color: #0099cc" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<g>
|
||
|
|
<circle
|
||
|
|
cx="60"
|
||
|
|
cy="60"
|
||
|
|
r="45"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#uh1)"
|
||
|
|
stroke-width="5"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="60"
|
||
|
|
cy="60"
|
||
|
|
r="35"
|
||
|
|
fill="url(#uh1)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="2"
|
||
|
|
/>
|
||
|
|
<circle cx="60" cy="60" r="5" fill="url(#uh3)" />
|
||
|
|
<circle cx="60" cy="38" r="2.5" fill="#00d9ff" />
|
||
|
|
<circle cx="82" cy="60" r="2.5" fill="#00d9ff" />
|
||
|
|
<circle cx="60" cy="82" r="2.5" fill="#00d9ff" />
|
||
|
|
<circle cx="38" cy="60" r="2.5" fill="#00d9ff" />
|
||
|
|
<rect
|
||
|
|
x="58"
|
||
|
|
y="48"
|
||
|
|
width="4"
|
||
|
|
height="24"
|
||
|
|
rx="2"
|
||
|
|
fill="url(#uh2)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="60"
|
||
|
|
cy="60"
|
||
|
|
r="13"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#uh2)"
|
||
|
|
stroke-width="2.5"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<text
|
||
|
|
x="150"
|
||
|
|
y="75"
|
||
|
|
font-family="system-ui, sans-serif"
|
||
|
|
font-size="42"
|
||
|
|
font-weight="700"
|
||
|
|
fill="#f5f5f5"
|
||
|
|
>
|
||
|
|
SecretumVault
|
||
|
|
</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="usage-desc">
|
||
|
|
Perfect for website headers and navigation. Minimum width: 240px.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="usage-example">
|
||
|
|
<h4>Icon in Navigation</h4>
|
||
|
|
<div class="usage-preview">
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 200 200"
|
||
|
|
style="width: 40px; height: 40px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="un1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="un2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="95"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#un1)"
|
||
|
|
stroke-width="6"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="75"
|
||
|
|
fill="url(#un1)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="2.5"
|
||
|
|
/>
|
||
|
|
<circle cx="100" cy="100" r="10" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="65" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="135" cy="100" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="135" r="5" fill="#00d9ff" />
|
||
|
|
<circle cx="65" cy="100" r="5" fill="#00d9ff" />
|
||
|
|
<rect
|
||
|
|
x="97"
|
||
|
|
y="75"
|
||
|
|
width="6"
|
||
|
|
height="50"
|
||
|
|
rx="3"
|
||
|
|
fill="url(#un2)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="25"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#un2)"
|
||
|
|
stroke-width="3"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="usage-desc">
|
||
|
|
Use 32px-48px sizes for UI navigation. Scale maintains clarity.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="usage-example">
|
||
|
|
<h4>Favicon</h4>
|
||
|
|
<div class="usage-preview">
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 32 32"
|
||
|
|
style="width: 32px; height: 32px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="ufv1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="ufv2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<rect width="32" height="32" fill="#0a1929" />
|
||
|
|
<circle
|
||
|
|
cx="16"
|
||
|
|
cy="16"
|
||
|
|
r="14"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#ufv1)"
|
||
|
|
stroke-width="1.5"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="16"
|
||
|
|
cy="16"
|
||
|
|
r="11"
|
||
|
|
fill="url(#ufv1)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="1"
|
||
|
|
/>
|
||
|
|
<circle cx="16" cy="16" r="2" fill="#00d9ff" />
|
||
|
|
<circle cx="16" cy="10" r="1" fill="#00d9ff" />
|
||
|
|
<circle cx="22" cy="16" r="1" fill="#00d9ff" />
|
||
|
|
<circle cx="16" cy="22" r="1" fill="#00d9ff" />
|
||
|
|
<circle cx="10" cy="16" r="1" fill="#00d9ff" />
|
||
|
|
<rect
|
||
|
|
x="15"
|
||
|
|
y="12"
|
||
|
|
width="2"
|
||
|
|
height="8"
|
||
|
|
rx="1"
|
||
|
|
fill="url(#ufv2)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="16"
|
||
|
|
cy="16"
|
||
|
|
r="4"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#ufv2)"
|
||
|
|
stroke-width="0.8"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="usage-desc">
|
||
|
|
Optimized for browser tabs. Use 16px or 32px variants.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Background Compatibility</h3>
|
||
|
|
<div class="showcase-grid">
|
||
|
|
<div class="showcase-item">
|
||
|
|
<div
|
||
|
|
class="usage-preview"
|
||
|
|
style="background: #0a1929; border-color: #00d9ff"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 200 200"
|
||
|
|
style="width: 80px; height: 80px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient
|
||
|
|
id="udark1"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #1a2744" />
|
||
|
|
<stop offset="50%" style="stop-color: #2a3f6a" />
|
||
|
|
<stop offset="100%" style="stop-color: #0a1929" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="udark2"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #ffd700" />
|
||
|
|
<stop offset="100%" style="stop-color: #b8860b" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="udark3"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #00d9ff" />
|
||
|
|
<stop offset="100%" style="stop-color: #0099cc" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="85"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#udark1)"
|
||
|
|
stroke-width="8"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="65"
|
||
|
|
fill="url(#udark1)"
|
||
|
|
stroke="#2a3f6a"
|
||
|
|
stroke-width="3"
|
||
|
|
/>
|
||
|
|
<circle cx="100" cy="100" r="8" fill="url(#udark3)" />
|
||
|
|
<circle cx="100" cy="60" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="140" cy="100" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="100" cy="140" r="4" fill="#00d9ff" />
|
||
|
|
<circle cx="60" cy="100" r="4" fill="#00d9ff" />
|
||
|
|
<rect
|
||
|
|
x="97"
|
||
|
|
y="80"
|
||
|
|
width="6"
|
||
|
|
height="40"
|
||
|
|
rx="5"
|
||
|
|
fill="url(#udark2)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="20"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#udark2)"
|
||
|
|
stroke-width="4"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p class="item-title">✓ Dark Background</p>
|
||
|
|
<p class="item-desc">
|
||
|
|
Use on #0A1929, #1A2744, or black backgrounds.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="showcase-item">
|
||
|
|
<div
|
||
|
|
class="usage-preview"
|
||
|
|
style="background: white; border-color: #1a2744"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 200 200"
|
||
|
|
style="width: 80px; height: 80px"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<linearGradient
|
||
|
|
id="ulight1"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #ffffff" />
|
||
|
|
<stop offset="50%" style="stop-color: #e6e6e6" />
|
||
|
|
<stop offset="100%" style="stop-color: #cccccc" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="ulight2"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #c0a000" />
|
||
|
|
<stop offset="100%" style="stop-color: #8b6914" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="ulight3"
|
||
|
|
x1="0%"
|
||
|
|
y1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" style="stop-color: #0088aa" />
|
||
|
|
<stop offset="100%" style="stop-color: #005577" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="85"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#ulight1)"
|
||
|
|
stroke-width="8"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="65"
|
||
|
|
fill="url(#ulight1)"
|
||
|
|
stroke="#b3b3b3"
|
||
|
|
stroke-width="3"
|
||
|
|
/>
|
||
|
|
<circle cx="100" cy="100" r="8" fill="url(#ulight3)" />
|
||
|
|
<circle cx="100" cy="60" r="4" fill="#0088aa" />
|
||
|
|
<circle cx="140" cy="100" r="4" fill="#0088aa" />
|
||
|
|
<circle cx="100" cy="140" r="4" fill="#0088aa" />
|
||
|
|
<circle cx="60" cy="100" r="4" fill="#0088aa" />
|
||
|
|
<rect
|
||
|
|
x="97"
|
||
|
|
y="80"
|
||
|
|
width="6"
|
||
|
|
height="40"
|
||
|
|
rx="5"
|
||
|
|
fill="url(#ulight2)"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="20"
|
||
|
|
fill="none"
|
||
|
|
stroke="url(#ulight2)"
|
||
|
|
stroke-width="4"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p class="item-title">✓ Light Background</p>
|
||
|
|
<p class="item-desc">
|
||
|
|
Use on white, #F5F5F5, or light gray backgrounds.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SPECIFICATIONS SECTION -->
|
||
|
|
<section id="specs">
|
||
|
|
<h2>📏 Specifications & Guidelines</h2>
|
||
|
|
|
||
|
|
<h3>Sizing Guidelines</h3>
|
||
|
|
<table class="specs-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Asset</th>
|
||
|
|
<th>Minimum Size</th>
|
||
|
|
<th>Recommended Sizes</th>
|
||
|
|
<th>Usage</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Full Logo</strong></td>
|
||
|
|
<td>120px</td>
|
||
|
|
<td>120px, 240px, 360px</td>
|
||
|
|
<td>Hero sections, documentation headers</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Horizontal Logo</strong></td>
|
||
|
|
<td>240px</td>
|
||
|
|
<td>240px, 320px, 480px</td>
|
||
|
|
<td>Website headers, navigation</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Icon</strong></td>
|
||
|
|
<td>32px</td>
|
||
|
|
<td>32px, 48px, 64px, 128px</td>
|
||
|
|
<td>UI buttons, navigation, badges</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Icon (Simplified)</strong></td>
|
||
|
|
<td>16px</td>
|
||
|
|
<td>16px, 24px, 32px</td>
|
||
|
|
<td>Small UI elements, compact interfaces</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Favicon</strong></td>
|
||
|
|
<td>16px</td>
|
||
|
|
<td>16px, 32px</td>
|
||
|
|
<td>Browser tabs</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>Spacing Guidelines</h3>
|
||
|
|
<div class="showcase-item">
|
||
|
|
<p style="margin-bottom: 1rem">
|
||
|
|
Maintain clear space around logos equal to
|
||
|
|
<strong>half the logo height</strong> on all sides:
|
||
|
|
</p>
|
||
|
|
<div class="code-block">
|
||
|
|
<code
|
||
|
|
>clear_space = logo_height / 2<br />
|
||
|
|
Example: 120px logo → 60px clear space on all sides</code
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>File Format Guidelines</h3>
|
||
|
|
<table class="specs-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Format</th>
|
||
|
|
<th>Best For</th>
|
||
|
|
<th>Advantages</th>
|
||
|
|
<th>When to Use</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><strong>SVG</strong></td>
|
||
|
|
<td>Web, scalable</td>
|
||
|
|
<td>Infinitely scalable, small file size, animatable</td>
|
||
|
|
<td>All web use, recommended default</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>PNG</strong></td>
|
||
|
|
<td>Raster export</td>
|
||
|
|
<td>Transparency support, compatibility</td>
|
||
|
|
<td>Print, legacy systems</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>WebP</strong></td>
|
||
|
|
<td>Modern web</td>
|
||
|
|
<td>Smaller than PNG, better compression</td>
|
||
|
|
<td>Performance-critical applications</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>Accessibility</h3>
|
||
|
|
<div class="showcase-item">
|
||
|
|
<p><strong>Always include meaningful alt text:</strong></p>
|
||
|
|
<div class="code-block">
|
||
|
|
<code
|
||
|
|
>✓ alt="SecretumVault security vault logo"<br />
|
||
|
|
✓ alt="Quantum encryption icon"<br />
|
||
|
|
✗ alt="logo.svg"<br />
|
||
|
|
✗ alt="image"</code
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Animation Guidelines</h3>
|
||
|
|
<table class="specs-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>File</th>
|
||
|
|
<th>Animation</th>
|
||
|
|
<th>Duration</th>
|
||
|
|
<th>Use Case</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>secretumvault-quantum-vault.svg</td>
|
||
|
|
<td>Rotating orbits, pulsing core</td>
|
||
|
|
<td>8s-20s loops</td>
|
||
|
|
<td>Loading states, interactive sections</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>All other files</td>
|
||
|
|
<td>None (static)</td>
|
||
|
|
<td>—</td>
|
||
|
|
<td>Standard branding, performance</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>Performance Tips</h3>
|
||
|
|
<div class="showcase-item">
|
||
|
|
<ul
|
||
|
|
style="
|
||
|
|
text-align: left;
|
||
|
|
margin-left: 1.5rem;
|
||
|
|
color: var(--vault-silver);
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<li style="margin: 0.5rem 0">
|
||
|
|
<strong class="checkmark">✓</strong> Use SVG for web (best
|
||
|
|
scalability and performance)
|
||
|
|
</li>
|
||
|
|
<li style="margin: 0.5rem 0">
|
||
|
|
<strong class="checkmark">✓</strong> Inline SVG for critical logos
|
||
|
|
to avoid extra HTTP requests
|
||
|
|
</li>
|
||
|
|
<li style="margin: 0.5rem 0">
|
||
|
|
<strong class="checkmark">✓</strong> Use animated version only
|
||
|
|
when necessary
|
||
|
|
</li>
|
||
|
|
<li style="margin: 0.5rem 0">
|
||
|
|
<strong class="checkmark">✓</strong> Lazy-load non-critical images
|
||
|
|
</li>
|
||
|
|
<li style="margin: 0.5rem 0">
|
||
|
|
<strong class="checkmark">✓</strong> Optimize SVGs before
|
||
|
|
deployment (remove unused code)
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>📚 Documentation</h2>
|
||
|
|
<div class="usage-grid">
|
||
|
|
<div class="usage-example">
|
||
|
|
<h4>README.md</h4>
|
||
|
|
<p class="usage-desc">
|
||
|
|
Directory structure and asset inventory. Quick reference for what
|
||
|
|
files are available.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="usage-example">
|
||
|
|
<h4>BRAND-GUIDELINES.md</h4>
|
||
|
|
<p class="usage-desc">
|
||
|
|
Complete brand identity standards, color palette, typography, and
|
||
|
|
usage rules.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="usage-example">
|
||
|
|
<h4>how-to-use.md</h4>
|
||
|
|
<p class="usage-desc">
|
||
|
|
Practical implementation guide with code examples and integration
|
||
|
|
patterns.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>SecretumVault Branding Assets</p>
|
||
|
|
<p style="font-size: 0.95rem; margin-top: 0.5rem">
|
||
|
|
Post-quantum cryptographic secrets management
|
||
|
|
</p>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|