Introduction

Warren UI is a dense, data-dense component library — the "Warren Control" design system: warm parchment canvas, near-black ink, 2px square borders, and a small vocabulary of semantic signal colors. Every visual decision encodes a state, a value, or a relationship.

It is not an npm package. Like shadcn/ui, components are distributed as a registry: you install the source into your project with the shadcn CLI and own the code.

npx shadcn@latest add https://warren.eduard3v.com/r/panel.json

Named rules

The design system is governed by rules, not vibes:

• Signal-Color — saturated color encodes state or data class only, never decoration.
• Text-Grade — signal-colored text uses the darkened AA text tokens; saturated tokens are for fills, borders, dots.
• Mono-Data — every numeral is mono and tabular.
• Caps-Label — every label is 10px mono uppercase with wide tracking.
• Density — information density is the point; removing data to "breathe" is a regression.
• Flat-By-Default — no shadows, no glass, no gradients; depth is borders, hairlines, tonal fills, state rings.
• Hairline — 2px ink outer frames, 1px interior separators.

Components

Panels, badges, stats, steppers, progress rails, bar charts, heatmaps, sparklines, ledgers, run-wall cell grids, log lists, and a rotating 3D context graph. See Components for the full list.