Skip to content

Instantly share code, notes, and snippets.

@annguyenwasd

annguyenwasd/index.html

Created April 21, 2026 15:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save annguyenwasd/8c33a6c55d348fec0a34143dd1167408 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save annguyenwasd/8c33a6c55d348fec0a34143dd1167408 to your computer and use it in GitHub Desktop.
Download ZIP
CTI Logo Concepts — 6 brands × 5 variations
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CTI Logo Concepts</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;background:#f1f5f9;padding:48px 24px;color:#0f172a}
header{text-align:center;margin-bottom:56px}
header h1{font-size:32px;font-weight:900;color:#0f172a;letter-spacing:-0.5px}
header p{color:#64748b;font-size:14px;margin-top:6px}
.founders{display:flex;justify-content:center;gap:24px;margin-top:12px;font-size:12px;color:#94a3b8}
.founders span{background:#e2e8f0;padding:4px 12px;border-radius:20px}
section{margin-bottom:52px}
.brand-header{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;padding-left:14px;border-left:4px solid #38bdf8}
.brand-header h2{font-size:22px;font-weight:800;color:#0f172a}
.brand-header span{font-size:13px;color:#64748b}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.card{background:white;border-radius:14px;padding:22px 20px 16px;box-shadow:0 1px 4px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.05);display:flex;flex-direction:column;align-items:center;gap:14px}
.card svg{display:block;max-width:100%}
.card-label{font-size:10px;color:#cbd5e1;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
</style>
</head>
<body>
<header>
<h1>CTI — Logo Concepts</h1>
<p>Smart Building Access Solutions · 6 brand names · 5 variations each</p>
<div class="founders">
<span>Đoàn Hữu Trung</span>
<span>Nguyễn Tuấn Anh</span>
<span>Nguyễn Văn Chúc Ân</span>
</div>
</header>
<!-- ═══════════════════════════ KEYO ═══════════════════════════ -->
<section>
<div class="brand-header">
<h2>KEYO</h2>
<span>Key + Open · ngắn · quốc tế · dễ phát âm</span>
</div>
<div class="grid">
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" rx="10" fill="#0f172a"/>
<circle cx="48" cy="44" r="30" fill="#1e40af"/>
<rect x="36" y="24" width="5" height="40" rx="2" fill="white"/>
<polygon points="41,44 60,24 66,24 47,44 66,64 60,64" fill="white"/>
<text x="94" y="51" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="800" font-size="28" fill="white" letter-spacing="3">KEYO</text>
<text x="95" y="67" font-family="Arial,sans-serif" font-size="9" fill="#38bdf8" letter-spacing="3">SMART ACCESS</text>
</svg>
<div class="card-label">Icon + Wordmark · Dark</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="white"/>
<circle cx="42" cy="38" r="18" fill="none" stroke="#1e40af" stroke-width="4"/>
<circle cx="42" cy="38" r="6" fill="#1e40af"/>
<rect x="58" y="35" width="32" height="6" rx="3" fill="#1e40af"/>
<rect x="80" y="41" width="5" height="9" rx="2" fill="#1e40af"/>
<rect x="72" y="41" width="5" height="7" rx="2" fill="#1e40af"/>
<line x1="42" y1="56" x2="42" y2="76" stroke="#e2e8f0" stroke-width="1"/>
<text x="108" y="52" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="30" fill="#0f172a">KEY</text>
<text x="180" y="52" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="30" fill="#1e40af">O</text>
<text x="108" y="68" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="2">BUILDING ACCESS</text>
</svg>
<div class="card-label">Key Icon · Split Color</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="#f0f9ff"/>
<!-- phone -->
<rect x="18" y="10" width="38" height="68" rx="7" fill="#1e40af"/>
<rect x="22" y="18" width="30" height="48" rx="3" fill="#bfdbfe"/>
<circle cx="37" cy="72" r="3" fill="#93c5fd"/>
<!-- K on screen -->
<rect x="27" y="24" width="4" height="20" fill="#1e40af"/>
<line x1="31" y1="34" x2="41" y2="24" stroke="#1e40af" stroke-width="3.5" stroke-linecap="round"/>
<line x1="31" y1="34" x2="41" y2="44" stroke="#1e40af" stroke-width="3.5" stroke-linecap="round"/>
<text x="70" y="48" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="26" fill="#1e40af">KEYO</text>
<text x="70" y="64" font-family="Arial,sans-serif" font-size="9" fill="#64748b" letter-spacing="1">SMART BUILDING ACCESS</text>
</svg>
<div class="card-label">Smartphone + K</div>
</div>
<div class="card">
<svg viewBox="0 0 160 160" width="160" height="160">
<rect width="160" height="160" rx="36" fill="#1e40af"/>
<!-- keyhole -->
<circle cx="80" cy="62" r="26" fill="none" stroke="white" stroke-width="6"/>
<circle cx="80" cy="62" r="10" fill="white" opacity="0.25"/>
<polygon points="68,84 92,84 88,116 72,116" fill="white"/>
<!-- K subtle in negative space — just the letter below keyhole -->
<text x="80" y="148" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="18" fill="white" text-anchor="middle" letter-spacing="4">KEYO</text>
</svg>
<div class="card-label">App Icon · Keyhole</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="#0f172a"/>
<rect x="0" y="0" width="10" height="88" rx="0" fill="#38bdf8"/>
<rect x="10" y="0" width="2" height="88" fill="#0ea5e9" opacity="0.3"/>
<text x="26" y="56" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="38" fill="white">KE</text>
<text x="105" y="56" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="38" fill="#38bdf8">YO</text>
<text x="26" y="72" font-family="Arial,sans-serif" font-size="9" fill="#475569" letter-spacing="3">SMART ACCESS SOLUTIONS</text>
</svg>
<div class="card-label">Split Color · Accent Bar</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ NEXPASS ═══════════════════════════ -->
<section>
<div class="brand-header">
<h2>NexPass</h2>
<span>Next + Pass · B2B · chuyên nghiệp</span>
</div>
<div class="grid">
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" rx="10" fill="#0f172a"/>
<!-- chevron icon -->
<polyline points="28,22 52,44 28,66" fill="none" stroke="#38bdf8" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="44,22 68,44 44,66" fill="none" stroke="#38bdf8" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"/>
<text x="86" y="46" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="24" fill="white">NEX</text>
<text x="148" y="46" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="24" fill="#38bdf8">PASS</text>
<text x="86" y="63" font-family="Arial,sans-serif" font-size="9" fill="#475569" letter-spacing="2">NEXT GEN ACCESS</text>
</svg>
<div class="card-label">Chevron + Wordmark</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="white"/>
<!-- shield -->
<path d="M44,14 L66,14 L66,50 Q66,68 44,76 Q22,68 22,50 L22,14 Z" fill="#1e40af"/>
<path d="M44,20 L62,20 L62,50 Q62,64 44,71 Q26,64 26,50 L26,20 Z" fill="#2563eb"/>
<text x="44" y="54" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="22" fill="white" text-anchor="middle">N</text>
<text x="86" y="50" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="800" font-size="24" fill="#0f172a">NEXPASS</text>
<text x="86" y="66" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="2">ACCESS SOLUTIONS</text>
</svg>
<div class="card-label">Shield Monogram</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<defs>
<linearGradient id="ng1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#1e40af"/>
<stop offset="100%" stop-color="#0ea5e9"/>
</linearGradient>
</defs>
<rect width="280" height="88" rx="10" fill="url(#ng1)"/>
<text x="22" y="38" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="16" fill="white" opacity="0.5" letter-spacing="6">NEXT GENERATION</text>
<text x="22" y="68" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="34" fill="white" letter-spacing="2">NEXPASS</text>
</svg>
<div class="card-label">Gradient · Bold Wordmark</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="white"/>
<!-- diagonal slice -->
<polygon points="0,0 160,0 120,88 0,88" fill="#f0f9ff"/>
<line x1="120" y1="0" x2="160" y2="88" stroke="#e2e8f0" stroke-width="1.5"/>
<text x="22" y="52" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="28" fill="#1e40af">NEX</text>
<text x="150" y="52" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="28" fill="#0f172a">PASS</text>
<text x="22" y="68" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="2">SMART ENTRY</text>
</svg>
<div class="card-label">Diagonal Split</div>
</div>
<div class="card">
<svg viewBox="0 0 160 160" width="160" height="160">
<rect width="160" height="160" rx="36" fill="#0f172a"/>
<circle cx="80" cy="80" r="54" fill="none" stroke="#1e40af" stroke-width="2" opacity="0.4"/>
<circle cx="80" cy="80" r="40" fill="#1e40af"/>
<text x="80" y="75" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="18" fill="white" text-anchor="middle" letter-spacing="1">NX</text>
<text x="80" y="96" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="700" font-size="11" fill="#38bdf8" text-anchor="middle" letter-spacing="2">PASS</text>
</svg>
<div class="card-label">App Icon · NX Badge</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ PORTKEY ═══════════════════════════ -->
<section>
<div class="brand-header">
<h2>PortKey</h2>
<span>Portal + Key · mang bạn đến nơi cần đến</span>
</div>
<div class="grid">
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" rx="10" fill="#0c1445"/>
<!-- portal rings -->
<circle cx="46" cy="44" r="34" fill="none" stroke="#38bdf8" stroke-width="2" opacity="0.25"/>
<circle cx="46" cy="44" r="26" fill="none" stroke="#38bdf8" stroke-width="2.5" opacity="0.5"/>
<circle cx="46" cy="44" r="18" fill="none" stroke="#38bdf8" stroke-width="3"/>
<!-- key in center -->
<circle cx="46" cy="40" r="7" fill="#38bdf8"/>
<circle cx="46" cy="40" r="3" fill="#0c1445"/>
<rect x="44" y="47" width="4" height="12" rx="2" fill="#38bdf8"/>
<rect x="48" y="54" width="5" height="3" rx="1" fill="#38bdf8"/>
<rect x="48" y="58" width="4" height="3" rx="1" fill="#38bdf8"/>
<text x="94" y="46" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="800" font-size="24" fill="white">PORT<tspan fill="#38bdf8">KEY</tspan></text>
<text x="94" y="62" font-family="Arial,sans-serif" font-size="9" fill="#475569" letter-spacing="2">ACCESS ANYWHERE</text>
</svg>
<div class="card-label">Portal Rings + Key</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="white"/>
<polygon points="46,8 70,22 70,66 46,80 22,66 22,22" fill="#1e40af"/>
<polygon points="46,14 66,26 66,62 46,74 26,62 26,26" fill="#2563eb"/>
<text x="46" y="52" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="20" fill="white" text-anchor="middle">PK</text>
<text x="88" y="50" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="800" font-size="22" fill="#0f172a">PORTKEY</text>
<text x="88" y="65" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="2">BUILDING ACCESS</text>
</svg>
<div class="card-label">PK Hexagon Badge</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="#f8fafc"/>
<!-- door arch -->
<rect x="18" y="12" width="48" height="64" rx="0" fill="#1e40af"/>
<rect x="20" y="12" width="44" height="22" fill="#1e40af"/>
<ellipse cx="42" cy="34" rx="22" ry="22" fill="#1e40af"/>
<rect x="22" y="34" width="40" height="42" fill="#1e40af"/>
<!-- door panel -->
<rect x="24" y="38" width="36" height="34" rx="2" fill="#2563eb"/>
<!-- keyhole -->
<circle cx="50" cy="54" r="5" fill="#1e40af"/>
<polygon points="47,58 53,58 52,66 48,66" fill="#1e40af"/>
<!-- arch highlight -->
<ellipse cx="42" cy="34" rx="18" ry="18" fill="#2563eb"/>
<text x="80" y="46" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="22" fill="#0f172a">PORT<tspan fill="#1e40af">KEY</tspan></text>
<text x="80" y="62" font-family="Arial,sans-serif" font-size="9" fill="#64748b" letter-spacing="1">SMART DOOR ACCESS</text>
</svg>
<div class="card-label">Door + Keyhole Icon</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" rx="44" fill="#0f172a"/>
<!-- key horizontal -->
<circle cx="40" cy="44" r="18" fill="none" stroke="#38bdf8" stroke-width="4"/>
<circle cx="40" cy="44" r="7" fill="#38bdf8" opacity="0.3"/>
<circle cx="40" cy="44" r="3" fill="#38bdf8"/>
<rect x="56" y="41" width="40" height="6" rx="3" fill="#38bdf8"/>
<rect x="86" y="47" width="6" height="10" rx="2" fill="#38bdf8"/>
<rect x="77" y="47" width="5" height="8" rx="2" fill="#38bdf8"/>
<text x="112" y="50" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="700" font-size="20" fill="white" letter-spacing="2">PORTKEY</text>
</svg>
<div class="card-label">Key Silhouette · Pill</div>
</div>
<div class="card">
<svg viewBox="0 0 160 160" width="160" height="160">
<rect width="160" height="160" rx="36" fill="#1e40af"/>
<!-- large P -->
<text x="20" y="120" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="110" fill="white" opacity="0.15">P</text>
<text x="20" y="120" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="110" fill="white" clip-path="none">P</text>
<!-- portal ring overlapping -->
<circle cx="116" cy="54" r="28" fill="none" stroke="#38bdf8" stroke-width="4" opacity="0.7"/>
<circle cx="116" cy="54" r="18" fill="none" stroke="#38bdf8" stroke-width="3"/>
<!-- key in portal -->
<circle cx="116" cy="50" r="7" fill="white" opacity="0.9"/>
<circle cx="116" cy="50" r="3" fill="#1e40af"/>
<rect x="114" y="57" width="4" height="10" rx="2" fill="white" opacity="0.9"/>
<rect x="118" y="62" width="4" height="2.5" rx="1" fill="white" opacity="0.9"/>
<rect x="118" y="65.5" width="3" height="2.5" rx="1" fill="white" opacity="0.9"/>
</svg>
<div class="card-label">App Icon · P + Portal</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ KEYHIVE ═══════════════════════════ -->
<section>
<div class="brand-header">
<h2>KeyHive</h2>
<span>Key + Hive · cộng đồng chung cư = tổ ong</span>
</div>
<div class="grid">
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="white"/>
<!-- honeycomb 7 cells (compact hex cluster) -->
<!-- center -->
<polygon points="44,44 50,34 62,34 68,44 62,54 50,54" fill="#f59e0b" opacity="0.8"/>
<!-- top-left -->
<polygon points="20,32 26,22 38,22 44,32 38,42 26,42" fill="#fbbf24" opacity="0.5"/>
<!-- top-right -->
<polygon points="44,32 50,22 62,22 68,32 62,42 50,42" fill="#fbbf24" opacity="0.5"/>
<!-- left -->
<polygon points="8,44 14,34 26,34 32,44 26,54 14,54" fill="#fbbf24" opacity="0.4"/>
<!-- right -->
<polygon points="68,44 74,34 86,34 92,44 86,54 74,54" fill="#fbbf24" opacity="0.4"/>
<!-- bottom-left -->
<polygon points="20,56 26,46 38,46 44,56 38,66 26,66" fill="#fbbf24" opacity="0.3"/>
<!-- bottom-right -->
<polygon points="44,56 50,46 62,46 68,56 62,66 50,66" fill="#fbbf24" opacity="0.3"/>
<!-- key on top of honeycomb -->
<circle cx="56" cy="44" r="8" fill="#1e40af"/>
<circle cx="56" cy="44" r="3" fill="white"/>
<rect x="54" y="52" width="4" height="8" rx="2" fill="#1e40af"/>
<text x="106" y="48" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="22" fill="#0f172a">KEY<tspan fill="#f59e0b">HIVE</tspan></text>
<text x="106" y="64" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="2">SMART BUILDING ACCESS</text>
</svg>
<div class="card-label">Honeycomb + Key</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" rx="10" fill="#0f172a"/>
<!-- single hexagon outline -->
<polygon points="46,10 70,24 70,64 46,78 22,64 22,24" fill="none" stroke="#f59e0b" stroke-width="3"/>
<polygon points="46,16 66,28 66,60 46,72 26,60 26,28" fill="none" stroke="#f59e0b" stroke-width="1.5" opacity="0.4"/>
<text x="46" y="52" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="18" fill="#f59e0b" text-anchor="middle">KH</text>
<text x="86" y="46" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="800" font-size="22" fill="white">KEY</text>
<text x="137" y="46" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="800" font-size="22" fill="#f59e0b">HIVE</text>
<text x="86" y="62" font-family="Arial,sans-serif" font-size="9" fill="#475569" letter-spacing="2">BUILDING ACCESS</text>
</svg>
<div class="card-label">KH Hex Monogram · Dark</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="#fffbeb"/>
<!-- key where bow = hexagon -->
<polygon points="44,14 60,24 60,44 44,54 28,44 28,24" fill="#f59e0b"/>
<polygon points="44,20 56,28 56,40 44,48 32,40 32,28" fill="#fde68a"/>
<!-- keyhole in hex -->
<circle cx="44" cy="34" r="6" fill="#92400e"/>
<polygon points="41,39 47,39 46,50 42,50" fill="#92400e"/>
<!-- shaft -->
<rect x="60" y="31" width="36" height="6" rx="3" fill="#f59e0b"/>
<rect x="86" y="37" width="6" height="9" rx="2" fill="#f59e0b"/>
<rect x="78" y="37" width="5" height="7" rx="2" fill="#f59e0b"/>
<text x="108" y="48" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="22" fill="#92400e">KEYHIVE</text>
<text x="108" y="64" font-family="Arial,sans-serif" font-size="9" fill="#b45309" letter-spacing="2">ACCESS SOLUTIONS</text>
</svg>
<div class="card-label">Key with Hex Bow</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="white"/>
<!-- 3x3 hex mini grid -->
<g transform="translate(10,10)">
<!-- row 1 -->
<polygon points="18,0 27,5 27,17 18,22 9,17 9,5" fill="#fde68a" stroke="#f59e0b" stroke-width="1"/>
<polygon points="42,0 51,5 51,17 42,22 33,17 33,5" fill="#fde68a" stroke="#f59e0b" stroke-width="1"/>
<polygon points="66,0 75,5 75,17 66,22 57,17 57,5" fill="#fde68a" stroke="#f59e0b" stroke-width="1"/>
<!-- row 2 (offset) -->
<polygon points="6,20 15,25 15,37 6,42 -3,37 -3,25" fill="#fde68a" stroke="#f59e0b" stroke-width="1"/>
<polygon points="30,20 39,25 39,37 30,42 21,37 21,25" fill="#f59e0b" stroke="#d97706" stroke-width="1"/>
<polygon points="54,20 63,25 63,37 54,42 45,37 45,25" fill="#fde68a" stroke="#f59e0b" stroke-width="1"/>
<polygon points="78,20 87,25 87,37 78,42 69,37 69,25" fill="#fde68a" stroke="#f59e0b" stroke-width="1"/>
<!-- row 3 -->
<polygon points="18,40 27,45 27,57 18,62 9,57 9,45" fill="#fde68a" stroke="#f59e0b" stroke-width="1"/>
<polygon points="42,40 51,45 51,57 42,62 33,57 33,45" fill="#fde68a" stroke="#f59e0b" stroke-width="1"/>
<polygon points="66,40 75,45 75,57 66,62 57,57 57,45" fill="#fde68a" stroke="#f59e0b" stroke-width="1"/>
<!-- K in center hex -->
<text x="30" y="36" font-family="Arial,sans-serif" font-weight="900" font-size="11" fill="white" text-anchor="middle">K</text>
</g>
<text x="112" y="44" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="20" fill="#0f172a">KEYHIVE</text>
<text x="112" y="60" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="2">SMART COMMUNITY</text>
</svg>
<div class="card-label">Hive Grid · K Highlighted</div>
</div>
<div class="card">
<svg viewBox="0 0 160 160" width="160" height="160">
<rect width="160" height="160" rx="36" fill="#1c1917"/>
<!-- hexagonal shape -->
<polygon points="80,16 112,34 112,70 80,88 48,70 48,34" fill="#f59e0b"/>
<polygon points="80,22 108,38 108,66 80,82 52,66 52,38" fill="#fbbf24" opacity="0.3"/>
<!-- K in hex -->
<rect x="66" y="30" width="5" height="40" fill="white"/>
<line x1="71" y1="50" x2="88" y2="30" stroke="white" stroke-width="5" stroke-linecap="round"/>
<line x1="71" y1="50" x2="88" y2="70" stroke="white" stroke-width="5" stroke-linecap="round"/>
<!-- HIVE below -->
<text x="80" y="118" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="14" fill="#f59e0b" text-anchor="middle" letter-spacing="4">HIVE</text>
<text x="80" y="136" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="400" font-size="9" fill="#78716c" text-anchor="middle" letter-spacing="3">ACCESS</text>
</svg>
<div class="card-label">App Icon · K in Hex</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ UNLOQ ═══════════════════════════ -->
<section>
<div class="brand-header">
<h2>Unloq</h2>
<span>Unlock · sáng tạo chính tả · domain .io còn trống</span>
</div>
<div class="grid">
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="white"/>
<!-- open padlock body -->
<rect x="20" y="42" width="44" height="36" rx="6" fill="#1e40af"/>
<rect x="26" y="46" width="32" height="28" rx="4" fill="#2563eb"/>
<!-- shackle (open = rotated right) -->
<path d="M32,42 L32,28 Q32,14 48,14 Q64,14 64,28 L64,38" fill="none" stroke="#1e40af" stroke-width="7" stroke-linecap="round"/>
<!-- keyhole on lock -->
<circle cx="42" cy="58" r="6" fill="#1e40af"/>
<rect x="40" y="62" width="4" height="8" rx="2" fill="#1e40af"/>
<text x="80" y="52" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="28" fill="#0f172a">UNLO<tspan fill="#1e40af">Q</tspan></text>
<text x="80" y="68" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="2">SMART ACCESS</text>
</svg>
<div class="card-label">Open Padlock + Wordmark</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" rx="10" fill="#0f172a"/>
<!-- U shape = open shackle -->
<path d="M32,18 L32,50 Q32,70 52,70 Q72,70 72,50 L72,18" fill="none" stroke="#38bdf8" stroke-width="8" stroke-linecap="round"/>
<!-- bar bottom (lock body suggestion) -->
<rect x="24" y="14" width="16" height="8" rx="4" fill="#38bdf8"/>
<text x="90" y="52" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="26" fill="white">UNLO<tspan fill="#38bdf8">Q</tspan></text>
<text x="90" y="68" font-family="Arial,sans-serif" font-size="9" fill="#475569" letter-spacing="2">UNLOCK ANYTHING</text>
</svg>
<div class="card-label">U-Shackle · Dark</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="#f8fafc"/>
<!-- UNLOQ where Q has lock notch -->
<text x="22" y="58" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="40" fill="#0f172a">UNLO</text>
<!-- Custom Q = circle + padlock body extending down -->
<circle cx="220" cy="42" r="20" fill="none" stroke="#1e40af" stroke-width="8"/>
<rect x="212" y="56" width="16" height="14" rx="3" fill="#1e40af"/>
<circle cx="220" cy="60" r="4" fill="white"/>
<rect x="218" y="63" width="4" height="6" rx="2" fill="white"/>
<text x="22" y="76" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="3">SMART ENTRY PLATFORM</text>
</svg>
<div class="card-label">Q as Padlock · Wordplay</div>
</div>
<div class="card">
<svg viewBox="0 0 160 160" width="160" height="160">
<rect width="160" height="160" rx="36" fill="#1e40af"/>
<circle cx="80" cy="80" r="52" fill="none" stroke="white" stroke-width="3" opacity="0.2"/>
<circle cx="80" cy="80" r="40" fill="white" opacity="0.08"/>
<!-- UL monogram -->
<text x="80" y="76" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="36" fill="white" text-anchor="middle">UL</text>
<text x="80" y="98" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="700" font-size="12" fill="#bfdbfe" text-anchor="middle" letter-spacing="3">UNLOQ</text>
<text x="80" y="116" font-family="Arial,sans-serif" font-size="9" fill="#93c5fd" text-anchor="middle" letter-spacing="2">ACCESS</text>
</svg>
<div class="card-label">App Icon · UL Circle</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="white"/>
<!-- minimal unlock arrow through U -->
<path d="M30,60 L30,34 Q30,18 48,18 Q66,18 66,34 L66,44" fill="none" stroke="#e2e8f0" stroke-width="6" stroke-linecap="round"/>
<path d="M30,60 L30,34 Q30,18 48,18 Q66,18 66,34 L66,44" fill="none" stroke="#1e40af" stroke-width="4" stroke-linecap="round" stroke-dasharray="8,3"/>
<!-- arrow tip -->
<polygon points="58,52 74,44 66,60" fill="#1e40af"/>
<text x="88" y="46" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="300" font-size="28" fill="#0f172a" letter-spacing="6">UNLOQ</text>
<line x1="88" y1="52" x2="252" y2="52" stroke="#e2e8f0" stroke-width="1"/>
<text x="88" y="65" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="3">SMART ACCESS</text>
</svg>
<div class="card-label">Minimal · Unlock Arrow</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ APTPASS ═══════════════════════════ -->
<section>
<div class="brand-header">
<h2>AptPass</h2>
<span>Apartment + Pass · rõ nghĩa nhất cho building management</span>
</div>
<div class="grid">
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="white"/>
<!-- building tower -->
<rect x="18" y="20" width="36" height="58" fill="#1e40af"/>
<rect x="22" y="26" width="8" height="8" rx="1" fill="#93c5fd"/>
<rect x="34" y="26" width="8" height="8" rx="1" fill="#93c5fd"/>
<rect x="22" y="38" width="8" height="8" rx="1" fill="#93c5fd"/>
<rect x="34" y="38" width="8" height="8" rx="1" fill="#bfdbfe" opacity="0.5"/>
<rect x="22" y="50" width="8" height="8" rx="1" fill="#93c5fd"/>
<rect x="34" y="50" width="8" height="8" rx="1" fill="#93c5fd"/>
<!-- door -->
<rect x="28" y="62" width="12" height="16" rx="2" fill="#1d4ed8"/>
<!-- checkmark -->
<circle cx="54" cy="24" r="14" fill="#10b981"/>
<polyline points="47,24 52,30 62,18" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<text x="80" y="48" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="24" fill="#0f172a">APT<tspan fill="#1e40af">PASS</tspan></text>
<text x="80" y="64" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="2">APARTMENT ACCESS</text>
</svg>
<div class="card-label">Building + Checkmark</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" rx="10" fill="#0f172a"/>
<!-- AP in architectural silhouette: A forms a tower with arch top -->
<!-- A shape as building -->
<polygon points="38,76 14,76 30,14 46,14 62,76" fill="#1e40af"/>
<!-- crossbar = floor -->
<rect x="19" y="50" width="38" height="5" fill="#0f172a"/>
<!-- arch window at top of A -->
<rect x="32" y="18" width="12" height="14" rx="6" fill="#38bdf8"/>
<!-- P letterform -->
<rect x="66" y="14" width="6" height="62" fill="#1e40af"/>
<path d="M72,14 Q96,14 96,32 Q96,50 72,50" fill="none" stroke="#1e40af" stroke-width="10"/>
<rect x="72" y="36" width="20" height="10" fill="#1e40af"/>
<text x="112" y="50" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="700" font-size="18" fill="white">APTPASS</text>
<text x="112" y="66" font-family="Arial,sans-serif" font-size="9" fill="#475569" letter-spacing="2">BUILDING SOLUTIONS</text>
</svg>
<div class="card-label">AP Architectural · Dark</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="#f0f9ff"/>
<!-- 3x4 window grid (apartment façade) -->
<rect x="14" y="8" width="58" height="72" rx="4" fill="#1e40af"/>
<rect x="18" y="12" width="50" height="64" rx="3" fill="#2563eb"/>
<!-- windows: 3 cols × 4 rows -->
<rect x="22" y="17" width="12" height="9" rx="2" fill="#bfdbfe"/>
<rect x="38" y="17" width="12" height="9" rx="2" fill="#93c5fd"/>
<rect x="54" y="17" width="10" height="9" rx="2" fill="#bfdbfe"/>
<rect x="22" y="30" width="12" height="9" rx="2" fill="#93c5fd"/>
<rect x="38" y="30" width="12" height="9" rx="2" fill="#bfdbfe"/>
<rect x="54" y="30" width="10" height="9" rx="2" fill="#38bdf8"/>
<rect x="22" y="43" width="12" height="9" rx="2" fill="#bfdbfe"/>
<rect x="38" y="43" width="12" height="9" rx="2" fill="#93c5fd"/>
<rect x="54" y="43" width="10" height="9" rx="2" fill="#bfdbfe"/>
<rect x="22" y="56" width="12" height="9" rx="2" fill="#93c5fd"/>
<rect x="38" y="56" width="12" height="9" rx="2" fill="#bfdbfe"/>
<rect x="54" y="56" width="10" height="9" rx="2" fill="#93c5fd"/>
<!-- door -->
<rect x="32" y="66" width="14" height="10" rx="2" fill="#1d4ed8"/>
<text x="86" y="46" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="800" font-size="22" fill="#0f172a">APT<tspan fill="#1e40af">PASS</tspan></text>
<text x="86" y="62" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="2">SMART BUILDING</text>
</svg>
<div class="card-label">Window Grid · Façade</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" fill="white"/>
<!-- key card shape -->
<rect x="14" y="18" width="76" height="52" rx="8" fill="#1e40af"/>
<rect x="14" y="18" width="76" height="20" rx="8" fill="#1d4ed8"/>
<rect x="14" y="26" width="76" height="12" fill="#1d4ed8"/>
<!-- chip -->
<rect x="24" y="34" width="18" height="14" rx="3" fill="#fbbf24"/>
<line x1="27" y1="34" x2="27" y2="48" stroke="#f59e0b" stroke-width="1"/>
<line x1="30" y1="34" x2="30" y2="48" stroke="#f59e0b" stroke-width="1"/>
<line x1="33" y1="34" x2="33" y2="48" stroke="#f59e0b" stroke-width="1"/>
<line x1="36" y1="34" x2="36" y2="48" stroke="#f59e0b" stroke-width="1"/>
<line x1="39" y1="34" x2="39" y2="48" stroke="#f59e0b" stroke-width="1"/>
<!-- AP text on card -->
<text x="50" y="52" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="16" fill="white">AP</text>
<!-- card number dots -->
<circle cx="30" cy="62" r="2" fill="#93c5fd"/>
<circle cx="38" cy="62" r="2" fill="#93c5fd"/>
<circle cx="60" cy="62" r="2" fill="#93c5fd"/>
<circle cx="68" cy="62" r="2" fill="#93c5fd"/>
<text x="104" y="46" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="900" font-size="22" fill="#0f172a">APT<tspan fill="#1e40af">PASS</tspan></text>
<text x="104" y="62" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8" letter-spacing="2">YOUR ACCESS CARD</text>
</svg>
<div class="card-label">Key Card Design</div>
</div>
<div class="card">
<svg viewBox="0 0 280 88" width="280" height="88">
<rect width="280" height="88" rx="10" fill="#0c1445"/>
<!-- city skyline silhouette -->
<g fill="#1e40af" opacity="0.6">
<!-- buildings skyline -->
<rect x="14" y="50" width="10" height="22"/>
<rect x="12" y="42" width="6" height="30"/>
<rect x="24" y="38" width="8" height="34"/>
<rect x="32" y="46" width="6" height="26"/>
<rect x="38" y="32" width="10" height="40"/>
<rect x="36" y="28" width="4" height="44"/>
<rect x="48" y="44" width="8" height="28"/>
<rect x="56" y="36" width="12" height="36"/>
<rect x="54" y="30" width="4" height="42"/>
<rect x="68" y="48" width="8" height="24"/>
<rect x="76" y="40" width="6" height="32"/>
</g>
<!-- horizon line -->
<line x1="10" y1="72" x2="270" y2="72" stroke="#1e40af" stroke-width="1" opacity="0.4"/>
<!-- wordmark below skyline -->
<text x="14" y="64" font-family="'Helvetica Neue',Arial,sans-serif" font-weight="300" font-size="22" fill="white" letter-spacing="6">APTPASS</text>
<text x="14" y="80" font-family="Arial,sans-serif" font-size="8" fill="#475569" letter-spacing="4">BUILDING ACCESS SOLUTIONS</text>
</svg>
<div class="card-label">Skyline + Wordmark</div>
</div>
</div>
</section>
<footer style="text-align:center;color:#94a3b8;font-size:12px;margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0">
CTI Logo Concepts · Đoàn Hữu Trung · Nguyễn Tuấn Anh · Nguyễn Văn Chúc Ân
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment