Object & Order

Typography

Söhne is used for headings and interface text.

Ui sansfont-sans

Aa0123456789

Söhne

Headings, body text, labels, fields, and controls.

300 / 400 / 600 / 700 / 800

Regular400

Display alternatefont-display

Aa0123456789

Söhne Breit

Optional wide display theme. Not used for this page’s headings.

700

Harbor House700

Display alternatefont-serif

Aa0123456789

Denton

Optional serif display themes for firm page titles.

100 / 300 / 700 / 800 / 900

Harbor House300

Firm display theme

Firms choose a display font for their workspace. It applies to headings throughout the app.

Harbor House

Weight specimens ＋

Light

300

Sphinx of black quartz

Regular

400

Sphinx of black quartz

Semibold

600

Sphinx of black quartz

Bold

700

Sphinx of black quartz

ExtraBold

800

Sphinx of black quartz

Thin

100

Harbor House

Light

300

Harbor House

Bold

700

Harbor House

Black

900

Harbor House

Color

Neutral surfaces, brand accent, and semantic status. Colors come from Tailwind.

Neutral

#fafafa

100

#f5f5f5

150

oklch(94.6% 0 0)

200

#e5e5e5

300

#d4d4d4

400

#a3a3a3

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

950

#0a0a0a

Meaning

Accent

Brand only #E62E10

Success

Quote, profit, placed #0f766e

Warning

Lock, attention #b45309

Error

Archive, destructive #be185d

Surfaces

Four levels establish depth across the operator UI.

Tertiary · Page canvas

Secondary · Content column

Primary · Card / Schedule item

Surface hierarchy

Active Selection and navigation

primary

Cards, sidebar, schedule items

secondary

Content column

tertiary

Page canvas

active

Nav active, selection

Glass 80

Primary

Glass 39

Secondary

Glass 30

Tertiary

Components

Live product components with their states and APIs.

Button

UIComponents/Button.svelte

Actions throughout the operator UI. Variant communicates role; label names the action.

Variants

Sizes

States

API reference ＋

Prop Type Default Purpose

label string "" Visible action label.

icon string "" Icon name.

iconPosition left | right left Icon placement.

showStatus boolean false Shows temporary success or error feedback after the action.

status idle | success | error | warning idle Bindable feedback state.

disabled boolean false Prevents interaction.

fullWidth boolean false Fills the available width.

onClick () => void | Promise<void> () => {} Action handler.

Checkbox

UIComponents/Checkbox.svelte

Selection control used by RowActions on schedule items.

Unchecked

Checked

Disabled

Disabled checked

API reference ＋

Prop Type Default Purpose

checked boolean false Bindable selection state.

id string required Associates input and label.

disabled boolean false Prevents selection.

onChange (checked: boolean) => void undefined Runs after the value changes.

Switch

UIComponents/Switch.svelte

Immediate on/off setting. Label describes the on state.

Show financial columns

API reference ＋

Prop Type Default Purpose

toggleOn boolean false Bindable on state.

label string "" Describes the on state.

activeColor string surface-glass-success Track token when on.

disabled boolean false Prevents interaction.

onClick () => void undefined Runs after toggle.

Tag

UIComponents/Tag.svelte

Compact status display. Use canonical status labels; color follows meaning.

Glass

Secondary

Success

Error

Warning

Cyan

Indigo

Orange

Purple

Flat and muted

Approved

Cancelled

Attention

Quote requested

Purchase approved

API reference ＋

Prop Type Default Purpose

variant glass | flat glass Glass for chrome; flat for dense lists.

tagColor surface-glass-* | secondary "" Semantic surface token.

label string "" Visible status label.

icon string "" Optional leading icon.

flatSize normal | large normal Flat-tag density.

title string "" Native hover description.

ToggleTabs

UIComponents/ToggleTabs.svelte

Switches between peer views without navigation. selectedId is the single source of truth.

API reference ＋

Prop Type Default Purpose

tabs Array<{ id, label?, icon? }> [] Ordered segments.

selectedId string "" Bindable active segment.

onchange (id: string) => void undefined Runs after selection.

class_name string "" Classes applied to the root.

TableInput

cells/table/components/TableInput.svelte

Inline editing on schedule items. Enter or blur commits; Escape cancels.

Default

Product

Percentage

Markup

Locked

Client price

API reference ＋

Prop Type Default Purpose

label string required Field label.

value string | number "" Bindable field value.

type string text Native input type.

percentage boolean false Appends % when unfocused.

rows number undefined Renders a textarea when greater than 1.

locked boolean false Read-only with the schedule lock notice.

onCommit ({ value: string }) => void undefined Runs on changed blur or Enter.

onCancel () => void undefined Runs on Escape.