Operant is a design system for AI-assisted, agentic, human-in-the-loop products — copilots, workflow automation, incident triage, research assistants, prompt orchestration, and approval/review pipelines. It is built to feel like an operations console for intelligent systems (Linear, GitHub, Vercel, Stripe Dashboard as reference peers), not a marketing site.

Five personality anchors drive every decision in the system: intelligent, operational, trustworthy, efficient, calm under complexity. Concretely, that means the interface always shows its reasoning and confidence rather than bare verdicts, every automated action is attributable to an agent/model/prompt version, and human review is a first-class default path rather than an afterthought. The full philosophy and rule set live in Design System and Agent Rules.

What's in this repo

Operant is plain HTML/CSS first — a zero-dependency component library you can drop into any stack — with an optional React package layered on top for the two consumers that benefit from real components (the AI generator's live preview and Storybook).

• css/tokens.css — design tokens: primitives → semantic → light/dark themes → density modes.
• css/base.css — reset, typography roles, the monospace sub-system, layout utilities.
• css/components.css — the component library itself, the .ods-* classes. This is the single source of truth; nothing else duplicates it.
• @operant/ui (optional, React) — thin wrappers over the same .ods-* classes, using Radix UI underneath for keyboard/focus/ARIA behavior. It never introduces a second visual language.

On top of the CSS system, this repo ships a Next.js app (apps/web) with four tools:

• Docs — this site.
• Playground — a live HTML/React editor with an instant preview.
• Generator — an AI prompt-to-component generator with streaming output.
• Storybook — an isolated catalog of every @operant/ui component.

Where to go next

• Installation — load the three stylesheets, or install the React package, in a few minutes.
• Quick Start — a complete minimal page, shown both as plain HTML and as React.
• Theming — data-theme / data-density, and how the token layers resolve.
• Browse individual components, e.g. Button and Card, for anatomy, variants, states, and markup.
• Agent Rules — if you're a coding agent (or a human) extending this system, read this first; it's the deterministic contract.