Skip to content

feat(logo): single-tone export, Bélo-weight unified stroke, tuned seed#18

Merged
debuggingfuture merged 8 commits into
mainfrom
fix/logo-export-single-tone
Jul 23, 2026
Merged

feat(logo): single-tone export, Bélo-weight unified stroke, tuned seed#18
debuggingfuture merged 8 commits into
mainfrom
fix/logo-export-single-tone

Conversation

@debuggingfuture

@debuggingfuture debuggingfuture commented Jul 19, 2026

Copy link
Copy Markdown
Member

Three changes to the exported logo/favicon mark: overlapping lines no longer darken, every export renders at one consistent stroke weight — set to the Airbnb Bélo's line-to-height ratio — and the seed is tuned to 0.363 + 0.965i.

Problem & Insight

scripts/export-logo.mjs had two independent inconsistencies:

  1. Overlap darkening. The unit box and the F polyline were drawn as two separate translucent strokes (box α 0.4 under polyline α 0.55). Canvas composites each stroke() independently, so where the polyline crossed the box the layers stacked (~0.73 alpha) and read as a denser square.
  2. Stroke weight split. The 766 logo used a fixed 5.2px stroke (0.68% of the image) while favicons scaled at 3.5% — so the mark looked much finer as the full logo than as a tab/home-screen icon.

For the target weight we measured the Airbnb Bélo from the official SVG (viewBox 320.1×99.9): its uniform line is 7.023 units against the symbol's 99.9-unit height — ≈7.03% of the mark's height. Our box spans the image edge to edge, so the image size is the mark height and that ratio carries over directly.

