Introduction

The design system every Oikos page is built with.

Oikos UI is a small set of components, the tokens they share, and the notes that record why they look the way they do. Every page on this site is built from it, so what is documented here is what ships.

Each component page shows the component in its states and variants, with the source of every example beneath it. Components are built on Base UI, unstyled accessible primitives, and styled with Tailwind CSS.

#Built for agents

Everything in Oikos is explicit. What a piece of code does is written where it is used, so nothing happens that you cannot see there. Styles are plain utilities, colors name both of their modes, and a component owns only the behaviour that is hard to get right, a select or a dialog, and leaves every other decision to the caller.

An agent is strongest on what it already knows, the platform, and weakest on what it has to learn from a codebase, a wrapper’s opinions, a library’s names, a token that changes behind its back. Each of these narrows what it can make. So Oikos keeps the code plain and puts its rules in three short documents on design, code, and styling, read before every task. What an agent can see it can change, and everything stays consistent by rule rather than by wrapper. Explicit, coherent, less is more.