Initial commit — DashMail prototype
This commit is contained in:
Devon
+17
@@ -0,0 +1,17 @@
|
||||
# Backups created during Claude sessions
|
||||
backup_*/
|
||||
|
||||
# Old file versions
|
||||
DashMailClient.jsx
|
||||
DashMail_Architecture.html
|
||||
|
||||
# Screenshots
|
||||
screenshot_*.jpg
|
||||
|
||||
# System
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
desktop.ini
|
||||
|
||||
# Node (if added later)
|
||||
node_modules/
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,720 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>DashMail — Brand Identity</title>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
body{font-family:'Segoe UI Variable','Segoe UI',system-ui,sans-serif;background:#111;color:#fff;overflow-x:hidden;}
|
||||
|
||||
/* ── shared ── */
|
||||
.label{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;opacity:0.4;}
|
||||
.cap{font-size:11px;color:rgba(255,255,255,0.35);margin-top:8px;letter-spacing:0.3px;}
|
||||
|
||||
/* ── print button ── */
|
||||
.print-btn{position:fixed;top:20px;right:20px;z-index:999;background:#0099b8;color:#fff;border:none;border-radius:8px;padding:10px 20px;font-size:12px;font-family:'Segoe UI',sans-serif;font-weight:700;cursor:pointer;letter-spacing:0.3px;}
|
||||
.print-btn:hover{background:#00b7d4;}
|
||||
|
||||
/* ════════════════════════════════════════════
|
||||
SECTION 1 — HERO COVER
|
||||
════════════════════════════════════════════ */
|
||||
.hero{
|
||||
min-height:100vh;
|
||||
background:linear-gradient(135deg,#050d1a 0%,#0a1e3d 50%,#0a2e4a 100%);
|
||||
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
position:relative;overflow:hidden;padding:60px 40px;
|
||||
}
|
||||
.hero::before{
|
||||
content:"";position:absolute;inset:0;
|
||||
background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(0,153,184,0.18) 0%,transparent 70%);
|
||||
}
|
||||
.hero-tagline{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:48px;}
|
||||
.hero-icon{filter:drop-shadow(0 24px 48px rgba(0,153,184,0.5));margin-bottom:40px;}
|
||||
.hero-wordmark{font-size:64px;font-weight:900;letter-spacing:-2px;line-height:1;}
|
||||
.hero-wordmark .light{font-weight:200;color:#00c4d8;}
|
||||
.hero-sub{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.28);margin-top:14px;}
|
||||
.hero-rule{width:1px;height:80px;background:linear-gradient(to bottom,transparent,rgba(0,153,184,0.6),transparent);margin:48px auto;}
|
||||
.hero-doc{font-size:11px;color:rgba(255,255,255,0.2);letter-spacing:1px;text-align:center;line-height:2;}
|
||||
|
||||
/* ════════════════════════════════════════════
|
||||
SECTION 2 — LOGO MARK
|
||||
════════════════════════════════════════════ */
|
||||
.section{padding:100px 80px;max-width:1200px;margin:0 auto;}
|
||||
.section-header{margin-bottom:64px;}
|
||||
.section-header .num{font-size:11px;letter-spacing:3px;color:#0099b8;font-weight:700;text-transform:uppercase;}
|
||||
.section-header h2{font-size:42px;font-weight:800;letter-spacing:-1px;margin-top:8px;line-height:1.1;}
|
||||
.section-header p{font-size:15px;color:rgba(255,255,255,0.45);margin-top:12px;line-height:1.7;max-width:560px;}
|
||||
|
||||
.logo-stage{
|
||||
background:linear-gradient(135deg,#0a1e3d,#082034);
|
||||
border-radius:20px;padding:80px;display:flex;align-items:center;justify-content:center;gap:80px;
|
||||
border:1px solid rgba(255,255,255,0.05);
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
.logo-stage-light{
|
||||
background:#f4f4f4;
|
||||
border-radius:20px;padding:80px;display:flex;align-items:center;justify-content:center;gap:80px;
|
||||
border:1px solid rgba(0,0,0,0.06);
|
||||
margin-top:24px;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════════
|
||||
SECTION 3 — COLOUR PALETTE
|
||||
════════════════════════════════════════════ */
|
||||
.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
|
||||
.swatch-card{border-radius:12px;overflow:hidden;}
|
||||
.swatch-color{height:140px;}
|
||||
.swatch-info{padding:14px 16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-top:none;border-radius:0 0 12px 12px;}
|
||||
.swatch-name{font-size:13px;font-weight:700;letter-spacing:-0.2px;}
|
||||
.swatch-hex{font-size:11px;font-family:'Cascadia Code','Consolas',monospace;color:rgba(255,255,255,0.35);margin-top:3px;}
|
||||
.swatch-role{font-size:10px;color:rgba(255,255,255,0.25);margin-top:6px;line-height:1.5;}
|
||||
|
||||
.gradient-bar{height:64px;border-radius:12px;background:linear-gradient(90deg,#0a1e3d 0%,#0d2d54 30%,#0099b8 70%,#00c4d8 100%);margin-top:24px;}
|
||||
|
||||
/* ════════════════════════════════════════════
|
||||
SECTION 4 — TYPOGRAPHY
|
||||
════════════════════════════════════════════ */
|
||||
.type-row{display:flex;flex-direction:column;gap:32px;}
|
||||
.type-sample{border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:32px;}
|
||||
.type-meta{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#0099b8;margin-bottom:12px;font-weight:700;}
|
||||
|
||||
/* ════════════════════════════════════════════
|
||||
SECTION 5 — ICON GRID
|
||||
════════════════════════════════════════════ */
|
||||
.icon-row{display:flex;align-items:flex-end;gap:40px;flex-wrap:wrap;}
|
||||
.icon-cell{display:flex;flex-direction:column;align-items:center;gap:12px;}
|
||||
|
||||
.clearspace-demo{
|
||||
position:relative;display:inline-block;
|
||||
border:1px dashed rgba(255,255,255,0.15);
|
||||
padding:20px;border-radius:4px;
|
||||
}
|
||||
.cs-label{position:absolute;font-size:9px;color:rgba(255,255,255,0.25);letter-spacing:1px;text-transform:uppercase;}
|
||||
.cs-t{top:4px;left:50%;transform:translateX(-50%);}
|
||||
.cs-b{bottom:4px;left:50%;transform:translateX(-50%);}
|
||||
.cs-l{left:4px;top:50%;transform:translateY(-50%) rotate(-90deg);}
|
||||
.cs-r{right:4px;top:50%;transform:translateY(-50%) rotate(90deg);}
|
||||
|
||||
/* ════════════════════════════════════════════
|
||||
SECTION 6 — LOCKUPS
|
||||
════════════════════════════════════════════ */
|
||||
.lockup-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
|
||||
.lockup-card{border-radius:16px;padding:48px 40px;display:flex;align-items:center;justify-content:center;}
|
||||
.lockup-card.dark{background:linear-gradient(135deg,#0a1e3d,#082034);border:1px solid rgba(255,255,255,0.05);}
|
||||
.lockup-card.mid{background:#131f2e;border:1px solid rgba(255,255,255,0.05);}
|
||||
.lockup-card.light{background:#f4f4f4;border:1px solid rgba(0,0,0,0.06);}
|
||||
.lockup-card.white{background:#ffffff;border:1px solid rgba(0,0,0,0.06);}
|
||||
|
||||
/* ════════════════════════════════════════════
|
||||
SECTION 7 — USAGE EXAMPLES
|
||||
════════════════════════════════════════════ */
|
||||
.mockup-window{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);max-width:680px;}
|
||||
.mockup-titlebar{height:36px;background:#1a1a1a;display:flex;align-items:center;padding:0 14px;gap:8px;}
|
||||
.mockup-dot{width:13px;height:13px;border-radius:50%;}
|
||||
.mockup-body{background:#1f1f1f;height:300px;display:flex;}
|
||||
.mockup-sidebar{width:220px;background:#181818;border-right:1px solid rgba(255,255,255,0.06);padding:16px 12px;}
|
||||
.mockup-main{flex:1;padding:24px;}
|
||||
|
||||
.mockup-login{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);max-width:680px;display:flex;height:360px;margin-top:24px;}
|
||||
.login-left{flex:1;background:#0c0c0c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
|
||||
.login-right{width:340px;background:linear-gradient(135deg,#0a1e3d,#0099b8);position:relative;}
|
||||
|
||||
/* ════════════════════════════════════════════
|
||||
SECTION 8 — DON'TS
|
||||
════════════════════════════════════════════ */
|
||||
.donts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
|
||||
.dont-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:28px;display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;}
|
||||
.dont-card::after{content:"✕";position:absolute;top:10px;right:12px;font-size:14px;color:#e05050;font-weight:700;}
|
||||
.dont-label{font-size:10px;color:rgba(255,255,255,0.3);text-align:center;letter-spacing:0.3px;line-height:1.5;}
|
||||
|
||||
/* ════════════════════════════════════════════
|
||||
DIVIDERS + FOOTER
|
||||
════════════════════════════════════════════ */
|
||||
.full-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);margin:0;}
|
||||
.footer{padding:60px 80px;display:flex;justify-content:space-between;align-items:center;opacity:0.3;font-size:11px;letter-spacing:0.5px;}
|
||||
|
||||
/* ════════════════════════════════════════════
|
||||
PRINT
|
||||
════════════════════════════════════════════ */
|
||||
@media print{
|
||||
.print-btn{display:none;}
|
||||
body{background:#fff;color:#000;}
|
||||
.hero{min-height:auto;page-break-after:always;background:#0a1e3d !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
|
||||
.section{page-break-inside:avoid;}
|
||||
@page{size:letter;margin:0;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="print-btn" onclick="window.print()">⬇ Save as PDF</button>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
HERO
|
||||
════════════════════════════════════════════════════════ -->
|
||||
<div class="hero">
|
||||
<p class="hero-tagline">Brand Identity Guidelines</p>
|
||||
|
||||
<!-- Large icon -->
|
||||
<svg class="hero-icon" width="140" height="140" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="heroGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#142d54"/>
|
||||
<stop offset="100%" stop-color="#00aac8"/>
|
||||
</linearGradient>
|
||||
<filter id="heroGlow">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="56" height="56" rx="13" fill="url(#heroGrad)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="hero-wordmark">
|
||||
<span>Dash</span><span class="light">Mail</span>
|
||||
</h1>
|
||||
<p class="hero-sub">The Secure Faxmail Client</p>
|
||||
|
||||
<div class="hero-rule"></div>
|
||||
<div class="hero-doc">
|
||||
Brand Identity · v1.0 · May 2026<br/>
|
||||
Little Creek Door Co. · Internal Use
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-divider"></div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
01 — THE LOGO MARK
|
||||
════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="num">01</div>
|
||||
<h2>The Logo Mark</h2>
|
||||
<p>The DashMail icon is a paper airplane — representing speed, direction, and communication. Set on a navy-to-cyan gradient badge with Windows 11-style rounded corners.</p>
|
||||
</div>
|
||||
|
||||
<!-- Dark stage -->
|
||||
<div class="logo-stage">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:16px;">
|
||||
<svg width="120" height="120" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="mk1" 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(#mk1)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<p class="cap">Primary icon</p>
|
||||
</div>
|
||||
<div style="width:1px;height:140px;background:rgba(255,255,255,0.06);"></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="mk2" 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(#mk2)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div style="font-size:32px;font-weight:900;letter-spacing:-0.8px;line-height:1.1;"><span>Dash</span><span style="font-weight:200;color:#00c4d8;">Mail</span></div>
|
||||
<div style="font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-top:4px;">Secure Faxmail Client</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="cap" style="margin-top:8px;">Horizontal lockup on dark</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Light stage -->
|
||||
<div class="logo-stage-light" style="margin-top:20px;">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:16px;">
|
||||
<svg width="120" height="120" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="mk3" 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(#mk3)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<p style="font-size:11px;color:#aaa;margin-top:8px;">Primary icon on light</p>
|
||||
</div>
|
||||
<div style="width:1px;height:140px;background:rgba(0,0,0,0.08);"></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="mk4" 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(#mk4)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div style="font-size:32px;font-weight:900;letter-spacing:-0.8px;line-height:1.1;color:#0a1e3d;"><span>Dash</span><span style="font-weight:200;color:#0099b8;">Mail</span></div>
|
||||
<div style="font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#bbb;margin-top:4px;">Secure Faxmail Client</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:11px;color:#aaa;margin-top:8px;">Horizontal lockup on light</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-divider"></div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
02 — COLOUR PALETTE
|
||||
════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="num">02</div>
|
||||
<h2>Colour Palette</h2>
|
||||
<p>Five colours make up the DashMail identity. Navy and Cyan are primary; the remaining three support UI states, backgrounds, and text.</p>
|
||||
</div>
|
||||
|
||||
<div class="palette-grid">
|
||||
<div class="swatch-card">
|
||||
<div class="swatch-color" style="background:#0a1e3d;"></div>
|
||||
<div class="swatch-info">
|
||||
<div class="swatch-name">Navy</div>
|
||||
<div class="swatch-hex">#0A1E3D</div>
|
||||
<div class="swatch-role">Primary brand colour. Used in icon background, dark login panel, wordmark on light.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swatch-card">
|
||||
<div class="swatch-color" style="background:#0099b8;"></div>
|
||||
<div class="swatch-info">
|
||||
<div class="swatch-name">Cyan</div>
|
||||
<div class="swatch-hex">#0099B8</div>
|
||||
<div class="swatch-role">Accent colour. Used for interactive elements, wordmark light half, icon gradient end.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swatch-card">
|
||||
<div class="swatch-color" style="background:#00c4d8;"></div>
|
||||
<div class="swatch-info">
|
||||
<div class="swatch-name">Cyan Light</div>
|
||||
<div class="swatch-hex">#00C4D8</div>
|
||||
<div class="swatch-role">Hover state, highlights, and wordmark on dark backgrounds.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swatch-card">
|
||||
<div class="swatch-color" style="background:#1a1a1a;"></div>
|
||||
<div class="swatch-info">
|
||||
<div class="swatch-name">Ink</div>
|
||||
<div class="swatch-hex">#1A1A1A</div>
|
||||
<div class="swatch-role">Title bar, dark surfaces, and app chrome in dark mode.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swatch-card">
|
||||
<div class="swatch-color" style="background:#f4f4f4;border:1px solid rgba(0,0,0,0.06);"></div>
|
||||
<div class="swatch-info">
|
||||
<div class="swatch-name">Cloud</div>
|
||||
<div class="swatch-hex">#F4F4F4</div>
|
||||
<div class="swatch-role">Light mode background. Light surfaces and cards in the app shell.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gradient-bar" style="margin-top:28px;"></div>
|
||||
<p class="cap" style="margin-top:10px;">Brand gradient — Navy → Cyan · Applied to icon badge background and hero panels</p>
|
||||
</div>
|
||||
|
||||
<div class="full-divider"></div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
03 — TYPOGRAPHY
|
||||
════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="num">03</div>
|
||||
<h2>Typography</h2>
|
||||
<p>DashMail uses Segoe UI Variable — Microsoft's native Windows 11 typeface — across all UI text and the wordmark. No external fonts are required.</p>
|
||||
</div>
|
||||
|
||||
<div class="type-row">
|
||||
<div class="type-sample">
|
||||
<div class="type-meta">Wordmark — Black + Thin</div>
|
||||
<div style="font-size:72px;font-weight:900;letter-spacing:-2px;line-height:1;">
|
||||
<span>Dash</span><span style="font-weight:200;color:#0099b8;">Mail</span>
|
||||
</div>
|
||||
<p class="cap">Segoe UI Variable — 900 weight (Dash) + 200 weight (Mail) · Never use a different typeface for the wordmark</p>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-meta">Heading — Extrabold</div>
|
||||
<div style="font-size:40px;font-weight:800;letter-spacing:-1px;line-height:1.2;">
|
||||
Secure email,<br/>built for Windows.
|
||||
</div>
|
||||
<p class="cap">Segoe UI Variable — 800 weight · Used for section headings and hero text</p>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-meta">Body — Regular</div>
|
||||
<div style="font-size:16px;font-weight:400;color:rgba(255,255,255,0.6);line-height:1.7;max-width:560px;">
|
||||
DashMail is a native Windows email client built for speed and reliability. Mail is stored locally in SQLite, with the SMB share used only as a handoff point for incoming and outgoing messages.
|
||||
</div>
|
||||
<p class="cap">Segoe UI Variable — 400 weight · Email body, settings, labels</p>
|
||||
</div>
|
||||
|
||||
<div class="type-sample" style="border:none;padding-bottom:0;">
|
||||
<div class="type-meta">Label / Tagline — Uppercase Spaced</div>
|
||||
<div style="font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.4);">
|
||||
Secure Faxmail Client · Little Creek Door Co.
|
||||
</div>
|
||||
<p class="cap">Segoe UI Variable — 700 weight · 3px letter-spacing · Used for sub-labels and taglines</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-divider"></div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
04 — ICON SIZES & CLEAR SPACE
|
||||
════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="num">04</div>
|
||||
<h2>Icon Sizes & Clear Space</h2>
|
||||
<p>The icon scales from 16px (system tray) to 1024px (store listing). Always maintain clear space equal to 25% of the icon width on all sides.</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-row">
|
||||
<div class="icon-cell">
|
||||
<svg width="256" height="256" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="sz256" 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(#sz256)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<p class="cap">256 px</p>
|
||||
</div>
|
||||
<div class="icon-cell">
|
||||
<svg width="128" height="128" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="sz128" 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(#sz128)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<p class="cap">128 px</p>
|
||||
</div>
|
||||
<div class="icon-cell">
|
||||
<svg width="64" height="64" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="sz64" 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(#sz64)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<p class="cap">64 px</p>
|
||||
</div>
|
||||
<div class="icon-cell">
|
||||
<svg width="48" height="48" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="sz48" 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(#sz48)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<p class="cap">48 px</p>
|
||||
</div>
|
||||
<div class="icon-cell">
|
||||
<svg width="32" height="32" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="sz32" 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(#sz32)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<p class="cap">32 px</p>
|
||||
</div>
|
||||
<div class="icon-cell">
|
||||
<svg width="24" height="24" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="sz24" 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(#sz24)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||||
</svg>
|
||||
<p class="cap">24 px</p>
|
||||
</div>
|
||||
<div class="icon-cell">
|
||||
<svg width="16" height="16" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="sz16" 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(#sz16)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||||
</svg>
|
||||
<p class="cap">16 px</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clear space diagram -->
|
||||
<div style="margin-top:64px;display:flex;align-items:center;gap:64px;flex-wrap:wrap;">
|
||||
<div>
|
||||
<div class="clearspace-demo">
|
||||
<span class="cs-label cs-t">X</span>
|
||||
<span class="cs-label cs-b">X</span>
|
||||
<span class="cs-label cs-l">X</span>
|
||||
<span class="cs-label cs-r">X</span>
|
||||
<svg width="80" height="80" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="szCS" 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(#szCS)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="cap" style="margin-top:12px;">Clear space = X (25% of icon width)<br/>Never crowd the icon with other elements</p>
|
||||
</div>
|
||||
<div style="max-width:320px;">
|
||||
<p style="font-size:14px;font-weight:700;margin-bottom:12px;">Minimum sizes</p>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;font-size:13px;color:rgba(255,255,255,0.55);">
|
||||
<div style="display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:8px;"><span>App icon (installer / taskbar)</span><span style="color:#0099b8;font-weight:600;">32 px</span></div>
|
||||
<div style="display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:8px;"><span>System tray</span><span style="color:#0099b8;font-weight:600;">16 px</span></div>
|
||||
<div style="display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:8px;"><span>Title bar</span><span style="color:#0099b8;font-weight:600;">20 px</span></div>
|
||||
<div style="display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:8px;"><span>About / splash screen</span><span style="color:#0099b8;font-weight:600;">128 px</span></div>
|
||||
<div style="display:flex;justify-content:space-between;"><span>App store listing</span><span style="color:#0099b8;font-weight:600;">1024 px</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-divider"></div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
05 — LOGO LOCKUPS
|
||||
════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="num">05</div>
|
||||
<h2>Logo Lockups</h2>
|
||||
<p>Four approved lockup combinations — always use one of these. Never reconstruct the wordmark manually.</p>
|
||||
</div>
|
||||
|
||||
<div class="lockup-grid">
|
||||
<!-- Dark horizontal -->
|
||||
<div class="lockup-card dark">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<svg width="52" height="52" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="lk1" 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(#lk1)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div style="font-size:26px;font-weight:900;letter-spacing:-0.5px;line-height:1;"><span>Dash</span><span style="font-weight:200;color:#00c4d8;">Mail</span></div>
|
||||
<div style="font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.28);margin-top:5px;">Secure Faxmail Client</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Light horizontal -->
|
||||
<div class="lockup-card light">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<svg width="52" height="52" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="lk2" 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(#lk2)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div style="font-size:26px;font-weight:900;letter-spacing:-0.5px;line-height:1;color:#0a1e3d;"><span>Dash</span><span style="font-weight:200;color:#0099b8;">Mail</span></div>
|
||||
<div style="font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:#bbb;margin-top:5px;">Secure Faxmail Client</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dark stacked -->
|
||||
<div class="lockup-card dark" style="flex-direction:column;gap:16px;">
|
||||
<svg width="72" height="72" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="lk3" 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(#lk3)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:26px;font-weight:900;letter-spacing:-0.5px;line-height:1;"><span>Dash</span><span style="font-weight:200;color:#00c4d8;">Mail</span></div>
|
||||
<div style="font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.28);margin-top:5px;">Secure Faxmail Client</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Light stacked -->
|
||||
<div class="lockup-card light" style="flex-direction:column;gap:16px;">
|
||||
<svg width="72" height="72" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="lk4" 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(#lk4)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:26px;font-weight:900;letter-spacing:-0.5px;line-height:1;color:#0a1e3d;"><span>Dash</span><span style="font-weight:200;color:#0099b8;">Mail</span></div>
|
||||
<div style="font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:#bbb;margin-top:5px;">Secure Faxmail Client</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-divider"></div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
06 — IN-APP USAGE
|
||||
════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="num">06</div>
|
||||
<h2>In-App Usage</h2>
|
||||
<p>How the DashMail logo appears within the Windows application — title bar, login screen, and About page.</p>
|
||||
</div>
|
||||
|
||||
<!-- Title bar mockup -->
|
||||
<p class="label" style="margin-bottom:12px;">Title Bar</p>
|
||||
<div class="mockup-window">
|
||||
<div class="mockup-titlebar">
|
||||
<svg width="20" height="20" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="tb1" 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(#tb1)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||||
</svg>
|
||||
<span style="font-size:13px;font-weight:700;color:#fff;">Dash</span>
|
||||
<span style="font-size:13px;font-weight:400;color:rgba(255,255,255,0.5);margin-left:-3px;">Mail</span>
|
||||
<div style="flex:1;"></div>
|
||||
<div style="display:flex;gap:0;">
|
||||
<div style="width:46px;height:36px;display:flex;align-items:center;justify-content:center;opacity:0.5;font-size:13px;">─</div>
|
||||
<div style="width:46px;height:36px;display:flex;align-items:center;justify-content:center;opacity:0.5;font-size:11px;">□</div>
|
||||
<div style="width:46px;height:36px;display:flex;align-items:center;justify-content:center;opacity:0.5;font-size:13px;">✕</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mockup-body">
|
||||
<div class="mockup-sidebar">
|
||||
<div style="width:60%;height:8px;background:rgba(255,255,255,0.06);border-radius:4px;margin-bottom:20px;"></div>
|
||||
<div style="width:80%;height:6px;background:rgba(255,255,255,0.08);border-radius:3px;margin-bottom:10px;"></div>
|
||||
<div style="width:70%;height:6px;background:rgba(0,153,184,0.4);border-radius:3px;margin-bottom:10px;"></div>
|
||||
<div style="width:75%;height:6px;background:rgba(255,255,255,0.08);border-radius:3px;margin-bottom:10px;"></div>
|
||||
<div style="width:65%;height:6px;background:rgba(255,255,255,0.08);border-radius:3px;"></div>
|
||||
</div>
|
||||
<div class="mockup-main">
|
||||
<div style="width:50%;height:8px;background:rgba(255,255,255,0.07);border-radius:4px;margin-bottom:16px;"></div>
|
||||
<div style="width:90%;height:5px;background:rgba(255,255,255,0.04);border-radius:3px;margin-bottom:8px;"></div>
|
||||
<div style="width:80%;height:5px;background:rgba(255,255,255,0.04);border-radius:3px;margin-bottom:8px;"></div>
|
||||
<div style="width:85%;height:5px;background:rgba(255,255,255,0.04);border-radius:3px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Login mockup -->
|
||||
<p class="label" style="margin-top:40px;margin-bottom:12px;">Login Screen</p>
|
||||
<div class="mockup-login">
|
||||
<div class="login-left">
|
||||
<svg width="52" height="52" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><linearGradient id="lg1" 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(#lg1)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<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.2)" stroke-width="0.9"/>
|
||||
</svg>
|
||||
<div style="font-size:28px;font-weight:900;letter-spacing:-0.5px;"><span>Dash</span><span style="font-weight:200;color:#00c4d8;">Mail</span></div>
|
||||
<div style="width:140px;height:32px;background:rgba(255,255,255,0.06);border-radius:6px;border:1px solid rgba(255,255,255,0.08);"></div>
|
||||
<div style="width:140px;height:32px;background:#0099b8;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;gap:6px;">
|
||||
<span>→</span> Sign In
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-right">
|
||||
<div style="position:absolute;inset:12px;border-radius:10px;background:linear-gradient(135deg,rgba(10,30,61,0.7),rgba(0,153,184,0.4));backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;">
|
||||
<div style="text-align:center;opacity:0.4;">
|
||||
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;">Mountain photo</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-divider"></div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
07 — DO's & DON'Ts
|
||||
════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="num">07</div>
|
||||
<h2>Do's & Don'ts</h2>
|
||||
<p>Follow these rules to maintain brand consistency across all uses of the DashMail identity.</p>
|
||||
</div>
|
||||
|
||||
<!-- Do's -->
|
||||
<p class="label" style="color:rgba(115,214,128,0.8);margin-bottom:16px;">Always do</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px;">
|
||||
<div style="background:rgba(16,124,16,0.08);border:1px solid rgba(16,124,16,0.2);border-radius:12px;padding:24px;position:relative;">
|
||||
<div style="position:absolute;top:10px;right:12px;font-size:14px;color:#73d680;font-weight:700;">✓</div>
|
||||
<svg width="48" height="48" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" style="margin-bottom:12px;">
|
||||
<defs><linearGradient id="do1" 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(#do1)"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||||
</svg>
|
||||
<p style="font-size:11px;color:rgba(255,255,255,0.45);line-height:1.5;">Use the approved icon with gradient badge background</p>
|
||||
</div>
|
||||
<div style="background:rgba(16,124,16,0.08);border:1px solid rgba(16,124,16,0.2);border-radius:12px;padding:24px;position:relative;">
|
||||
<div style="position:absolute;top:10px;right:12px;font-size:14px;color:#73d680;font-weight:700;">✓</div>
|
||||
<div style="font-size:24px;font-weight:900;letter-spacing:-0.5px;margin-bottom:12px;"><span>Dash</span><span style="font-weight:200;color:#0099b8;">Mail</span></div>
|
||||
<p style="font-size:11px;color:rgba(255,255,255,0.45);line-height:1.5;">Keep "Dash" bold and "Mail" thin — always two weights</p>
|
||||
</div>
|
||||
<div style="background:rgba(16,124,16,0.08);border:1px solid rgba(16,124,16,0.2);border-radius:12px;padding:24px;position:relative;">
|
||||
<div style="position:absolute;top:10px;right:12px;font-size:14px;color:#73d680;font-weight:700;">✓</div>
|
||||
<div style="width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,#0a1e3d,#0099b8);margin-bottom:12px;"></div>
|
||||
<p style="font-size:11px;color:rgba(255,255,255,0.45);line-height:1.5;">Use approved Navy and Cyan brand colours only</p>
|
||||
</div>
|
||||
<div style="background:rgba(16,124,16,0.08);border:1px solid rgba(16,124,16,0.2);border-radius:12px;padding:24px;position:relative;">
|
||||
<div style="position:absolute;top:10px;right:12px;font-size:14px;color:#73d680;font-weight:700;">✓</div>
|
||||
<div style="font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:12px;margin-top:6px;">Secure Faxmail Client</div>
|
||||
<p style="font-size:11px;color:rgba(255,255,255,0.45);line-height:1.5;">Use the tagline in uppercase, spaced, at small size only</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Don'ts -->
|
||||
<p class="label" style="color:rgba(229,100,100,0.8);margin-bottom:16px;">Never do</p>
|
||||
<div class="donts-grid">
|
||||
<div class="dont-card">
|
||||
<svg width="48" height="48" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="56" height="56" rx="13" fill="#e05050"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||||
</svg>
|
||||
<p class="dont-label">Change the icon badge colour to anything other than the approved gradient</p>
|
||||
</div>
|
||||
<div class="dont-card">
|
||||
<div style="font-size:24px;font-weight:900;letter-spacing:-0.5px;font-style:italic;color:rgba(255,255,255,0.5);">DashMail</div>
|
||||
<p class="dont-label">Italicise, condense, or apply effects to the wordmark</p>
|
||||
</div>
|
||||
<div class="dont-card">
|
||||
<div style="font-size:24px;font-weight:400;letter-spacing:-0.5px;color:rgba(255,255,255,0.5);">DashMail</div>
|
||||
<p class="dont-label">Use a single weight for both halves of the wordmark</p>
|
||||
</div>
|
||||
<div class="dont-card">
|
||||
<svg width="48" height="48" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="56" height="56" rx="13" fill="#333"/>
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.62)"/>
|
||||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||||
</svg>
|
||||
<p class="dont-label">Use the icon without its badge on dark/ambiguous backgrounds</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-divider"></div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<div class="footer">
|
||||
<span>DashMail Brand Identity v1.0</span>
|
||||
<span>Little Creek Door Co. · May 2026</span>
|
||||
<span>Confidential · Internal Use Only</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#0a1e3d"/>
|
||||
<stop offset="100%" stop-color="#0099b8"/>
|
||||
</linearGradient>
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-color="rgba(0,0,0,0.3)"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Badge -->
|
||||
<rect width="56" height="56" rx="13" fill="url(#bg)"/>
|
||||
<!-- Airplane full silhouette -->
|
||||
<polygon points="10,12 46,28 10,44" fill="rgba(255,255,255,0.68)" filter="url(#shadow)"/>
|
||||
<!-- Upper wing highlight -->
|
||||
<polygon points="10,12 46,28 22,33" fill="rgba(255,255,255,0.97)"/>
|
||||
<!-- Bottom fold crease line -->
|
||||
<line x1="10" y1="44" x2="46" y2="28" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"/>
|
||||
<!-- Nose highlight dot -->
|
||||
<circle cx="44" cy="28" r="1.2" fill="rgba(255,255,255,0.6)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 958 B |
@@ -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 · 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>
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||||
<title>DashMail Preview</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.30.0/dist/tabler-icons.min.css"/>
|
||||
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
||||
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
html,body,#root{height:100%;overflow:hidden;}
|
||||
body{display:flex;flex-direction:column;}
|
||||
@keyframes spin{to{transform:rotate(360deg);}}
|
||||
@keyframes popIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}
|
||||
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
|
||||
@keyframes fadeInUp{from{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}
|
||||
.ti-spin{animation:spin 0.75s linear infinite;display:inline-block;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script>
|
||||
fetch('./DashMailClient_3.jsx', {cache:'no-store'})
|
||||
.then(r => r.text())
|
||||
.then(code => {
|
||||
const modified = code.replace(/export\s+default\s+function\s+/g, 'function ');
|
||||
const transpiled = Babel.transform(modified, { presets: ['react'] }).code;
|
||||
eval(transpiled);
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
React.createElement(DashMailClient)
|
||||
);
|
||||
})
|
||||
.catch(err => {
|
||||
document.getElementById('root').textContent = 'Error: ' + err.message;
|
||||
console.error(err);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
@@ -0,0 +1,35 @@
|
||||
@echo off
|
||||
cd /d "%~dp0"
|
||||
|
||||
echo.
|
||||
echo DashMail ^— Push to Gitea
|
||||
echo =========================================
|
||||
echo.
|
||||
|
||||
git status --short
|
||||
echo.
|
||||
|
||||
set /p msg=" Commit message: "
|
||||
|
||||
if "%msg%"=="" (
|
||||
echo.
|
||||
echo Cancelled -- no message entered.
|
||||
echo.
|
||||
pause
|
||||
exit /b 1
|
||||
)
|
||||
|
||||
echo.
|
||||
git add -A
|
||||
git commit -m "%msg%"
|
||||
git push
|
||||
|
||||
echo.
|
||||
if %errorlevel%==0 (
|
||||
echo Pushed successfully.
|
||||
) else (
|
||||
echo Push failed -- check your connection to Gitea.
|
||||
)
|
||||
|
||||
echo.
|
||||
pause
|
||||
@@ -0,0 +1,57 @@
|
||||
# DashMail — quick push to Gitea
|
||||
Set-Location $PSScriptRoot
|
||||
|
||||
Write-Host ""
|
||||
Write-Host " DashMail — Push to Gitea" -ForegroundColor Cyan
|
||||
Write-Host " ─────────────────────────────────────" -ForegroundColor DarkGray
|
||||
|
||||
# Show what has changed
|
||||
$status = git status --short
|
||||
if (-not $status) {
|
||||
Write-Host ""
|
||||
Write-Host " Nothing to commit — everything is up to date." -ForegroundColor Green
|
||||
Write-Host ""
|
||||
Read-Host " Press Enter to close"
|
||||
exit 0
|
||||
}
|
||||
|
||||
Write-Host ""
|
||||
Write-Host " Changed files:" -ForegroundColor Yellow
|
||||
$status | ForEach-Object { Write-Host " $_" -ForegroundColor DarkYellow }
|
||||
Write-Host ""
|
||||
|
||||
# Prompt for commit message
|
||||
$msg = Read-Host " Commit message"
|
||||
if (-not $msg.Trim()) {
|
||||
Write-Host ""
|
||||
Write-Host " Cancelled — no message entered." -ForegroundColor Red
|
||||
Write-Host ""
|
||||
Read-Host " Press Enter to close"
|
||||
exit 1
|
||||
}
|
||||
|
||||
Write-Host ""
|
||||
|
||||
# Stage, commit, push
|
||||
git add -A
|
||||
git commit -m $msg
|
||||
|
||||
if ($LASTEXITCODE -ne 0) {
|
||||
Write-Host ""
|
||||
Write-Host " Commit failed." -ForegroundColor Red
|
||||
Read-Host " Press Enter to close"
|
||||
exit 1
|
||||
}
|
||||
|
||||
git push
|
||||
|
||||
if ($LASTEXITCODE -eq 0) {
|
||||
Write-Host ""
|
||||
Write-Host " Pushed successfully." -ForegroundColor Green
|
||||
} else {
|
||||
Write-Host ""
|
||||
Write-Host " Push failed — check your connection to Gitea." -ForegroundColor Red
|
||||
}
|
||||
|
||||
Write-Host ""
|
||||
Read-Host " Press Enter to close"
|
||||
Reference in New Issue
Block a user