Logo and brand

The mikroscope mark is nine sample bars and the line of their own mean, drawn in two solid tones per theme. Below: what it says, how it is generated, and the contrast of every tone against the background it is drawn on, with the cost of that choice beside it.

Concept

The mark is geometry, not a drawing: nine sample bars whose envelope is a burst, crossed by the flat line of their own mean. That is the whole claim of the project in one shape: a one-second average reports the line, and sub-second sampling is what resolves the spike standing over it.

The burst is asymmetric the way a real one is: three quiet samples, a fast rise, the peak, a slower fall, three quiet again. The peak sits in the middle of an odd number of bars, so the mark balances on its own centre.

Mean line

The generator draws the line at the arithmetic mean of the heights it was given, not at a number chosen to look right, and a bar takes the loud tone exactly when it stands above that mean. So the sentence the mark makes is one the code enforces: three of the nine samples are above their own average, and they are the three the eye goes to. TestTheLineSitsAtTheMeanOfTheBars fails the build if the drawing and the arithmetic drift apart.

Palette

Measured against the background each is drawn on, as WCAG 2.2 defines contrast:

Theme	Background	Above the mean	At or below it, and the line	Apart
Dark	#0e1316	#fbbf24 11.20:1	#c2740a 5.16:1	2.17:1
Light	#ffffff	#633009 10.73:1	#b45309 5.02:1	2.14:1

