engineering/lumbda
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

www: logo — distinct oversized flipped λ beside "lumbda.", green period

Browse source 
Previous design folded the flipped λ inside the wordmark as the "l".
That read as a cute substitution but didn't work as a brand mark.
Split them: the λ now stands on its own, rotated upside-down, 5rem
(larger than the 3.2rem wordmark), so it reads as a logo symbol
separate from the text.

Wordmark restores a proper lowercase "l" in "lumbda" — readable,
copy-pasteable, searchable. Trailing period picks up a new --green
design token (#2a8a3a light / #6fd68a dark) so the declarative stop
also reads as growth — matches the permacomputer ethos.

Layout: flex logo-row with baseline alignment and a small gap; the λ
hangs from the wordmark's cap-line for a balanced mark-and-wordmark
composition.
This commit is contained in:
russell@unturf.com 2026-04-19 17:12:51 -04:00
parent c91d7a3362
commit 26c6cca6da
2 changed files with 28 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

5
www/index.html
View file

@ -11,7 +11,10 @@
<body>
<header>
<h1 aria-label="lumbda."><span class="lambda-flip" aria-hidden="true">&lambda;</span>umbda<span class="period" aria-hidden="true">.</span></h1>
<div class="logo-row">
<span class="lambda-mark" aria-hidden="true">&lambda;</span>
<h1 aria-label="lumbda.">lumbda<span class="period" aria-hidden="true">.</span></h1>
</div>
<p class="tagline">feedback as a primitive</p>
</header>

33
www/style.css
View file

@ -14,6 +14,7 @@
--bg: #fafaf7;
--muted: #666;
--accent: #0b5394;
--green: #2a8a3a; /* growth — colors the declarative period */
--rule: #d4d4d0;
--code-bg: #f0ede4;
}
@ -24,6 +25,7 @@
--bg: #161613;
--muted: #9a9892;
--accent: #6fa8dc;
--green: #6fd68a;
--rule: #3a3a36;
--code-bg: #22221f;
}
@ -51,6 +53,25 @@ header {
margin-bottom: 2rem;
}
/* Logo row: flipped-λ brand mark sits beside the wordmark, not inside it. */
header .logo-row {
display: flex;
align-items: baseline;
gap: 0.6rem;
}
/* Brand mark — a distinct, oversized λ rotated upside-down. Readable
as a logo separate from the "lumbda" word; the inversion reads as a
play on "lambda" the primitive, turned on its head. */
header .lambda-mark {
display: inline-block;
transform: scaleY(-1);
font-family: 'chunkfive', Georgia, serif;
font-size: 5rem;
line-height: 0.9;
color: var(--fg);
}
header h1 {
font-family: 'chunkfive', Georgia, serif;
font-size: 3.2rem;
@ -59,16 +80,10 @@ header h1 {
line-height: 1;
}
/* Flipped lambda stands in for the "l" in the wordmark —
visual pun on "lambda", the primitive the language shells around. */
header h1 .lambda-flip {
display: inline-block;
transform: scaleY(-1);
}
/* Period after the wordmark reads as declarative: "lumbda." is final. */
/* Period after the wordmark reads as declarative: "lumbda." is final.
Green for growth — matches the permacomputer ethos. */
header h1 .period {
color: var(--accent);
color: var(--green);
}
.tagline {