Optimistic Design System · Built solo · Live

Build interfaces, optimistically.

Optimistic is a headless, token-driven design system: 58 components, three token tiers, at home in any stack and legible to machines. I built it alone, with AI, to prove a claim I make out loud. It is live, it is free, and the source is public.

Open the design system design.theoptimisticdesigner.com
What it isHeadless multi-brand design system
Built byOne designer, with AI
Scale58 components · 67 documented pages
StacksReact · Angular · plain HTML
PriceFree, and the source is public
StatusLive and in active build
01 · The concept
Every interface has a moment of faith.
Assume the best outcome. Then ship it.

Tap a heart and it fills before the server has agreed. Engineers call that an optimistic update: render the finished thing first, let the proof catch up. It is a small technical trick that happens to be a belief system, so I named the whole thing after it.

The name carries three layers from the Latin optimus. The optimist, which is the belief. The optimistic update, which is the method. The optimum, which is the result. A design system is the same bet at a larger scale: you decide what good looks like once, render it everywhere, and let every future screen catch up to it.

02 · Why it exists
I claim design orgs can run two to three times faster with AI. This is the evidence.

I have spent years watching fragmentation quietly bill companies: the same table rebuilt in four products, the same button drawn five ways, engineers maintaining interfaces instead of building them. I have costed it, invoiced it to a leadership team, and rebuilt an ecosystem around fixing it. That work is the Y.Design story.

So when I say design organisations can move two to three times faster with AI, I know how that sounds: another opinion at a conference. I could have written a think piece. Instead I built the thing a team of engineers and designers would normally be funded to build, alone, in the open, and put it online where anyone can check my work.

1Designer, no engineering team
58Production components
67Documented pages, live
0Think pieces written
03 · How it works
A headless core, and one warm light.
01Headless at the coreStructure, behaviour, and accessibility live in the core with no brand baked in. Skins plug in on top, so one system can serve many brands without ever splitting into many systems.
02Three token tiersCore, semantic, theme. A component never names a hex. It asks for a role, the role points at a ramp, the ramp points at one value. Re-point the ramp and everything re-skins at once.
03Atomic, and honest about itAtoms compose into molecules into organisms, the way optimism compounds in small units: pixels into a city, tokens into a system.
04At home in any stackReact, Angular, or plain HTML. The tokens are the contract, so the system does not care which framework a team happens to be married to this year.
05Legible to humans and machinesDocumentation, tokens, and code are structured so an AI can read the system as well as a designer can. That is what makes building at this speed possible in the first place.
06One light is enoughA monochrome near-black field and exactly one warm accent. Restraint is not a style choice here, it is the thing that keeps a system coherent as it grows.
04 · What is in it
Foundations, components, and the documentation to use them.

Nine foundations set the ground rules: colour, typography, spacing, grid, elevation, radius, breakpoints, and the principles that hold them together. On top of those sit 58 components, from a button to a full data grid with filtering, grouping, pinning, inline editing, and master detail rows.

Every component gets the same documentation treatment: a live demo you can configure, anatomy, behaviour, do's and don'ts, the tokens it consumes, and the code. Not a component gallery, a manual.

The Optimistic data grid component: dark theme, density and shape controls, column filters, an attention chip flagging rows that need review, and pagination
The flagship: a data grid where every feature is opt-in, and columns and data alone are enough.
How a token resolves in Optimistic: a core value passes through two semantic tiers into a component button, unchanged
The token chain: core value to semantic role to component. No component ever names a hex.
05 · Free, and open
You own the code. That is the whole licence philosophy.

Optimistic is free to use, and the source is public. It installs the way I wish every system did: the components are copied into your repository rather than hidden behind a dependency, so you can read them, change them, and keep them when I am no longer in the picture. No lock-in, no black box, no version of this that quietly becomes a subscription.

Take the whole thing, take one component, or take only the token architecture and throw the rest away. All three are correct uses.

FreeNo tiers, no subscription
PublicSource on GitHub
YoursComponents copied into your repo

Read the source at github.com/subinsab/Optimistic, or start with the documentation and see whether it earns your trust first.

06 · What it proves
Philosophy is cheap. Ours compiles.

Optimistic is not a portfolio piece pretending to be a product. It is the argument I make to executives, rendered in code: that design is infrastructure, that a system pays for itself, and that the ceiling on what a small team can build has moved and most organisations have not noticed yet.

If you lead a design organisation and you are trying to work out what your team could be doing at this speed, that conversation is the one I most want to have.

See it live
Open the design system.