ilia
c08a3e482b
- AutoBank branding, phosphor-green terminal aesthetic - Five normalized logo frames that advance on scroll - Logo build scripts and design exploration docs under docs/
808 lines
40 KiB
HTML
808 lines
40 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Brand name & logo options — 40 picks</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=IBM+Plex+Mono:wght@400;500&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style>
|
||
:root {
|
||
--bg: #0c0f14;
|
||
--surface: #151922;
|
||
--surface-2: #1c2230;
|
||
--line: #2a3347;
|
||
--ink: #eef1f6;
|
||
--muted: #8b95a8;
|
||
--accent: #6ee7b7;
|
||
--accent-dim: rgba(110, 231, 183, 0.12);
|
||
--warn: #fbbf24;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: "DM Sans", system-ui, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.wrap {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 48px 24px 80px;
|
||
}
|
||
|
||
header {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.eyebrow {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 12px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(28px, 4vw, 40px);
|
||
font-weight: 700;
|
||
letter-spacing: -0.03em;
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
.lede {
|
||
max-width: 62ch;
|
||
color: var(--muted);
|
||
margin: 0 0 20px;
|
||
font-size: 17px;
|
||
}
|
||
|
||
.note {
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-left: 3px solid var(--warn);
|
||
border-radius: 10px;
|
||
padding: 14px 18px;
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
max-width: 72ch;
|
||
}
|
||
|
||
.note strong {
|
||
color: var(--ink);
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin: 28px 0 24px;
|
||
}
|
||
|
||
.pick-label {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.pick-value {
|
||
color: var(--accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.btn {
|
||
font: inherit;
|
||
cursor: pointer;
|
||
border: 1px solid var(--line);
|
||
background: var(--surface);
|
||
color: var(--ink);
|
||
padding: 8px 14px;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
transition: border-color 0.15s, background 0.15s;
|
||
}
|
||
|
||
.btn:hover {
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.option {
|
||
position: relative;
|
||
background: var(--surface);
|
||
border: 2px solid var(--line);
|
||
border-radius: 16px;
|
||
padding: 22px;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
|
||
text-align: left;
|
||
}
|
||
|
||
.option:hover {
|
||
border-color: #3d4a66;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.option.is-picked {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 1px var(--accent), 0 20px 40px -20px rgba(110, 231, 183, 0.25);
|
||
background: linear-gradient(180deg, rgba(110, 231, 183, 0.06) 0%, var(--surface) 40%);
|
||
}
|
||
|
||
.option-num {
|
||
position: absolute;
|
||
top: 14px;
|
||
right: 14px;
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--line);
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 50%;
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
|
||
.option.is-picked .option-num {
|
||
background: var(--accent);
|
||
color: #0c0f14;
|
||
border-color: var(--accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.brand-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.brand-mark {
|
||
flex-shrink: 0;
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
|
||
.brand-name {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.brand-name .sub {
|
||
display: block;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--muted);
|
||
letter-spacing: 0.02em;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.tagline {
|
||
font-size: 14px;
|
||
color: var(--ink);
|
||
margin: 0 0 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.vibe {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.vibe span {
|
||
font-size: 11px;
|
||
font-family: "IBM Plex Mono", monospace;
|
||
padding: 3px 8px;
|
||
border-radius: 999px;
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--line);
|
||
color: var(--muted);
|
||
}
|
||
|
||
.pros-cons {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
margin: 0;
|
||
}
|
||
|
||
.pros-cons strong {
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.vs-old {
|
||
margin-top: 48px;
|
||
padding-top: 32px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.vs-old h2 {
|
||
font-size: 18px;
|
||
margin: 0 0 16px;
|
||
}
|
||
|
||
.old-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 16px 18px;
|
||
background: var(--surface);
|
||
border: 1px dashed #4a3f55;
|
||
border-radius: 12px;
|
||
opacity: 0.75;
|
||
max-width: 420px;
|
||
}
|
||
|
||
.old-card .brand-name {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.old-card p {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.batch-label {
|
||
grid-column: 1 / -1;
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 11px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin: 8px 0 0;
|
||
padding-top: 20px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.batch-label:first-of-type {
|
||
border-top: none;
|
||
padding-top: 0;
|
||
margin-top: 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<header>
|
||
<p class="eyebrow">Brand brainstorm</p>
|
||
<h1>40 name & logo directions</h1>
|
||
<p class="lede">
|
||
Round 4 is all <strong>hourglass logos</strong> — time, minutes, payback, sand running down while
|
||
automation runs. Click a card to pick.
|
||
</p>
|
||
<p class="note">
|
||
<strong>Why iAutomate feels off:</strong> The “i” prefix reads as Apple cosplay circa 2008. “Automate”
|
||
is generic — half the industry uses it. These alternatives aim for memorable, credible, and easy to say on
|
||
a call.
|
||
</p>
|
||
</header>
|
||
|
||
<div class="toolbar">
|
||
<span class="pick-label">Your pick: <span class="pick-value" id="pick-display">none yet</span></span>
|
||
<button class="btn" type="button" id="clear-pick">Clear</button>
|
||
<button class="btn" type="button" id="copy-pick">Copy choice</button>
|
||
</div>
|
||
|
||
<div class="grid" id="options"></div>
|
||
|
||
<div class="vs-old">
|
||
<h2>For comparison — current name</h2>
|
||
<div class="old-card">
|
||
<svg class="brand-mark" width="44" height="44" viewBox="0 0 32 32" fill="none" aria-hidden="true">
|
||
<rect width="32" height="32" rx="8" fill="#151922" />
|
||
<circle cx="16" cy="7.5" r="3.25" fill="#6ee7b7" />
|
||
<path d="M16 11v4.5" stroke="#6ee7b7" stroke-width="2.5" stroke-linecap="round" />
|
||
<circle cx="16" cy="18" r="2.25" fill="#6ee7b7" />
|
||
<path d="M16 20.25 9.5 26.5M16 20.25v5M16 20.25 22.5 26.5" stroke="#6ee7b7" stroke-width="2" stroke-linecap="round" />
|
||
<circle cx="9.5" cy="26.5" r="2" fill="#6ee7b7" opacity="0.85" />
|
||
<circle cx="16" cy="28" r="2" fill="#6ee7b7" />
|
||
<circle cx="22.5" cy="26.5" r="2" fill="#6ee7b7" opacity="0.85" />
|
||
</svg>
|
||
<div>
|
||
<div class="brand-name">iAutomate</div>
|
||
<p>Generic + dated Apple vibe. Logo reads as “org chart” not “automation.”</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const options = [
|
||
{
|
||
id: 1,
|
||
name: "Runloop",
|
||
sub: "runloop.dev",
|
||
tagline: "Automation that keeps running.",
|
||
vibe: ["dev-native", "CLI energy", "reliable"],
|
||
note: "Developers instantly get it. Strong for scripts, cron, CI/CD. Slightly niche for non-technical buyers — but your site explains it.",
|
||
color: "#6ee7b7",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 22a8 8 0 0 1 8-8" stroke="#6ee7b7" stroke-width="2.5" stroke-linecap="round"/><path d="M30 22a8 8 0 0 1-8 8" stroke="#6ee7b7" stroke-width="2.5" stroke-linecap="round"/><path d="M22 14v4M22 26v4" stroke="#6ee7b7" stroke-width="2" stroke-linecap="round" opacity="0.5"/><circle cx="22" cy="22" r="3" fill="#6ee7b7"/></svg>`,
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "Relay",
|
||
sub: "relay automation",
|
||
tagline: "Hand off the work. Keep the outcome.",
|
||
vibe: ["minimal", "clean", "handoff"],
|
||
note: "Short, professional, easy domain hunting. Implies connecting systems and passing data. Logo is an arrow-through-circle — motion without clutter.",
|
||
color: "#60a5fa",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><circle cx="22" cy="22" r="10" stroke="#60a5fa" stroke-width="2"/><path d="M16 22h12M24 18l4 4-4 4" stroke="#60a5fa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "Flowcraft",
|
||
sub: "flowcraft studio",
|
||
tagline: "Crafted workflows that don't break.",
|
||
vibe: ["artisan", "premium", "consultancy"],
|
||
note: "Feels like a studio, not a SaaS. Good if you want “senior engineer who cares” positioning. Slightly longer name.",
|
||
color: "#a78bfa",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M12 28c0-6 4-10 10-10s10 4 10 10" stroke="#a78bfa" stroke-width="2.5" stroke-linecap="round"/><path d="M12 20c0-6 4-10 10-10s10 4 10 10" stroke="#a78bfa" stroke-width="2.5" stroke-linecap="round" opacity="0.45"/><circle cx="22" cy="30" r="2.5" fill="#a78bfa"/></svg>`,
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "Conduit",
|
||
sub: "conduit ops",
|
||
tagline: "The pipe between your tools.",
|
||
vibe: ["infrastructure", "technical", "integrations"],
|
||
note: "Strong for webhooks, APIs, custom bridges. Sounds established. Less playful — good for enterprise-ish clients.",
|
||
color: "#38bdf8",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><rect x="10" y="18" width="24" height="8" rx="4" stroke="#38bdf8" stroke-width="2"/><circle cx="14" cy="22" r="2" fill="#38bdf8"/><circle cx="30" cy="22" r="2" fill="#38bdf8"/><path d="M22 10v8M22 26v8" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "Offload",
|
||
sub: "offload.work",
|
||
tagline: "Move tedious work off your plate.",
|
||
vibe: ["direct", "outcome-first", "plain English"],
|
||
note: "Zero jargon. Business owners get it in one word. Bold choice — very action-oriented, less “engineer flex.”",
|
||
color: "#fb923c",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 26h16" stroke="#fb923c" stroke-width="2.5" stroke-linecap="round"/><path d="M22 14v16" stroke="#fb923c" stroke-width="2.5" stroke-linecap="round"/><path d="M18 18l4-4 4 4" stroke="#fb923c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 6,
|
||
name: "Quiet Ops",
|
||
sub: "quietops",
|
||
tagline: "Runs while you sleep.",
|
||
vibe: ["calm", "trustworthy", "ops"],
|
||
note: "Matches your hero copy perfectly. Two words = more memorable story. Feels human, not hype-y. Domain may need a tweak (quietops.co?).",
|
||
color: "#94a3b8",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 24c0-4 3.5-7 8-7s8 3 8 7" stroke="#94a3b8" stroke-width="2" stroke-linecap="round"/><circle cx="18" cy="18" r="1.5" fill="#94a3b8"/><circle cx="26" cy="18" r="1.5" fill="#94a3b8"/><path d="M20 28h4" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" opacity="0.6"/></svg>`,
|
||
},
|
||
{
|
||
id: 7,
|
||
name: "Triggerline",
|
||
sub: "triggerline",
|
||
tagline: "Event-driven automation, wired right.",
|
||
vibe: ["webhooks", "real-time", "technical"],
|
||
note: "Nails your webhook/trigger specialty. Distinctive. Slightly longer — but unique in search results.",
|
||
color: "#f472b6",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M12 22h8" stroke="#f472b6" stroke-width="2.5" stroke-linecap="round"/><circle cx="22" cy="22" r="4" stroke="#f472b6" stroke-width="2"/><path d="M26 22h6" stroke="#f472b6" stroke-width="2.5" stroke-linecap="round"/><path d="M22 12v4M22 28v4" stroke="#f472b6" stroke-width="2" stroke-linecap="round" opacity="0.4"/></svg>`,
|
||
},
|
||
{
|
||
id: 8,
|
||
name: "Stillrun",
|
||
sub: "stillrun",
|
||
tagline: "Always on. Always documented.",
|
||
vibe: ["uptime", "production", "compact"],
|
||
note: "One word, modern compound. Implies reliability and 24/7. Works well in terminal mockups: stillrun deploy --target acme",
|
||
color: "#4ade80",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><rect x="13" y="13" width="6" height="18" rx="2" fill="#4ade80" opacity="0.9"/><rect x="21" y="17" width="6" height="14" rx="2" fill="#4ade80" opacity="0.6"/><rect x="29" y="11" width="6" height="20" rx="2" fill="#4ade80"/></svg>`,
|
||
},
|
||
{
|
||
id: 9,
|
||
name: "Patchline",
|
||
sub: "patchline",
|
||
tagline: "Scripts, workflows, and the glue in between.",
|
||
vibe: ["pragmatic", "integrator", "honest"],
|
||
note: "“Patch” = fix gaps between tools. Feels hands-on and real — not overpromising AI magic. Good for your pragmatic positioning.",
|
||
color: "#facc15",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M12 22h8l4-6 4 12 4-8h8" stroke="#facc15" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 10,
|
||
name: "Levkin",
|
||
sub: "levkin · automation",
|
||
tagline: "Ilia Dobkin — automation engineering.",
|
||
vibe: ["personal brand", "trust", "no fluff"],
|
||
note: "Uses your real name. Highest trust for consultancy. Zero naming risk. Downside: harder to sell later if you hire. Logo = monogram.",
|
||
color: "#e2e8f0",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><text x="22" y="28" text-anchor="middle" fill="#e2e8f0" font-family="system-ui,sans-serif" font-size="18" font-weight="700">LD</text></svg>`,
|
||
},
|
||
{
|
||
id: 11,
|
||
name: "Clockwork",
|
||
sub: "clockwork ops",
|
||
tagline: "Reliable automation that ticks on schedule.",
|
||
vibe: ["timeless", "dependable", "cron"],
|
||
note: "Evokes precision without sounding like a toy. Great for scheduled jobs and reports. Slightly old-fashioned — which can read as trustworthy.",
|
||
color: "#f59e0b",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><circle cx="22" cy="22" r="10" stroke="#f59e0b" stroke-width="2"/><path d="M22 14v8l5 3" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="22" cy="22" r="1.5" fill="#f59e0b"/></svg>`,
|
||
},
|
||
{
|
||
id: 12,
|
||
name: "Nightshift",
|
||
sub: "nightshift",
|
||
tagline: "The work that happens while you're offline.",
|
||
vibe: ["24/7", "outcome", "memorable"],
|
||
note: "Direct tie to “runs while you sleep.” Easy story on a sales call. One word, distinctive. Check domain availability.",
|
||
color: "#818cf8",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M28 18a8 8 0 1 0-10 10" stroke="#818cf8" stroke-width="2" stroke-linecap="round"/><circle cx="30" cy="14" r="1.5" fill="#818cf8"/></svg>`,
|
||
},
|
||
{
|
||
id: 13,
|
||
name: "Splice",
|
||
sub: "splice.work",
|
||
tagline: "Join the tools. Ship the workflow.",
|
||
vibe: ["short", "technical", "integrations"],
|
||
note: "Five letters, punchy. Implies connecting APIs and data streams. Dev-friendly but not intimidating when paired with plain copy.",
|
||
color: "#2dd4bf",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M12 22h8M24 22h8" stroke="#2dd4bf" stroke-width="2.5" stroke-linecap="round"/><rect x="18" y="18" width="8" height="8" rx="2" stroke="#2dd4bf" stroke-width="2"/></svg>`,
|
||
},
|
||
{
|
||
id: 14,
|
||
name: "Workloom",
|
||
sub: "workloom",
|
||
tagline: "Weave your tools into one flow.",
|
||
vibe: ["craft", "workflows", "warm-tech"],
|
||
note: "“Loom” suggests weaving threads together — n8n nodes, scripts, webhooks. Softer than pure dev jargon. Unique in search.",
|
||
color: "#c084fc",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M12 16h20M12 22h20M12 28h20" stroke="#c084fc" stroke-width="2" stroke-linecap="round" opacity="0.35"/><path d="M14 14c4 4 4 12 0 16M30 14c-4 4-4 12 0 16" stroke="#c084fc" stroke-width="2.5" stroke-linecap="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 15,
|
||
name: "Mainline",
|
||
sub: "mainline automation",
|
||
tagline: "Production paths, not side projects.",
|
||
vibe: ["CI/CD", "serious", "pipeline"],
|
||
note: "Git/main branch energy. Signals you ship real systems, not demos. Strong for engineering buyers; pair with friendly copy for SMBs.",
|
||
color: "#22d3ee",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M12 22h20" stroke="#22d3ee" stroke-width="2.5" stroke-linecap="round"/><circle cx="12" cy="22" r="3" fill="#22d3ee"/><circle cx="32" cy="22" r="3" stroke="#22d3ee" stroke-width="2"/></svg>`,
|
||
},
|
||
{
|
||
id: 16,
|
||
name: "Taproot",
|
||
sub: "taproot systems",
|
||
tagline: "Automation built in, not bolted on.",
|
||
vibe: ["foundational", "stable", "organic"],
|
||
note: "Root = foundation of how work gets done. Less “flashy SaaS,” more “this is how we operate now.” Good for retainers and long-term ops.",
|
||
color: "#84cc16",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M22 12v8" stroke="#84cc16" stroke-width="2.5" stroke-linecap="round"/><path d="M22 20c-6 0-8 4-8 8M22 20c6 0 8 4 8 8" stroke="#84cc16" stroke-width="2" stroke-linecap="round"/><circle cx="22" cy="12" r="2.5" fill="#84cc16"/></svg>`,
|
||
},
|
||
{
|
||
id: 17,
|
||
name: "Handrail",
|
||
sub: "handrail",
|
||
tagline: "Guided automation you can trust.",
|
||
vibe: ["safe", "consultancy", "human"],
|
||
note: "Metaphor: you hold the rail while complex ops run safely. Warm for non-technical clients. Less “hacker,” more “partner.”",
|
||
color: "#94a3b8",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 30V18c0-3 3.5-6 8-6s8 3 8 6v12" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/><path d="M14 22h16" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" opacity="0.5"/></svg>`,
|
||
},
|
||
{
|
||
id: 18,
|
||
name: "Clearpath",
|
||
sub: "clearpath",
|
||
tagline: "From messy process to obvious workflow.",
|
||
vibe: ["clarity", "consulting", "SMB-friendly"],
|
||
note: "Speaks to the discovery call — you help them see what to automate. Approachable, zero jargon. Compound word may be harder to get as .com.",
|
||
color: "#34d399",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M12 28 L22 14 L32 28" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="22" cy="24" r="2" fill="#34d399"/></svg>`,
|
||
},
|
||
{
|
||
id: 19,
|
||
name: "Groundwork",
|
||
sub: "groundwork",
|
||
tagline: "Lay the foundation. Then let it run.",
|
||
vibe: ["honest", "build-first", "ops"],
|
||
note: "Implies you do the hard setup once, then systems run. Fits “production-ready” positioning. Two syllables + work = easy to say.",
|
||
color: "#d97706",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><rect x="12" y="26" width="20" height="6" rx="1" fill="#d97706" opacity="0.4"/><rect x="14" y="20" width="16" height="6" rx="1" fill="#d97706" opacity="0.65"/><rect x="16" y="14" width="12" height="6" rx="1" fill="#d97706"/></svg>`,
|
||
},
|
||
{
|
||
id: 20,
|
||
name: "Bridgewell",
|
||
sub: "bridgewell",
|
||
tagline: "Custom bridges between the tools you already use.",
|
||
vibe: ["integrations", "custom", "established"],
|
||
note: "“Bridge” is instantly understood for API work. “Well” adds a slight craft/depth feel. Longer name — but very clear value prop.",
|
||
color: "#60a5fa",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M10 26h24" stroke="#60a5fa" stroke-width="2.5" stroke-linecap="round"/><path d="M14 26v-6c0-2 3.5-4 8-4s8 2 8 4v6" stroke="#60a5fa" stroke-width="2" stroke-linecap="round"/><circle cx="14" cy="18" r="2" fill="#60a5fa" opacity="0.6"/><circle cx="30" cy="18" r="2" fill="#60a5fa" opacity="0.6"/></svg>`,
|
||
},
|
||
{
|
||
id: 21,
|
||
name: "Hourback",
|
||
sub: "hourback",
|
||
tagline: "Buy back the hours lost to manual work.",
|
||
vibe: ["time saved", "ROI", "plain English"],
|
||
note: "Instant value prop — clients hear “hours back” and do the math. Logo pairs clock with return arrow. Strong for discovery calls.",
|
||
color: "#fbbf24",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><circle cx="20" cy="22" r="9" stroke="#fbbf24" stroke-width="2"/><path d="M20 17v5l3 2" stroke="#fbbf24" stroke-width="1.8" stroke-linecap="round"/><path d="M30 18l4 4-4 4" stroke="#fbbf24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 22,
|
||
name: "Reclaim",
|
||
sub: "reclaim ops",
|
||
tagline: "Reclaim your team's time for work that pays.",
|
||
vibe: ["time", "empowerment", "outcome"],
|
||
note: "Active verb — you're taking something back. Less technical, very business-owner friendly. Pairs well with “8 hrs → 90 sec” proof.",
|
||
color: "#34d399",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M28 16a10 10 0 1 0 2.5 6.5" stroke="#34d399" stroke-width="2.5" stroke-linecap="round"/><path d="M28 10v6h-6" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 23,
|
||
name: "Timewell",
|
||
sub: "timewell",
|
||
tagline: "Time well spent — because the busywork runs itself.",
|
||
vibe: ["time", "trust", "calm ROI"],
|
||
note: "Double meaning: time well invested + a well that keeps giving. Softer than “Hourback” but still ROI-forward. Good for retainers.",
|
||
color: "#5eead4",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><ellipse cx="22" cy="28" rx="8" ry="3" fill="#5eead4" opacity="0.25"/><path d="M18 28V18c0-3 2-5 4-5s4 2 4 5v10" stroke="#5eead4" stroke-width="2" stroke-linecap="round"/><path d="M14 20h16" stroke="#5eead4" stroke-width="2" stroke-linecap="round" opacity="0.5"/></svg>`,
|
||
},
|
||
{
|
||
id: 24,
|
||
name: "Streamline",
|
||
sub: "streamline automation",
|
||
tagline: "Fewer steps. Faster turnaround. Lower cost per task.",
|
||
vibe: ["streamline", "efficiency", "direct"],
|
||
note: "Says exactly what you do — no translation needed. Risk: generic word, harder .com. Wins on clarity for SMB buyers who want “make it simpler.”",
|
||
color: "#38bdf8",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M12 16h14c4 0 6 2 6 6s-2 6-6 6H12" stroke="#38bdf8" stroke-width="2.5" stroke-linecap="round"/><path d="M32 28H18c-4 0-6-2-6-6s2-6 6-6h14" stroke="#38bdf8" stroke-width="2.5" stroke-linecap="round" opacity="0.45"/></svg>`,
|
||
},
|
||
{
|
||
id: 25,
|
||
name: "Fastlane",
|
||
sub: "fastlane",
|
||
tagline: "Skip the manual queue. Ship on autopilot.",
|
||
vibe: ["speed", "streamline", "motion"],
|
||
note: "Speed without saying “AI magic.” Familiar metaphor — everyone wants the fast lane. Logo is converging lanes → one path.",
|
||
color: "#f97316",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M12 28l6-12h4l6 12" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 16h8l-4 12" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/></svg>`,
|
||
},
|
||
{
|
||
id: 26,
|
||
name: "Trimwork",
|
||
sub: "trimwork",
|
||
tagline: "Trim the busywork. Keep the revenue work.",
|
||
vibe: ["lean", "pragmatic", "cost cut"],
|
||
note: "Honest and hands-on — you cut fat from processes. Appeals to owners watching payroll. Less “automation nerd,” more “ops consultant.”",
|
||
color: "#a3e635",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 30h16" stroke="#a3e635" stroke-width="2" stroke-linecap="round" opacity="0.35"/><path d="M16 24h12" stroke="#a3e635" stroke-width="2" stroke-linecap="round" opacity="0.55"/><path d="M18 18h8" stroke="#a3e635" stroke-width="2.5" stroke-linecap="round"/><path d="M26 14l4 4-10 10H16v-4l10-10z" fill="#a3e635" opacity="0.9"/></svg>`,
|
||
},
|
||
{
|
||
id: 27,
|
||
name: "Yield",
|
||
sub: "yield automation",
|
||
tagline: "Automation that yields hours — and margin.",
|
||
vibe: ["ROI", "money", "compact"],
|
||
note: "Finance-friendly word — yield on investment, yield per hour. Short, premium. Works in headlines: “Higher yield per employee.”",
|
||
color: "#22c55e",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M12 30V22c0-6 4-10 10-10s10 4 10 10v8" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round"/><path d="M12 30h20" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round"/><circle cx="22" cy="18" r="2" fill="#22c55e"/></svg>`,
|
||
},
|
||
{
|
||
id: 28,
|
||
name: "Bankable",
|
||
sub: "bankable hours",
|
||
tagline: "Turn wasted hours into savings you can count.",
|
||
vibe: ["money", "measurable", "CFO-friendly"],
|
||
note: "Speaks to measurable ROI — great when the buyer thinks in dollars, not nodes. Slightly corporate; pair with case-study numbers on the site.",
|
||
color: "#eab308",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><rect x="12" y="14" width="20" height="16" rx="3" stroke="#eab308" stroke-width="2"/><path d="M16 22h4M24 22h4" stroke="#eab308" stroke-width="2" stroke-linecap="round"/><circle cx="22" cy="22" r="5" stroke="#eab308" stroke-width="1.5" opacity="0.5"/></svg>`,
|
||
},
|
||
{
|
||
id: 29,
|
||
name: "Compound",
|
||
sub: "compound ops",
|
||
tagline: "Small automations. Compounding time savings.",
|
||
vibe: ["ROI", "growth", "smart"],
|
||
note: "Investor/business brain candy — savings stack over time. Good story for retainers and ongoing automation roadmaps.",
|
||
color: "#8b5cf6",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 28c0-8 3.5-14 8-14s8 6 8 14" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" opacity="0.4"/><path d="M18 24c0-5 2-9 4-9s4 4 4 9" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" opacity="0.7"/><circle cx="22" cy="16" r="3" fill="#8b5cf6"/></svg>`,
|
||
},
|
||
{
|
||
id: 30,
|
||
name: "Timeshift",
|
||
sub: "timeshift",
|
||
tagline: "Shift hours from grunt work to growth work.",
|
||
vibe: ["time", "transform", "streamline"],
|
||
note: "Implies moving time to higher-value tasks — not just “faster,” but “better use of payroll.” Distinctive, one word, modern.",
|
||
color: "#ec4899",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><circle cx="18" cy="22" r="8" stroke="#ec4899" stroke-width="2"/><path d="M18 18v4l3 2" stroke="#ec4899" stroke-width="1.8" stroke-linecap="round"/><path d="M26 22h10M32 18l4 4-4 4" stroke="#ec4899" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 31,
|
||
name: "Payback",
|
||
sub: "payback automation",
|
||
tagline: "Time is money. Get both back.",
|
||
vibe: ["payback", "hourglass", "ROI"],
|
||
note: "Says the quiet part out loud — automation pays for itself. Hourglass + return arrow logo. Bold, memorable, slightly aggressive in a good way.",
|
||
color: "#22c55e",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 10h16l-8 10 8 10H14l8-10-8-10z" stroke="#22c55e" stroke-width="2" stroke-linejoin="round"/><path d="M18 24h8v6H18z" fill="#22c55e" opacity="0.45"/><path d="M30 14l3 3-6 6" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/><path d="M27 20V14h6" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 32,
|
||
name: "Timesand",
|
||
sub: "timesand",
|
||
tagline: "Stop watching sand run out on manual work.",
|
||
vibe: ["hourglass", "urgency", "time"],
|
||
note: "Visual metaphor is instant — sand = time draining on repetitive tasks. Automation plugs the leak. Strong storytelling logo.",
|
||
color: "#fbbf24",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 10h16l-8 10 8 10H14l8-10-8-10z" stroke="#fbbf24" stroke-width="2"/><circle cx="20" cy="14" r="1" fill="#fbbf24"/><circle cx="24" cy="17" r="1" fill="#fbbf24" opacity="0.7"/><circle cx="22" cy="21" r="1" fill="#fbbf24" opacity="0.5"/><path d="M18 26h8v5H18z" fill="#fbbf24" opacity="0.35"/></svg>`,
|
||
},
|
||
{
|
||
id: 33,
|
||
name: "Glasshour",
|
||
sub: "glasshour",
|
||
tagline: "Every minute automated is a minute earned back.",
|
||
vibe: ["hourglass", "minimal", "elegant"],
|
||
note: "Flipped compound — distinctive, ownable. Thin-line hourglass logo feels premium, not gimmicky. Works on dark sites.",
|
||
color: "#e2e8f0",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M15 11h14M29 33H15M22 21l7-10M22 21l-7-10M22 21l7 12M22 21l-7 12" stroke="#e2e8f0" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 34,
|
||
name: "Minutebank",
|
||
sub: "minutebank",
|
||
tagline: "Deposit minutes. Withdraw margin.",
|
||
vibe: ["minutes", "money", "hourglass"],
|
||
note: "Banking metaphor + time — CFOs and owners get it fast. Hourglass with coin slot detail in logo. Playful but serious.",
|
||
color: "#eab308",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 10h16l-8 10 8 10H14l8-10-8-10z" stroke="#eab308" stroke-width="2"/><circle cx="22" cy="30" r="5" stroke="#eab308" stroke-width="1.8"/><path d="M22 27v6M19.5 30h5" stroke="#eab308" stroke-width="1.5" stroke-linecap="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 35,
|
||
name: "Sandclock",
|
||
sub: "sandclock",
|
||
tagline: "The clock is running. Automate before it empties.",
|
||
vibe: ["hourglass", "urgency", "classic"],
|
||
note: "Old-word feel, new meaning — like a sandclock on a desk, but for ops. Familiar shape, easy favicon. Slightly literary.",
|
||
color: "#f97316",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M13 9h18l-9 11 9 11H13l9-11-9-11z" stroke="#f97316" stroke-width="2.2" fill="rgba(249,115,22,0.08)"/><path d="M17 25h10l-5 6-5-6z" fill="#f97316" opacity="0.5"/></svg>`,
|
||
},
|
||
{
|
||
id: 36,
|
||
name: "Buyback",
|
||
sub: "buyback time",
|
||
tagline: "Buy back your team's hours.",
|
||
vibe: ["payback", "hours", "hourglass"],
|
||
note: "Parallel to Hourback but hourglass-native. “Buy back” = clear transaction. Good for pricing conversations: you’re purchasing time ROI.",
|
||
color: "#60a5fa",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 10h16l-8 10 8 10H14l8-10-8-10z" stroke="#60a5fa" stroke-width="2"/><path d="M28 12c2 4 2 8 0 12" stroke="#60a5fa" stroke-width="2" stroke-linecap="round" opacity="0.6"/><path d="M30 10v4M28 12h4" stroke="#60a5fa" stroke-width="2" stroke-linecap="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 37,
|
||
name: "Returnhour",
|
||
sub: "returnhour",
|
||
tagline: "Return on every hour you automate.",
|
||
vibe: ["ROI", "hourglass", "return"],
|
||
note: "ROI pun built into the name — return + hour. Circular arrow around hourglass in logo. Smart without being cute.",
|
||
color: "#a78bfa",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 10h16l-8 10 8 10H14l8-10-8-10z" stroke="#a78bfa" stroke-width="2"/><path d="M30 12a9 9 0 1 0 2 6" stroke="#a78bfa" stroke-width="2" stroke-linecap="round"/><path d="M30 8v4h4" stroke="#a78bfa" stroke-width="2" stroke-linecap="round"/></svg>`,
|
||
},
|
||
{
|
||
id: 38,
|
||
name: "Goldminute",
|
||
sub: "goldminute",
|
||
tagline: "Treat every minute like it costs you.",
|
||
vibe: ["money", "minutes", "premium"],
|
||
note: "“Time is money” without saying it. Gold sand in hourglass logo = premium consultancy. Pairs with Monochrome Luxe style direction.",
|
||
color: "#c9a962",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 10h16l-8 10 8 10H14l8-10-8-10z" stroke="#c9a962" stroke-width="2"/><path d="M17 23h10l-5 7-5-7z" fill="#c9a962" opacity="0.55"/><circle cx="22" cy="14" r="1.2" fill="#c9a962"/></svg>`,
|
||
},
|
||
{
|
||
id: 39,
|
||
name: "Sandflow",
|
||
sub: "sandflow",
|
||
tagline: "Let the busywork flow away. Keep the valuable work.",
|
||
vibe: ["hourglass", "flow", "streamline"],
|
||
note: "Connects hourglass sand to workflow “flow” — subtle double meaning. Softer than Payback, still time-forward.",
|
||
color: "#2dd4bf",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 10h16l-8 10 8 10H14l8-10-8-10z" stroke="#2dd4bf" stroke-width="2"/><path d="M12 32c4-2 8-2 12 0s8 2 12 0" stroke="#2dd4bf" stroke-width="1.8" stroke-linecap="round" opacity="0.5"/></svg>`,
|
||
},
|
||
{
|
||
id: 40,
|
||
name: "Paidhour",
|
||
sub: "paidhour",
|
||
tagline: "Hours that pay for themselves.",
|
||
vibe: ["money", "hours", "hourglass"],
|
||
note: "Direct ROI — every automated hour is a paid hour freed up. Hourglass with checkmark in bottom bulb = job done.",
|
||
color: "#4ade80",
|
||
logo: `<svg viewBox="0 0 44 44" fill="none"><rect width="44" height="44" rx="11" fill="#151922"/><path d="M14 10h16l-8 10 8 10H14l8-10-8-10z" stroke="#4ade80" stroke-width="2"/><path d="M19 27l2 2 5-5" stroke="#4ade80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
|
||
},
|
||
];
|
||
|
||
const grid = document.getElementById("options");
|
||
const pickDisplay = document.getElementById("pick-display");
|
||
let picked = localStorage.getItem("brand-pick") || "";
|
||
|
||
function render() {
|
||
const batch1 = options.filter((o) => o.id <= 10);
|
||
const batch2 = options.filter((o) => o.id > 10 && o.id <= 20);
|
||
const batch3 = options.filter((o) => o.id > 20 && o.id <= 30);
|
||
const batch4 = options.filter((o) => o.id > 30);
|
||
|
||
function cards(list) {
|
||
return list.map(
|
||
(o) => `
|
||
<button type="button" class="option${picked === o.name ? " is-picked" : ""}" data-name="${o.name}" aria-pressed="${picked === o.name}">
|
||
<span class="option-num">${o.id}</span>
|
||
<div class="brand-row">
|
||
<div class="brand-mark">${o.logo}</div>
|
||
<div>
|
||
<div class="brand-name">${o.name}<span class="sub">${o.sub}</span></div>
|
||
</div>
|
||
</div>
|
||
<p class="tagline">${o.tagline}</p>
|
||
<div class="vibe">${o.vibe.map((v) => `<span>${v}</span>`).join("")}</div>
|
||
<p class="pros-cons"><strong>Take:</strong> ${o.note}</p>
|
||
</button>`
|
||
).join("");
|
||
}
|
||
|
||
grid.innerHTML =
|
||
`<p class="batch-label">Round 1 — general</p>` +
|
||
cards(batch1) +
|
||
`<p class="batch-label">Round 2</p>` +
|
||
cards(batch2) +
|
||
`<p class="batch-label">Round 3 — time, money & streamline</p>` +
|
||
cards(batch3) +
|
||
`<p class="batch-label">Round 4 — hourglass logos & payback</p>` +
|
||
cards(batch4);
|
||
}
|
||
|
||
function setPick(name) {
|
||
picked = name;
|
||
localStorage.setItem("brand-pick", name);
|
||
pickDisplay.textContent = name || "none yet";
|
||
render();
|
||
}
|
||
|
||
grid.addEventListener("click", (e) => {
|
||
const card = e.target.closest(".option");
|
||
if (!card) return;
|
||
const name = card.dataset.name;
|
||
setPick(picked === name ? "" : name);
|
||
});
|
||
|
||
document.getElementById("clear-pick").addEventListener("click", () => setPick(""));
|
||
document.getElementById("copy-pick").addEventListener("click", () => {
|
||
if (!picked) return;
|
||
const o = options.find((x) => x.name === picked);
|
||
const text = `Brand pick: ${picked}\nTagline: ${o?.tagline || ""}\nVibe: ${o?.vibe?.join(", ") || ""}`;
|
||
navigator.clipboard?.writeText(text);
|
||
pickDisplay.textContent = `${picked} (copied!)`;
|
||
setTimeout(() => {
|
||
pickDisplay.textContent = picked;
|
||
}, 1500);
|
||
});
|
||
|
||
pickDisplay.textContent = picked || "none yet";
|
||
render();
|
||
</script>
|
||
</body>
|
||
</html>
|