Devon
721 lines
43 KiB
HTML
721 lines
43 KiB
HTML
<!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>
|