kitadmin
7cfa3f00fa
- Removed all 'Keeping IT Real' tagline references (not a current tagline) - Removed FREE WIFI / KITWIFI references from vehicle graphics specs - Added keylink-it-brand-toolkit.html with full product mockups and vendor specs covering apparel, promo items, print/signage, vehicle graphics, and digital assets
929 lines
48 KiB
HTML
929 lines
48 KiB
HTML
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--kit-cobalt: #0541AD;
|
|
--kit-cobalt-dark: #032D7A;
|
|
--kit-cobalt-light: #0A5CE0;
|
|
--kit-white: #FFFFFF;
|
|
--kit-black: #000000;
|
|
--kit-gray: #F4F5F7;
|
|
--kit-mid: #6B7280;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Lato', sans-serif; color: var(--kit-black); background: var(--kit-gray); }
|
|
|
|
.hero {
|
|
background: var(--kit-cobalt);
|
|
color: white;
|
|
padding: 48px 32px;
|
|
text-align: center;
|
|
}
|
|
.hero h1 { font-size: 36px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 8px; }
|
|
.hero p { font-size: 16px; opacity: 0.85; max-width: 600px; margin: 0 auto; }
|
|
|
|
.nav-bar {
|
|
background: white;
|
|
border-bottom: 2px solid var(--kit-cobalt);
|
|
padding: 0 24px;
|
|
display: flex;
|
|
gap: 0;
|
|
overflow-x: auto;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.nav-bar button {
|
|
font-family: 'Lato', sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
padding: 14px 20px;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
color: var(--kit-mid);
|
|
border-bottom: 3px solid transparent;
|
|
white-space: nowrap;
|
|
transition: all 0.2s;
|
|
}
|
|
.nav-bar button.active, .nav-bar button:hover {
|
|
color: var(--kit-cobalt);
|
|
border-bottom-color: var(--kit-cobalt);
|
|
}
|
|
|
|
.section { display: none; padding: 32px 24px; max-width: 1100px; margin: 0 auto; }
|
|
.section.active { display: block; }
|
|
.section h2 { font-size: 24px; font-weight: 900; color: var(--kit-cobalt); margin-bottom: 6px; }
|
|
.section .subtitle { font-size: 14px; color: var(--kit-mid); margin-bottom: 28px; }
|
|
|
|
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
|
|
|
|
.product-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid #E5E7EB;
|
|
transition: box-shadow 0.2s;
|
|
}
|
|
.product-card:hover { box-shadow: 0 4px 20px rgba(5,65,173,0.12); }
|
|
|
|
.product-card .mockup {
|
|
aspect-ratio: 4/3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.product-card .info { padding: 16px 20px; }
|
|
.product-card .info h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
|
|
.product-card .info .desc { font-size: 13px; color: var(--kit-mid); line-height: 1.5; }
|
|
|
|
.spec-table {
|
|
width: 100%;
|
|
font-size: 13px;
|
|
margin-top: 12px;
|
|
border-collapse: collapse;
|
|
}
|
|
.spec-table td {
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid #F0F0F0;
|
|
vertical-align: top;
|
|
}
|
|
.spec-table td:first-child { font-weight: 700; color: var(--kit-cobalt); width: 120px; }
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
margin-top: 8px;
|
|
}
|
|
.badge-apparel { background: #EEF2FF; color: var(--kit-cobalt); }
|
|
.badge-print { background: #FEF3C7; color: #92400E; }
|
|
.badge-promo { background: #D1FAE5; color: #065F46; }
|
|
.badge-vehicle { background: #FEE2E2; color: #991B1B; }
|
|
.badge-digital { background: #E0E7FF; color: #3730A3; }
|
|
|
|
/* Mockup rendering styles */
|
|
.mock-bg-dark { background: #1a1a2e; }
|
|
.mock-bg-cobalt { background: var(--kit-cobalt); }
|
|
.mock-bg-light { background: #F8F9FB; }
|
|
.mock-bg-gray { background: #E5E7EB; }
|
|
|
|
/* Garment shapes */
|
|
.garment-shape {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.printer-notes {
|
|
background: #FFFBEB;
|
|
border: 1px solid #FDE68A;
|
|
border-radius: 8px;
|
|
padding: 16px 20px;
|
|
margin-top: 24px;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
.printer-notes strong { color: #92400E; }
|
|
|
|
.color-swatch {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 4px 8px 4px 0;
|
|
}
|
|
.color-swatch .dot {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
border: 1px solid #DDD;
|
|
}
|
|
|
|
.file-list {
|
|
background: white;
|
|
border-radius: 8px;
|
|
border: 1px solid #E5E7EB;
|
|
overflow: hidden;
|
|
margin-top: 16px;
|
|
}
|
|
.file-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid #F0F0F0;
|
|
font-size: 13px;
|
|
}
|
|
.file-row:last-child { border-bottom: none; }
|
|
.file-row .fname { font-weight: 700; flex: 1; font-family: monospace; font-size: 12px; }
|
|
.file-row .fuse { color: var(--kit-mid); }
|
|
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.summary-card {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border: 1px solid #E5E7EB;
|
|
}
|
|
.summary-card .num { font-size: 32px; font-weight: 900; color: var(--kit-cobalt); }
|
|
.summary-card .label { font-size: 12px; color: var(--kit-mid); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
|
|
</style>
|
|
|
|
<div class="hero">
|
|
<h1>Keylink IT Brand Toolkit</h1>
|
|
<p>Print-ready specifications, mockups, and vendor files for apparel, promotional products, signage, and vehicle graphics.</p>
|
|
</div>
|
|
|
|
<div class="nav-bar">
|
|
<button class="active" onclick="showSection('overview', this)">Overview</button>
|
|
<button onclick="showSection('apparel', this)">Apparel</button>
|
|
<button onclick="showSection('promo', this)">Promo Items</button>
|
|
<button onclick="showSection('print', this)">Print / Signage</button>
|
|
<button onclick="showSection('vehicle', this)">Vehicle Wraps</button>
|
|
<button onclick="showSection('digital', this)">Digital</button>
|
|
<button onclick="showSection('files', this)">Vendor Files</button>
|
|
</div>
|
|
|
|
<!-- OVERVIEW -->
|
|
<div class="section active" id="overview">
|
|
<h2>Brand at a Glance</h2>
|
|
<p class="subtitle">Everything a vendor needs to produce Keylink IT branded products.</p>
|
|
|
|
<div class="summary-grid">
|
|
<div class="summary-card"><div class="num">6</div><div class="label">Apparel Items</div></div>
|
|
<div class="summary-card"><div class="num">6</div><div class="label">Promo Products</div></div>
|
|
<div class="summary-card"><div class="num">4</div><div class="label">Print Formats</div></div>
|
|
<div class="summary-card"><div class="num">3</div><div class="label">Vehicle Graphics</div></div>
|
|
</div>
|
|
|
|
<h3 style="font-size:16px; font-weight:700; margin-bottom:12px;">Brand Colors</h3>
|
|
<div style="display:flex; flex-wrap:wrap; gap:16px; margin-bottom:24px;">
|
|
<div style="background:var(--kit-cobalt); color:white; padding:20px 28px; border-radius:10px; min-width:180px;">
|
|
<div style="font-weight:900; font-size:18px;">Cobalt Blue</div>
|
|
<div style="opacity:0.8; font-size:13px; margin-top:4px;">HEX #0541AD</div>
|
|
<div style="opacity:0.8; font-size:13px;">RGB 5, 65, 173</div>
|
|
<div style="opacity:0.8; font-size:13px;">CMYK 97, 63, 0, 32</div>
|
|
<div style="opacity:0.8; font-size:13px;">Pantone 2146 C</div>
|
|
</div>
|
|
<div style="background:white; border:2px solid #E5E7EB; padding:20px 28px; border-radius:10px; min-width:180px;">
|
|
<div style="font-weight:900; font-size:18px;">White</div>
|
|
<div style="color:var(--kit-mid); font-size:13px; margin-top:4px;">HEX #FFFFFF</div>
|
|
<div style="color:var(--kit-mid); font-size:13px;">RGB 255, 255, 255</div>
|
|
<div style="color:var(--kit-mid); font-size:13px;">CMYK 0, 0, 0, 0</div>
|
|
</div>
|
|
<div style="background:var(--kit-black); color:white; padding:20px 28px; border-radius:10px; min-width:180px;">
|
|
<div style="font-weight:900; font-size:18px;">Black</div>
|
|
<div style="opacity:0.8; font-size:13px; margin-top:4px;">HEX #000000</div>
|
|
<div style="opacity:0.8; font-size:13px;">RGB 0, 0, 0</div>
|
|
<div style="opacity:0.8; font-size:13px;">CMYK 0, 0, 0, 100</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="font-size:16px; font-weight:700; margin-bottom:12px;">Typography</h3>
|
|
<div style="background:white; border-radius:10px; padding:24px; border:1px solid #E5E7EB; margin-bottom:24px;">
|
|
<div style="font-size:32px; font-weight:900; color:var(--kit-cobalt);">Lato Bold / Black</div>
|
|
<div style="font-size:16px; color:var(--kit-mid); margin-top:8px;">ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789</div>
|
|
<div style="font-size:13px; color:var(--kit-mid); margin-top:12px;">Google Fonts: fonts.google.com/specimen/Lato</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- APPAREL -->
|
|
<div class="section" id="apparel">
|
|
<h2>Apparel</h2>
|
|
<p class="subtitle">Technician uniforms, team polos, event shirts, and outerwear.</p>
|
|
|
|
<div class="product-grid">
|
|
<!-- Polo -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<path d="M120,80 L140,40 L160,60 Q200,75 240,60 L260,40 L280,80 L260,95 L260,260 L140,260 L140,95 Z" fill="#1B2A4A" stroke="#111" stroke-width="1"/>
|
|
<path d="M160,60 Q200,78 240,60" fill="none" stroke="#333" stroke-width="1.5"/>
|
|
<path d="M120,80 L100,120 L140,140 L140,95" fill="#1B2A4A" stroke="#111" stroke-width="1"/>
|
|
<path d="M280,80 L300,120 L260,140 L260,95" fill="#1B2A4A" stroke="#111" stroke-width="1"/>
|
|
<g transform="translate(148,110) scale(0.18)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white">Keylink IT</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Polo Shirt - Left Chest</h3>
|
|
<div class="desc">Navy polo with white embroidered Keylink IT wordmark on left chest. Standard technician daily wear.</div>
|
|
<span class="badge badge-apparel">Apparel</span>
|
|
<table class="spec-table">
|
|
<tr><td>Placement</td><td>Left chest, 3" below shoulder seam</td></tr>
|
|
<tr><td>Logo size</td><td>3.5" wide x 0.75" tall</td></tr>
|
|
<tr><td>Method</td><td>Embroidery (preferred) or screen print</td></tr>
|
|
<tr><td>Thread</td><td>White on navy/black garment</td></tr>
|
|
<tr><td>File</td><td>svg/apparel/keylink-it-apparel-white.svg</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jacket -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<path d="M110,75 L135,35 L160,55 Q200,70 240,55 L265,35 L290,75 L295,260 L200,260 L200,85 L200,260 L105,260 Z" fill="#111827" stroke="#000" stroke-width="1"/>
|
|
<path d="M160,55 Q200,72 240,55" fill="none" stroke="#333" stroke-width="1.5"/>
|
|
<line x1="200" y1="55" x2="200" y2="260" stroke="#222" stroke-width="2"/>
|
|
<path d="M110,75 L80,130 L135,155 L135,90" fill="#111827" stroke="#000" stroke-width="1"/>
|
|
<path d="M290,75 L320,130 L265,155 L265,90" fill="#111827" stroke="#000" stroke-width="1"/>
|
|
<rect x="120" y="175" width="70" height="45" rx="3" fill="none" stroke="#333" stroke-width="0.8"/>
|
|
<rect x="210" y="175" width="70" height="45" rx="3" fill="none" stroke="#333" stroke-width="0.8"/>
|
|
<g transform="translate(130,105) scale(0.16)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white">Keylink IT</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Softshell Jacket - Left Chest</h3>
|
|
<div class="desc">Black softshell with white embroidered logo. For field techs in cooler weather and client-facing visits.</div>
|
|
<span class="badge badge-apparel">Apparel</span>
|
|
<table class="spec-table">
|
|
<tr><td>Placement</td><td>Left chest</td></tr>
|
|
<tr><td>Logo size</td><td>4" wide x 0.85" tall</td></tr>
|
|
<tr><td>Method</td><td>Embroidery</td></tr>
|
|
<tr><td>Thread</td><td>White on black</td></tr>
|
|
<tr><td>Alt option</td><td>Cobalt blue jacket + white logo</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jacket Back -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<path d="M115,50 Q200,45 285,50 L295,260 L105,260 Z" fill="#111827" stroke="#000" stroke-width="1"/>
|
|
<path d="M115,50 L85,110 L120,95" fill="#111827" stroke="#000" stroke-width="1"/>
|
|
<path d="M285,50 L315,110 L280,95" fill="#111827" stroke="#000" stroke-width="1"/>
|
|
<g transform="translate(135,130) scale(0.32)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="11" fill="#999" x="200" y="185" text-anchor="middle">Relax, I Can Fix IT!</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Jacket Back - Full Print</h3>
|
|
<div class="desc">Large wordmark across upper back with tagline underneath. High visibility at job sites.</div>
|
|
<span class="badge badge-apparel">Apparel</span>
|
|
<table class="spec-table">
|
|
<tr><td>Placement</td><td>Center back, 3" below yoke</td></tr>
|
|
<tr><td>Logo size</td><td>11" wide x 2.5" tall</td></tr>
|
|
<tr><td>Tagline</td><td>"Relax, I Can Fix IT!" centered below</td></tr>
|
|
<tr><td>Method</td><td>Screen print or heat transfer</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hat -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<ellipse cx="200" cy="220" rx="130" ry="20" fill="#0D1B3E"/>
|
|
<path d="M70,220 Q70,100 200,90 Q330,100 330,220" fill="#1B2A4A"/>
|
|
<path d="M70,220 Q70,210 200,200 Q330,210 330,220" fill="#0D1B3E"/>
|
|
<path d="M90,222 L60,230 Q50,232 70,236 L310,236 Q340,232 320,228 L290,222" fill="#1B2A4A" stroke="#111" stroke-width="0.5"/>
|
|
<g transform="translate(155,155) scale(0.22)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="100" fill="white">KIT</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Structured Cap - Front</h3>
|
|
<div class="desc">Navy structured cap with white embroidered KIT alternate logo on front panel.</div>
|
|
<span class="badge badge-apparel">Apparel</span>
|
|
<table class="spec-table">
|
|
<tr><td>Placement</td><td>Front center panel</td></tr>
|
|
<tr><td>Logo</td><td>KIT alternate mark</td></tr>
|
|
<tr><td>Size</td><td>2.75" wide x 1.25" tall</td></tr>
|
|
<tr><td>Method</td><td>Embroidery (3D puff optional)</td></tr>
|
|
<tr><td>File</td><td>logos/alternate/kit-alt-blue.png (recolor white)</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Beanie -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<path d="M120,240 Q120,100 200,80 Q280,100 280,240" fill="#1B2A4A"/>
|
|
<rect x="120" y="200" width="160" height="40" fill="#0D1B3E" rx="2"/>
|
|
<line x1="120" y1="210" x2="280" y2="210" stroke="#1B2A4A" stroke-width="0.5"/>
|
|
<line x1="120" y1="220" x2="280" y2="220" stroke="#1B2A4A" stroke-width="0.5"/>
|
|
<line x1="120" y1="230" x2="280" y2="230" stroke="#1B2A4A" stroke-width="0.5"/>
|
|
<rect x="168" y="205" width="64" height="30" rx="4" fill="var(--kit-cobalt)"/>
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="14" fill="white" x="200" y="224" text-anchor="middle">KIT</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Beanie - Woven Patch</h3>
|
|
<div class="desc">Navy cuffed beanie with woven patch on fold. KIT logo on cobalt blue patch with white text.</div>
|
|
<span class="badge badge-apparel">Apparel</span>
|
|
<table class="spec-table">
|
|
<tr><td>Placement</td><td>Center of cuff fold</td></tr>
|
|
<tr><td>Patch size</td><td>2.5" x 1" woven patch</td></tr>
|
|
<tr><td>Patch color</td><td>Cobalt blue background, white text</td></tr>
|
|
<tr><td>Method</td><td>Woven label, sewn on</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- T-Shirt -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-cobalt">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<path d="M130,70 L150,35 L165,50 Q200,62 235,50 L250,35 L270,70 L255,85 L255,265 L145,265 L145,85 Z" fill="white" stroke="#DDD" stroke-width="1"/>
|
|
<path d="M165,50 Q200,65 235,50" fill="none" stroke="#CCC" stroke-width="1"/>
|
|
<path d="M130,70 L105,115 L145,130 L145,85" fill="white" stroke="#DDD" stroke-width="1"/>
|
|
<path d="M270,70 L295,115 L255,130 L255,85" fill="white" stroke="#DDD" stroke-width="1"/>
|
|
<g transform="translate(153,100) scale(0.15)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="#0541AD">Keylink IT</text>
|
|
</g>
|
|
<g transform="translate(163,175) scale(0.28)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="80" fill="#0541AD">Relax,</text>
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="60" fill="#0541AD" y="55">I Can Fix IT!</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Event T-Shirt - Front</h3>
|
|
<div class="desc">White tee with cobalt blue print. Small logo on left chest, large tagline center body. For events and giveaways.</div>
|
|
<span class="badge badge-apparel">Apparel</span>
|
|
<table class="spec-table">
|
|
<tr><td>Chest logo</td><td>3.5" wide, left chest</td></tr>
|
|
<tr><td>Center art</td><td>"Relax, I Can Fix IT!" at 8" wide</td></tr>
|
|
<tr><td>Method</td><td>Screen print</td></tr>
|
|
<tr><td>Ink</td><td>Cobalt blue (Pantone 2146 C)</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="printer-notes">
|
|
<strong>Vendor notes for all apparel:</strong> Preferred garment colors are navy (#1B2A4A), black, and charcoal for white logo applications. White and light gray garments use cobalt blue (#0541AD) logo. Embroidery stitch count is approximately 8,000-10,000 for the full wordmark at 3.5". Thread match: Madeira Polyneon 1842 for cobalt, standard white for reversed. Always provide the SVG from svg/apparel/ as the digitizing source.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PROMO ITEMS -->
|
|
<div class="section" id="promo">
|
|
<h2>Promotional Products</h2>
|
|
<p class="subtitle">Giveaways, office accessories, and client gifts.</p>
|
|
|
|
<div class="product-grid">
|
|
<!-- Coffee Mug -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<path d="M120,90 L110,250 Q110,265 200,265 Q290,265 280,250 L270,90 Z" fill="white" stroke="#CCC" stroke-width="1.5"/>
|
|
<path d="M270,120 Q320,120 320,165 Q320,210 270,210" fill="none" stroke="#CCC" stroke-width="3"/>
|
|
<ellipse cx="195" cy="90" rx="78" ry="12" fill="#F5F5F5" stroke="#CCC" stroke-width="1"/>
|
|
<g transform="translate(138,155) scale(0.20)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="#0541AD">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="9" fill="#0541AD" x="195" y="185" text-anchor="middle">Relax, I Can Fix IT!</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Ceramic Coffee Mug</h3>
|
|
<div class="desc">11oz white ceramic mug with cobalt blue logo wrap. Great for client onboarding gift baskets.</div>
|
|
<span class="badge badge-promo">Promo</span>
|
|
<table class="spec-table">
|
|
<tr><td>Size</td><td>11oz standard</td></tr>
|
|
<tr><td>Print area</td><td>3.5" x 2.5" centered</td></tr>
|
|
<tr><td>Method</td><td>Sublimation or direct print</td></tr>
|
|
<tr><td>Art</td><td>Wordmark + tagline in cobalt blue</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mouse Pad -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-cobalt">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<rect x="60" y="70" width="280" height="160" rx="12" fill="#0A1628" stroke="#1a3a6e" stroke-width="1"/>
|
|
<g transform="translate(112,140) scale(0.28)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="10" fill="#6B8CC7" x="200" y="175" text-anchor="middle">keylinkit.com | (615) 475-0145</text>
|
|
<text font-family="Lato, sans-serif" font-weight="700" font-size="9" fill="#4A7ABF" x="200" y="200" text-anchor="middle">Relax, I Can Fix IT!</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Mouse Pad - Full Bleed</h3>
|
|
<div class="desc">Dark navy mousepad with white logo and contact info. Leave-behind for every new client workstation.</div>
|
|
<span class="badge badge-promo">Promo</span>
|
|
<table class="spec-table">
|
|
<tr><td>Size</td><td>9.25" x 7.75" standard</td></tr>
|
|
<tr><td>Print</td><td>Full bleed sublimation</td></tr>
|
|
<tr><td>Background</td><td>Dark navy (#0A1628)</td></tr>
|
|
<tr><td>Content</td><td>Logo + URL + phone + tagline</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tumbler -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<path d="M165,50 L155,260 Q155,270 200,270 Q245,270 235,260 L225,50 Z" fill="#1B2A4A"/>
|
|
<ellipse cx="195" cy="50" rx="32" ry="8" fill="#0D1B3E"/>
|
|
<rect x="160" y="55" width="70" height="6" fill="#111827" rx="1"/>
|
|
<g transform="translate(172,130) scale(0.09)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="7" fill="#8BA3D4" x="195" y="155" text-anchor="middle">Relax, I Can Fix IT!</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Insulated Tumbler</h3>
|
|
<div class="desc">20oz navy insulated tumbler with laser-etched or white printed logo. Premium client gift.</div>
|
|
<span class="badge badge-promo">Promo</span>
|
|
<table class="spec-table">
|
|
<tr><td>Size</td><td>20oz insulated</td></tr>
|
|
<tr><td>Color</td><td>Navy body</td></tr>
|
|
<tr><td>Method</td><td>Laser etch (silver reveal) or white pad print</td></tr>
|
|
<tr><td>Art</td><td>Wordmark + tagline</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pen -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<rect x="50" y="145" width="280" height="12" rx="6" fill="var(--kit-cobalt)"/>
|
|
<polygon points="330,145 330,157 345,151" fill="#888"/>
|
|
<rect x="50" y="145" width="20" height="12" rx="6" fill="#032D7A"/>
|
|
<rect x="42" y="148" width="12" height="6" rx="2" fill="#CCC"/>
|
|
<g transform="translate(115,148) scale(0.055)">
|
|
<text font-family="Lato, sans-serif" font-weight="700" font-size="120" fill="white">KeylinkIT.com (615) 475-0145</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Branded Pen</h3>
|
|
<div class="desc">Cobalt blue barrel with white imprint. URL and phone number. Bulk giveaway item.</div>
|
|
<span class="badge badge-promo">Promo</span>
|
|
<table class="spec-table">
|
|
<tr><td>Color</td><td>Cobalt blue barrel, silver trim</td></tr>
|
|
<tr><td>Imprint</td><td>White pad print</td></tr>
|
|
<tr><td>Text</td><td>"KeylinkIT.com (615) 475-0145"</td></tr>
|
|
<tr><td>Print area</td><td>2.5" x 0.375"</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sticker -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-gray">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<rect x="100" y="85" width="200" height="130" rx="10" fill="white" stroke="#DDD" stroke-width="1"/>
|
|
<g transform="translate(122,140) scale(0.22)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="#0541AD">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="10" fill="#0541AD" x="200" y="170" text-anchor="middle">Relax, I Can Fix IT!</text>
|
|
<text font-family="Lato, sans-serif" font-weight="700" font-size="9" fill="#666" x="200" y="195" text-anchor="middle">keylinkit.com</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Die-Cut Sticker</h3>
|
|
<div class="desc">Vinyl die-cut sticker for laptops, toolboxes, and client equipment. Weather-resistant.</div>
|
|
<span class="badge badge-promo">Promo</span>
|
|
<table class="spec-table">
|
|
<tr><td>Size</td><td>3" x 2" die-cut rectangle</td></tr>
|
|
<tr><td>Material</td><td>Weatherproof vinyl, matte laminate</td></tr>
|
|
<tr><td>Print</td><td>Full color digital</td></tr>
|
|
<tr><td>Art</td><td>Blue logo + tagline + URL on white</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lanyard -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<path d="M160,30 L160,240 Q160,255 200,265 Q240,255 240,240 L240,30" fill="none" stroke="var(--kit-cobalt)" stroke-width="18" stroke-linecap="round"/>
|
|
<g transform="translate(167,100) scale(0.1)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white">Keylink IT</text>
|
|
</g>
|
|
<g transform="translate(167,150) scale(0.1)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white">Keylink IT</text>
|
|
</g>
|
|
<g transform="translate(167,200) scale(0.1)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white">Keylink IT</text>
|
|
</g>
|
|
<circle cx="200" cy="265" r="8" fill="#CCC" stroke="#999" stroke-width="1"/>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Branded Lanyard</h3>
|
|
<div class="desc">Cobalt blue lanyard with repeating white Keylink IT wordmark. For badges and keycards.</div>
|
|
<span class="badge badge-promo">Promo</span>
|
|
<table class="spec-table">
|
|
<tr><td>Width</td><td>0.75" flat woven</td></tr>
|
|
<tr><td>Color</td><td>Cobalt blue strap, white text</td></tr>
|
|
<tr><td>Pattern</td><td>Repeating "Keylink IT" wordmark</td></tr>
|
|
<tr><td>Hardware</td><td>Swivel J-hook, safety breakaway</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PRINT / SIGNAGE -->
|
|
<div class="section" id="print">
|
|
<h2>Print and Signage</h2>
|
|
<p class="subtitle">Flyers, banners, business cards, and signage for client locations and events.</p>
|
|
|
|
<div class="product-grid">
|
|
<!-- Business Card -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-gray">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<rect x="65" y="70" width="270" height="160" rx="6" fill="white" stroke="#DDD" stroke-width="1"/>
|
|
<g transform="translate(85,105) scale(0.15)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="#0541AD">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="700" font-size="11" fill="#333" x="85" y="140">Allen McGhan</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="9" fill="#666" x="85" y="155">Owner</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#666" x="85" y="180">(615) 475-0145</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#666" x="85" y="193">keylinkit.com</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#666" x="85" y="206">Hendersonville, TN</text>
|
|
<rect x="275" y="155" width="45" height="45" rx="6" fill="var(--kit-cobalt)"/>
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="28" fill="white" x="297" y="186" text-anchor="middle">K</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Business Card</h3>
|
|
<div class="desc">Standard 3.5" x 2" business card. White front with logo and contact info. K monomark accent.</div>
|
|
<span class="badge badge-print">Print</span>
|
|
<table class="spec-table">
|
|
<tr><td>Size</td><td>3.5" x 2" (standard)</td></tr>
|
|
<tr><td>Paper</td><td>16pt matte or soft-touch</td></tr>
|
|
<tr><td>Front</td><td>White bg, cobalt logo, black text</td></tr>
|
|
<tr><td>Back</td><td>Full cobalt blue with white K monomark (optional)</td></tr>
|
|
<tr><td>Bleed</td><td>0.125" all sides</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flyer -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-cobalt">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<rect x="75" y="30" width="250" height="240" fill="white" rx="4"/>
|
|
<rect x="75" y="30" width="250" height="55" fill="var(--kit-cobalt)" rx="4"/>
|
|
<rect x="75" y="81" width="250" height="4" fill="var(--kit-cobalt)" rx="0"/>
|
|
<g transform="translate(100,55) scale(0.16)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="white" x="290" y="72" text-anchor="end">(615) 475-0145</text>
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="14" fill="#0541AD" x="200" y="115" text-anchor="middle">IT Services for Your Business</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#666" x="100" y="140">Managed IT Support</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#666" x="100" y="155">VoIP Phone Systems (3CX)</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#666" x="100" y="170">Network Design and Wiring</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#666" x="100" y="185">Cloud Services and Microsoft 365</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#666" x="100" y="200">Data Backup and Recovery</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#666" x="100" y="215">Web Design</text>
|
|
<rect x="75" y="235" width="250" height="35" fill="var(--kit-cobalt)"/>
|
|
<text font-family="Lato, sans-serif" font-weight="700" font-size="10" fill="white" x="200" y="255" text-anchor="middle">keylinkit.com | Relax, I Can Fix IT!</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Service Flyer</h3>
|
|
<div class="desc">8.5" x 11" one-page service overview flyer. For door-to-door, chamber events, and client lobbies.</div>
|
|
<span class="badge badge-print">Print</span>
|
|
<table class="spec-table">
|
|
<tr><td>Size</td><td>8.5" x 11" (letter)</td></tr>
|
|
<tr><td>Print</td><td>Full color, double-sided optional</td></tr>
|
|
<tr><td>Paper</td><td>100lb gloss text or 80lb matte</td></tr>
|
|
<tr><td>Bleed</td><td>0.125" all sides</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Retractable Banner -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-gray">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<rect x="165" y="20" width="70" height="250" fill="var(--kit-cobalt)" rx="2"/>
|
|
<rect x="160" y="260" width="80" height="15" rx="4" fill="#999"/>
|
|
<g transform="translate(178,80) scale(0.06)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white" transform="rotate(90)">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="10" fill="white" x="200" y="70" text-anchor="middle" transform="rotate(0)">Keylink</text>
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="10" fill="white" x="200" y="82" text-anchor="middle">IT</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="6" fill="#B0C4FF" x="200" y="110" text-anchor="middle">IT Services</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="6" fill="#B0C4FF" x="200" y="122" text-anchor="middle">VoIP Phones</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="6" fill="#B0C4FF" x="200" y="134" text-anchor="middle">Networking</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="6" fill="#B0C4FF" x="200" y="146" text-anchor="middle">Cloud Services</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="6" fill="#B0C4FF" x="200" y="158" text-anchor="middle">Backup</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="6" fill="#B0C4FF" x="200" y="170" text-anchor="middle">Web Design</text>
|
|
<text font-family="Lato, sans-serif" font-weight="700" font-size="5" fill="white" x="200" y="220" text-anchor="middle">keylinkit.com</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="5" fill="white" x="200" y="232" text-anchor="middle">(615) 475-0145</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="5" fill="#B0C4FF" x="200" y="244" text-anchor="middle">Relax, I Can Fix IT!</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Retractable Banner Stand</h3>
|
|
<div class="desc">33" x 80" retractable banner for trade shows, chamber events, and office lobby.</div>
|
|
<span class="badge badge-print">Print</span>
|
|
<table class="spec-table">
|
|
<tr><td>Size</td><td>33" x 80"</td></tr>
|
|
<tr><td>Material</td><td>13oz vinyl or premium polyester</td></tr>
|
|
<tr><td>Background</td><td>Full cobalt blue bleed</td></tr>
|
|
<tr><td>Content</td><td>Logo, services list, contact info, tagline</td></tr>
|
|
<tr><td>Resolution</td><td>150 DPI minimum at full size</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Yard Sign -->
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<rect x="100" y="60" width="200" height="140" rx="2" fill="var(--kit-cobalt)" stroke="#032D7A" stroke-width="2"/>
|
|
<g transform="translate(128,120) scale(0.22)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="700" font-size="10" fill="white" x="200" y="155" text-anchor="middle">(615) 475-0145</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="9" fill="#B0C4FF" x="200" y="175" text-anchor="middle">keylinkit.com</text>
|
|
<rect x="185" y="200" width="4" height="60" fill="#999"/>
|
|
<rect x="211" y="200" width="4" height="60" fill="#999"/>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Corrugated Yard Sign</h3>
|
|
<div class="desc">18" x 24" coroplast sign with H-stake. Place at active job sites for local visibility.</div>
|
|
<span class="badge badge-print">Print</span>
|
|
<table class="spec-table">
|
|
<tr><td>Size</td><td>18" x 24"</td></tr>
|
|
<tr><td>Material</td><td>4mm corrugated plastic (coroplast)</td></tr>
|
|
<tr><td>Print</td><td>Full color, double-sided</td></tr>
|
|
<tr><td>Content</td><td>Logo + phone + URL on cobalt blue</td></tr>
|
|
<tr><td>Mounting</td><td>H-stake wire frame</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VEHICLE -->
|
|
<div class="section" id="vehicle">
|
|
<h2>Vehicle Graphics</h2>
|
|
<p class="subtitle">Wraps, magnets, and decals for the service fleet.</p>
|
|
|
|
<div class="product-grid">
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light" style="aspect-ratio:16/9;">
|
|
<svg viewBox="0 0 400 200" width="100%" height="100%">
|
|
<rect x="30" y="40" width="340" height="130" rx="8" fill="white" stroke="#CCC" stroke-width="1"/>
|
|
<rect x="30" y="40" width="100" height="130" rx="8" fill="#E8EDFF"/>
|
|
<g transform="translate(170,90) scale(0.2)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="#0541AD">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="7" fill="#666" x="250" y="155" text-anchor="middle">keylinkit.com | (615) 475-0145</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Full Vehicle Wrap - Sprinter Van</h3>
|
|
<div class="desc">Complete wrap design per existing mockup. Side, rear, and front panel graphics.</div>
|
|
<span class="badge badge-vehicle">Vehicle</span>
|
|
<table class="spec-table">
|
|
<tr><td>Vehicle</td><td>Mercedes Sprinter (or equivalent)</td></tr>
|
|
<tr><td>Coverage</td><td>Full wrap: sides, rear, hood</td></tr>
|
|
<tr><td>Material</td><td>3M IJ180Cv3 with 8519 laminate</td></tr>
|
|
<tr><td>Design file</td><td>mockups/service-van-wrap.png</td></tr>
|
|
<tr><td>Elements</td><td>Logo, circuit pattern, services, contact</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<rect x="75" y="90" width="250" height="120" rx="4" fill="white" stroke="var(--kit-cobalt)" stroke-width="2"/>
|
|
<g transform="translate(105,140) scale(0.22)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="#0541AD">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="700" font-size="10" fill="#333" x="200" y="175" text-anchor="middle">(615) 475-0145</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="9" fill="#666" x="200" y="192" text-anchor="middle">keylinkit.com</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Magnetic Door Sign</h3>
|
|
<div class="desc">12" x 18" magnetic sign for personal vehicles on service calls. Quick on/off.</div>
|
|
<span class="badge badge-vehicle">Vehicle</span>
|
|
<table class="spec-table">
|
|
<tr><td>Size</td><td>12" x 18" (pair)</td></tr>
|
|
<tr><td>Material</td><td>30mil magnetic vehicle sign</td></tr>
|
|
<tr><td>Print</td><td>UV digital, white bg with blue logo</td></tr>
|
|
<tr><td>Content</td><td>Logo + phone + URL</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<ellipse cx="200" cy="180" rx="140" ry="30" fill="#EEE"/>
|
|
<rect x="120" y="60" width="160" height="130" rx="4" fill="#DDD" stroke="#CCC" stroke-width="1"/>
|
|
<rect x="130" y="70" width="140" height="110" rx="2" fill="#E8EDFF"/>
|
|
<g transform="translate(135,115) scale(0.15)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="#0541AD">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="7" fill="#0541AD" x="200" y="140" text-anchor="middle">(615) 475-0145</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="6" fill="#666" x="200" y="155" text-anchor="middle">keylinkit.com</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Rear Window Decal</h3>
|
|
<div class="desc">Perforated vinyl rear window decal. See-through from inside, branded from outside.</div>
|
|
<span class="badge badge-vehicle">Vehicle</span>
|
|
<table class="spec-table">
|
|
<tr><td>Material</td><td>Perforated window vinyl (50/50)</td></tr>
|
|
<tr><td>Size</td><td>Custom to vehicle rear glass</td></tr>
|
|
<tr><td>Design</td><td>Light blue bg with cobalt logo + contact</td></tr>
|
|
<tr><td>Install</td><td>Professional recommended</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIGITAL -->
|
|
<div class="section" id="digital">
|
|
<h2>Digital Assets</h2>
|
|
<p class="subtitle">Email signatures, social media, and web assets.</p>
|
|
|
|
<div class="product-grid">
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-light">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<rect x="60" y="110" width="280" height="80" rx="2" fill="white" stroke="#EEE" stroke-width="1"/>
|
|
<line x1="60" y1="110" x2="340" y2="110" stroke="var(--kit-cobalt)" stroke-width="3"/>
|
|
<g transform="translate(75,132) scale(0.1)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="#0541AD">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="700" font-size="9" fill="#333" x="75" y="148">Allen McGhan</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="7" fill="#666" x="75" y="160">Owner | Keylink IT</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="7" fill="#666" x="75" y="172">(615) 475-0145 | keylinkit.com</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="7" fill="var(--kit-cobalt)" x="75" y="183">Relax, I Can Fix IT!</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Email Signature</h3>
|
|
<div class="desc">HTML email signature with logo, contact info, and tagline. Cobalt accent bar on top.</div>
|
|
<span class="badge badge-digital">Digital</span>
|
|
<table class="spec-table">
|
|
<tr><td>Logo width</td><td>200px</td></tr>
|
|
<tr><td>Format</td><td>HTML table layout for compatibility</td></tr>
|
|
<tr><td>Font</td><td>Lato with Arial fallback</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<div class="mockup mock-bg-cobalt">
|
|
<svg viewBox="0 0 400 300" width="100%" height="100%">
|
|
<rect x="100" y="50" width="200" height="200" rx="12" fill="#032D7A"/>
|
|
<rect x="100" y="50" width="200" height="60" fill="var(--kit-cobalt)" rx="12"/>
|
|
<rect x="100" y="98" width="200" height="12" fill="var(--kit-cobalt)"/>
|
|
<g transform="translate(140,85) scale(0.16)">
|
|
<text font-family="Lato, sans-serif" font-weight="900" font-size="120" fill="white">Keylink IT</text>
|
|
</g>
|
|
<text font-family="Lato, sans-serif" font-weight="700" font-size="10" fill="white" x="200" y="145" text-anchor="middle">IT, Phones, Business</text>
|
|
<text font-family="Lato, sans-serif" font-weight="700" font-size="10" fill="white" x="200" y="162" text-anchor="middle">Audio and Websites</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#8BA3D4" x="200" y="195" text-anchor="middle">keylinkit.com</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#8BA3D4" x="200" y="210" text-anchor="middle">(615) 475-0145</text>
|
|
<text font-family="Lato, sans-serif" font-weight="400" font-size="8" fill="#6B8CC7" x="200" y="232" text-anchor="middle">Relax, I Can Fix IT!</text>
|
|
</svg>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Social Media Post Template</h3>
|
|
<div class="desc">1080x1080 branded post template for Facebook, Instagram, LinkedIn. Dark blue background.</div>
|
|
<span class="badge badge-digital">Digital</span>
|
|
<table class="spec-table">
|
|
<tr><td>Size</td><td>1080 x 1080px (square)</td></tr>
|
|
<tr><td>Background</td><td>Dark cobalt (#032D7A)</td></tr>
|
|
<tr><td>Logo</td><td>White wordmark, top section</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VENDOR FILES -->
|
|
<div class="section" id="files">
|
|
<h2>Vendor File Reference</h2>
|
|
<p class="subtitle">Which files to send to your printer, embroiderer, or sign shop.</p>
|
|
|
|
<h3 style="font-size:16px; font-weight:700; margin:20px 0 8px;">Embroidery / Screen Print Vendor</h3>
|
|
<div class="file-list">
|
|
<div class="file-row"><span class="fname">svg/apparel/keylink-it-apparel-white.svg</span><span class="fuse">Primary logo for all garments</span></div>
|
|
<div class="file-row"><span class="fname">logos/alternate/kit-alt-blue.png</span><span class="fuse">Hat/cap logo (recolor white for dark caps)</span></div>
|
|
<div class="file-row"><span class="fname">svg/taglines/relax-i-can-fix-it.svg</span><span class="fuse">Tagline for back prints</span></div>
|
|
<div class="file-row"><span class="fname">source/keylink-it-logos.ai</span><span class="fuse">Master AI file for digitizing</span></div>
|
|
</div>
|
|
|
|
<h3 style="font-size:16px; font-weight:700; margin:20px 0 8px;">Print Shop (Business Cards, Flyers, Banners)</h3>
|
|
<div class="file-list">
|
|
<div class="file-row"><span class="fname">svg/primary/keylink-it-blue.svg</span><span class="fuse">Cobalt logo on light backgrounds</span></div>
|
|
<div class="file-row"><span class="fname">svg/primary/keylink-it-white.svg</span><span class="fuse">White logo on dark/blue backgrounds</span></div>
|
|
<div class="file-row"><span class="fname">logos/url-lockup/keylinkit-com-services-banner.png</span><span class="fuse">URL lockup with services tagline</span></div>
|
|
<div class="file-row"><span class="fname">logos/url-lockup/keylinkit-com-logo.png</span><span class="fuse">URL-only lockup</span></div>
|
|
<div class="file-row"><span class="fname">source/keylink-it-logos.ai</span><span class="fuse">Master vector source</span></div>
|
|
<div class="file-row"><span class="fname">source/print-originals/keylinkit-logo-banner.pdf</span><span class="fuse">Print-ready banner layout PDF</span></div>
|
|
<div class="file-row"><span class="fname">source/print-originals/keylinkit-logo-v2.pdf</span><span class="fuse">Logo layout v2 PDF</span></div>
|
|
</div>
|
|
|
|
<h3 style="font-size:16px; font-weight:700; margin:20px 0 8px;">Sign Shop / Vehicle Wrap</h3>
|
|
<div class="file-list">
|
|
<div class="file-row"><span class="fname">svg/primary/keylink-it-blue.svg</span><span class="fuse">Vector cut file for vinyl</span></div>
|
|
<div class="file-row"><span class="fname">svg/primary/keylink-it-white.svg</span><span class="fuse">White vinyl cut</span></div>
|
|
<div class="file-row"><span class="fname">mockups/service-van-wrap.png</span><span class="fuse">Approved van wrap design reference</span></div>
|
|
<div class="file-row"><span class="fname">source/keylink-it-logos.ai</span><span class="fuse">Master AI for large format</span></div>
|
|
</div>
|
|
|
|
<h3 style="font-size:16px; font-weight:700; margin:20px 0 8px;">Promotional Products Vendor</h3>
|
|
<div class="file-list">
|
|
<div class="file-row"><span class="fname">svg/primary/keylink-it-blue.svg</span><span class="fuse">Blue logo for light products</span></div>
|
|
<div class="file-row"><span class="fname">svg/primary/keylink-it-white.svg</span><span class="fuse">White logo for dark products</span></div>
|
|
<div class="file-row"><span class="fname">logos/primary/keylink-it-blue.png</span><span class="fuse">PNG fallback if vendor needs raster</span></div>
|
|
<div class="file-row"><span class="fname">icons/favicon/keylink-favicon.png</span><span class="fuse">Small-format K mark for pens, keychains</span></div>
|
|
</div>
|
|
|
|
<div class="printer-notes" style="margin-top:24px;">
|
|
<strong>Universal vendor instructions:</strong><br>
|
|
Brand color is Cobalt Blue: HEX #0541AD / Pantone 2146 C / CMYK 97-63-0-32.<br>
|
|
Font is Lato Bold (Google Fonts). Do not substitute.<br>
|
|
Always send SVG or AI source files. PNG only as a fallback.<br>
|
|
Tagline: "Relax, I Can Fix IT!" (note capital I-T with exclamation mark).<br>
|
|
Website: keylinkit.com | Phone: (615) 475-0145<br>
|
|
All files available at: git.keylinkit.net/kitadmin/branding
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showSection(id, btn) {
|
|
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
|
|
document.querySelectorAll('.nav-bar button').forEach(b => b.classList.remove('active'));
|
|
document.getElementById(id).classList.add('active');
|
|
btn.classList.add('active');
|
|
}
|
|
</script>
|