Design systemLive specimen
akaSTYLE
The vocabulary every project on this site is built from: the tokens, the one type scale, the primitives, and the canvas engine that draws every brand mark. It exists as rules rather than as taste, and as something that renders itself rather than a document about itself.
Not a logo file. A disc of cells with the wordmark subtracted, drawn at render time by the same engine every other mark in the family uses.
In simple terms
The design language every project here is built from, written as nine rules instead of preferences.
A preference has to be re-argued every time. A rule can be checked in review and travels to a new codebase without me in the room.
The impact. It is why these projects look like one studio made them, and why an AI assistant can build a new surface in the same language without being taught it again.
The rules
Eight constraints, not eight preferences
A design system is usually sold as consistency, which is true and is not why I keep one. The reason is that a preference has to be re-argued every time and a constraint does not. “This feels too heavy” is a conversation. “Depth is an edge and a fill, never a drop shadow” is a thing you can check in review, and it travels to a new codebase without me having to be in the room to defend it.
- 01Mono 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.
- 02One 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.
- 03Light 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.
- 04Motion 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.
- 05Loops 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.
- 06Layout 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.
- 07Server 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.
- 08Per-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.
- 09Every 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.
Law 04 is the clearest case. It reads like a taste call and started as an accessibility requirement for the audio-reactive work, where anything pulsing brightness in time with sound is a genuine hazard. Once motion could only move space, every engine in the family inherited a safer default without anyone having to remember why.
Color
Tokens, in OKLCH
Every surface resolves from a CSS variable, so light and dark are one definition rather than two stylesheets. These swatches are the live tokens: switch the theme and this row repaints itself, because there is nothing here but the variables the rest of the site uses.
background
--background
foreground
--foreground
card
--card
muted
--muted
border
--border
primary
--primary
Accent set, carried by the canvas engines
- accent-green
- accent-blue
- accent-amber
- accent-rose
- accent-violet
Surface
One material, lit two ways
Law 03 rules out the drop shadow, which means depth has to happen inside the panel rather than under it. A card is lit from above: the fill grades light-to-dark downward, the top edge catches a hairline the other three do not, and a fine grain over the fill keeps a gradient that shallow from banding. Invert the grade and the top edge and the same material reads as a cut into the page instead of an object on it. Every surface below is one of those two.
- Card.aka-card
Raised. Sits on the page. Content, specimens, and anything that is also a control.
- fill grades from --card-fill-top down to --card-fill-bottom
- edge at --card-edge, top edge lifted to --card-edge-top
- grain over the fill, blended soft-light
- Well.aka-card-well
Recessed. Cut into the page. Callouts, closing notes, code, and media.
- fill grades from --card-well-top up to --card-well-bottom
- edge at --card-well-edge, top edge darkened to the lip of the cut
- .aka-card-media flattens it to the ground: no grain, no grade, behind artwork
- Head.aka-card-head
The band across the top of a card, for a label row. A step toward the mid-tone in either theme, so it darkens in light and lightens in dark from one definition.
- --card-head fill
- a --card-rule hairline underneath
- Lift.aka-card-lift
A card that is also a control. Hover moves it 2px and sharpens the edge; it never brightens, per law 04.
- translateY(-2px) over 320ms
- edge to --card-edge-hover
- no transform under prefers-reduced-motion
- Glass.aka-glass
The accent as a surface, and the only one that carries colour. Law 02 spends the accent once per screen, so the test is subject rather than count: the deck’s progress pill and the control that selects the deck are the same subject and may share it. A second, unrelated glass on a screen is the law being broken.
- a white specular along the top, blended soft-light
- a soft inner light at the leading edge, blended overlay
- the accent ramp beneath both at less than full strength, so the backdrop reads through: it resolves from --glass-a, --glass-b and --glass-c, which default to blue, violet and rose
- aka-glass-rose leads the same ramp from the rose end, for a second glass control sitting beside the first
- backdrop-filter: blur(14px) saturate(1.9)
These were four class strings copied by hand into two dozen files until recently, which is the failure mode a design system is supposed to prevent and does not if the system is a document. They are two classes now. The specimen above is not a picture of them: it is them, rendered by the same definition every page on this site loads.
Type
One scale, five roles
Hierarchy is carried by the contrast between uppercase mono and light sans, not by size, which is why the headings on this page are barely larger than the body under them. Each row below is set in the class its band prints, so the specimen and the spec are one string.
- Displaytext-display font-extralight leading-none tracking-tight text-foreground/90
A language written as constraints
- Section headaka-section-title
The rules
- Bodytext-15 font-light leading-relaxed text-muted-foreground
A constraint can be checked in review, and it travels to a new codebase without me having to be in the room.
- Kickeraka-kicker
Design system · Live specimen
- Captiontext-11 font-light text-muted-foreground/75
Rendered live, never screenshotted.
Brand engine
One canvas, a family of marks
Every mark in the family is the same disc of pixel cells with something different subtracted from it. Change what is subtracted and you change brands, not code. Colour follows the foreground token, so a mark is correct in either theme without a second asset existing.
akaBuild
wordmark void
akaOSS
sparkle void
Games
work line
The practice
Where it came from, and what it does now
Built at Ubik
This started at Ubik, and it started from a shortage rather than from ambition. There was no design team and no time to keep a spec in sync with itself, so anything that needed a meeting to settle got settled once and written down as a rule instead.
What survived three and a half years of that is what is on this page: the decisions that kept being correct across a desktop app, a web gateway, a browser extension and the agent surfaces, which is a wide enough spread to have killed anything that was only a preference.
The other half of the inheritance is the habit of the system being the running thing rather than a description of it. There the board was Excalidraw files nobody closed and the spec was the code; here the specimen imports the same components the site does. Neither can drift, because there is no second copy to drift from.
What it is worth now
The part I did not anticipate is how much a written constraint is worth once you build with agents. I work in Claude Code, and the tokens, the scale and the eight laws load into the design context for every repo I run, so the language is not something I re-explain per session or per project. A new surface arrives already speaking it.
That is the difference between a style guide and this. A style guide is read by a person who then interprets it. These are narrow enough to be applied directly, which is why every project here looks like the same studio made it while none of them took the setup time that usually implies.
It is the reason I can go from a decision to a production surface in a day and have it land in the same language as everything around it.
Where it runs
Same tokens, different repos
- akabuild.devThis site. The faces hero, pixel aka wordmark, the project-card vocabulary, every write-up page.
- akaoss.devThe open-source studio site: same type scale and card system, with the sparkle mark as its brand variant.
- HITL KitNineteen human-in-the-loop React primitives, installable via the shadcn CLI. The interaction half of this language.
- Trickle UI Kit47 pure-CSS text-animation primitives: the motion rules above, packaged as zero-runtime components.
- boxpopuli.live · akacovart.comClient and studio work that borrows the dark ground, bordered cards, and mono labelling wholesale.
Deeper
The rest of the specimen
Everything above is the system itself, on this page, rather than a description of it. These go further into each part: every number with its reasoning, every primitive with its class string, and the engine with the whole family it draws.
The test of a design system is not whether it is documented. It is whether someone who has not read the documentation, which now includes a model, produces something that belongs. Rules pass that test and preferences do not. The rest of the work is on the projects page.