Brand engine · Marks

Marks

One canvas engine, every mark in the family. A disc of pixel cells with something subtracted from it: change what is subtracted and you change brands, not code. Every mark on this page is live: colour follows --foreground, loops pause offscreen, and reduced motion renders a single frame.

The akaBuild mark

A disc with aka inside

The primary identity: a solid disc with the lowercase wordmark knocked out of it. The glyph is sampled in normalized space rather than baked to a fixed grid, so the same mark resolves at any resolution: chrome, favicon, or hero.

grid 32 · full detail

grid 28 · card

grid 24 · chrome

grid 20 · favicon

The family

Same grammar, different subtraction

Each studio and product gets its own knockout. That is the entire brand system: the engine, the ground, and one shape removed.

akaBuild

wordmark void

Circleheads

figure void

akaOSS

sparkle void

Games

work line

Variant

Negative and figure

The default is negative: a filled disc with the shape cut out. Figure inverts it: the shape is drawn, wrapped in a thin ring. Negative reads better small; figure reads better when the shape itself is the message.

variant = negative

variant = figure

Wordmarks

Mask-drawn lettering

For titles whose mark is text, the glyph is drawn directly instead of subtracted: a hand-authored bitmap on the same cell grid, so lettering sits in the identical pixel rhythm as the discs.

icon = aka

icon = nyz

icon = pogo

<PixelHead icon="aka" size={30} grid={14} gap={0.12} still /> // site header

Motion

Four dissolve modes

The mark decays and reforms on a loop. The mode sets the order cells leave: by row, by radius, at random, or in glitch blocks. All four move cells through space: none of them fade opacity, per the motion rule.

mode = ash

mode = explode

mode = scatter

mode = glitch

Resolution

Grid and gap

grid sets cells across; gap sets the gutter as a fraction of a cell. Lower grid reads bolder at small sizes; higher grid carries finer knockouts.

grid 14

grid 18

grid 24

grid 32

grid 40

gap 0.06

gap 0.16

gap 0.3

Derived engine

AkaMark, the discipline cycler

Same disc grammar, but each reform reveals a discipline rather than a face: AI spark, code brackets, an eighth note, an isometric cube, a terminal prompt, a pen stroke. The dissolve is the discipline change.

It was the hero until the hero moved to faces. Kept, because the discipline set is still the clearest demonstration of what a knockout can carry, and because nothing else in the library swaps its subject on the dissolve.

Derived engine

PixelRoundabout: a simulation as a mark

The furthest the grammar stretches: Bartel-Pritchard Square rendered in the same bit style, driven by a real traffic simulation. Queueing, merge-yielding, and stop-and-go waves emerge from two rules. The sim is pure and DOM-free: the component owns the clock, so the same model could drive an SVG or a test.

Outside the engine

Drawn marks

Not every product mark is a knockout. Three ship artwork of their own, and it is transcribed into an SVG here rather than exported as a bitmap, because the same mark has to survive an 18px specimen and a 300px plate on one page, and because a resampled squircle goes to mush at the small end.

All three are server components. A mark is a static drawing, so none of them should cost a client bundle.

BlockpadMark

Two masters, palette in CSS

BodyLogMark

Five weeks of the logging grid

CovartMark

Its own ground

The convention

A mark with a value per theme keeps its palette in CSS custom properties, not in the component. Blockpad ships a dark master and a light one, and reading the theme in order to pick would make a static drawing a client component for no other reason. So the drawing is one SVG whose fills are var(--bp-*), and the browser picks.

The same move covers the pixel engine's face accents, which arrived from the handoff as literal hex tuned for a dark ground: --pixel-face-* resolves them per theme, and the hex stays in the table as the record of what the design says.

Reference

Props

prop	type	what it does
size	number	Canvas CSS px. Required.
grid	number	Cells across. 14 for chrome, 22–32 for display.
icon	disc-aka \| head \| spark \| bubble \| gamepad \| aka \| nyz \| pogo	What is subtracted, or which wordmark is drawn.
variant	negative \| figure	Disc-with-void, or drawn shape in a ring.
mode	ash \| explode \| scatter \| glitch	Dissolve order.
gap	number	Gutter as a fraction of a cell.
faces	boolean	Cycle expressions inside the void while assembled.
face	wink \| thinking	Hold one expression: persona marks.
faceIndex	number	Hold expression n. Gallery use; face is the stable API.
startAssembled	boolean	With faces: open on the first expression rather than assembling into it.
still	boolean	One assembled frame, never animates. Logo use.
once	boolean	Assemble on first view, then hold.
shimmer	boolean	With once: a quiet ~3Hz twinkle on ~4% of cells.
fluid	boolean	Scale down with the container, capped at size.
color	string	Override the pixel colour. Defaults to --foreground.
speed	number	Loop rate multiplier.

Next: the face set: twenty-six expressions that live inside the void, and the rules for when a mark is allowed to have one.