debont80/dashmail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit — DashMail prototype

Browse Source
This commit is contained in:
Devon
2026-05-25 09:07:43 -04:00
commit 22aca3cfd1
10 changed files with 5912 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DashMail_Logo_Preview.html
+435
View File
@@ -0,0 +1,435 @@
<!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 &nbsp;·&nbsp; 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 &nbsp;·&nbsp; Little Creek Door Co. &nbsp;·&nbsp; May 2026 &nbsp;·&nbsp; SVG source: DashMail_Logo.svg</p>
</body>
</html>