QBall Design System

There was no user to research here. The brief came from me. I wanted a brand identity that actually looked like me: my values, my taste, my particular flavor of nerdiness, rendered in type and pixels instead of described in a bio. Most personal sites borrow a template and a Google Font and call it a brand. I wanted every decision, the fonts, the two colors, the refusal to use a drop shadow, to say something specific about how I think. QBall, the play on my last name Kubal, is the identity the whole thing belongs to. The job I set myself was to design myself into a coherent visual language I could build everything else on top of.

The primary user is me. I built it for myself, and I'm the one who lives with every constraint. But "a brand for me" still has real jobs to do, and being honest about them is what kept the system disciplined instead of self-indulgent. There's a secondary audience too: it's open-source, so anyone can lift the tokens and components verbatim.

The system is terminal-meets-editorial: oversized monospaced display type on warm parchment or charcoal, generous asymmetric whitespace, and exactly two colors doing all the talking. It reads like a well-set technical document that happens to be software. That one sentence is the whole brand, and every rule underneath it exists to protect that feeling.

Type carries the personality. The display face is Berkeley Mono, a licensed monospace that sets every heading and every number: tickers, prices, percentages. Fira Code handles the UI, Syne the long-form body, Instrument Serif the pull quotes, JetBrains Mono the code. Monospace display type on an editorial layout is a deliberately nerdy choice, and that's the point. The type is the tell.

Color is where the discipline shows. Sage does all the wayfinding, every link, every active state, every focus ring. Amber is the lone highlight, saved for the one thing that's featured, and the two never carry equal weight in the same component. Then there's a list of things simply banned: no drop shadows, no gradients, no glass, no emoji, no pill buttons, no purple-and-blue "tech" gradient. Depth comes from a tonal step and a hairline border. Spacing lives on an 8px grid with no in-between values, and nothing rounds past 12px. The restraint is the part of the brand I care most about. I'd rather get a few things exactly right than decorate the rest.

A couple of the decisions are quiet ethics statements. The system ships with a grounding guardrail: on any AI surface, model output is flagged as sourced or unverified and the disclaimer stays visible, so the design itself refuses to pass off unsourced generation as fact. Berkeley Mono is licensed, so the public repo ships the free Fira Code in its place and documents how to restore the real face once you've bought it, nothing licensed gets redistributed. The whole thing is Apache-2.0, patent grant included. Values, encoded as defaults.

And it's built to be consumed. The token layer is drop-in CSS plus a DTCG JSON mirror, lifted verbatim and never re-eyeballed. The component layer is framework-agnostic CSS with a React library built on Radix primitives and Tailwind, running from forms and data tables to a D3 candlestick chart and a terminal-style AI chat. Light and dark are both first-class, generated from the same tokens by a single toggle. It even ships as an agent skill, so Claude can build to the brand without me art-directing every screen.

The part I'm quietly proud of: the brand includes a voice. Opinionated, technical, dry, first-person, sentence case, no exclamation marks, no em-dashes. It's my own writing voice written into the design system, so anything generated under the brand sounds like me too. The identity goes all the way down, past the pixels, into the punctuation.

The system is done and in use. Tokens locked in May 2026, the application layer landed soon after, and it's now the identity behind three things at once: my site (ashaykubal.com), the branded diagram galleries in my project write-ups, and Stocky, a stock-companion prototype with a live AI agent that runs entirely on this system. It's open-source under Apache-2.0, and both halves ship on npm at v1.0.0: the tokens as @qball-inc/tokens, the component library as @qball-inc/react, under a strict semver contract where any change to a token, the type stack, or the radius scale is a major version. For something that started as "I want a brand that looks like me," it's become the foundation everything else I build sits on.