Devon
436 lines
21 KiB
HTML
436 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<title>DashMail — Logo Preview</title>
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box;}
|
||
body{font-family:'Segoe UI Variable','Segoe UI',system-ui,sans-serif;background:#f0f0f0;padding:40px 24px;color:#1c1c1c;}
|
||
h1{font-size:22px;font-weight:700;margin-bottom:4px;color:#0a1e3d;}
|
||
.meta{font-size:12px;color:#888;margin-bottom:40px;}
|
||
.section{margin-bottom:48px;}
|
||
.section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:16px;padding-bottom:6px;border-bottom:1px solid #ddd;}
|
||
.row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
|
||
.swatch{display:flex;flex-direction:column;align-items:center;gap:8px;}
|
||
.swatch span{font-size:10px;color:#888;}
|
||
|
||
/* ── Colour palette ── */
|
||
.palette{display:flex;gap:0;border-radius:8px;overflow:hidden;width:320px;height:48px;}
|
||
.palette div{flex:1;}
|
||
|
||
@media print{
|
||
body{background:#fff;padding:20px;}
|
||
@page{size:letter landscape;margin:0.5in;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>DashMail — Logo System</h1>
|
||
<p class="meta">Brand identity preview · May 2026</p>
|
||
|
||
<!-- ═══════════ APP ICON ═══════════ -->
|
||
<div class="section">
|
||
<div class="section-label">App Icon — Paper Airplane</div>
|
||
<div class="row">
|
||
|
||
<!-- 256px -->
|
||
<div class="swatch">
|
||
<svg width="256" height="256" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bg256" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bg256)"/>
|
||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.65)"/>
|
||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||
<line x1="10" y1="44" x2="46" y2="28" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"/>
|
||
</svg>
|
||
<span>256 × 256</span>
|
||
</div>
|
||
|
||
<!-- 128px -->
|
||
<div class="swatch">
|
||
<svg width="128" height="128" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bg128" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bg128)"/>
|
||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.65)"/>
|
||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||
<line x1="10" y1="44" x2="46" y2="28" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"/>
|
||
</svg>
|
||
<span>128 × 128</span>
|
||
</div>
|
||
|
||
<!-- 64px -->
|
||
<div class="swatch">
|
||
<svg width="64" height="64" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bg64" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bg64)"/>
|
||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.65)"/>
|
||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||
<line x1="10" y1="44" x2="46" y2="28" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"/>
|
||
</svg>
|
||
<span>64 × 64</span>
|
||
</div>
|
||
|
||
<!-- 32px -->
|
||
<div class="swatch">
|
||
<svg width="32" height="32" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bg32" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bg32)"/>
|
||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.65)"/>
|
||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||
<line x1="10" y1="44" x2="46" y2="28" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"/>
|
||
</svg>
|
||
<span>32 × 32</span>
|
||
</div>
|
||
|
||
<!-- 16px -->
|
||
<div class="swatch">
|
||
<svg width="16" height="16" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bg16" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bg16)"/>
|
||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.65)"/>
|
||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||
</svg>
|
||
<span>16 × 16</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════ ENVELOPE VARIANT ═══════════ -->
|
||
<div class="section">
|
||
<div class="section-label">App Icon — Envelope Variant</div>
|
||
<div class="row">
|
||
|
||
<!-- 256px envelope -->
|
||
<div class="swatch">
|
||
<svg width="256" height="256" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgE256" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgE256)"/>
|
||
<!-- Envelope body -->
|
||
<rect x="8" y="16" width="40" height="26" rx="3" fill="rgba(255,255,255,0.92)"/>
|
||
<!-- Envelope flap (V fold) -->
|
||
<polyline points="8,16 28,30 48,16" fill="none" stroke="rgba(0,153,184,0.6)" stroke-width="1.5" stroke-linejoin="round"/>
|
||
<!-- Envelope left fold line -->
|
||
<line x1="8" y1="42" x2="22" y2="29" stroke="rgba(0,153,184,0.3)" stroke-width="1"/>
|
||
<!-- Envelope right fold line -->
|
||
<line x1="48" y1="42" x2="34" y2="29" stroke="rgba(0,153,184,0.3)" stroke-width="1"/>
|
||
<!-- Speed dash lines (left side, outside envelope) -->
|
||
<line x1="2" y1="25" x2="7" y2="25" stroke="rgba(255,255,255,0.6)" stroke-width="1.5" stroke-linecap="round"/>
|
||
<line x1="2" y1="29" x2="6" y2="29" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
|
||
<line x1="2" y1="33" x2="5" y2="33" stroke="rgba(255,255,255,0.25)" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<span>256 × 256</span>
|
||
</div>
|
||
|
||
<!-- 128px envelope -->
|
||
<div class="swatch">
|
||
<svg width="128" height="128" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgE128" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgE128)"/>
|
||
<rect x="8" y="16" width="40" height="26" rx="3" fill="rgba(255,255,255,0.92)"/>
|
||
<polyline points="8,16 28,30 48,16" fill="none" stroke="rgba(0,153,184,0.6)" stroke-width="1.5" stroke-linejoin="round"/>
|
||
<line x1="8" y1="42" x2="22" y2="29" stroke="rgba(0,153,184,0.3)" stroke-width="1"/>
|
||
<line x1="48" y1="42" x2="34" y2="29" stroke="rgba(0,153,184,0.3)" stroke-width="1"/>
|
||
</svg>
|
||
<span>128 × 128</span>
|
||
</div>
|
||
|
||
<!-- 64px envelope -->
|
||
<div class="swatch">
|
||
<svg width="64" height="64" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgE64" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgE64)"/>
|
||
<rect x="8" y="16" width="40" height="26" rx="3" fill="rgba(255,255,255,0.92)"/>
|
||
<polyline points="8,16 28,30 48,16" fill="none" stroke="rgba(0,153,184,0.6)" stroke-width="1.5" stroke-linejoin="round"/>
|
||
<line x1="8" y1="42" x2="22" y2="29" stroke="rgba(0,153,184,0.3)" stroke-width="1"/>
|
||
<line x1="48" y1="42" x2="34" y2="29" stroke="rgba(0,153,184,0.3)" stroke-width="1"/>
|
||
</svg>
|
||
<span>64 × 64</span>
|
||
</div>
|
||
|
||
<!-- 32px envelope -->
|
||
<div class="swatch">
|
||
<svg width="32" height="32" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgE32" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgE32)"/>
|
||
<rect x="8" y="16" width="40" height="26" rx="3" fill="rgba(255,255,255,0.92)"/>
|
||
<polyline points="8,16 28,30 48,16" fill="none" stroke="rgba(0,153,184,0.6)" stroke-width="1.5" stroke-linejoin="round"/>
|
||
</svg>
|
||
<span>32 × 32</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════ HORIZONTAL LOCKUP — DARK ═══════════ -->
|
||
<div class="section">
|
||
<div class="section-label">Horizontal Lockup — Dark Background</div>
|
||
<div style="background:#0a1e3d;border-radius:12px;padding:32px 40px;display:inline-flex;align-items:center;gap:18px;">
|
||
<svg width="52" height="52" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgLockDk" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#142d54"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgLockDk)"/>
|
||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.65)"/>
|
||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||
<line x1="10" y1="44" x2="46" y2="28" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"/>
|
||
</svg>
|
||
<div>
|
||
<div style="font-family:'Segoe UI Variable','Segoe UI',system-ui;font-size:28px;line-height:1;letter-spacing:-0.5px;">
|
||
<span style="font-weight:800;color:#ffffff;">Dash</span><span style="font-weight:300;color:#00c4d8;">Mail</span>
|
||
</div>
|
||
<div style="font-size:10px;color:rgba(255,255,255,0.35);letter-spacing:1.5px;text-transform:uppercase;margin-top:3px;font-family:'Segoe UI',sans-serif;">
|
||
Secure Faxmail Client
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════ HORIZONTAL LOCKUP — LIGHT ═══════════ -->
|
||
<div class="section">
|
||
<div class="section-label">Horizontal Lockup — Light Background</div>
|
||
<div style="background:#ffffff;border-radius:12px;padding:32px 40px;display:inline-flex;align-items:center;gap:18px;border:1px solid #e0e0e0;">
|
||
<svg width="52" height="52" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgLockLt" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgLockLt)"/>
|
||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.65)"/>
|
||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||
<line x1="10" y1="44" x2="46" y2="28" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"/>
|
||
</svg>
|
||
<div>
|
||
<div style="font-family:'Segoe UI Variable','Segoe UI',system-ui;font-size:28px;line-height:1;letter-spacing:-0.5px;">
|
||
<span style="font-weight:800;color:#0a1e3d;">Dash</span><span style="font-weight:300;color:#0099b8;">Mail</span>
|
||
</div>
|
||
<div style="font-size:10px;color:#aaa;letter-spacing:1.5px;text-transform:uppercase;margin-top:3px;font-family:'Segoe UI',sans-serif;">
|
||
Secure Faxmail Client
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════ TITLEBAR SIZE (matches app) ═══════════ -->
|
||
<div class="section">
|
||
<div class="section-label">Title Bar Size (as seen in app)</div>
|
||
<div style="background:#1a1a1a;border-radius:8px;padding:0;height:32px;width:340px;display:flex;align-items:center;gap:8px;padding-left:12px;">
|
||
<svg width="20" height="20" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgTB" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgTB)"/>
|
||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.65)"/>
|
||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||
</svg>
|
||
<span style="font-family:'Segoe UI Variable','Segoe UI',system-ui;font-size:13px;font-weight:700;color:#fff;letter-spacing:-0.2px;">Dash</span><span style="font-family:'Segoe UI Variable','Segoe UI',system-ui;font-size:13px;font-weight:400;color:rgba(255,255,255,0.55);letter-spacing:-0.2px;">Mail</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════ COLOUR PALETTE ═══════════ -->
|
||
<div class="section">
|
||
<div class="section-label">Brand Colour Palette</div>
|
||
<div class="row" style="align-items:flex-start;">
|
||
<div class="swatch">
|
||
<div style="width:80px;height:80px;border-radius:10px;background:#0a1e3d;"></div>
|
||
<span style="font-weight:600;color:#444;font-size:11px;">Navy</span>
|
||
<span>#0A1E3D</span>
|
||
</div>
|
||
<div class="swatch">
|
||
<div style="width:80px;height:80px;border-radius:10px;background:#0099b8;"></div>
|
||
<span style="font-weight:600;color:#444;font-size:11px;">Cyan</span>
|
||
<span>#0099B8</span>
|
||
</div>
|
||
<div class="swatch">
|
||
<div style="width:80px;height:80px;border-radius:10px;background:#00c4d8;"></div>
|
||
<span style="font-weight:600;color:#444;font-size:11px;">Cyan Light</span>
|
||
<span>#00C4D8</span>
|
||
</div>
|
||
<div class="swatch">
|
||
<div style="width:80px;height:80px;border-radius:10px;background:#ffffff;border:1px solid #e0e0e0;"></div>
|
||
<span style="font-weight:600;color:#444;font-size:11px;">White</span>
|
||
<span>#FFFFFF</span>
|
||
</div>
|
||
<div class="swatch">
|
||
<div style="width:80px;height:80px;border-radius:10px;background:#1a1a1a;"></div>
|
||
<span style="font-weight:600;color:#444;font-size:11px;">Title Bar</span>
|
||
<span>#1A1A1A</span>
|
||
</div>
|
||
</div>
|
||
<!-- Gradient bar -->
|
||
<div style="margin-top:20px;">
|
||
<div style="width:360px;height:16px;border-radius:8px;background:linear-gradient(90deg,#0a1e3d,#0099b8,#00c4d8);"></div>
|
||
<span style="font-size:10px;color:#888;display:block;margin-top:4px;">Brand gradient — left to right</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════ COMBINED ICON (plane + envelope) ═══════════ -->
|
||
<div class="section">
|
||
<div class="section-label">Combined Variant — Envelope with Plane Detail</div>
|
||
<div class="row">
|
||
<div class="swatch">
|
||
<svg width="256" height="256" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgC256" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgC256)"/>
|
||
<!-- Envelope body -->
|
||
<rect x="7" y="15" width="42" height="28" rx="3.5" fill="rgba(255,255,255,0.88)"/>
|
||
<!-- Envelope top flap -->
|
||
<polyline points="7,15 28,31 49,15" fill="none" stroke="#0099b8" stroke-width="1.6" stroke-linejoin="round"/>
|
||
<!-- Paper airplane inside envelope (small, offset right) -->
|
||
<polygon points="14,28 38,36 14,38" fill="rgba(0,153,184,0.25)"/>
|
||
<polygon points="14,28 38,36 24,34" fill="rgba(0,120,180,0.55)"/>
|
||
<!-- Speed lines top-left -->
|
||
<line x1="2" y1="22" x2="6" y2="22" stroke="rgba(255,255,255,0.55)" stroke-width="1.4" stroke-linecap="round"/>
|
||
<line x1="2" y1="26" x2="5.5" y2="26" stroke="rgba(255,255,255,0.35)" stroke-width="1.4" stroke-linecap="round"/>
|
||
<line x1="2" y1="30" x2="5" y2="30" stroke="rgba(255,255,255,0.2)" stroke-width="1.4" stroke-linecap="round"/>
|
||
</svg>
|
||
<span>Combined — 256px</span>
|
||
</div>
|
||
<div class="swatch">
|
||
<svg width="128" height="128" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgC128" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgC128)"/>
|
||
<rect x="7" y="15" width="42" height="28" rx="3.5" fill="rgba(255,255,255,0.88)"/>
|
||
<polyline points="7,15 28,31 49,15" fill="none" stroke="#0099b8" stroke-width="1.6" stroke-linejoin="round"/>
|
||
<polygon points="14,28 38,36 14,38" fill="rgba(0,153,184,0.25)"/>
|
||
<polygon points="14,28 38,36 24,34" fill="rgba(0,120,180,0.55)"/>
|
||
</svg>
|
||
<span>Combined — 128px</span>
|
||
</div>
|
||
<div class="swatch">
|
||
<svg width="64" height="64" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgC64" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgC64)"/>
|
||
<rect x="7" y="15" width="42" height="28" rx="3.5" fill="rgba(255,255,255,0.88)"/>
|
||
<polyline points="7,15 28,31 49,15" fill="none" stroke="#0099b8" stroke-width="1.6" stroke-linejoin="round"/>
|
||
<polygon points="14,28 38,36 14,38" fill="rgba(0,153,184,0.25)"/>
|
||
<polygon points="14,28 38,36 24,34" fill="rgba(0,120,180,0.55)"/>
|
||
</svg>
|
||
<span>Combined — 64px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════ STACKED LOCKUP ═══════════ -->
|
||
<div class="section">
|
||
<div class="section-label">Stacked Lockup</div>
|
||
<div class="row">
|
||
<!-- Dark -->
|
||
<div style="background:#0a1e3d;border-radius:12px;padding:28px 36px;display:inline-flex;flex-direction:column;align-items:center;gap:12px;">
|
||
<svg width="72" height="72" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgStkDk" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#142d54"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgStkDk)"/>
|
||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.65)"/>
|
||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||
<line x1="10" y1="44" x2="46" y2="28" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"/>
|
||
</svg>
|
||
<div style="text-align:center;">
|
||
<div style="font-family:'Segoe UI Variable','Segoe UI',system-ui;font-size:22px;letter-spacing:-0.3px;">
|
||
<span style="font-weight:800;color:#fff;">Dash</span><span style="font-weight:300;color:#00c4d8;">Mail</span>
|
||
</div>
|
||
<div style="font-size:9px;color:rgba(255,255,255,0.3);letter-spacing:2px;text-transform:uppercase;margin-top:2px;font-family:'Segoe UI',sans-serif;">Secure Faxmail Client</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Light -->
|
||
<div style="background:#ffffff;border-radius:12px;padding:28px 36px;display:inline-flex;flex-direction:column;align-items:center;gap:12px;border:1px solid #e0e0e0;">
|
||
<svg width="72" height="72" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="bgStkLt" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||
<stop offset="100%" stop-color="#0099b8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="56" height="56" rx="13" fill="url(#bgStkLt)"/>
|
||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.65)"/>
|
||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||
<line x1="10" y1="44" x2="46" y2="28" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"/>
|
||
</svg>
|
||
<div style="text-align:center;">
|
||
<div style="font-family:'Segoe UI Variable','Segoe UI',system-ui;font-size:22px;letter-spacing:-0.3px;">
|
||
<span style="font-weight:800;color:#0a1e3d;">Dash</span><span style="font-weight:300;color:#0099b8;">Mail</span>
|
||
</div>
|
||
<div style="font-size:9px;color:#bbb;letter-spacing:2px;text-transform:uppercase;margin-top:2px;font-family:'Segoe UI',sans-serif;">Secure Faxmail Client</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="font-size:10px;color:#bbb;margin-top:8px;">DashMail Brand Identity · Little Creek Door Co. · May 2026 · SVG source: DashMail_Logo.svg</p>
|
||
|
||
</body>
|
||
</html>
|