Operator design system

Built with shadcn/ui.

Our shared components, in one place. Explore their states here; edit the shadcn source and theme tokens to update every product screen.

Every example is local. Nothing is saved or sent.

Theme tokens

Edit packages/ui/src/tokens.css to update the shared theme. These are the current light or dark values.

Token	Active value
`--background`	`Loading…`
`--foreground`	`Loading…`
`--card`	`Loading…`
`--card-foreground`	`Loading…`
`--popover`	`Loading…`
`--popover-foreground`	`Loading…`
`--primary`	`Loading…`
`--primary-foreground`	`Loading…`
`--secondary`	`Loading…`
`--secondary-foreground`	`Loading…`
`--muted`	`Loading…`
`--muted-foreground`	`Loading…`
`--accent`	`Loading…`
`--accent-foreground`	`Loading…`
`--destructive`	`Loading…`
`--border`	`Loading…`
`--input`	`Loading…`
`--ring`	`Loading…`
`--chart-1`	`Loading…`
`--chart-2`	`Loading…`
`--chart-3`	`Loading…`
`--chart-4`	`Loading…`
`--chart-5`	`Loading…`
`--sidebar`	`Loading…`
`--sidebar-foreground`	`Loading…`
`--sidebar-primary`	`Loading…`
`--sidebar-primary-foreground`	`Loading…`
`--sidebar-accent`	`Loading…`
`--sidebar-accent-foreground`	`Loading…`
`--sidebar-border`	`Loading…`
`--sidebar-ring`	`Loading…`

Token	Active value
`--palette-cobalt-light`	`Loading…`
`--palette-cobalt-dark`	`Loading…`
`--palette-juniper-light`	`Loading…`
`--palette-juniper-dark`	`Loading…`
`--palette-iris-light`	`Loading…`
`--palette-iris-dark`	`Loading…`
`--palette-rust-light`	`Loading…`
`--palette-rust-dark`	`Loading…`
`--palette-ink-light`	`Loading…`
`--palette-ink-dark`	`Loading…`

Token	Active value
`--interface-custom-light`	`Loading…`
`--interface-custom-dark`	`Loading…`
`--interface-custom-light-foreground`	`Loading…`
`--interface-custom-dark-foreground`	`Loading…`

Token	Active value
`--color-white`	`Loading…`

Token	Active value
`--font-family`	`Loading…`
`--font-weight`	`Loading…`
`--font-weight-heading`	`Loading…`
`--font-weight-strong`	`Loading…`
`--font-size-body`	`Loading…`
`--font-size-small`	`Loading…`
`--font-size-heading`	`Loading…`
`--font-size-section`	`Loading…`
`--font-size-subheading`	`Loading…`
`--font-size-brand`	`Loading…`
`--line-height-body`	`Loading…`
`--line-height-heading`	`Loading…`
`--tracking-body`	`Loading…`
`--tracking-heading`	`Loading…`

Token	Active value
`--inset-narrow-page`	`Loading…`
`--space-3`	`Loading…`
`--space-4`	`Loading…`
`--space-5`	`Loading…`
`--space-6`	`Loading…`

Token	Active value
`--radius`	`Loading…`
`--stroke-width`	`Loading…`

Accent exploration

Find Operator’s signal.

Compare an accent on the actual shared components. This reference-only choice resets when you reload and does not change the product theme.

Accent color

Custom paired shades

Light shade

#2F5BD3

Dark shade

#A8BBFF

Adjust either shade to compare a custom pair. The picker selects Custom automatically.

Preview mode

The selection in context.

Operator Cobalt · Light shade #2F5BD3

Primary actions, links and keyboard focus use the selected accent. Neutral controls remain deliberately quiet.

Icons

Phosphor, in context.

A small reference of the Regular icons used across Operator. The full library is available through the same shared package.

House

Add

Arrow right

Caret down

Components

One component. Every screen.

Shadcn/ui components, shared by the owner workspace and customer portal. Edit their local source to change every instance.

Button

packages/ui/src/components/button.tsx

Keyboard focus, hover, disabled and pending share one definition.

Input

packages/ui/src/components/input.tsx

Plain inputDate

InputField

packages/ui/src/field.tsx

NativeSelect

packages/ui/src/components/native-select.tsx

Related exports: NativeSelectOption, NativeSelectOptGroup

Example service

Disabled select

Textarea

packages/ui/src/components/textarea.tsx

Example notesRead-only notes

This text is preserved.

Checkbox

packages/ui/src/components/checkbox.tsx

Label

packages/ui/src/components/label.tsx

A connected label

Alert

packages/ui/src/components/alert.tsx

Related exports: AlertTitle, AlertDescription

Ready for your next step

A local example of a clear, accessible notice.

Review this detail

This example illustrates an error. Nothing was submitted.

Card

packages/ui/src/components/card.tsx

Related exports: CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent

Booking overview

A standard shadcn card.

Example

Shared cards group records across the product.

Badge

packages/ui/src/components/badge.tsx

DefaultSecondaryOutlineDestructive

Accordion

packages/ui/src/components/accordion.tsx

Related exports: AccordionItem, AccordionTrigger, AccordionContent

Separator

packages/ui/src/components/separator.tsx

Booking information

Accepted terms

Skeleton

packages/ui/src/components/skeleton.tsx

Empty

packages/ui/src/components/empty.tsx

Related exports: EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia

No items yet

Your next item will appear here.

Field

packages/ui/src/components/field.tsx

Related exports: FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle

Example details

Validation

Table

packages/ui/src/components/table.tsx

Related exports: TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption

Local example records.
Service	Status
Consultation	Confirmed
One example record

SurfaceNavigation

packages/ui/src/surface-navigation.tsx

Disclosure

packages/ui/src/disclosure.tsx

01 / Interaction

A clear next step.

Try a name, a missing detail, and a pending action. Your input stays in this page.

Local example · Nothing is saved or sent.

02 / Focus

Room for a closer look.

Open a focused view, move through it with your keyboard, and return to where you started.

Composed exports: DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger

Keep your place

Escape closes the dialog. Focus returns to the button that opened it.

03 / States

Know where things stand.

A reference for progress, interruptions, and recovery. These are examples, not live activity.

Getting things ready

The next view is loading. No action is needed yet.

A little room to begin

There are no items in this example. A first step would appear here.

One detail needs a look

Check your input

Check the marked field. Your other entries are still here.

We couldn’t load this view

Something went wrong

Try again when you’re ready. No changes have been made.

Waiting for confirmation

Pending confirmation

A request is still pending. It is not complete, so avoid sending it again.

A step needs your attention

Action needed

Review the missing requirement before continuing.

This view may be out of date

Update needed

Refresh the information before making a decision.

Some steps are complete

Partly completed

Completed work stays recorded. The remaining step needs attention.

Completed

Example details checked

Still to do

Example confirmation not received

All set for this example

Completed

Every step in this example is complete. No business action took place.

Check the outcome first

Recovery needed

The result is uncertain. Confirm what happened before trying the action again.

04 / Typography

Quietly clear.

Everyday words, set with care.
A little emphasis when it helps.
A clear point when it matters.

Theme tokens

Shadcn theme31

Accent choices10

Custom accent preview4

Colors1

Typography14

Spacing and layout5

Shape and motion2