Menu
akaSTYLE

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

<PixelHead icon="disc-aka" size={160} grid={32} still />

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

The hero variant. Same disc grammar, but each reform reveals a different 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.

<AkaMark size={400} grid={24} hold={3.4} fluid />

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.

<PixelRoundabout size={360} />

Reference

Props

proptypewhat it does
sizenumberCanvas CSS px. Required.
gridnumberCells across. 14 for chrome, 22–32 for display.
icondisc-aka | head | spark | bubble | gamepad | aka | nyz | pogoWhat is subtracted, or which wordmark is drawn.
variantnegative | figureDisc-with-void, or drawn shape in a ring.
modeash | explode | scatter | glitchDissolve order.
gapnumberGutter as a fraction of a cell.
facesbooleanCycle expressions inside the void while assembled.
facewink | thinkingHold one expression — persona marks.
stillbooleanOne assembled frame, never animates. Logo use.
oncebooleanAssemble on first view, then hold.
shimmerbooleanWith once: a quiet ~3Hz twinkle on ~4% of cells.
fluidbooleanScale down with the container, capped at size.
colorstringOverride the pixel colour. Defaults to --foreground.
speednumberLoop 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.