docs: a blocky header with an RGB-split glitch - #232
Merged
Merged
Conversation
asset/logo-{dark,light}.svg are built from rects on a 5x7 grid rather
than from <text>. GitHub cannot be relied on for fonts, so a font-family
wordmark renders differently per viewer or not at all; rects render
identically everywhere and blocky is literal rather than a font choice.
The glitch is three offset copies: magenta pulled left across rows 1 and
2, cyan pushed right across rows 4 and 5, the repo colour underneath,
and a half-opacity overlay on the middle row. specs is blue #3B82F6.
Header follows the toneharness shape: centred logo, one-line tagline,
one badge row, a bold line, then the paragraph. Nothing below ## Usage
changes.
|
Thank you for contributing to this project! 😊🕹️ |
The first attempt was a 5x7 grid at 10px with RGB-split cyan and magenta layers. That is not what toneharness does, and it looked nothing like it. Fetched the actual SVG and read it. It is 4 rows of 16px blocks in one colour, 8px padding, 80 tall, with seven cells at opacity 0.25 as the glitch, and vertical runs merged into single rects so the blocks meet exactly. The letterforms are 3 columns wide, proportional, and the opacity cells are decoration rather than part of the letters, which is why the first extraction of its font came out wrong. This matches all of it: same cell size, same row count, same padding, same height, same glitch count and opacity, same merged runs. One primary colour per repository.
Read ~/git/tonestack's SVG by row and colour. The word is four rows of 16px blocks, and the top two rows are grey #8a8a8a while the bottom two are the brand colour. The light variant is the same split with #6f6f6f and a darker brand. That two-tone split is the overshadowing. My version painted all four rows one colour, which is why it looked nothing like it. Now it matches: grey top half, brand bottom half, seven cells at opacity 0.25, vertical runs merged but never across the colour boundary. osapi takes tonestack's own #ffa032 since amber is the hub's colour anyway. The rest keep their assigned brand colour on the bottom half.
Found the font in tonestack's source, pkg/cli/internal/paint/theme.go: top = "▀█▀ █▀█ █▄░█ █▀▀ █░█ ▄▀█ █▀█ █▄░█ █▀▀ █▀ █▀" bot = "░█░ █▄█ █░▀█ ██▄ █▀█ █▀█ █▀▄ █░▀█ ██▄ ▄█ ▄█" A half-block alphabet in two text rows. Each cell is a full block, an upper half, a lower half or blank, and each text row becomes two SVG rows, which is where the four rows of 16px blocks come from. The top text row is grey and the bottom is the brand colour. That split is the bleed: wherever a letter has a full-height stem, the brand colour sits directly under grey in the same column, and the eye reads it as one colour bleeding into the other. My previous attempt painted all four rows one colour, so there was nothing to bleed. Seven whole character cells drop to 0.25 opacity, which is how tonestack does its glitch: a whole cell at a time, not a half. Every letter tonestack has is byte-identical to its strings: a e h n o r s t. The eleven the osapi names need and it does not have are drawn in the same alphabet. Seam density, the share of columns where brand sits under grey: tonestack 44%, osapi 44%, gohai 47%. The longer names run 27 to 33% because s, t, c, e and l have no full-height stem in this font, which is a property of the alphabet rather than of the rendering.
tonestack dims seven cells across 43 columns, about one per six. A fixed seven on a 17 column word dims 41% of it, which buried the letters: rendering specs showed a word you could not read. One per six now, minimum two. specs gets three, osapi-orchestrator gets eleven.
This was referenced Oct 1, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
First of seven. Judge the glitch here before I do the other six.
Three files: the README header and two SVGs.
The logo
asset/logo-dark.svgandasset/logo-light.svg, built from<rect>elements on a 5×7 grid rather than from<text>.Why rects and not a font. GitHub cannot be relied on for fonts: a
font-familywordmark renders differently per viewer, or not at all. Rects render identically everywhere, and "blocky" becomes literal rather than a font choice.The glitch is three offset copies: magenta pulled half a block left across rows 1 and 2, cyan pushed right across rows 4 and 5, the repo colour underneath, and a half-opacity overlay on the middle row.
specsis blue#3B82F6.The header
Follows the toneharness shape: centred logo at 610, one-line tagline, one badge row, a bold positioning line, then the paragraph. Nothing below
## Usagechanges.The colours for the rest
osapi#FFB000osapi-orchestrator#A855F7nats-client#22D3EEnats-server#10B981gohai#FF6B35osapi-justfiles#94A3B8specs#3B82F6All 14 SVGs are generated. If the glitch is too subtle or too loud, I adjust the offset and opacity before the other six go out.
Replaces #231, which showed 123 files because I branched it off #230's branch instead of main.
🤖 Generated with Claude Code
https://claude.ai/code/session_01FuKUsHFG1EqZXamffh9M2c