1439 lines
44 KiB
HTML
1439 lines
44 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>StratumIOps Branding Assets</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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html {
|
|||
|
|
scroll-behavior: smooth;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--stratum-primary: #6366f1;
|
|||
|
|
--stratum-secondary: #4f46e5;
|
|||
|
|
--stratum-cyan: #22d3ee;
|
|||
|
|
--stratum-cyan-dark: #06b6d4;
|
|||
|
|
--stratum-slate: #64748b;
|
|||
|
|
|
|||
|
|
/* Light mode */
|
|||
|
|
--bg-primary: #ffffff;
|
|||
|
|
--bg-secondary: #f8f9fa;
|
|||
|
|
--text-primary: #1f2937;
|
|||
|
|
--text-secondary: #6b7280;
|
|||
|
|
--border-color: #e5e7eb;
|
|||
|
|
--card-bg: #ffffff;
|
|||
|
|
--card-shadow: rgba(99, 102, 241, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode {
|
|||
|
|
--bg-primary: #0f172a;
|
|||
|
|
--bg-secondary: #1e293b;
|
|||
|
|
--text-primary: #f1f5f9;
|
|||
|
|
--text-secondary: #cbd5e1;
|
|||
|
|
--border-color: #404040;
|
|||
|
|
--card-bg: #1a1a2e;
|
|||
|
|
--card-shadow: rgba(34, 211, 238, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family:
|
|||
|
|
-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;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1400px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
padding: 30px;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
135deg,
|
|||
|
|
var(--stratum-primary) 0%,
|
|||
|
|
var(--stratum-secondary) 100%
|
|||
|
|
);
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header h1 {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
font-family:
|
|||
|
|
"Inter",
|
|||
|
|
-apple-system,
|
|||
|
|
BlinkMacSystemFont,
|
|||
|
|
sans-serif;
|
|||
|
|
font-weight: 700;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header p {
|
|||
|
|
opacity: 0.9;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-toggle {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
border: 2px solid rgba(255, 255, 255, 0.4);
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-weight: 500;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-toggle:hover {
|
|||
|
|
background: rgba(255, 255, 255, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 1.6rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--stratum-cyan);
|
|||
|
|
margin: 40px 0 20px 0;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
border-bottom: 3px solid var(--stratum-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|||
|
|
gap: 25px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
background: var(--card-bg);
|
|||
|
|
border: 2px solid var(--border-color);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card:hover {
|
|||
|
|
box-shadow: 0 12px 24px var(--card-shadow);
|
|||
|
|
transform: translateY(-6px);
|
|||
|
|
border-color: var(--stratum-cyan);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-preview {
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
padding: 30px;
|
|||
|
|
height: 280px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-bottom: 1px solid var(--border-color);
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-preview img {
|
|||
|
|
max-width: 100%;
|
|||
|
|
max-height: 95%;
|
|||
|
|
width: auto;
|
|||
|
|
height: auto;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-info {
|
|||
|
|
padding: 20px;
|
|||
|
|
flex-grow: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-title {
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--stratum-cyan);
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-label {
|
|||
|
|
display: inline-block;
|
|||
|
|
background: rgba(34, 211, 238, 0.15);
|
|||
|
|
color: var(--stratum-cyan);
|
|||
|
|
padding: 4px 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
width: fit-content;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-specs {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 10px;
|
|||
|
|
margin: 15px 0;
|
|||
|
|
padding: 15px 0;
|
|||
|
|
border-top: 1px solid var(--border-color);
|
|||
|
|
border-bottom: 1px solid var(--border-color);
|
|||
|
|
flex-grow: 1;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec-label {
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec-value {
|
|||
|
|
color: var(--stratum-cyan);
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-name-row {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-name {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 6px 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-family: "Courier New", monospace;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
background: rgba(34, 211, 238, 0.05);
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-name:hover {
|
|||
|
|
background: rgba(34, 211, 238, 0.15);
|
|||
|
|
color: var(--stratum-cyan);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.copy-btn {
|
|||
|
|
background: none;
|
|||
|
|
border: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
color: var(--stratum-cyan);
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.copy-btn:hover {
|
|||
|
|
transform: scale(1.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-palette {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|||
|
|
gap: 15px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-box {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border: 2px solid var(--border-color);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-box:hover {
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-sample {
|
|||
|
|
height: 80px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-name {
|
|||
|
|
padding: 10px;
|
|||
|
|
background: var(--card-bg);
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-value {
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
font-family: "Courier New", monospace;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-box {
|
|||
|
|
background: var(--card-bg);
|
|||
|
|
border-left: 4px solid var(--stratum-cyan);
|
|||
|
|
padding: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-box h3 {
|
|||
|
|
color: var(--stratum-cyan);
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-box p {
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.typography-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 25px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-sample {
|
|||
|
|
background: var(--card-bg);
|
|||
|
|
border: 2px solid var(--border-color);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 25px;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-sample:hover {
|
|||
|
|
border-color: var(--stratum-cyan);
|
|||
|
|
box-shadow: 0 8px 16px var(--card-shadow);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-display {
|
|||
|
|
font-family:
|
|||
|
|
"Inter",
|
|||
|
|
-apple-system,
|
|||
|
|
BlinkMacSystemFont,
|
|||
|
|
sans-serif;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-label {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-specs {
|
|||
|
|
margin-top: 15px;
|
|||
|
|
padding-top: 15px;
|
|||
|
|
border-top: 1px solid var(--border-color);
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 10px;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-spec-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-spec-label {
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
margin-bottom: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-spec-value {
|
|||
|
|
color: var(--stratum-cyan);
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-family: "Courier New", monospace;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-preview img {
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: opacity 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-preview img:hover {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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(--stratum-cyan);
|
|||
|
|
box-shadow: 0 8px 16px var(--card-shadow);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scalability-item-display img {
|
|||
|
|
max-width: 100%;
|
|||
|
|
max-height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 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, 23, 42, 0.8);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav .nav-container {
|
|||
|
|
max-width: 1400px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav h2 {
|
|||
|
|
font-size: 1.3rem;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
135deg,
|
|||
|
|
var(--stratum-primary),
|
|||
|
|
var(--stratum-cyan)
|
|||
|
|
);
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
background-clip: text;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav ul {
|
|||
|
|
display: flex;
|
|||
|
|
list-style: none;
|
|||
|
|
gap: 25px;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav a {
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
transition: color 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav a:hover {
|
|||
|
|
color: var(--stratum-cyan);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav .theme-toggle {
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
background: rgba(34, 211, 238, 0.15);
|
|||
|
|
border: 2px solid var(--stratum-cyan);
|
|||
|
|
color: var(--stratum-cyan);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-weight: 600;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav .theme-toggle:hover {
|
|||
|
|
background: var(--stratum-cyan);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
section {
|
|||
|
|
scroll-margin-top: 80px;
|
|||
|
|
margin-bottom: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer {
|
|||
|
|
margin-top: 60px;
|
|||
|
|
padding: 30px;
|
|||
|
|
border-top: 1px solid var(--border-color);
|
|||
|
|
text-align: center;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
header {
|
|||
|
|
flex-direction: column;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 1.3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<!-- Navigation -->
|
|||
|
|
<nav>
|
|||
|
|
<div class="nav-container">
|
|||
|
|
<h2>StratumIOps Branding</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#logos">Logos</a></li>
|
|||
|
|
<li><a href="#icons">Icons</a></li>
|
|||
|
|
<li><a href="#mono">Monochrome</a></li>
|
|||
|
|
<li><a href="#social">Social</a></li>
|
|||
|
|
<li><a href="#scalability">Scalability</a></li>
|
|||
|
|
<li><a href="#colors">Colors</a></li>
|
|||
|
|
<li><a href="#typography">Typography</a></li>
|
|||
|
|
<li><a href="#guidelines">Guidelines</a></li>
|
|||
|
|
<button class="theme-toggle" onclick="toggleTheme()">🌙 Dark</button>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
<!-- Logo Variants -->
|
|||
|
|
<section id="logos">
|
|||
|
|
<h2 class="section-title">Logo Variants</h2>
|
|||
|
|
<div class="gallery">
|
|||
|
|
<!-- Horizontal Logo -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-h.svg"
|
|||
|
|
alt="StratumIOps Logo Horizontal"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Horizontal</div>
|
|||
|
|
<div class="card-label">MAIN</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Size</span>
|
|||
|
|
<span class="spec-value">1200x300px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Format</span>
|
|||
|
|
<span class="spec-value">SVG</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-h.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Vertical Logo -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-v.svg"
|
|||
|
|
alt="StratumIOps Logo Vertical"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Vertical</div>
|
|||
|
|
<div class="card-label">LAYOUTS</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Size</span>
|
|||
|
|
<span class="spec-value">400x520px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Mobile</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-v.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Horizontal Static -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-h-static.svg"
|
|||
|
|
alt="StratumIOps Horizontal Static"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Horizontal Static</div>
|
|||
|
|
<div class="card-label">STATIC</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Size</span>
|
|||
|
|
<span class="spec-value">1200x300px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Print</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-h-static.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Vertical Static -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-v-static.svg"
|
|||
|
|
alt="StratumIOps Vertical Static"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Vertical Static</div>
|
|||
|
|
<div class="card-label">STATIC</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Size</span>
|
|||
|
|
<span class="spec-value">400x520px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Print</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-v-static.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Dark Horizontal -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview" style="background: #0f172a">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-dark-h.svg"
|
|||
|
|
alt="StratumIOps Dark Horizontal"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Dark Horizontal</div>
|
|||
|
|
<div class="card-label">DARK</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Size</span>
|
|||
|
|
<span class="spec-value">1200x300px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Dark BG</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-dark-h.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Dark Vertical -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview" style="background: #0f172a">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-dark-v.svg"
|
|||
|
|
alt="StratumIOps Dark Vertical"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Dark Vertical</div>
|
|||
|
|
<div class="card-label">DARK</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Size</span>
|
|||
|
|
<span class="spec-value">400x520px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Dark BG</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-dark-v.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Icon Variants -->
|
|||
|
|
<section id="icons">
|
|||
|
|
<h2 class="section-title">Icon Variants</h2>
|
|||
|
|
<div class="gallery">
|
|||
|
|
<!-- Main Icon -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview">
|
|||
|
|
<img src="../logos/stratumiops-icon.svg" alt="StratumIOps Icon" />
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Main Icon</div>
|
|||
|
|
<div class="card-label">ICON</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Size</span>
|
|||
|
|
<span class="spec-value">512x512px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Apps</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-icon.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Static Icon -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-icon-static.svg"
|
|||
|
|
alt="StratumIOps Icon Static"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Icon Static</div>
|
|||
|
|
<div class="card-label">STATIC</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Size</span>
|
|||
|
|
<span class="spec-value">512x512px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Print</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-icon-static.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Dark Icon -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview" style="background: #0f172a">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-icon-dark.svg"
|
|||
|
|
alt="StratumIOps Icon Dark"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Icon Dark</div>
|
|||
|
|
<div class="card-label">DARK</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Size</span>
|
|||
|
|
<span class="spec-value">512x512px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Dark BG</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-icon-dark.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Monochrome Variants -->
|
|||
|
|
<section id="mono">
|
|||
|
|
<h2 class="section-title">Monochrome Variants</h2>
|
|||
|
|
<div class="gallery">
|
|||
|
|
<!-- Mono Black H -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-mono-black-h.svg"
|
|||
|
|
alt="StratumIOps Mono Black Horizontal"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Mono Black Horizontal</div>
|
|||
|
|
<div class="card-label">MONO</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Print</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-mono-black-h.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Mono White H -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview" style="background: #1a1a2e">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-mono-white-h.svg"
|
|||
|
|
alt="StratumIOps Mono White Horizontal"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Mono White Horizontal</div>
|
|||
|
|
<div class="card-label">MONO</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Dark BG</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-mono-white-h.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Social Media -->
|
|||
|
|
<section id="social">
|
|||
|
|
<h2 class="section-title">Social Media</h2>
|
|||
|
|
<div class="gallery">
|
|||
|
|
<!-- Social Square Dark -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview" style="background: #0f172a">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-social-square-dark.svg"
|
|||
|
|
alt="StratumIOps Social Dark"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Social Square Dark</div>
|
|||
|
|
<div class="card-label">SOCIAL</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Size</span>
|
|||
|
|
<span class="spec-value">1080x1080px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Social Media</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-social-square-dark.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Social Square Light -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview">
|
|||
|
|
<img
|
|||
|
|
src="../logos/stratumiops-social-square-light.svg"
|
|||
|
|
alt="StratumIOps Social Light"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-title">Social Square Light</div>
|
|||
|
|
<div class="card-label">SOCIAL</div>
|
|||
|
|
<div class="card-specs">
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Size</span>
|
|||
|
|
<span class="spec-value">1080x1080px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-item">
|
|||
|
|
<span class="spec-label">Use</span>
|
|||
|
|
<span class="spec-value">Social Media</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name-row">
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span>stratumiops-social-square-light.svg</span>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<!-- Scalability Test -->
|
|||
|
|
<section id="scalability">
|
|||
|
|
<h2 class="section-title">Scalability Test</h2>
|
|||
|
|
<div class="info-box" style="margin-bottom: 30px">
|
|||
|
|
<p style="color: var(--text-secondary)">
|
|||
|
|
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="../logos/stratumiops-icon-static.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="../logos/stratumiops-icon-static.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="../logos/stratumiops-icon-static.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="../logos/stratumiops-icon-static.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="../logos/stratumiops-icon-static.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>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Color Palette -->
|
|||
|
|
<section id="colors">
|
|||
|
|
<h2 class="section-title">Color Palette</h2>
|
|||
|
|
<div class="color-palette">
|
|||
|
|
<div class="color-box">
|
|||
|
|
<div class="color-sample" style="background: #6366f1"></div>
|
|||
|
|
<div class="color-name">Primary Indigo</div>
|
|||
|
|
<div class="color-value">#6366F1</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="color-box">
|
|||
|
|
<div class="color-sample" style="background: #4f46e5"></div>
|
|||
|
|
<div class="color-name">Secondary Indigo</div>
|
|||
|
|
<div class="color-value">#4F46E5</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="color-box">
|
|||
|
|
<div class="color-sample" style="background: #22d3ee"></div>
|
|||
|
|
<div class="color-name">Cyan Accent</div>
|
|||
|
|
<div class="color-value">#22D3EE</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="color-box">
|
|||
|
|
<div class="color-sample" style="background: #06b6d4"></div>
|
|||
|
|
<div class="color-name">Cyan Dark</div>
|
|||
|
|
<div class="color-value">#06B6D4</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="color-box">
|
|||
|
|
<div class="color-sample" style="background: #64748b"></div>
|
|||
|
|
<div class="color-name">Slate Secondary</div>
|
|||
|
|
<div class="color-value">#64748b</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="color-box">
|
|||
|
|
<div class="color-sample" style="background: #0f172a"></div>
|
|||
|
|
<div class="color-name">Dark Background</div>
|
|||
|
|
<div class="color-value">#0F172A</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Typography -->
|
|||
|
|
<section id="typography">
|
|||
|
|
<h2 class="section-title">Typography</h2>
|
|||
|
|
<div class="typography-grid">
|
|||
|
|
<div class="font-sample">
|
|||
|
|
<div class="font-label">Display / Headings</div>
|
|||
|
|
<div class="font-display" style="font-size: 2rem; font-weight: 800">
|
|||
|
|
StratumIOps
|
|||
|
|
</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</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Size</span>
|
|||
|
|
<span class="font-spec-value">32px+</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Use</span>
|
|||
|
|
<span class="font-spec-value">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.5rem; font-weight: 700"
|
|||
|
|
>
|
|||
|
|
Infrastructure Operations
|
|||
|
|
</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</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Size</span>
|
|||
|
|
<span class="font-spec-value">24px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Use</span>
|
|||
|
|
<span class="font-spec-value">H2, H3</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="font-sample">
|
|||
|
|
<div class="font-label">Body / Regular</div>
|
|||
|
|
<div class="font-display" style="font-size: 1rem; font-weight: 400">
|
|||
|
|
Declarative infrastructure orchestration with GitOps workflows and
|
|||
|
|
intelligent automation.
|
|||
|
|
</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</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Size</span>
|
|||
|
|
<span class="font-spec-value">16px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Use</span>
|
|||
|
|
<span class="font-spec-value">Body text</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="font-sample">
|
|||
|
|
<div class="font-label">Emphasis / Semibold</div>
|
|||
|
|
<div class="font-display" style="font-size: 1rem; font-weight: 600">
|
|||
|
|
Multi-cloud provisioning and policy enforcement
|
|||
|
|
</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</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Size</span>
|
|||
|
|
<span class="font-spec-value">16px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Use</span>
|
|||
|
|
<span class="font-spec-value">Emphasis</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"
|
|||
|
|
>
|
|||
|
|
Configuration · GitOps · Kubernetes
|
|||
|
|
</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</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Size</span>
|
|||
|
|
<span class="font-spec-value">14px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Use</span>
|
|||
|
|
<span class="font-spec-value">Labels, 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;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
stratumiops-h.svg
|
|||
|
|
</div>
|
|||
|
|
<div class="font-specs">
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Family</span>
|
|||
|
|
<span class="font-spec-value">Courier</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Weight</span>
|
|||
|
|
<span class="font-spec-value">400</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Size</span>
|
|||
|
|
<span class="font-spec-value">14px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="font-spec-item">
|
|||
|
|
<span class="font-spec-label">Use</span>
|
|||
|
|
<span class="font-spec-value">Code, files</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-box" style="margin-top: 30px">
|
|||
|
|
<h3>Font Usage</h3>
|
|||
|
|
<p style="color: var(--text-secondary); margin-bottom: 20px">
|
|||
|
|
Inter is used for all typography in StratumIOps branding. The font
|
|||
|
|
is clean, modern, and highly readable at all sizes.
|
|||
|
|
</p>
|
|||
|
|
<div style="margin-top: 20px">
|
|||
|
|
<div
|
|||
|
|
style="
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
Import from Google Fonts:
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span
|
|||
|
|
>@import
|
|||
|
|
url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');</span
|
|||
|
|
>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 20px">
|
|||
|
|
<div
|
|||
|
|
style="
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
CSS Font-family declaration:
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name">
|
|||
|
|
<span
|
|||
|
|
>font-family: Inter, -apple-system, BlinkMacSystemFont,
|
|||
|
|
sans-serif;</span
|
|||
|
|
>
|
|||
|
|
<button class="copy-btn" onclick="copyToClipboard(this)">
|
|||
|
|
📋
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Guidelines -->
|
|||
|
|
<section id="guidelines">
|
|||
|
|
<h2 class="section-title">Usage Guidelines</h2>
|
|||
|
|
<div class="info-box">
|
|||
|
|
<h3>Logo Usage</h3>
|
|||
|
|
<p>
|
|||
|
|
<strong>Use the horizontal logo</strong> for primary brand
|
|||
|
|
identification on websites, marketing materials, and product pages.
|
|||
|
|
The vertical variant works well for mobile and social media. For
|
|||
|
|
print, use the static variants. Always maintain sufficient
|
|||
|
|
whitespace around the logo (minimum 20px).
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-box">
|
|||
|
|
<h3>Color Palette</h3>
|
|||
|
|
<p>
|
|||
|
|
<strong>Primary Indigo (#6366F1)</strong> represents the layered
|
|||
|
|
infrastructure architecture.
|
|||
|
|
<strong>Cyan (#22D3EE)</strong> highlights the central processing
|
|||
|
|
and intelligent operations. Use the monochrome variants for print
|
|||
|
|
and high-contrast applications.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-box">
|
|||
|
|
<h3>Typography</h3>
|
|||
|
|
<p>
|
|||
|
|
Use <strong>Inter font family</strong> from Google Fonts for all
|
|||
|
|
text. Weight 800 for display/hero text, 700 for headings, 600 for
|
|||
|
|
subheadings, 400 for body text, and 500 for UI elements. Use
|
|||
|
|
<strong>Courier New</strong> monospace for code, filenames, and HEX
|
|||
|
|
values. Maintain line height of 1.3-1.7 for optimal readability.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-box">
|
|||
|
|
<h3>Icon Usage</h3>
|
|||
|
|
<p>
|
|||
|
|
Use <strong>stratumiops-icon.svg</strong> (512x512px) for most
|
|||
|
|
applications including favicons and UI elements. The
|
|||
|
|
<strong>static variant</strong> is optimized for print. The dark
|
|||
|
|
versions are suitable for dark backgrounds and accessibility
|
|||
|
|
contexts.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
<p>
|
|||
|
|
StratumIOps Branding System • All assets are SVG format for maximum
|
|||
|
|
scalability • Last updated 2026-01-22
|
|||
|
|
</p>
|
|||
|
|
</footer>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function toggleTheme() {
|
|||
|
|
const isDark = document.body.classList.toggle("dark-mode");
|
|||
|
|
const button = document.querySelector(".theme-toggle");
|
|||
|
|
button.textContent = isDark ? "☀️ Light Mode" : "🌙 Dark Mode";
|
|||
|
|
localStorage.setItem("stratumiops-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);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openSvg(svgPath) {
|
|||
|
|
window.open(svgPath, "_blank");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Make all logo images clickable to open in new tab
|
|||
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|||
|
|
document.querySelectorAll(".card-preview img").forEach((img) => {
|
|||
|
|
img.style.cursor = "pointer";
|
|||
|
|
img.addEventListener("click", function () {
|
|||
|
|
window.open(this.src, "_blank");
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Also make scalability test images clickable
|
|||
|
|
document
|
|||
|
|
.querySelectorAll(".scalability-item-display img")
|
|||
|
|
.forEach((img) => {
|
|||
|
|
img.style.cursor = "pointer";
|
|||
|
|
img.addEventListener("click", function () {
|
|||
|
|
window.open(this.src, "_blank");
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Load theme preference
|
|||
|
|
const savedTheme = localStorage.getItem("stratumiops-theme");
|
|||
|
|
if (savedTheme === "dark") {
|
|||
|
|
document.body.classList.add("dark-mode");
|
|||
|
|
document.querySelector(".theme-toggle").textContent = "☀️ Light Mode";
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|