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
9 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. Sizes come from one closed scale, eight pixel steps and a display size, and nothing off it.
- 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. The five-hue accent set belongs to the art layer, not the interface; the one place it reaches the chrome is where hue is the value rather than decoration on one, as in the deck’s position pill.
- 03
Light falls, nothing casts.
Depth is a 1px edge and a graded fill, never a drop shadow. A raised card grades light-to-dark downward and lifts its top edge; a recessed well inverts both. Fine grain over the fill keeps a gradient this shallow from banding. 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.
- 08
Per-frame state lives in the DOM.
Anything changing at sixty frames a second is written straight to a CSS variable or a data attribute and React is never told; React state is for what changes at human speed. The projects deck scrolls eighteen covers for zero re-renders, because its position is one custom property the CSS reads and every cover derives its own pose from it.
- 09
Every ink clears its ground.
Text is never mixed below the point where it reads at 4.5:1 on the page in both themes: the foreground stops at 60 percent, the muted ink and ink on art at 75. The quiet register is that floor, and hierarchy under it is size, case and tracking, which law 01 already gives. The check computes the floors from the tokens, and the sweep reads every page back through axe to prove them.
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
Ship the smallest true thing.
Ship the smallest true thing.
Ship the smallest true thing.
Ship the smallest true thing.
Ship the smallest true thing.
Ship the smallest true thing.
Ship the smallest true thing.
Ship the smallest true thing.
Ship the smallest true thing.
The scale is closed. These nine are the sizes the config names, and a size is one of them or it is not on the site: an arbitrary pixel size is a violation the check reports.
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
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. The hero it was built for now cycles faces.
<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. The faces hero, pixel aka wordmark, the project-card vocabulary, every write-up page.
- akaoss.dev
The open-source studio site: same type scale and card system, with the sparkle mark as its brand variant.
- HITL Kit
Nineteen 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 nine rules and a token file rather than a folder of stale mockups.