Brand assets
Three marks belong to one system, and all of them are generated from a single
geometry table in the brand/ folder. This page renders every file in that
folder so you can see which drawing a file name refers to, and on which ground
it is meant to sit.
Half of these marks are drawn in ink for paper and half in bone or brass for a
dark ground, so a contact sheet on one background hides half of them. The light
panels below are painted #EAE7E0 — the value the bone theme calls raised,
and the same value this site calls --k-ink. One hex, doing both jobs.
The domain map decides the theme
Section titled “The domain map decides the theme”This is the part that gets applied wrong, so it is first. Which brand a surface wears, and on which stock, is not a taste call:
| domain | brand | stock | theme |
|---|---|---|---|
kleosresearch.xyz | Kleos — the lab, the front door | bone #F4F2EC | kleos-light |
memory.kleosresearch.xyz | Kaleidoscope — the product | ink #0B0B0C | kaleidoscope-dark |
Crossing the subdomain crosses the stock. The subdomain is the tagline:
memory. says what the product does before the page loads. This site is the
second row, which is why every panel on it is ink and why brass appears here
and nowhere else.
Where these files come from
Section titled “Where these files come from”The brand/ folder holds one generator, build.py, and four geometry tables.
Running it writes all 40 SVGs and, with --png, all 26 rasters:
python3 brand/build.py --pngEvery generated file opens with the line
Kleos brand system — generated by brand/build.py. Do not hand-edit. Take that
literally. To change a mark, change the table and run the generator again;
editing an SVG by hand produces a file that the next run silently reverts, and
in the meantime the copy you edited disagrees with every other size of the same
drawing.
Four files in brand/ are hand-maintained rather than generated: the README,
the generator, and the two token exports. The tokens are republished here as
kleos-brand.css.
Copies of these marks exist in other repositories. brand/ is the only source;
a copy that disagrees with it is wrong, and the fix is always to re-copy rather
than to redraw.
Colour
Section titled “Colour”Six values per theme, and the only difference between the two themes is that brass takes a darker cut on bone so it clears contrast. Same hue, not a second colour.
kaleidoscope-dark
Section titled “kaleidoscope-dark”The product, on ink. These six are the palette this site is painted in.
kleos-light
Section titled “kleos-light”The lab, on paper. Nothing on this site is painted in these; they are here because the marks below are drawn for them.
Constant across both stocks. Do not re-theme them.
The last one is a text token. Sky at #5FB2EC fails contrast as type on paper,
so links there take #2F79B5 instead. It is never used to fill an icon.
Kleos — the ledger line
Section titled “Kleos — the ledger line”Two full-width rules with the record between them. This is the house mark: the lab, the organisation, and the endorsement line “a kleos project” at the foot of this page.
The bars thicken and lengthen as the mark shrinks, so the three elements stay
separable. Pick the cut by the tile you are drawing into, never by scaling one
file. Every cut ships three ways: currentColor for inline HTML, and two
hardcoded variants for contexts that cannot inherit a colour.
| tile | bars | inherits | on bone | on ink |
|---|---|---|---|---|
| 48px and up | 48×7 | kleos-mark.svg | kleos-mark-ink.svg | kleos-mark-bone.svg |
| 40 and 64 | 52×9 | kleos-mark-40.svg | kleos-mark-40-ink.svg | kleos-mark-40-bone.svg |
| 32 | 54×10 | kleos-mark-32.svg | kleos-mark-32-ink.svg | kleos-mark-32-bone.svg |
| 16 | 56×12 | kleos-mark-16.svg | kleos-mark-16-ink.svg | kleos-mark-16-bone.svg |
Kleos never drops its centre square, at any size. Only the Kaleidoscope app-icon ladder does that.
On bone
Section titled “On bone”All five rendered at 56px, so the cuts can be compared. In use they would be 16, 32, 40 and 48-and-up.
The first cell is the currentColor file. Loaded through an img element it
cannot inherit anything and falls back to black, which is why the hardcoded
variants exist at all. Inline the file in your markup and it takes the colour
of its parent.
On ink
Section titled “On ink”
Avatars and favicons
Section titled “Avatars and favicons”Kleos is ink on bone, and that is the identity rather than an exception: a tiled mark reads against light browser chrome and dark browser chrome alike, which a bare transparent mark does not. Each tile below is rendered at its own size.
The hairline ring is inset, not outset. An icon canvas has no outside, and at 16px that one pixel is the entire margin — the ring closes on the bars and the mark turns to mush. So 16 ships without a ring; 32 and up keep it.
The 40 is the only circular tile in the system.
Kaleidoscope — the same atom, rotated
Section titled “Kaleidoscope — the same atom, rotated”One bar swept four times about the centre with a falling opacity cascade, plus the centre square the Kleos mark also has. That shared square is the entire relationship between parent and product.
Two rules govern this mark and neither is negotiable. The cascade is the mark: flatten the four bars to one opacity and it reads as a static frame rather than a rotation, which is a different logo. And the centre is a square, never a circle — a circle severs the link to Kleos.
| tile | bars | centre | inherits | on ink | on bone |
|---|---|---|---|---|---|
| display | 28×7 | yes | kaleidoscope-mark.svg | kaleidoscope-mark-brass.svg | kaleidoscope-mark-brass-on-bone.svg |
| 64 | 28×8 | yes | kaleidoscope-mark-64.svg | kaleidoscope-mark-64-brass.svg | kaleidoscope-mark-64-brass-on-bone.svg |
| 32 | 30×10 | dropped | kaleidoscope-mark-32.svg | kaleidoscope-mark-32-brass.svg | kaleidoscope-mark-32-brass-on-bone.svg |
| 16 | 32×12 | dropped | kaleidoscope-mark-16.svg | kaleidoscope-mark-16-brass.svg | kaleidoscope-mark-16-brass-on-bone.svg |
Read that ladder as what it is: the macOS app-icon ladder, where the art sits inside a squircle at those pixel sizes. Below 32 the centre square fills in and muddies, so it comes out — but only there. For an inline mark in running interface work, a header, a footer, a lockup, use the display cut with its centre square even at 20px. The mark in this site’s header is that cut at 18px.
On ink
Section titled “On ink”
On bone
Section titled “On bone”Brass darkens to #8A6A22 on paper. It is the same hue pulled down until it
clears contrast, not a second brand colour, and it appears on no surface this
site paints.
App icons and favicon
Section titled “App icons and favicon”Brass on its own dark tile, which is the inverse of the Kleos treatment and gets to the same place: the icon reads against light or dark browser chrome because it brings its own ground. Shown here on bone so the edge of that tile is visible. The squircle sits at 824/1024 of the canvas, with the art inset a further step inside it.
The squircle is the only rounded thing in the system. Marks are always sharp-cornered.
0xCopilot — the turbine
Section titled “0xCopilot — the turbine”The one fixed point in the system. A blade rotated six times, filled with a sky
gradient from #9BD4FF to #4593D8, over a dark hub and a sky dot, on the
#17161C tile at every size. Never recoloured for a surface, never inverted
onto paper, never given a light-mode variant. The stock around it varies; the
icon does not.
Its small-size simplification is the one Kaleidoscope makes with its centre square: at 16 the blade count drops from six to three, because six will not survive.
The first three files carry no tile of their own. They are transparent, and the
consumer has to place them on #17161C, which is what the panels below do.
Each of the four uses a different gradient identifier, so several can be inlined on one page without colliding.
Rasters
Section titled “Rasters”Twenty-six PNGs, written by the same run with --png. Use them where an SVG
cannot go: an operating system icon slot, an email, a store listing.
| Family | Sizes | Rasterised from |
|---|---|---|
| kaleidoscope-app-icon | 1024, 512, 256, 128, 64, 32, 16 | app-icon-1024.svg |
| kaleidoscope-favicon | 180, 32, 16 | kaleidoscope/favicon.svg |
| kaleidoscope-mark-brass | 1024, 256, 64 | kaleidoscope-mark-brass.svg, transparent |
| kleos-favicon | 180, 32, 16 | avatar-180, avatar-32, avatar-16 — each its own cut |
| kleos-avatar | 400 | avatar-40.svg, the circular cut |
| kleos-mark-ink | 1024, 256, 64 | kleos-mark-ink.svg, transparent |
| kleos-mark-bone | 1024, 256, 64 | kleos-mark-bone.svg, transparent |
| 0xcopilot-app-icon | 1024, 256, 64 | 0xcopilot/app-icon.svg |
Two things in that table are worth knowing before you use it.
The Kleos favicon rasters each come from the tile carrying their own optical cut, so the 16 is the 16 drawing and not the 180 scaled down. The Kaleidoscope app-icon rasters do the opposite on purpose: all seven come from the 1024 master, so the 32 and 16 PNGs carry the centre square that the 32 and 16 SVG cuts drop. If you need the optical cut at those sizes, take the SVG.
Not cut here
Section titled “Not cut here”No wordmark lockup exists as an asset, and one should not be added. An SVG carrying live text renders differently wherever the typeface is absent, which turns the lockup into a trap. Set wordmarks in HTML with the webfont instead:
| wordmark | face | weight | tracking | case |
|---|---|---|---|---|
| KLEOS | Newsreader | 400 | .055em, .05em below 14px, .06em at 14px | upper |
| Kaleidoscope | Newsreader | 400 | 0 | sentence |
Newsreader is never set bold. Inter carries interface text; JetBrains Mono carries metadata, uppercase and tracked. 0xCopilot runs its own stack — Space Grotesk for display, Instrument Sans for body, the same mono.
There is also no .ico in brand/. The generator writes SVG and PNG only, so
the favicon.ico this site serves was assembled by hand around canonical
pixels and nothing regenerates it when a mark changes. Treat it as the one file
here that can go quietly stale.
What the source folder does not cover
Section titled “What the source folder does not cover”Worth stating so nobody fills the gap by redrawing something.
The 0xCopilot set is the thinnest. It has no macOS-grid app icon of the kind Kaleidoscope has — one tile inset at 824/1024 rather than filling the canvas — and its raster ladder stops at 1024, 256 and 64, with no favicon or apple-touch rungs. Surfaces that need those sizes have been cutting their own, which is how a mark ends up with two versions of its corner radius. The fix belongs in the geometry table, not in the surface.
The README in brand/ still carries a warning that this domain ships the wrong
mark, no favicon and a half-wired theme. That was true when it was written and
is not true now: the header mark here is the canonical display cut, the four
icon links and the theme colour are wired, and the whole palette resolves. The
mark on every page of this site is checked geometrically at build time — bar
count, rotation angles, the opacity cascade, the centre square, and the absence
of any rounded corner — so it cannot drift back without the build refusing.