Operator design system

Interface library.

The reference for how Operator looks, feels, and responds. Shared components, considered details, and a consistent experience on every screen.

Every example is local. Nothing is saved or sent.

01 / The foundation

Calm surfaces. Clear decisions.

The ease of the login page, with the warmth and character of Operator.

Studio FormaBusiness overview

Your business, in a good place.

A clear view of what’s happening and what needs you next.
Revenue this month
$12,480
Upcoming appointments
24
Hours returned to you
38
Your weekly report is ready to review.
Try an interaction Explore recordsIllustrative data
Comfortable by default
44px controls. Consistent alignment. Space to read and act.
A quiet frame
Flat surfaces. 8px controls, 16px containers. Fine neutral borders.
One visual voice
Lausanne 400. Phosphor Regular. Orange with a purpose.

02 / Components

One component. Every screen.

The building blocks used throughout the app. Every example uses the real shared component.

Brand & motion

A familiar face, wherever you are.

03 / 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.

Give this local example a name.

04 / Focus

Room for a closer look.

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

Keep your place

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

Inline Dialog content stays in its server-rendered page position; portalled Dialog content keeps the default floating layer.

Includes DialogClose · DialogContent · DialogDescription · DialogFooter · DialogHeader · DialogOverlay · DialogPortal · DialogTitle · DialogTrigger

05 / States

Know where things stand.

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

Getting things ready

Loading

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.

06 / Domain example

Payment truth before the next step.

Booking stays separate from payment. These synthetic states show what customers and owners see while Operator confirms the actual outcome.

Illustrative records · No payment or booking exists.

Synthetic deposit · $85.00Original service terms preserved

Payment and booking recovery

The interface states what is recorded, what is still pending, and which actions only create a proposal.

Payment recorded · booking pending

Pending confirmation

The deposit is applied to the invoice. Booking confirmation is still in progress.

Payment received · booking exception

Action needed

The original time is no longer available. Owner review is required; no refund or move happened.

Exact retry available

Recovery needed

Automatic retries are exhausted. A verified owner may request one version-bound retry.

Payment and booking confirmed

Completed

One authoritative booking is attached to the captured deposit.

07 / Typography

Quietly clear.

TWK Lausanne at 400. Hierarchy comes from size, space, and tone.

Page heading · 30px

Make room for what’s next.

Section heading · 24px

A good day for your business.

Content heading · 18px

Everything in its place.

Body · 16px

Operator keeps the details moving, so you can focus on the direction.

Supporting text · 14px

Your changes are saved. You can come back to them at any time.

Emphasis · 400

Clear words. A little emphasis when it helps.

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
Search
Add
Arrow right
Caret down
Close

Appearance

A controlled splash of color.

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

#FF4F1F
#FF4F1F

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

Preview mode

The selection in context.

Operator Orange · Light shade #FF4F1F

Accent belongs to primary actions and selected states. Keyboard focus uses a clear ink outline.

Theme tokens

Edit packages/ui/src/tokens.css to update the shared theme. Values reflect the appearance selected above, including custom accents.

Supervised identity restoration

Informational example. No proof is exchanged or saved.

Invitation acceptance

Static example. These controls cannot send requests or change an account.

Set up your invited account

Restricted recipient invitation

Static examples. These controls cannot begin a recipient flow, change a password, or grant account access.

Invitation ready to review

Review the intended destination before accepting.

Request pending

The previous action may still be running. Check the same request.

Session cleanup required

Account access remains restricted until global cleanup and the final grant are confirmed.

Account setup complete

Provider sessions are signed out. Sign in normally to continue.

Existing account invitation

Static examples. These controls cannot authenticate, send email, restart proof, or grant a membership.

Confirm your current account
Confirm invited email

The email request is recorded. Delivery and proof are not yet confirmed.

Existing authenticator
Local session cleanup

This invitation requires local session cleanup before the grant can finish.

Restart verification

Restart needs an explicit next step; uncertain results retain the same request reference.

Invitation accepted

Local invitation sessions have been cleared. A conversion invitation may finish without a business membership.

Account and business selection

Static account examples. These cards do not sign in, select a business, or change security.

No businesses yet

A signed-in account remains available for account security even when it has no active business membership.

Choose a business

Owner A · owner access

Staff B · staff access

Owner C · owner access

Global account security

Authenticator setup belongs to the account across all selected businesses.

Business creation and directory labels

Static examples. These controls cannot create a business, verify an authenticator or read an account.

No businesses yet

An account can create a business before it has a membership.

Business name unavailable

The account still has a business reference and role; a membership name is not a business label.

owner
Original creation request pending

A missing receipt may still finish. Check the same request before another action.

Authenticator verification required

Return with the same request reference after verification.

Business creation confirmed

The owner workspace is ready for ordinary business setup.