ilia/levkin.ca
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add logo rebrand: brand marks, logo page, and brand assets

Browse Source
This commit is contained in:
ilia
2026-07-26 15:27:19 -04:00
parent cfcfd0325e
commit 9369409b1d
29 changed files with 772 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+9
View File
@@ -127,6 +127,15 @@
<span class="tag">folder · scroll</span>
</div>
</a>
<a class="card" href="/logo/">
<div class="preview preview--spec" style="letter-spacing:0.02em;">A · B · C</div>
<div class="card-body">
<h2>Logo</h2>
<p>Spec-box, routed L, and cursor-accent lockups — light and dark.</p>
<span class="tag">brand · variants</span>
</div>
</a>
</div>
<footer>
logo/index.html
+545
View File
@@ -0,0 +1,545 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Levkin — Logo variants</title>
<meta name="robots" content="noindex" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<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=IBM+Plex+Mono:wght@400;500&family=Literata:opsz,wght@7..72,400;7..72,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="../shared/logo.css" />
<style>
:root {
--ink: #1a1a18;
--muted: #4a4844;
--paper: #f0ede8;
--desk: #3d3830;
--rule: #c8c2b8;
--accent: #c9a86c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: Literata, Georgia, serif;
background: var(--desk);
color: var(--ink);
min-height: 100vh;
padding: 2rem 1.25rem 4rem;
}
.wrap { max-width: 720px; margin: 0 auto; }
.top { margin-bottom: 1.75rem; color: #ebe4d4; }
.top a {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
color: var(--accent);
text-decoration: none;
}
.top h1 {
font-size: 1.35rem;
font-weight: 600;
margin: 0.65rem 0 0.35rem;
color: #f0eeea;
}
.top p {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
color: #b8b4ac;
line-height: 1.5;
}
.card {
background: var(--paper);
border-radius: 4px;
padding: 1.5rem 1.35rem 1.35rem;
margin-bottom: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.12);
}
.card-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin-bottom: 1.1rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid var(--rule);
}
.card-head h2 { font-size: 0.95rem; font-weight: 600; }
.card-head .code {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.card p.note {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.68rem;
color: var(--muted);
margin-top: 1rem;
line-height: 1.45;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
}
.panel {
flex: 1 1 240px;
padding: 1.1rem 1rem;
border: 1px dashed var(--rule);
border-radius: 3px;
overflow: hidden;
}
.panel--dark {
background: #0a0a0b;
border-color: #2a2a28;
--logo-fg: #f0eeea;
color: #f0eeea;
}
.panel-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.75rem;
}
.panel--dark .panel-label { color: #8a8680; }
.favicon-row {
display: flex;
gap: 0.75rem;
align-items: center;
margin-top: 0.85rem;
}
.favicon-row svg { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.favicon-row span {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
color: var(--muted);
}
</style>
</head>
<body>
<div class="wrap">
<div class="top">
<a href="/">← spec</a>
·
<a href="/folders/">folders</a>
<h1>Logo variants</h1>
<p>A–K cleaned. Light + dark + favicon. Tagline always: Custom software, automation &amp; AI workflows.</p>
</div>
<!-- A -->
<article class="card" id="a">
<div class="card-head"><h2>A · Spec-box</h2><span class="code">scoped / SOW</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<g class="logo-mark" transform="translate(2,14)">
<polyline points="20,0 0,0 0,22 20,22" />
<circle cx="9" cy="11" r="2" />
</g>
<text x="34" y="24" class="logo-title">Levkin</text>
<text x="34" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<g class="logo-mark" transform="translate(2,14)">
<polyline points="20,0 0,0 0,22 20,22" />
<circle cx="9" cy="11" r="2" />
</g>
<text x="34" y="24" class="logo-title">Levkin</text>
<text x="34" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<polyline points="22,8 10,8 10,24 22,24" fill="none" stroke="#c9a86c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="16" cy="16" r="2" fill="#c9a86c"/>
</svg>
<span>Favicon: open box + node</span>
</div>
<p class="note">Scoped / bounded work — a ticket or SOW.</p>
</article>
<!-- B -->
<article class="card" id="b">
<div class="card-head"><h2>B · Routed L</h2><span class="code">pipeline / route</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<g class="logo-mark" transform="translate(4,12)">
<path d="M2 0 L2 24 L20 24" />
<circle cx="2" cy="24" r="2.3" />
</g>
<text x="36" y="24" class="logo-title">Levkin</text>
<text x="36" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<g class="logo-mark" transform="translate(4,12)">
<path d="M2 0 L2 24 L20 24" />
<circle cx="2" cy="24" r="2.3" />
</g>
<text x="36" y="24" class="logo-title">Levkin</text>
<text x="36" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<path d="M10 7 L10 23 L23 23" fill="none" stroke="#c9a86c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="23" r="2.2" fill="#c9a86c"/>
</svg>
<span>Favicon: L-route + corner node</span>
</div>
<p class="note">Works at 16–32px without changing the lockup tone.</p>
</article>
<!-- C -->
<article class="card" id="c">
<div class="card-head"><h2>C · Cursor accent</h2><span class="code">CLI / prompt</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<text x="0" y="24" class="logo-title">Levkin</text>
<text x="0" y="44" class="logo-tagline">&gt; custom software, automation &amp; AI workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<text x="0" y="24" class="logo-title">Levkin</text>
<text x="0" y="44" class="logo-tagline">&gt; custom software, automation &amp; AI workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<text x="16" y="21" text-anchor="middle" fill="#c9a86c" font-family="'IBM Plex Mono', monospace" font-size="13" font-weight="500">&gt;_</text>
</svg>
<span>Favicon: prompt caret</span>
</div>
<p class="note">CLI hint without futuristic gloss. Drop &gt; at tiny sizes.</p>
</article>
<!-- D: brackets hug wordmark only; tagline free below -->
<article class="card" id="d">
<div class="card-head"><h2>D · Brackets</h2><span class="code">array / scope</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<g class="logo-mark">
<polyline points="6,8 2,8 2,30 6,30" />
<polyline points="98,8 102,8 102,30 98,30" />
</g>
<text x="14" y="24" class="logo-title">Levkin</text>
<text x="14" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<g class="logo-mark">
<polyline points="6,8 2,8 2,30 6,30" />
<polyline points="98,8 102,8 102,30 98,30" />
</g>
<text x="14" y="24" class="logo-title">Levkin</text>
<text x="14" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<polyline points="12,8 8,8 8,24 12,24" fill="none" stroke="#c9a86c" stroke-width="1.8" stroke-linecap="round"/>
<polyline points="20,8 24,8 24,24 20,24" fill="none" stroke="#c9a86c" stroke-width="1.8" stroke-linecap="round"/>
</svg>
<span>Favicon: [ ]</span>
</div>
<p class="note">Brackets hug the wordmark only — tagline sits clear below.</p>
</article>
<!-- E -->
<article class="card" id="e">
<div class="card-head"><h2>E · Letterhead rule</h2><span class="code">stationery</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<text x="0" y="20" class="logo-title">Levkin</text>
<line class="logo-rule" x1="0" y1="28" x2="220" y2="28" />
<text x="0" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<text x="0" y="20" class="logo-title">Levkin</text>
<line class="logo-rule" x1="0" y1="28" x2="220" y2="28" />
<text x="0" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<text x="16" y="15" text-anchor="middle" fill="#c9a86c" font-family="Literata, Georgia, serif" font-size="9" font-weight="600">L</text>
<line x1="8" y1="20" x2="24" y2="20" stroke="#c9a86c" stroke-width="1.2"/>
</svg>
<span>Favicon: L + hairline</span>
</div>
<p class="note">Pure firm mark — printed letterhead.</p>
</article>
<!-- F -->
<article class="card" id="f">
<div class="card-head"><h2>F · LK monogram</h2><span class="code">initials</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<rect class="logo-mark" x="2" y="10" width="26" height="26" rx="3" />
<text x="15" y="27" text-anchor="middle" class="logo-mono" font-size="10" font-weight="500">LK</text>
<text x="38" y="24" class="logo-title">Levkin</text>
<text x="38" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<rect class="logo-mark" x="2" y="10" width="26" height="26" rx="3" />
<text x="15" y="27" text-anchor="middle" class="logo-mono" font-size="10" font-weight="500">LK</text>
<text x="38" y="24" class="logo-title">Levkin</text>
<text x="38" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<rect x="7" y="7" width="18" height="18" rx="2.5" fill="none" stroke="#c9a86c" stroke-width="1.5"/>
<text x="16" y="19.5" text-anchor="middle" fill="#c9a86c" font-family="'IBM Plex Mono', monospace" font-size="9" font-weight="500">LK</text>
</svg>
<span>Favicon: LK in thin square</span>
</div>
<p class="note">Thinner evolution of the old LK mark.</p>
</article>
<!-- G -->
<article class="card" id="g">
<div class="card-head"><h2>G · Folder tab</h2><span class="code">filing / site</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<path class="logo-mark" d="M2 20 L2 36 L26 36 L26 20 L19 20 L15 14 L7 14 L2 20 Z" />
<text x="36" y="24" class="logo-title">Levkin</text>
<text x="36" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<path class="logo-mark" d="M2 20 L2 36 L26 36 L26 20 L19 20 L15 14 L7 14 L2 20 Z" />
<text x="36" y="24" class="logo-title">Levkin</text>
<text x="36" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<path d="M7 14 L7 24 L25 24 L25 14 L19 14 L16 10 L10 10 L7 14 Z" fill="none" stroke="#c9a86c" stroke-width="1.6" stroke-linejoin="round"/>
</svg>
<span>Favicon: folder tab</span>
</div>
<p class="note">Ties to the manila-folder site metaphor.</p>
</article>
<!-- H -->
<article class="card" id="h">
<div class="card-head"><h2>H · Ticket square</h2><span class="code">done / handoff</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<g class="logo-mark" transform="translate(2,14)">
<rect x="0" y="0" width="20" height="20" rx="2" />
<polyline points="5,10 9,14 15,6" />
</g>
<text x="32" y="24" class="logo-title">Levkin</text>
<text x="32" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<g class="logo-mark" transform="translate(2,14)">
<rect x="0" y="0" width="20" height="20" rx="2" />
<polyline points="5,10 9,14 15,6" />
</g>
<text x="32" y="24" class="logo-title">Levkin</text>
<text x="32" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<rect x="8" y="8" width="16" height="16" rx="2" fill="none" stroke="#c9a86c" stroke-width="1.6"/>
<polyline points="11.5,16 14.5,19 20.5,12.5" fill="none" stroke="#c9a86c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Favicon: checked ticket</span>
</div>
<p class="note">Production-ready / handoff — signed off.</p>
</article>
<!-- I -->
<article class="card" id="i">
<div class="card-head"><h2>I · Doc ID</h2><span class="code">LK-SPEC</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 58" role="img" aria-label="Levkin" class="logo-levkin">
<text x="0" y="12" class="logo-eyebrow">LK-SPEC · 1.0</text>
<text x="0" y="34" class="logo-title">Levkin</text>
<text x="0" y="52" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 58" role="img" aria-label="Levkin" class="logo-levkin">
<text x="0" y="12" class="logo-eyebrow">LK-SPEC · 1.0</text>
<text x="0" y="34" class="logo-title">Levkin</text>
<text x="0" y="52" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<text x="16" y="14" text-anchor="middle" fill="#c9a86c" font-family="'IBM Plex Mono', monospace" font-size="5.5" letter-spacing="0.08em">LK</text>
<text x="16" y="23" text-anchor="middle" fill="#c9a86c" font-family="'IBM Plex Mono', monospace" font-size="7" font-weight="500">1.0</text>
</svg>
<span>Favicon: LK / 1.0</span>
</div>
<p class="note">RFC / company-spec identity.</p>
</article>
<!-- J -->
<article class="card" id="j">
<div class="card-head"><h2>J · Path accent</h2><span class="code">route / URL</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<text x="0" y="24" class="logo-title">Levkin</text>
<text x="0" y="44" class="logo-tagline">/ software · automation · ai-workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<text x="0" y="24" class="logo-title">Levkin</text>
<text x="0" y="44" class="logo-tagline">/ software · automation · ai-workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<text x="16" y="21" text-anchor="middle" fill="#c9a86c" font-family="'IBM Plex Mono', monospace" font-size="16" font-weight="500">/</text>
</svg>
<span>Favicon: path slash</span>
</div>
<p class="note">Services as a path under the firm.</p>
</article>
<!-- K: { Levkin } — mono braces, wordmark only; tagline clear below -->
<article class="card" id="k">
<div class="card-head"><h2>K · Curly braces</h2><span class="code">object / block</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<text x="0" y="26" class="logo-brace">{</text>
<text x="18" y="24" class="logo-title">Levkin</text>
<text x="102" y="26" class="logo-brace">}</text>
<text x="18" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<text x="0" y="26" class="logo-brace">{</text>
<text x="18" y="24" class="logo-title">Levkin</text>
<text x="102" y="26" class="logo-brace">}</text>
<text x="18" y="44" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<text x="10" y="21" text-anchor="middle" fill="#c9a86c" font-family="'IBM Plex Mono', monospace" font-size="14">{</text>
<text x="22" y="21" text-anchor="middle" fill="#c9a86c" font-family="'IBM Plex Mono', monospace" font-size="14">}</text>
</svg>
<span>Favicon: { }</span>
</div>
<p class="note">Single mono braces around the wordmark only — balanced { Levkin }.</p>
</article>
<!-- K2: drawn braces around wordmark line only -->
<article class="card" id="k2">
<div class="card-head"><h2>K2 · Drawn braces</h2><span class="code">optical</span></div>
<div class="row">
<div class="panel">
<p class="panel-label">Light</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<g class="logo-mark">
<path d="M12 6 C5 6 3 11 3 15 C3 18 1.5 19.5 1.5 19.5 C1.5 19.5 3 21 3 24 C3 28 5 33 12 33" />
<path d="M108 6 C115 6 117 11 117 15 C117 18 118.5 19.5 118.5 19.5 C118.5 19.5 117 21 117 24 C117 28 115 33 108 33" />
</g>
<text x="20" y="24" class="logo-title">Levkin</text>
<text x="20" y="46" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
<div class="panel panel--dark">
<p class="panel-label">Dark</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin" class="logo-levkin">
<g class="logo-mark">
<path d="M12 6 C5 6 3 11 3 15 C3 18 1.5 19.5 1.5 19.5 C1.5 19.5 3 21 3 24 C3 28 5 33 12 33" />
<path d="M108 6 C115 6 117 11 117 15 C117 18 118.5 19.5 118.5 19.5 C118.5 19.5 117 21 117 24 C117 28 115 33 108 33" />
</g>
<text x="20" y="24" class="logo-title">Levkin</text>
<text x="20" y="46" class="logo-tagline">Custom software, automation &amp; AI workflows</text>
</svg>
</div>
</div>
<div class="favicon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<path d="M12 8 C8 8 7 11 7 14 C7 16 6 16.5 6 16.5 C6 16.5 7 17 7 19 C7 22 8 25 12 25" fill="none" stroke="#c9a86c" stroke-width="1.7" stroke-linecap="round"/>
<path d="M20 8 C24 8 25 11 25 14 C25 16 26 16.5 26 16.5 C26 16.5 25 17 25 19 C25 22 24 25 20 25" fill="none" stroke="#c9a86c" stroke-width="1.7" stroke-linecap="round"/>
</svg>
<span>Favicon: drawn { }</span>
</div>
<p class="note">Hairline braces around the wordmark only — tagline clear underneath, no overlap.</p>
</article>
</div>
</body>
</html>
public/brand/favicon-a-specbox.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Levkin">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<polyline points="22,8 10,8 10,24 22,24" fill="none" stroke="#c9a86c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="16" cy="16" r="2" fill="#c9a86c"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 343 B

public/brand/favicon-b-routed-l.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Levkin">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<path d="M10 7 L10 23 L23 23" fill="none" stroke="#c9a86c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="23" r="2.2" fill="#c9a86c"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 332 B

public/brand/favicon-c-cursor.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Levkin">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<text x="16" y="21" text-anchor="middle" fill="#c9a86c" font-family="'IBM Plex Mono', ui-monospace, monospace" font-size="14" font-weight="500">&gt;_</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 313 B

public/brand/logo-a-specbox.svg
+12
View File
@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" role="img" aria-label="Levkin  custom software, automation and AI workflows">
<style>
.t { font-family: Literata, Georgia, serif; font-size: 22px; font-weight: 600; fill: #1a1a18; letter-spacing: 0.02em; }
.s { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; fill: #1a1a18; opacity: 0.72; }
</style>
<g fill="none" stroke="#1a1a18" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<polyline points="24,12 2,12 2,36 24,36" />
</g>
<circle cx="12" cy="24" r="2" fill="#1a1a18" />
<text x="36" y="24" class="t">Levkin</text>
<text x="36" y="44" class="s">Custom software, automation &amp; AI workflows</text>
</svg>
public/brand/logo-b-routed-l.svg
+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" role="img" aria-label="Levkin  custom software, automation and AI workflows">
<style>
.t { font-family: Literata, Georgia, serif; font-size: 22px; font-weight: 600; fill: #1a1a18; letter-spacing: 0.02em; }
.s { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; fill: #1a1a18; opacity: 0.72; }
</style>
<path d="M8 12 L8 38 L26 38" fill="none" stroke="#1a1a18" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="8" cy="38" r="2.4" fill="#1a1a18"/>
<text x="36" y="24" class="t">Levkin</text>
<text x="36" y="44" class="s">Custom software, automation &amp; AI workflows</text>
</svg>
public/brand/logo-c-cursor.svg
+8
View File
@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 56" role="img" aria-label="Levkin  custom software, automation and AI workflows">
<style>
.t { font-family: Literata, Georgia, serif; font-size: 22px; font-weight: 600; fill: #1a1a18; letter-spacing: 0.02em; }
.s { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; fill: #1a1a18; opacity: 0.72; }
</style>
<text x="0" y="24" class="t">Levkin</text>
<text x="0" y="44" class="s">&gt; custom software, automation &amp; AI workflows</text>
</svg>
public/brand/logo-d-brackets.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" role="img" aria-label="Levkin"><style>.t{font-family:Literata,Georgia,serif;font-size:22px;font-weight:600;fill:#1a1a18}.s{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:#1a1a18;opacity:.72}</style><polyline points="8,12 2,12 2,40 8,40" fill="none" stroke="#1a1a18" stroke-width="1.6" stroke-linecap="round"/><text x="16" y="24" class="t">Levkin</text><text x="16" y="44" class="s">Custom software, automation &amp; AI workflows</text><polyline points="124,12 130,12 130,40 124,40" fill="none" stroke="#1a1a18" stroke-width="1.6" stroke-linecap="round"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 634 B

public/brand/logo-e-letterhead.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" role="img" aria-label="Levkin"><style>.t{font-family:Literata,Georgia,serif;font-size:22px;font-weight:600;fill:#1a1a18}.s{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:#1a1a18;opacity:.72}</style><text x="0" y="20" class="t">Levkin</text><line x1="0" y1="28" x2="200" y2="28" stroke="#1a1a18" stroke-width="1" opacity=".35"/><text x="0" y="44" class="s">Custom software, automation &amp; AI workflows</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 489 B

public/brand/logo-f-lk.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" role="img" aria-label="Levkin"><style>.t{font-family:Literata,Georgia,serif;font-size:22px;font-weight:600;fill:#1a1a18}.s{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:#1a1a18;opacity:.72}</style><rect x="2" y="10" width="28" height="28" rx="3" fill="none" stroke="#1a1a18" stroke-width="1.6"/><text x="16" y="29" text-anchor="middle" fill="#1a1a18" font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="500">LK</text><text x="40" y="24" class="t">Levkin</text><text x="40" y="44" class="s">Custom software, automation &amp; AI workflows</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 640 B

public/brand/logo-g-folder.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" role="img" aria-label="Levkin"><style>.t{font-family:Literata,Georgia,serif;font-size:22px;font-weight:600;fill:#1a1a18}.s{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:#1a1a18;opacity:.72}</style><path d="M2 20 L2 36 L28 36 L28 20 L20 20 L16 14 L6 14 L2 20 Z" fill="none" stroke="#1a1a18" stroke-width="1.6" stroke-linejoin="round"/><text x="38" y="24" class="t">Levkin</text><text x="38" y="44" class="s">Custom software, automation &amp; AI workflows</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 541 B

public/brand/logo-h-ticket.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" role="img" aria-label="Levkin"><style>.t{font-family:Literata,Georgia,serif;font-size:22px;font-weight:600;fill:#1a1a18}.s{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:#1a1a18;opacity:.72}</style><rect x="2" y="14" width="20" height="20" rx="2" fill="none" stroke="#1a1a18" stroke-width="1.6"/><polyline points="7,24 11,28 17,20" fill="none" stroke="#1a1a18" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><text x="32" y="24" class="t">Levkin</text><text x="32" y="44" class="s">Custom software, automation &amp; AI workflows</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 634 B

public/brand/logo-i-docid.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" role="img" aria-label="Levkin"><style>.e{font-family:'IBM Plex Mono',monospace;font-size:7.5px;font-weight:500;letter-spacing:.14em;fill:#1a1a18;opacity:.55}.t{font-family:Literata,Georgia,serif;font-size:22px;font-weight:600;fill:#1a1a18}.s{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:#1a1a18;opacity:.72}</style><text x="0" y="12" class="e">LK-SPEC · 1.0</text><text x="0" y="32" class="t">Levkin</text><text x="0" y="50" class="s">Custom software, automation &amp; AI workflows</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 571 B

public/brand/logo-j-path.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 56" role="img" aria-label="Levkin"><style>.t{font-family:Literata,Georgia,serif;font-size:22px;font-weight:600;fill:#1a1a18}.s{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:#1a1a18;opacity:.72}</style><text x="0" y="24" class="t">Levkin</text><text x="0" y="44" class="s">/ software · automation · ai-workflows</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

public/brand/logo-k-braces.svg
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin">
<style>
.b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 26px; font-weight: 400; fill: #1a1a18; opacity: 0.85; }
.t { font-family: Literata, Georgia, serif; font-size: 22px; font-weight: 600; fill: #1a1a18; letter-spacing: 0.02em; }
.s { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; fill: #1a1a18; opacity: 0.72; }
</style>
<text x="0" y="26" class="b">{</text>
<text x="18" y="24" class="t">Levkin</text>
<text x="102" y="26" class="b">}</text>
<text x="18" y="44" class="s">Custom software, automation &amp; AI workflows</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 704 B

public/brand/logo-k2-drawn-braces.svg
+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 56" role="img" aria-label="Levkin">
<style>
.t { font-family: Literata, Georgia, serif; font-size: 22px; font-weight: 600; fill: #1a1a18; letter-spacing: 0.02em; }
.s { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; fill: #1a1a18; opacity: 0.72; }
</style>
<path d="M12 6 C5 6 3 11 3 15 C3 18 1.5 19.5 1.5 19.5 C1.5 19.5 3 21 3 24 C3 28 5 33 12 33" fill="none" stroke="#1a1a18" stroke-width="1.6" stroke-linecap="round"/>
<path d="M108 6 C115 6 117 11 117 15 C117 18 118.5 19.5 118.5 19.5 C118.5 19.5 117 21 117 24 C117 28 115 33 108 33" fill="none" stroke="#1a1a18" stroke-width="1.6" stroke-linecap="round"/>
<text x="20" y="24" class="t">Levkin</text>
<text x="20" y="46" class="s">Custom software, automation &amp; AI workflows</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 849 B

public/brand/logo-lockup.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 784 KiB

public/brand/logo-mark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 789 KiB

public/favicon.svg
+3 -3
View File
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<rect width="32" height="32" rx="6" fill="#0a0a0b"/>
<path d="M8 22V10h4.2c3.1 0 5 1.6 5 4.2 0 2.4-1.7 3.8-4.5 3.8H12v4H8zm4-7.2h1.8c1.4 0 2.2-.7 2.2-1.8S15.2 11 13.8 11H12v3.8zM20 22V10h6.5v3.2H24v2.2h2.2v3.2H24v3.6H20z" fill="#c4a574"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Levkin">
<rect width="32" height="32" rx="7" fill="#0a0a0b"/>
<path fill="#c9a86c" d="M10.8 7.7h3.4v1.05h-1.35V21.4h7.55v1.9H10.8V7.7z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 323 B

After

Width:  |  Height:  |  Size: 232 B

public/logo-lockup.svg
+28
View File
@@ -0,0 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 120" fill="none" role="img" aria-labelledby="levkinTitle levkinDesc">
<title id="levkinTitle">Levkin</title>
<desc id="levkinDesc">Custom software, automation &amp; AI workflows</desc>
<!-- Wordmark: serif display (Literata-like proportions) -->
<text
x="180"
y="58"
text-anchor="middle"
fill="#1a1a18"
font-family="Literata, Georgia, 'Times New Roman', serif"
font-size="48"
font-weight="600"
letter-spacing="0.02em"
>Levkin</text>
<!-- Tagline: mono / instrument -->
<text
x="180"
y="88"
text-anchor="middle"
fill="#4a4844"
font-family="'IBM Plex Mono', ui-monospace, monospace"
font-size="11"
font-weight="400"
letter-spacing="0.04em"
>Custom software, automation &amp; AI workflows</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 839 B

public/logo-wordmark.svg
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" fill="none" role="img" aria-label="Levkin">
<text
x="0"
y="58"
fill="#1a1a18"
font-family="Literata, Georgia, 'Times New Roman', serif"
font-size="52"
font-weight="600"
letter-spacing="0.02em"
>Levkin</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 308 B

scripts/prepare-www.mjs
+7
View File
@@ -34,9 +34,13 @@ execSync('npm run build', { cwd: root, stdio: 'inherit' });
await rm(www, { recursive: true, force: true });
await mkdir(join(www, 'assets'), { recursive: true });
await mkdir(join(www, 'folders'), { recursive: true });
await mkdir(join(www, 'logo'), { recursive: true });
await cp(join(dist, 'assets'), join(www, 'assets'), { recursive: true });
await cp(join(root, 'public', 'favicon.svg'), join(www, 'favicon.svg'));
await cp(join(root, 'public', 'logo-lockup.svg'), join(www, 'logo-lockup.svg'));
await cp(join(root, 'public', 'logo-wordmark.svg'), join(www, 'logo-wordmark.svg'));
await cp(join(root, 'public', 'brand'), join(www, 'brand'), { recursive: true });
await cp(join(root, 'public', 'robots.txt'), join(www, 'robots.txt'));
await cp(join(root, 'public', 'sitemap.xml'), join(www, 'sitemap.xml'));
await cp(join(root, 'public', 'og-image.png'), join(www, 'og-image.png'));
@@ -60,4 +64,7 @@ await writeFile(
'utf8',
);
const logoHtml = await readFile(join(dist, 'logo', 'index.html'), 'utf8');
await writeFile(join(www, 'logo', 'index.html'), injectUmami(logoHtml), 'utf8');
console.log(`www/ ready (Umami id: ${umamiId})`);
shared/logo.css
+78
View File
@@ -0,0 +1,78 @@
/* Shared Levkin logo styles — ink inherits from parent color */
.logo-levkin {
display: block;
width: 300px;
max-width: 100%;
height: auto;
color: var(--logo-fg, #1a1a18);
overflow: visible;
}
.logo-levkin .logo-title {
font-family: Literata, Georgia, 'Times New Roman', serif;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.02em;
fill: currentColor;
}
.logo-levkin .logo-tagline {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 9.5px;
font-weight: 400;
letter-spacing: 0.01em;
fill: currentColor;
opacity: 0.72;
}
.logo-levkin .logo-brace {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 26px;
font-weight: 400;
letter-spacing: 0;
fill: currentColor;
opacity: 0.85;
}
.logo-levkin .logo-eyebrow {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 7.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
fill: currentColor;
opacity: 0.55;
}
.logo-levkin .logo-rule {
stroke: currentColor;
stroke-width: 1;
opacity: 0.35;
}
.logo-levkin .logo-mark {
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.logo-levkin .logo-mark circle {
fill: currentColor;
stroke: none;
}
/* Text inside a mark group must not inherit fill:none */
.logo-levkin .logo-mark text,
.logo-levkin .logo-mono {
fill: currentColor;
stroke: none;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
@media (max-width: 480px) {
.logo-levkin.logo-levkin--responsive .logo-tagline {
display: none;
}
}
spec/index.html
+1
View File
@@ -105,6 +105,7 @@
<article class="instrument">
<header class="letterhead">
<p class="doc-class">Company Specification</p>
<img class="brand-mark" src="/favicon.svg" width="40" height="40" alt="" />
<h1>Levkin</h1>
<p class="doc-tagline">Custom software, automation &amp; AI workflows</p>
<p class="doc-lead">Master overview of services and engagement terms. This document is not a binding agreement; a statement of work is issued for each engagement.</p>
spec/spec.css
+8
View File
@@ -359,6 +359,14 @@ a:hover { color: var(--link-hover); }
margin-bottom: 0.75rem;
}
.brand-mark {
display: block;
width: 2.5rem;
height: 2.5rem;
margin: 0 auto 0.85rem;
border-radius: 0.55rem;
}
.letterhead h1 {
font-size: 1.5rem;
font-weight: 600;
stack-folder/folder.css
+8
View File
@@ -485,6 +485,14 @@ a.site-preview:hover {
margin-bottom: 0.35rem;
}
.brand-mark {
display: block;
width: 2.25rem;
height: 2.25rem;
margin: 0 0 0.45rem;
border-radius: 0.45rem;
}
.body h1 {
font-family: var(--display);
font-size: 1.35rem;
stack-folder/index.html
+1
View File
@@ -41,6 +41,7 @@
<div class="body body--has-preview">
<div class="body-copy">
<p class="file-id">LK-SPEC-1.0 · Cover sheet</p>
<img class="brand-mark" src="/favicon.svg" width="36" height="36" alt="" />
<h1>Levkin</h1>
<p class="tagline">Custom software, automation &amp; AI workflows</p>
<p class="lead">Custom apps, automation, AI workflows, CaseWare, and QA — <span class="hi">scoped</span>, <span class="hi">production-ready</span>, and easy to <span class="hi">hand off</span>.</p>
vite.config.js
+1
View File
@@ -13,6 +13,7 @@ export default defineConfig({
main: resolve(__dirname, 'index.html'),
spec: resolve(__dirname, 'spec/index.html'),
stackFolder: resolve(__dirname, 'stack-folder/index.html'),
logo: resolve(__dirname, 'logo/index.html'),
},
},
},