58 lines
6.6 KiB
HTML
58 lines
6.6 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Werkator · logo drafts</title><link rel="stylesheet" href="draft.css">
|
||
<script>const t=new URLSearchParams(location.search).get("theme");if(t)document.documentElement.dataset.theme=t;</script>
|
||
<style>
|
||
.sheet{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin:30px 0}
|
||
.card{border:1px solid var(--line);border-radius:8px;padding:22px}
|
||
.card h3{margin:0 0 4px;font-size:16px}
|
||
.card p{margin:0 0 16px;color:var(--muted);font-size:13.5px}
|
||
.samples{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
|
||
.tile{border-radius:22%;display:grid;place-items:center}
|
||
.word{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:30px;letter-spacing:-.01em}
|
||
.word.small{font-size:16px;gap:7px}
|
||
.fav{display:inline-flex;gap:6px;align-items:center}
|
||
</style></head><body>
|
||
<main class="wrap">
|
||
<h1>Logo drafts</h1>
|
||
<p class="sub">A “W” drawn as two check marks: every build is a check, the two of them make the letter. Monochrome petrol, one path, legible at 16 px.</p>
|
||
<div class="sheet">
|
||
<div class="card"><h3>A · Mark on paper (recommended)</h3><p>The bare stroke in petrol, as the blog uses its accent: no box, no fill. Header, footer, print.</p>
|
||
<div class="samples">
|
||
<svg width="120" height="120" viewBox="0 0 64 64"><path d="M6 34 18 47 35 16M30 34 42 47 59 16" fill="none" stroke="var(--accent)" stroke-width="7.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
<svg width="48" height="48" viewBox="0 0 64 64"><path d="M6 34 18 47 35 16M30 34 42 47 59 16" fill="none" stroke="var(--accent)" stroke-width="7.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
<svg width="24" height="24" viewBox="0 0 64 64"><path d="M6 34 18 47 35 16M30 34 42 47 59 16" fill="none" stroke="var(--accent)" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
<svg width="16" height="16" viewBox="0 0 64 64"><path d="M6 34 18 47 35 16M30 34 42 47 59 16" fill="none" stroke="var(--accent)" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div></div>
|
||
<div class="card"><h3>B · Tile (favicon, app icon)</h3><p>The same mark in white on a petrol tile with the blog’s rounded corners; the tab strip needs a filled shape.</p>
|
||
<div class="samples">
|
||
<svg width="120" height="120" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#0E6B7D"/><path d="M9 34 20 46 35 18M30 34 41 46 56 18" fill="none" stroke="#fff" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
<svg width="32" height="32" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#0E6B7D"/><path d="M9 34 20 46 35 18M30 34 41 46 56 18" fill="none" stroke="#fff" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
<svg width="16" height="16" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#0E6B7D"/><path d="M9 34 20 46 35 18M30 34 41 46 56 18" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
<span class="fav"><svg width="16" height="16" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#0E6B7D"/><path d="M9 34 20 46 35 18M30 34 41 46 56 18" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/></svg><span style="font-size:12px;color:var(--text-2)">Werkator · werkator · Latest</span></span>
|
||
</div></div>
|
||
<div class="card"><h3>C · Wordmark</h3><p>Mark plus “Werkator” in IBM Plex Sans semibold, the blog’s title weight. The header uses the 16 px size.</p>
|
||
<div class="samples">
|
||
<span class="word"><svg width="40" height="40" viewBox="0 0 64 64"><path d="M6 34 18 47 35 16M30 34 42 47 59 16" fill="none" stroke="var(--accent)" stroke-width="7.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Werkator</span>
|
||
<span class="word small"><svg width="26" height="26" viewBox="0 0 64 64"><path d="M6 34 18 47 35 16M30 34 42 47 59 16" fill="none" stroke="var(--accent)" stroke-width="7.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Werkator</span>
|
||
</div></div>
|
||
<div class="card"><h3>D · Alternative: the bench</h3><p>A plain W standing on a bar — the workbench (“Werkbank”). Calmer, but it says less; kept for comparison.</p>
|
||
<div class="samples">
|
||
<svg width="120" height="120" viewBox="0 0 64 64"><path d="M8 16l10 28 14-22 14 22 10-28" fill="none" stroke="var(--accent)" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 54h52" stroke="var(--accent)" stroke-width="5" stroke-linecap="round"/></svg>
|
||
<svg width="32" height="32" viewBox="0 0 64 64"><path d="M8 16l10 28 14-22 14 22 10-28" fill="none" stroke="var(--accent)" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 54h52" stroke="var(--accent)" stroke-width="5" stroke-linecap="round"/></svg>
|
||
<svg width="16" height="16" viewBox="0 0 64 64"><path d="M8 16l10 28 14-22 14 22 10-28" fill="none" stroke="var(--accent)" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 54h52" stroke="var(--accent)" stroke-width="6" stroke-linecap="round"/></svg>
|
||
</div></div>
|
||
</div>
|
||
<h2 class="group">Palette</h2>
|
||
<p class="sub">Petrol, blue-shifted: the blog’s primary-600 is #0F6E66 (hue 175°); Werkator moves it to #0E6B7D (hue 190°) so the two sites are kin, not identical. Neutrals are the blog’s.</p>
|
||
<div class="samples" style="gap:14px">
|
||
<div style="width:110px"><div style="height:56px;border-radius:6px;background:#0E6B7D"></div><div class="mono muted">accent #0E6B7D</div></div>
|
||
<div style="width:110px"><div style="height:56px;border-radius:6px;background:#0A5262"></div><div class="mono muted">accent-2 #0A5262</div></div>
|
||
<div style="width:110px"><div style="height:56px;border-radius:6px;background:#E3F0F3;border:1px solid var(--line)"></div><div class="mono muted">soft #E3F0F3</div></div>
|
||
<div style="width:110px"><div style="height:56px;border-radius:6px;background:#63BCCB"></div><div class="mono muted">accent dark #63BCCB</div></div>
|
||
<div style="width:110px"><div style="height:56px;border-radius:6px;background:#B0563B"></div><div class="mono muted">clay #B0563B</div></div>
|
||
<div style="width:110px"><div style="height:56px;border-radius:6px;background:#9EA9A7"></div><div class="mono muted">ghost #9EA9A7</div></div>
|
||
<div style="width:110px"><div style="height:56px;border-radius:6px;background:#141616"></div><div class="mono muted">text #141616</div></div>
|
||
<div style="width:110px"><div style="height:56px;border-radius:6px;background:#242928"></div><div class="mono muted">dark bg #242928</div></div>
|
||
<div style="width:110px"><div style="height:56px;border-radius:6px;background:#0F6E66"></div><div class="mono muted">blog #0F6E66</div></div>
|
||
</div>
|
||
</main></body></html>
|