Opaline UI

Opaline turns the interface grammar developed in Spar into a library you can install, read, and own. It is built for dense product software: agent workspaces, editors, desktop tools, and interfaces where restraint matters more than spectacle.

What makes it Opaline

• Compact by default. The primary button is 32px tall, not a marketing-site control dropped into an app.
• Warm neutral color. OKLCH tokens stay legible and quietly warm in both themes.
• Layered surfaces. Hairline borders, restrained shadow, translucency, and backdrop blur establish depth without noise.
• One geometry. Controls use 8–10px corners; larger sheets earn 14–18px corners.
• Source ownership. Install through the shadcn CLI and adapt the component in your application.

First components

The foundation release starts with Button, Badge, Card, Input, Textarea, Separator, Switch, Tooltip, and Dialog. Larger Spar patterns—menus, fields, composer controls, agent activity, thread disclosures, sidebars, and workspace surfaces—come next, built on these primitives rather than beside them.