O

Orbit

/Design System

v0.1

~/design-system $ orbit explain

Orbit Design System

A shadow-as-border foundation for product surfaces. Next.js 16, Tailwind v4, shadcn primitives, ai-elements. Swap theme, accent, and variation live from the Tweaks panel (⌘.).

Start with tokens

The load-bearing layer

Every color, radius, shadow, and type step is a CSS variable in @theme. Light + dark in one scope, shadcn bridge included.

Atoms → composites

Every Orbit atom + every shadcn primitive — Button, Badge, Card, Dialog, Sheet, Popover, Tabs, Inputs, Menus, and more. Every variant is rendered here.

Toasts, alerts, notifications

Sonner toast matrix (success/info/warn/error/loading/action/promise), shadcn Alerts, and the live NotificationsPanel sheet wired to /api/mocks/notifications.

Sidebars, switchers, headers

Orbit DesignSidebar, shadcn AppSidebar, nav-main / nav-projects / nav-documents / nav-user, team + version switchers, search form, site header.

Registry compositions

Calendars, Charts, Login form, AppSidebar, SettingsDialog, DataTable, and the Orbit IDP dashboard. Everything pulled with bunx shadcn@latest add.

Safe · data-dense

Deployments page with table, pipeline, activity, build output. The default layout mode for data-heavy surfaces.

Bold · hero-led

Overview page with hero banner, stat panel, quickstart. For marketing-adjacent surfaces and first impressions.

Lab · terminal-forward

Ops page: mono-heavy, ASCII dividers, brutalist table. For oncall / incident / infra surfaces.

AI UI under Orbit tokens

Conversation, PromptInput, CodeBlock, Tool. Every AI surface re-skinned to match the shadow-as-border system.