One palette per theme is not a refinement; it is the only way the mark is legible in both. An amber light enough to read on the near-black page reads 1.67:1 on white (#fbbf24), and one dark enough for white disappears into the dark page. On white, the sample standing above the mean is the darker tone, so the mark reads the same way round in both themes.

TestEveryToneClearsAAInItsOwnTheme recomputes the ratios from the hex on every run and fails the build if any tone reads under 4.5:1 on its own background, or if a theme’s two tones are less than 2.0:1 apart. A tone edited without checking it fails the build rather than shipping. TestNothingInTheMarkDependsOnOpacity guards the other half of the decision.

No opacity

A quiet bar drawn as the loud colour at a low opacity reads well and fails. Composited over the page, 0.28 of #f59e0b gives 1.73:1 on the dark background and 0.42 of #a16207 gives 1.80:1 on white, where AA asks 4.5:1. Reaching 4.5 by raising the alpha needs 0.68 in the dark theme and 0.96 in the light one, at which point a quiet bar is a loud bar and the one distinction the mark exists to make is gone. So the split is two solid tones.

That costs punch. Solid against solid gives about 2.1:1 between the two groups; drawing the quiet bar at 0.28 (0.42 on white) separates them by about 5:1 in the dark theme and 2.7:1 in the light one, at alphas that read 1.73:1 and 1.80:1 against their own page and so fail AA. What it buys is that nothing in the mark composites against a background this repository does not control (a README on GitHub, an og:image in a chat client, a favicon over browser chrome), so every number in the table is the number the reader actually gets.

Contrast rule

WCAG 1.4.11 asks 3:1 of a graphical object, and 1.4.3 exempts logotypes from any minimum at all. 4.5:1 on every bar is a house rule stricter than the standard, chosen by the project’s maintainer, José Manuel Requena Plens, over the smaller change of lifting the alphas to 3:1.

Amber

Amber also means threshold on this project’s dashboards, where a panel turns orange before it turns red. The two do not collide literally (the panels use Grafana’s own named colours and never these hexes), but a reader who has learnt “amber means look at this” on a dashboard is being asked to read the same hue as the project’s own mark. That is the cost of the choice, made knowingly.

Bar heights

The bar heights are not a real capture. A burst mikroscope measured peaked at 736 packets in one 20 ms sample against a median of 28, and 26× is a range no single square renders: the quiet samples collapse to dots, or a log scale flattens the very spike the mark exists to show. The heights in the mark are proportions of the drawn height.

Favicon

Nine bars at sixteen pixels is mush, so the favicon drops to five and keeps the spike standing over the line, which is the part that carries the meaning.

The site’s favicon.svg is the only icon with no ground of its own. It carries both palettes and switches on the reader’s own prefers-color-scheme, the signal browser chrome itself follows, so it draws #fbbf24/#c2740a over a dark chrome and #633009/#b45309 over a light one. Every raster brings its own #0e1316 ground instead, because an .ico has no way to ask.

Generated files

The mark lives as a generator, cmd/gen_brand/, rather than as a folder of hand-drawn files, because changing the palette or the bar count is then one edit instead of nine in each of a dozen files. It is a build-time tool and is not one of the two released binaries. From the root of the repository:

go run ./cmd/gen_brand mark -out brand          # the mark and the favicon, per theme
go run ./cmd/gen_brand compose -out brand       # the banner, the social image and the og:image
go run ./cmd/gen_brand icons -out site/public   # the favicon, the touch icons and the web app manifest

mark is pure text. compose reads the three bg-*.png backgrounds from the directory it writes to and shells out to rsvg-convert for the PNGs that ship. icons shells out to rsvg-convert and to ImageMagick for the .ico, and is the only one that writes outside brand/. Every coordinate is written with two decimals, rounded half to even, so the files are meant to reproduce byte for byte on any machine; TestMarkIsByteForByteReproducible checks that two runs on the same host give the same four mark and favicon files.

File	Where	Subcommand	What it is
mark-dark.svg, mark-light.svg	brand/	mark	The mark, one per theme
favicon-dark.svg, favicon-light.svg	brand/	mark	The five-bar variant, one per theme
mark-inline.svg	brand/	mark	The mark for a page that inlines it: the loud tone is currentColor, the quiet one --ms-mark-quiet
favicon-inline.svg	brand/	mark	The favicon for a page that inlines it, the inline twin of favicon.svg
banner.svg and .png	brand/	compose	1280×320, for the README
social.svg and .png	brand/	compose	1280×640, the repository social preview
og.svg and .png	brand/	compose	1200×630, the documentation og:image
background.png	brand/	none	The generated field the three compositions crop from
bg-banner.png, bg-social.png, bg-og.png	brand/	none	Those crops, which compose reads
favicon.svg	site/public/	icons	Both palettes, switching on prefers-color-scheme
site.webmanifest	site/public/	icons	The web app manifest: names the 192, 512 and maskable rasters, with relative URLs
favicon.ico	site/public/	icons	Three drawings, at 16, 32 and 48 px, rather than one scaled three ways
apple-touch-icon.png, icon-192.png, icon-512.png	site/public/	icons	180, 192 and 512 px, each drawn at its own size
icon-maskable-512.png	site/public/	icons	Inset further, to sit inside the circle 80 % of the icon across that a launcher may crop to

Every page’s head links favicon.svg, favicon.ico, apple-touch-icon.png and site.webmanifest. The .ico link says sizes="32x32", which keeps Chromium on the SVG alone: headless Chromium 153 requested only favicon.svg. The manifest names icon-192.png, icon-512.png and icon-maskable-512.png by URLs relative to itself, and leaves out favicon.svg, the one icon with no ground of its own, since whatever lands on a home screen brings its own. It carries no id, which is resolved against the origin of start_url rather than against the manifest: Chromium 153 resolved ./ to the root of the origin, here https://jmrplens.github.io/, the address the host’s own hub already claims with a manifest of its own, and an id that stays inside this site has to spell out /mikroscope/, the base path nothing else in the manifest names. Left out, it defaults to start_url, which Chromium resolves to /mikroscope/, the id it recommends.

One theme-color tag gives the colour of the header on screen, #151c20 dark and #fafbfb light. It follows the site’s theme, not the system’s scheme: it is served with the dark header, the theme a page without JavaScript keeps whatever the system says, and a script in the head moves it to the light one whenever the page turns light, from the system’s scheme, the theme select, a stored choice or the phone’s toggle. Chrome reads the tag; Safari 26, by public reports and not tried here, ignores it and takes the colour of the fixed header. In headless Chromium and WebKit, in both schemes, after a pick, after a stored pick and a reload, after the phone’s toggle and with JavaScript off, the tag held the header’s colour every time; the pair of tags split by prefers-color-scheme it replaced held the other theme’s colour after each pick, and on a light system without JavaScript. Whether a phone’s Chrome repaints its toolbar the moment the tag changes was not tried on a device.

TestTheCommittedWebFilesMatchTheGenerator compares favicon.svg and site.webmanifest in site/public/ with what the generator writes now, so an edit that is not regenerated fails make test; the PNGs depend on the installed converters and are not compared. Not tested: a real phone, an install to a home screen, and how a launcher actually crops the maskable icon.

The mark in this site’s header is favicon-inline.svg, the five-bar drawing, painted by the site’s own palette; mark-inline.svg fills the hero slot. Either way the drawing in the chrome is the drawing in brand/.

Background

Not written by the generator: background.png was generated once with inference.sh (openai/gpt-image-2, 1536×1024, quality: high, $0.16) and is kept as a raster. Everything drawn over it is vector, so the type stays crisp at whatever size the raster is produced. The prompt asked for a near-black field of faint vertical sample bars growing denser and warmer toward the right, and for the left third to stay empty, which is where the mark and the type sit, so the composition never fights its own background.

The three crops keep the whole left-to-right gradient rather than taking a window out of the middle of it:

magick background.png -resize 1280x -gravity center -crop 1280x320+0+0 +repage bg-banner.png
magick background.png -resize 1280x -gravity center -crop 1280x640+0+0 +repage bg-social.png
magick background.png -resize 1200x -gravity center -crop 1200x630+0+0 +repage bg-og.png

The compositions are light on dark throughout, so they take the dark theme’s two tones and need no theme pair. Measured over the field’s own darkest ground (#020608, sampled from the left edge), the heading #f6f3ee reads 18.38:1, the tagline #cfc6b8 12.04:1, and the mark’s two tones 12.19:1 and 5.62:1: higher than on the page, the field being darker than it. The tagline is “Sub-second kernel telemetry from inside the router”.

Social preview

Manual: Settings, then Social preview, then upload social.png. GitHub offers no API for it.

See also

• Dashboards: where amber means a threshold.
• The landing page: the claim the mark draws, in words.
• Lineage and licence: where the rest of the code came from.