653ac50e55
Adds brand-assets/ (SVGs, brand guide) and REBRAND-IMPLEMENTATION-GUIDE.md as reference docs. Removes .claude/settings.local.json from tracking (contains local permissions and tokens). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1082 lines
51 KiB
HTML
1082 lines
51 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ResolutionFlow Brand Guide</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--gradient-start: #818cf8;
|
||
--gradient-end: #a78bfa;
|
||
--bg-dark: #09090b;
|
||
--bg-card: #18181b;
|
||
--bg-surface: #12121c;
|
||
--text-primary: #ffffff;
|
||
--text-secondary: #a1a1aa;
|
||
--text-muted: #52525b;
|
||
--border: #27272a;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background: var(--bg-dark);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 80px 40px;
|
||
}
|
||
|
||
/* Header */
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 100px;
|
||
}
|
||
|
||
.header-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.header-logo svg {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
|
||
.header-logo h1 {
|
||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||
font-size: 3rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.header-logo .resolution {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.header-logo .flow {
|
||
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.header-tagline {
|
||
font-size: 1.25rem;
|
||
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
font-weight: 500;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.header-subtitle {
|
||
color: var(--text-muted);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* Sections */
|
||
.section {
|
||
margin-bottom: 100px;
|
||
}
|
||
|
||
.section-header {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.section-label {
|
||
font-family: 'Outfit', sans-serif;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.15em;
|
||
color: var(--gradient-start);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.section-title {
|
||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||
font-size: 1.75rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.section-description {
|
||
color: var(--text-secondary);
|
||
max-width: 600px;
|
||
}
|
||
|
||
/* Cards */
|
||
.card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
}
|
||
|
||
.card-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.card-title {
|
||
font-family: 'Outfit', sans-serif;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* Logo Showcase */
|
||
.logo-showcase {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||
gap: 32px;
|
||
}
|
||
|
||
.logo-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.logo-card-display {
|
||
padding: 60px 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 200px;
|
||
}
|
||
|
||
.logo-card-display.dark {
|
||
background: var(--bg-surface);
|
||
}
|
||
|
||
.logo-card-display.light {
|
||
background: #fafafa;
|
||
}
|
||
|
||
.logo-card-display.gradient {
|
||
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
||
}
|
||
|
||
.logo-card-info {
|
||
padding: 20px 24px;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.logo-card-info h3 {
|
||
font-family: 'Outfit', sans-serif;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.logo-card-info p {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Color Palette */
|
||
.color-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
|
||
.color-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.color-swatch {
|
||
height: 120px;
|
||
}
|
||
|
||
.color-info {
|
||
padding: 20px;
|
||
}
|
||
|
||
.color-name {
|
||
font-family: 'Outfit', sans-serif;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.color-values {
|
||
font-family: 'SF Mono', 'Monaco', monospace;
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.color-values span {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
/* Typography */
|
||
.type-sample {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.type-label {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.type-display-large {
|
||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||
font-size: 3rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.03em;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.type-display {
|
||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.type-heading {
|
||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.type-body {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 1rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.type-small {
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 0.875rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Icon Anatomy */
|
||
.anatomy-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 40px;
|
||
align-items: center;
|
||
}
|
||
|
||
.anatomy-icon {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.anatomy-icon svg {
|
||
width: 240px;
|
||
height: 240px;
|
||
}
|
||
|
||
.anatomy-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.anatomy-list li {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.anatomy-number {
|
||
width: 28px;
|
||
height: 28px;
|
||
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.anatomy-text h4 {
|
||
font-family: 'Outfit', sans-serif;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.anatomy-text p {
|
||
font-size: 0.85rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Usage Guidelines */
|
||
.usage-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.usage-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
}
|
||
|
||
.usage-card.do {
|
||
border-color: #22c55e;
|
||
}
|
||
|
||
.usage-card.dont {
|
||
border-color: #ef4444;
|
||
}
|
||
|
||
.usage-badge {
|
||
display: inline-block;
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.usage-card.do .usage-badge {
|
||
background: rgba(34, 197, 94, 0.15);
|
||
color: #22c55e;
|
||
}
|
||
|
||
.usage-card.dont .usage-badge {
|
||
background: rgba(239, 68, 68, 0.15);
|
||
color: #ef4444;
|
||
}
|
||
|
||
.usage-example {
|
||
background: var(--bg-surface);
|
||
border-radius: 12px;
|
||
padding: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16px;
|
||
min-height: 120px;
|
||
}
|
||
|
||
.usage-text {
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* App Icon Sizes */
|
||
.app-icon-sizes {
|
||
display: flex;
|
||
gap: 32px;
|
||
align-items: flex-end;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.app-icon-size {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.app-icon-size span {
|
||
font-size: 0.7rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Spacing */
|
||
.spacing-demo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 40px;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 40px;
|
||
}
|
||
|
||
.spacing-logo {
|
||
position: relative;
|
||
padding: 40px;
|
||
border: 1px dashed var(--gradient-start);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.spacing-label {
|
||
position: absolute;
|
||
font-size: 0.65rem;
|
||
color: var(--gradient-start);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.spacing-label.top {
|
||
top: 8px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.spacing-label.bottom {
|
||
bottom: 8px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.spacing-label.left {
|
||
left: 8px;
|
||
top: 50%;
|
||
transform: translateY(-50%) rotate(-90deg);
|
||
}
|
||
|
||
.spacing-label.right {
|
||
right: 8px;
|
||
top: 50%;
|
||
transform: translateY(-50%) rotate(90deg);
|
||
}
|
||
|
||
/* Footer */
|
||
.footer {
|
||
text-align: center;
|
||
padding: 60px 0;
|
||
border-top: 1px solid var(--border);
|
||
margin-top: 80px;
|
||
}
|
||
|
||
.footer p {
|
||
color: var(--text-muted);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.header-logo h1 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.anatomy-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.logo-showcase {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<div class="header-logo">
|
||
<svg viewBox="0 0 80 80" fill="none">
|
||
<defs>
|
||
<linearGradient id="hdr-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="10" cy="14" r="5" fill="url(#hdr-grad)" opacity="0.25"/>
|
||
<circle cx="10" cy="30" r="5.5" fill="url(#hdr-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="50" r="5.5" fill="url(#hdr-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="66" r="5" fill="url(#hdr-grad)" opacity="0.25"/>
|
||
<path d="M15 14L28 34" stroke="url(#hdr-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<path d="M15.5 30L28 38" stroke="url(#hdr-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15.5 50L28 42" stroke="url(#hdr-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15 66L28 46" stroke="url(#hdr-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<circle cx="36" cy="40" r="10" fill="url(#hdr-grad)" opacity="0.12"/>
|
||
<circle cx="36" cy="40" r="7" fill="url(#hdr-grad)" opacity="0.9"/>
|
||
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#hdr-grad)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
<h1><span class="resolution">Resolution</span><span class="flow">Flow</span></h1>
|
||
</div>
|
||
<p class="header-tagline">From issue to resolution, documented.</p>
|
||
<p class="header-subtitle">Brand Guidelines & Identity System</p>
|
||
</header>
|
||
|
||
<!-- Logo Section -->
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<p class="section-label">01 — Logo</p>
|
||
<h2 class="section-title">Primary Logo</h2>
|
||
<p class="section-description">The ResolutionFlow logo combines the icon mark with the wordmark. Use the horizontal lockup as the primary logo in most applications.</p>
|
||
</div>
|
||
|
||
<div class="logo-showcase">
|
||
<div class="logo-card">
|
||
<div class="logo-card-display dark">
|
||
<svg viewBox="0 0 280 70" fill="none" width="280">
|
||
<defs>
|
||
<linearGradient id="logo1-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<g transform="translate(0, 5)">
|
||
<circle cx="10" cy="11" r="4" fill="url(#logo1-grad)" opacity="0.25"/>
|
||
<circle cx="10" cy="24" r="4.5" fill="url(#logo1-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="40" r="4.5" fill="url(#logo1-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="53" r="4" fill="url(#logo1-grad)" opacity="0.25"/>
|
||
<path d="M14 11L24 27" stroke="url(#logo1-grad)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.35"/>
|
||
<path d="M14.5 24L24 30" stroke="url(#logo1-grad)" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M14.5 40L24 34" stroke="url(#logo1-grad)" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M14 53L24 37" stroke="url(#logo1-grad)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.35"/>
|
||
<circle cx="30" cy="32" r="8" fill="url(#logo1-grad)" opacity="0.12"/>
|
||
<circle cx="30" cy="32" r="5.5" fill="url(#logo1-grad)" opacity="0.9"/>
|
||
<path d="M36 32H56M56 32L48 24M56 32L48 40" stroke="url(#logo1-grad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</g>
|
||
<text x="68" y="42" font-family="'Plus Jakarta Sans', sans-serif" font-size="24" font-weight="700" letter-spacing="-0.5">
|
||
<tspan fill="#ffffff">Resolution</tspan><tspan fill="url(#logo1-grad)">Flow</tspan>
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-card-info">
|
||
<h3>Primary — Dark Background</h3>
|
||
<p>Use on dark backgrounds (#09090b to #18181b)</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="logo-card">
|
||
<div class="logo-card-display light">
|
||
<svg viewBox="0 0 280 70" fill="none" width="280">
|
||
<defs>
|
||
<linearGradient id="logo2-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<g transform="translate(0, 5)">
|
||
<circle cx="10" cy="11" r="4" fill="url(#logo2-grad)" opacity="0.35"/>
|
||
<circle cx="10" cy="24" r="4.5" fill="url(#logo2-grad)" opacity="0.5"/>
|
||
<circle cx="10" cy="40" r="4.5" fill="url(#logo2-grad)" opacity="0.5"/>
|
||
<circle cx="10" cy="53" r="4" fill="url(#logo2-grad)" opacity="0.35"/>
|
||
<path d="M14 11L24 27" stroke="url(#logo2-grad)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.45"/>
|
||
<path d="M14.5 24L24 30" stroke="url(#logo2-grad)" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
|
||
<path d="M14.5 40L24 34" stroke="url(#logo2-grad)" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
|
||
<path d="M14 53L24 37" stroke="url(#logo2-grad)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.45"/>
|
||
<circle cx="30" cy="32" r="8" fill="url(#logo2-grad)" opacity="0.15"/>
|
||
<circle cx="30" cy="32" r="5.5" fill="url(#logo2-grad)"/>
|
||
<path d="M36 32H56M56 32L48 24M56 32L48 40" stroke="url(#logo2-grad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</g>
|
||
<text x="68" y="42" font-family="'Plus Jakarta Sans', sans-serif" font-size="24" font-weight="700" letter-spacing="-0.5">
|
||
<tspan fill="#18181b">Resolution</tspan><tspan fill="url(#logo2-grad)">Flow</tspan>
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-card-info">
|
||
<h3>Primary — Light Background</h3>
|
||
<p>Use on light backgrounds (#fafafa to #ffffff)</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="logo-card">
|
||
<div class="logo-card-display gradient">
|
||
<svg viewBox="0 0 280 70" fill="none" width="280">
|
||
<g transform="translate(0, 5)">
|
||
<circle cx="10" cy="11" r="4" fill="white" opacity="0.4"/>
|
||
<circle cx="10" cy="24" r="4.5" fill="white" opacity="0.55"/>
|
||
<circle cx="10" cy="40" r="4.5" fill="white" opacity="0.55"/>
|
||
<circle cx="10" cy="53" r="4" fill="white" opacity="0.4"/>
|
||
<path d="M14 11L24 27" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.5"/>
|
||
<path d="M14.5 24L24 30" stroke="white" stroke-width="1.5" stroke-linecap="round" opacity="0.65"/>
|
||
<path d="M14.5 40L24 34" stroke="white" stroke-width="1.5" stroke-linecap="round" opacity="0.65"/>
|
||
<path d="M14 53L24 37" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.5"/>
|
||
<circle cx="30" cy="32" r="8" fill="white" opacity="0.2"/>
|
||
<circle cx="30" cy="32" r="5.5" fill="white"/>
|
||
<path d="M36 32H56M56 32L48 24M56 32L48 40" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</g>
|
||
<text x="68" y="42" font-family="'Plus Jakarta Sans', sans-serif" font-size="24" font-weight="700" letter-spacing="-0.5" fill="white">
|
||
ResolutionFlow
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-card-info">
|
||
<h3>Reversed — Gradient Background</h3>
|
||
<p>White version for gradient or colored backgrounds</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="logo-card">
|
||
<div class="logo-card-display dark">
|
||
<svg viewBox="0 0 80 80" fill="none" width="100">
|
||
<defs>
|
||
<linearGradient id="logo4-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="10" cy="14" r="5" fill="url(#logo4-grad)" opacity="0.25"/>
|
||
<circle cx="10" cy="30" r="5.5" fill="url(#logo4-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="50" r="5.5" fill="url(#logo4-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="66" r="5" fill="url(#logo4-grad)" opacity="0.25"/>
|
||
<path d="M15 14L28 34" stroke="url(#logo4-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<path d="M15.5 30L28 38" stroke="url(#logo4-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15.5 50L28 42" stroke="url(#logo4-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15 66L28 46" stroke="url(#logo4-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<circle cx="36" cy="40" r="10" fill="url(#logo4-grad)" opacity="0.12"/>
|
||
<circle cx="36" cy="40" r="7" fill="url(#logo4-grad)" opacity="0.9"/>
|
||
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#logo4-grad)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-card-info">
|
||
<h3>Icon Only</h3>
|
||
<p>Use when space is limited or brand is established</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Icon Anatomy -->
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<p class="section-label">02 — Icon Anatomy</p>
|
||
<h2 class="section-title">Understanding the Mark</h2>
|
||
<p class="section-description">Every element of the icon has meaning, representing the core value proposition of ResolutionFlow.</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="anatomy-grid">
|
||
<div class="anatomy-icon">
|
||
<svg viewBox="0 0 80 80" fill="none">
|
||
<defs>
|
||
<linearGradient id="anat-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="10" cy="14" r="5" fill="url(#anat-grad)" opacity="0.25"/>
|
||
<circle cx="10" cy="30" r="5.5" fill="url(#anat-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="50" r="5.5" fill="url(#anat-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="66" r="5" fill="url(#anat-grad)" opacity="0.25"/>
|
||
<path d="M15 14L28 34" stroke="url(#anat-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<path d="M15.5 30L28 38" stroke="url(#anat-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15.5 50L28 42" stroke="url(#anat-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15 66L28 46" stroke="url(#anat-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<circle cx="36" cy="40" r="10" fill="url(#anat-grad)" opacity="0.12"/>
|
||
<circle cx="36" cy="40" r="7" fill="url(#anat-grad)" opacity="0.9"/>
|
||
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#anat-grad)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<ul class="anatomy-list">
|
||
<li>
|
||
<span class="anatomy-number">1</span>
|
||
<div class="anatomy-text">
|
||
<h4>Decision Points (Circles)</h4>
|
||
<p>Four filled circles represent the choices and decisions made during troubleshooting. Varying opacity shows frequency of use.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="anatomy-number">2</span>
|
||
<div class="anatomy-text">
|
||
<h4>Flow Lines</h4>
|
||
<p>Solid lines represent common paths, dotted lines represent less frequent choices. Together they show the decision flow.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="anatomy-number">3</span>
|
||
<div class="anatomy-text">
|
||
<h4>Convergence Node</h4>
|
||
<p>The glowing center node represents where all decisions converge into a single resolution. The glow emphasizes this focal point.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="anatomy-number">4</span>
|
||
<div class="anatomy-text">
|
||
<h4>Output Arrow</h4>
|
||
<p>The bold arrow represents the final output — the automatically generated documentation that flows from the resolution.</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Color Palette -->
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<p class="section-label">03 — Color</p>
|
||
<h2 class="section-title">Color Palette</h2>
|
||
<p class="section-description">A focused palette built around the indigo-to-violet gradient, supported by neutral dark tones.</p>
|
||
</div>
|
||
|
||
<div class="color-grid">
|
||
<div class="color-card">
|
||
<div class="color-swatch" style="background: linear-gradient(135deg, #818cf8, #a78bfa);"></div>
|
||
<div class="color-info">
|
||
<p class="color-name">Primary Gradient</p>
|
||
<div class="color-values">
|
||
<span>Start: #818cf8</span>
|
||
<span>End: #a78bfa</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="color-card">
|
||
<div class="color-swatch" style="background: #818cf8;"></div>
|
||
<div class="color-info">
|
||
<p class="color-name">Indigo</p>
|
||
<div class="color-values">
|
||
<span>HEX: #818cf8</span>
|
||
<span>RGB: 129, 140, 248</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="color-card">
|
||
<div class="color-swatch" style="background: #a78bfa;"></div>
|
||
<div class="color-info">
|
||
<p class="color-name">Violet</p>
|
||
<div class="color-values">
|
||
<span>HEX: #a78bfa</span>
|
||
<span>RGB: 167, 139, 250</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="color-card">
|
||
<div class="color-swatch" style="background: #09090b;"></div>
|
||
<div class="color-info">
|
||
<p class="color-name">Background Dark</p>
|
||
<div class="color-values">
|
||
<span>HEX: #09090b</span>
|
||
<span>RGB: 9, 9, 11</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="color-card">
|
||
<div class="color-swatch" style="background: #18181b;"></div>
|
||
<div class="color-info">
|
||
<p class="color-name">Surface</p>
|
||
<div class="color-values">
|
||
<span>HEX: #18181b</span>
|
||
<span>RGB: 24, 24, 27</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="color-card">
|
||
<div class="color-swatch" style="background: #ffffff;"></div>
|
||
<div class="color-info">
|
||
<p class="color-name">White</p>
|
||
<div class="color-values">
|
||
<span>HEX: #ffffff</span>
|
||
<span>RGB: 255, 255, 255</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Typography -->
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<p class="section-label">04 — Typography</p>
|
||
<h2 class="section-title">Type System</h2>
|
||
<p class="section-description">Plus Jakarta Sans for headings and brand elements, Inter for body text and UI.</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="type-sample">
|
||
<p class="type-label">Display / Logo</p>
|
||
<p class="type-display-large">Plus Jakarta Sans Bold</p>
|
||
<p class="type-body">Font-weight: 700 • Letter-spacing: -0.03em</p>
|
||
</div>
|
||
<div class="type-sample">
|
||
<p class="type-label">Headings</p>
|
||
<p class="type-display">Plus Jakarta Sans Semibold</p>
|
||
<p class="type-body">Font-weight: 600 • Letter-spacing: -0.02em</p>
|
||
</div>
|
||
<div class="type-sample">
|
||
<p class="type-label">Body Text</p>
|
||
<p class="type-heading" style="font-family: Inter;">Inter Regular & Medium</p>
|
||
<p class="type-body">The quick brown fox jumps over the lazy dog. ResolutionFlow transforms chaotic technical troubleshooting into guided workflows with automatic documentation generation.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- App Icons -->
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<p class="section-label">05 — App Icons</p>
|
||
<h2 class="section-title">Application Icons</h2>
|
||
<p class="section-description">App icons at various sizes for different platforms and use cases.</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="app-icon-sizes">
|
||
<div class="app-icon-size">
|
||
<svg viewBox="0 0 512 512" fill="none" width="128" height="128">
|
||
<defs>
|
||
<linearGradient id="appicon-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="512" height="512" rx="96" fill="#12121c"/>
|
||
<g transform="translate(96, 96) scale(4)">
|
||
<circle cx="10" cy="14" r="5" fill="url(#appicon-grad)" opacity="0.25"/>
|
||
<circle cx="10" cy="30" r="5.5" fill="url(#appicon-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="50" r="5.5" fill="url(#appicon-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="66" r="5" fill="url(#appicon-grad)" opacity="0.25"/>
|
||
<path d="M15 14L28 34" stroke="url(#appicon-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<path d="M15.5 30L28 38" stroke="url(#appicon-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15.5 50L28 42" stroke="url(#appicon-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15 66L28 46" stroke="url(#appicon-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<circle cx="36" cy="40" r="10" fill="url(#appicon-grad)" opacity="0.12"/>
|
||
<circle cx="36" cy="40" r="7" fill="url(#appicon-grad)" opacity="0.9"/>
|
||
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#appicon-grad)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</g>
|
||
</svg>
|
||
<span>512×512 (App Store)</span>
|
||
</div>
|
||
<div class="app-icon-size">
|
||
<svg viewBox="0 0 512 512" fill="none" width="96" height="96" style="border-radius: 18px;">
|
||
<defs>
|
||
<linearGradient id="appicon2-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="512" height="512" rx="96" fill="url(#appicon2-grad)"/>
|
||
<g transform="translate(96, 96) scale(4)">
|
||
<circle cx="10" cy="14" r="5" fill="white" opacity="0.4"/>
|
||
<circle cx="10" cy="30" r="5.5" fill="white" opacity="0.55"/>
|
||
<circle cx="10" cy="50" r="5.5" fill="white" opacity="0.55"/>
|
||
<circle cx="10" cy="66" r="5" fill="white" opacity="0.4"/>
|
||
<path d="M15 14L28 34" stroke="white" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<path d="M15.5 30L28 38" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
|
||
<path d="M15.5 50L28 42" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
|
||
<path d="M15 66L28 46" stroke="white" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<circle cx="36" cy="40" r="10" fill="white" opacity="0.2"/>
|
||
<circle cx="36" cy="40" r="7" fill="white"/>
|
||
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</g>
|
||
</svg>
|
||
<span>Gradient Variant</span>
|
||
</div>
|
||
<div class="app-icon-size">
|
||
<svg viewBox="0 0 32 32" fill="none" width="64" height="64">
|
||
<defs>
|
||
<linearGradient id="fav-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="5" cy="8" r="2.5" fill="url(#fav-grad)" opacity="0.35"/>
|
||
<circle cx="5" cy="16" r="3" fill="url(#fav-grad)" opacity="0.5"/>
|
||
<circle cx="5" cy="24" r="2.5" fill="url(#fav-grad)" opacity="0.35"/>
|
||
<circle cx="14" cy="16" r="4" fill="url(#fav-grad)"/>
|
||
<path d="M18 16H28M28 16L24 12M28 16L24 20" stroke="url(#fav-grad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
<span>Favicon (32×32)</span>
|
||
</div>
|
||
<div class="app-icon-size">
|
||
<svg viewBox="0 0 16 16" fill="none" width="32" height="32">
|
||
<defs>
|
||
<linearGradient id="fav-sm-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="3" cy="8" r="2" fill="url(#fav-sm-grad)" opacity="0.5"/>
|
||
<circle cx="8" cy="8" r="2.5" fill="url(#fav-sm-grad)"/>
|
||
<path d="M11 8H14M14 8L12.5 6.5M14 8L12.5 9.5" stroke="url(#fav-sm-grad)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
<span>16×16</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Usage Guidelines -->
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<p class="section-label">06 — Usage</p>
|
||
<h2 class="section-title">Do's and Don'ts</h2>
|
||
<p class="section-description">Guidelines for maintaining brand consistency across all applications.</p>
|
||
</div>
|
||
|
||
<div class="usage-grid">
|
||
<div class="usage-card do">
|
||
<span class="usage-badge">Do</span>
|
||
<div class="usage-example">
|
||
<svg viewBox="0 0 200 50" fill="none" width="180">
|
||
<defs>
|
||
<linearGradient id="do1-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<g transform="translate(0, 5)">
|
||
<circle cx="8" cy="8" r="3" fill="url(#do1-grad)" opacity="0.25"/>
|
||
<circle cx="8" cy="17" r="3.5" fill="url(#do1-grad)" opacity="0.4"/>
|
||
<circle cx="8" cy="28" r="3.5" fill="url(#do1-grad)" opacity="0.4"/>
|
||
<circle cx="8" cy="37" r="3" fill="url(#do1-grad)" opacity="0.25"/>
|
||
<path d="M11 8L19 20" stroke="url(#do1-grad)" stroke-width="1.2" stroke-linecap="round" stroke-dasharray="1.5 2" opacity="0.35"/>
|
||
<path d="M11.5 17L19 22" stroke="url(#do1-grad)" stroke-width="1.2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M11.5 28L19 24" stroke="url(#do1-grad)" stroke-width="1.2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M11 37L19 26" stroke="url(#do1-grad)" stroke-width="1.2" stroke-linecap="round" stroke-dasharray="1.5 2" opacity="0.35"/>
|
||
<circle cx="23" cy="23" r="6" fill="url(#do1-grad)" opacity="0.12"/>
|
||
<circle cx="23" cy="23" r="4" fill="url(#do1-grad)" opacity="0.9"/>
|
||
<path d="M27 23H40M40 23L35 18M40 23L35 28" stroke="url(#do1-grad)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</g>
|
||
<text x="50" y="30" font-family="'Plus Jakarta Sans', sans-serif" font-size="16" font-weight="700" letter-spacing="-0.3">
|
||
<tspan fill="#ffffff">Resolution</tspan><tspan fill="url(#do1-grad)">Flow</tspan>
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<p class="usage-text">Use the logo with adequate clear space around it</p>
|
||
</div>
|
||
|
||
<div class="usage-card dont">
|
||
<span class="usage-badge">Don't</span>
|
||
<div class="usage-example">
|
||
<svg viewBox="0 0 200 50" fill="none" width="180">
|
||
<text x="20" y="32" font-family="'Plus Jakarta Sans', sans-serif" font-size="18" font-weight="700" letter-spacing="-0.3">
|
||
<tspan fill="#ef4444">Resolution</tspan><tspan fill="#22c55e">Flow</tspan>
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<p class="usage-text">Don't change the logo colors</p>
|
||
</div>
|
||
|
||
<div class="usage-card do">
|
||
<span class="usage-badge">Do</span>
|
||
<div class="usage-example" style="background: #fafafa;">
|
||
<svg viewBox="0 0 80 80" fill="none" width="60">
|
||
<defs>
|
||
<linearGradient id="do2-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="10" cy="14" r="5" fill="url(#do2-grad)" opacity="0.35"/>
|
||
<circle cx="10" cy="30" r="5.5" fill="url(#do2-grad)" opacity="0.5"/>
|
||
<circle cx="10" cy="50" r="5.5" fill="url(#do2-grad)" opacity="0.5"/>
|
||
<circle cx="10" cy="66" r="5" fill="url(#do2-grad)" opacity="0.35"/>
|
||
<path d="M15 14L28 34" stroke="url(#do2-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<path d="M15.5 30L28 38" stroke="url(#do2-grad)" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
|
||
<path d="M15.5 50L28 42" stroke="url(#do2-grad)" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
|
||
<path d="M15 66L28 46" stroke="url(#do2-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<circle cx="36" cy="40" r="10" fill="url(#do2-grad)" opacity="0.15"/>
|
||
<circle cx="36" cy="40" r="7" fill="url(#do2-grad)"/>
|
||
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#do2-grad)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<p class="usage-text">Use the icon alone when brand is established</p>
|
||
</div>
|
||
|
||
<div class="usage-card dont">
|
||
<span class="usage-badge">Don't</span>
|
||
<div class="usage-example">
|
||
<svg viewBox="0 0 80 80" fill="none" width="60" style="transform: rotate(45deg);">
|
||
<defs>
|
||
<linearGradient id="dont2-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="10" cy="14" r="5" fill="url(#dont2-grad)" opacity="0.25"/>
|
||
<circle cx="10" cy="30" r="5.5" fill="url(#dont2-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="50" r="5.5" fill="url(#dont2-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="66" r="5" fill="url(#dont2-grad)" opacity="0.25"/>
|
||
<path d="M15 14L28 34" stroke="url(#dont2-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<path d="M15.5 30L28 38" stroke="url(#dont2-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15.5 50L28 42" stroke="url(#dont2-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15 66L28 46" stroke="url(#dont2-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<circle cx="36" cy="40" r="10" fill="url(#dont2-grad)" opacity="0.12"/>
|
||
<circle cx="36" cy="40" r="7" fill="url(#dont2-grad)" opacity="0.9"/>
|
||
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#dont2-grad)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<p class="usage-text">Don't rotate or distort the logo</p>
|
||
</div>
|
||
|
||
<div class="usage-card do">
|
||
<span class="usage-badge">Do</span>
|
||
<div class="usage-example" style="background: linear-gradient(135deg, #818cf8, #a78bfa);">
|
||
<svg viewBox="0 0 80 80" fill="none" width="60">
|
||
<circle cx="10" cy="14" r="5" fill="white" opacity="0.4"/>
|
||
<circle cx="10" cy="30" r="5.5" fill="white" opacity="0.55"/>
|
||
<circle cx="10" cy="50" r="5.5" fill="white" opacity="0.55"/>
|
||
<circle cx="10" cy="66" r="5" fill="white" opacity="0.4"/>
|
||
<path d="M15 14L28 34" stroke="white" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<path d="M15.5 30L28 38" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
|
||
<path d="M15.5 50L28 42" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
|
||
<path d="M15 66L28 46" stroke="white" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<circle cx="36" cy="40" r="10" fill="white" opacity="0.2"/>
|
||
<circle cx="36" cy="40" r="7" fill="white"/>
|
||
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<p class="usage-text">Use white version on gradient backgrounds</p>
|
||
</div>
|
||
|
||
<div class="usage-card dont">
|
||
<span class="usage-badge">Don't</span>
|
||
<div class="usage-example">
|
||
<svg viewBox="0 0 80 80" fill="none" width="60" style="opacity: 0.3;">
|
||
<defs>
|
||
<linearGradient id="dont3-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#818cf8"/>
|
||
<stop offset="100%" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="10" cy="14" r="5" fill="url(#dont3-grad)" opacity="0.25"/>
|
||
<circle cx="10" cy="30" r="5.5" fill="url(#dont3-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="50" r="5.5" fill="url(#dont3-grad)" opacity="0.4"/>
|
||
<circle cx="10" cy="66" r="5" fill="url(#dont3-grad)" opacity="0.25"/>
|
||
<path d="M15 14L28 34" stroke="url(#dont3-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<path d="M15.5 30L28 38" stroke="url(#dont3-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15.5 50L28 42" stroke="url(#dont3-grad)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M15 66L28 46" stroke="url(#dont3-grad)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||
<circle cx="36" cy="40" r="10" fill="url(#dont3-grad)" opacity="0.12"/>
|
||
<circle cx="36" cy="40" r="7" fill="url(#dont3-grad)" opacity="0.9"/>
|
||
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#dont3-grad)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<p class="usage-text">Don't reduce the logo opacity</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<p>ResolutionFlow Brand Guidelines • Version 1.0 • 2026</p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|