Design system · Primitives · Brand engines
akaSTYLE
Everything this site is built from, rendered live on this page rather than captured as screenshots — so it can never drift from what actually ships. The same vocabulary runs across the studios, the kits, and the client work.
The rules
The design language, stated as constraints
Seven laws that hold across every repo. They are deliberately written as constraints rather than preferences — a constraint can be checked in review, and it travels to a new codebase without me having to be in the room.
- 01
Mono for structure, sans for prose.
Uppercase mono kickers at 11px/0.18em tracking label every section. Body copy is font-light sans with generous leading. The contrast between the two carries the hierarchy, so headings rarely need to be big.
- 02
One accent, used sparingly.
Everything is greyscale on a near-black (or near-white) ground except a single quiet green. If two things on screen are competing for the accent, neither gets it.
- 03
Borders over shadows.
Depth comes from a 1px border and a translucent card fill, never a drop shadow. Rounded to 0.75rem for cards, 0.5rem for controls.
- 04
Motion moves space, never brightness.
Animation translates, scales, and displaces. It does not flash, strobe, or pulse opacity. This started as an accessibility rule for the audio-reactive work and became the house style.
- 05
Loops pause when unwatched.
Every canvas engine gates its RAF loop on an IntersectionObserver plus visibilitychange, and renders one still frame under prefers-reduced-motion. Ambient animation should cost nothing when nobody is looking.
- 06
Layout never jumps.
Tabbed regions are floored to the tallest tab at each breakpoint. Images ship with intrinsic dimensions and blur placeholders. Switching views should never move the content under a reader.
- 07
Server by default.
Components stay server-rendered unless they need state, an event, or a canvas. The client boundary is drawn as deep in the tree as possible — a card is a server component even when its page is interactive.
Color
Tokens, in OKLCH
Every surface resolves from a CSS variable, so light and dark are one definition rather than two stylesheets. Toggle the theme and this section repaints itself.
background
--background
foreground
--foreground
card
--card
muted
--muted
border
--border
primary
--primary
Accent set — carried by the canvas engines
Type
The scale
Kicker · 11px / 0.18em / uppercase / medium
Product design · Technical anthropology
Display · clamp(1.7–2.4rem) / extralight / tight
I build tools and create art.
Section head · 20px / light
The human-in-the-loop architecture
Body · 15px / light / 1.6
Human control wasn't a confirmation dialog bolted on at the end — it was load-bearing architecture, designed in at three layers.
Caption · 11px / light / muted-70
The three-pane workspace — agent chat, the source paper, and an evidence panel.
Mono inline · 11px on muted fill
Citations resolved to [noteId:page] via runciter.dispatch(event).
Primitives
Controls & surfaces
The small set everything else composes from. All server-rendered; none of these need client JavaScript to look right.
Primitives →
Every control and surface with its class string printed beside it — buttons, forms, tables, code, media frames. The page exists to be copied from.
Foundations →
Spacing, radii, the type ramp, motion timings, breakpoints — and the globals.css block that carries the whole system to a new repo.
Buttons
Chips & tags
Tabs — quiet, accent on active only
Status row — mono numerals, uppercase label
3.5 yrs
Ubik Studio
15
HITL primitives
20+
Shipped projects
Callout card — the closing-argument surface
One rule
Inertials emit signals. The Runciter dispatches them. Humans decide.
Blockquote — for source material, not decoration
“Your job is not to replace human thinking — it is to amplify it.”— from Ubik Studio's own agent design
Brand engines
Canvas marks, one grammar
Three engines sharing a single idea: a disc of pixel cells that dissolves and reforms, with something knocked out of it. Colour follows --foreground, so they repaint on theme change; each pauses offscreen and renders one still frame under reduced motion.
Marks →
The disc family, variants, dissolve modes, grid range, and the full prop table.
Faces →
Twenty-six expressions, the named personas, and when a mark may have a face.
The akaBuild mark · disc-aka
A solid disc with the lowercase wordmark subtracted. The glyph samples in normalized space rather than baking to a fixed grid, so one definition serves the favicon, the chrome, and the hero. This is the site's icon.
<PixelHead icon="disc-aka" grid={32} still />
AkaMark
The akaBuild hero. Each reform reveals a different discipline — AI spark, code brackets, an eighth note, an isometric cube, a terminal prompt, a pen stroke. The dissolve is the discipline change.
<AkaMark size grid gap hold speed fluid />
PixelHead · ported from circleheads
The studio mark: a knocked-out head cycling facial expressions, plus an icon mode that renders any mask from the same grid — here the pixel aka wordmark used in this site's header.
<PixelHead faces still icon face shimmer fluid />
PixelRoundabout
Bartel-Pritchard Square as a live traffic simulation — queueing, merge-yielding, and stop-and-go waves emerging from two rules, painted in the same bit style. The sim is pure and DOM-free; the component owns the clock.
<PixelRoundabout size grid gap />
Patterns
Compositions that repeat
Where the primitives combine into something reusable. These are the shapes that get copied into a new repo first.
Section header — kicker, title, standfirst
Selected work · 01
Ubik Studio
Co-founder · Desktop AI research platform · 2023–2026
Media figure — bordered frame, caption below
Row item — the list unit behind every index
Live observability for Blender → glTF pipelines.
Agent evaluation where humans score, not LLMs.
Where it runs
The same language, six places
The point of writing the rules down is that a new project starts at hour six instead of hour zero. Each of these inherited the tokens, the type scale, and at least one engine.
- akabuild.dev
This site. AkaMark hero, pixel aka wordmark, the project-card vocabulary, every write-up page.
- circleheads.com
Origin of the PixelHead engine and the roundabout simulation. Same tokens, same kicker grammar, its own face set.
- akaoss.dev
The open-source studio site — same type scale and card system, with the sparkle mark as its brand variant.
- HITL Kit
Fifteen human-in-the-loop React primitives, installable via the shadcn CLI. The interaction half of this language.
- Trickle UI Kit
47 pure-CSS text-animation primitives — the motion rules above, packaged as zero-runtime components.
- boxpopuli.live · akacovart.com
Client and studio work that borrows the dark ground, bordered cards, and mono labelling wholesale.
Why keep this page
A design system that lives in screenshots rots within a month. This one renders from the same components the site ships, so it is structurally incapable of lying — and when a new repo needs the language, akaSTYLE travels as seven rules and a token file rather than a folder of stale mockups.