Take

  • Single mint tone, single path. Box + F are now one path stroked once in one alpha. A lone stroke() unions its own coverage, so overlaps stay that flat color rather than compositing into a darker patch — holds for both the dark-bg and transparent variants.
  • One stroke-to-image ratio everywhere, at Bélo weight: STROKE_RATIO = 7.023/99.9 ≈ 0.0703 — ≈54px on the 766 logo, 12.7px on the 180px apple-touch, 4.5px on the 64px favicon. The 2px floor remains as a safety net but is no longer hit at any exported size.
  • One ink alpha (0.85) for every export. The full logo was previously α 0.55 — much dimmer than the favicons, so on the dark background it read as faint/near-transparent. Everything now uses the favicon/apple-touch brightness (mint 176,222,240 at 0.85 over #0a0a0a).
  • Seed tuned to 0.363 + 0.965i. A nudge off the exact 3:41 Numberphile value (0.362 + 0.953i) for a cleaner F.

The rendering still diverges from the live /f page on purpose (the page keeps its two-tone layering and thinner proportional strokes); documented in LOGO.md. The seed is now synced — the /f page uses 0.363 + 0.965i too, with its copy/readout updated and an honest pointer to the original 3:41 value it's nudged off.

Verification

  • Bélo reference measured by run-length histogram over the rendered official SVG (10k+ scanline runs): mode 7.02 viewBox units on the 92.8×99.9 symbol → 7.03% of height.
  • Rendered box-edge stroke measured per asset at half-ink threshold: 766 → 54px (7.05%), 180 → 13px (7.22%), 64 → 4px (6.25%, antialias rounding of the drawn 4.5px). All within a pixel of the drawn size × 0.0703.
  • Transparent PNG pixel-probe: max alpha 217 (= 0.85·255) across the whole image, zero pixels above it → no overlap accumulates.

Key actions

  • Single-tone single-path stroke (no overlap darkening)
  • Unified stroke-to-image ratio across logo + favicons, matched to the Airbnb Bélo
  • Seed tuned to 0.363 + 0.965i
  • Re-exported all four assets (logo_f_box.png, logo_f_box_transparent.png, favicon.png, apple-touch-icon.png)
  • LOGO.md updated
  • Synced /f page seed + copy to match the logo

The exporter drew the unit box and the F polyline as two separate
translucent strokes (box α 0.4, polyline α 0.55). Where the polyline
crosses the box the two composited over each other, so the crossing
accumulated alpha and read as a denser square.

Draw the box and the F as a single stroked path in one mint alpha
(0.55). A lone stroke() unions its own coverage, so overlaps stay that
flat color instead of stacking — verified on the transparent PNG: max
alpha is 140 (= 0.55·255) everywhere, no pixel exceeds it. Favicons get
the same single-tone treatment at α 0.85. Re-exported all four assets.
@debuggingfuture
debuggingfuture marked this pull request as ready for review July 19, 2026 18:23
@debuggingfuture debuggingfuture changed the title fix(logo): single-tone export so overlapping lines don't darken fix(logo): single-tone export + unified stroke weight Jul 20, 2026
The logo used a fixed 5.2px stroke (0.68% of the 766px image) while the
favicons scaled at 3.5% — so the mark read much finer as the full logo
than as a tab/home-screen icon.

Replace both with a single stroke-to-image ratio, anchored on the 180px
apple-touch icon at 4px (STROKE_RATIO = 4/180), floored at 2px so the
64px favicon doesn't drop sub-pixel. Everything scales from that anchor:
≈17px on the 766 logo, all at 2.22% relative weight (the 64px favicon
floors at 2px / 3.1%, the one unavoidable exception). Re-exported all
four assets.
@debuggingfuture
debuggingfuture force-pushed the fix/logo-export-single-tone branch from 05f094b to a493e86 Compare July 20, 2026 05:58
Nudge the mark's seed off the exact 3:41 Numberphile value
(0.362 + 0.953i) to 0.375 + 0.975i for a cleaner F. Re-exported all
four assets. The /f page keeps the original seed for now — its copy
(the "3:41 moment", the ƒ-lock ring/label) is tied to that value.
@debuggingfuture debuggingfuture changed the title fix(logo): single-tone export + unified stroke weight feat(logo): single-tone export, unified stroke weight, tuned seed Jul 20, 2026
The full logo was drawn at α 0.55, much dimmer than the favicons (0.85)
— on the dark background it read as faint, almost transparent. Raise the
anchor stroke to 5px on the 180px apple-touch icon (STROKE_RATIO = 5/180,
≈21px on the 766 logo, others proportional) and apply one ink alpha (0.85)
to every export, so the full logo matches the apple-touch brightness
instead of looking washed out. Re-exported the affected assets (the 64px
favicon is unchanged — already 0.85 and floored to 2px).
Match the tuned logo seed on the live page: F_RE/F_IM, the locked-readout
label, and the copy. The narrative keeps an honest pointer to the original
3:41 Numberphile value (≈0.362 + 0.953i) that the seed is nudged off.
Seed 0.375 + 0.975i → 0.363 + 0.968i across the exporter, the /f page
(constants, readout, copy), and LOGO.md. Drop the stroke anchor from 5px
to 4.2px on the 180px apple-touch icon (STROKE_RATIO = 4.2/180, ≈18px on
the 766 logo, others proportional). Re-exported all assets.
Nudge the imaginary part 0.968 → 0.965 across the exporter, the /f page
(constants, readout, copy), and LOGO.md. Raise the stroke anchor to 4.5px
on the 180px apple-touch icon (STROKE_RATIO = 4.5/180, ≈19px on the 766
logo, others proportional). Re-exported all assets.
Measured the Bélo in the official SVG (viewBox 320.1×99.9): its uniform
line is 7.023 units against the 99.9-unit symbol height, ≈7.03% of the
mark. Our box spans the image edge to edge, so image size is the mark
height and the ratio carries over directly: STROKE_RATIO 4.5/180 (2.5%)
→ 7.023/99.9 (≈0.0703) — ≈54px on the 766 logo, 12.7px at 180, 4.5px
at 64. One ratio across every export, as before; the 2px floor stays as
a safety net but is never hit.
@debuggingfuture debuggingfuture changed the title feat(logo): single-tone export, unified stroke weight, tuned seed feat(logo): single-tone export, Bélo-weight unified stroke, tuned seed Jul 23, 2026
@debuggingfuture
debuggingfuture merged commit 5b874c3 into main Jul 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant