Theme

OhmDesk’s parts, colours and type, as every page draws them. Switch between light and dark to see both; your choice is kept on this computer.

Parts

The app’s own parts (src/ui), drawn with the Home’s demo values. Point at a bar’s block for its piece; press a bar for its breakdown.

One main button per row, the row’s next move; every other button is quieter. Later sits in a fixed column.

Main, filled copper: the first row’s next move.
Main, in outline: every other row’s next move. Only one main button is filled at a time.
Quiet: Later and Seen, beside the main button.

A status word takes colour only when it means one of the four; everything else is grey.

Your move
Copper: your move, or ready for you. Also To approve, Sent in, Week to sign, Ready to bill.
In the field
Purple: under way. Also On the clock, Invoiced, not paid.
Paid
Green: done or paid. Also Done, Said yes.
No amount
Red: a stop: a bill held up, something unsafe. Also Hazard flagged, Stops the bill.
Booked
Grey: asks nothing of anyone. Also On hold, Message.

How each job’s work orders and money stand.

260031 · Marlow Machining
Work2/6 done
Billing52% invoiced of $84,500.00
260027 · Pinecrest Seniors’ Home
Work4/8 done
Billing62% invoiced of $212,000.00
260041 · Lakeview Dental
Work2/4 done
Billing48% invoiced of $27,350.00

With Hide money on, the Billing bar is one plain run inside a grey edge; its line, tip and breakdown hide the amounts.

260027 · Pinecrest Seniors’ Home

BillingBilling hidden

Each swatch paints the colour the app ships. Its value and contrast are for the theme you are in: words need 4.5:1, a bar block, a dot or a ring 3:1.

Light: a true white frame and cards on a very light grey page. Dark: true black, each layer a hair lighter.

Frame
--ground-frame
The menu, the top bar, the window round the page
#ffffff#09090b
Ink on it 17.7:119.0:1
Muted ink on it 6.3:17.7:1
Page
--ground-sheet
The rounded page that holds the cards
#f6f6f7#0f0f11
Ink on it 16.4:118.3:1
Muted ink on it 5.8:17.4:1
Card
--ground-card
Cards and panels, the summary strip, menus and popovers
#ffffff#141416
Ink on it 17.7:117.6:1
Muted ink on it 6.3:17.1:1
Soft fill
--fill-subtle
The menu’s current place, a row under the pointer, the switch’s track
#efeff1#1e1e21
Ink on it 15.4:115.9:1
Muted ink on it 5.5:16.4:1
Muted fill
--fill-muted
Counts in the menu; a Billing bar while Hide money is on, inside a 1px grey edge
#e4e4e7#2a2a2e
Ink on it 13.9:113.6:1
Muted ink on it 4.9:15.5:1
Hide money’s bar edge (grey) against a card 3.9:13.8:1
Hide money’s bar edge (grey) against the page 3.6:13.9:1
Tip fill
--fill-inverse
The tips over the bars, the bell’s count
#18181b#fafafa
Its ink on it 16.9:116.9:1

Words in three strengths, each 4.5:1 or more on every ground it sits on. Lines are edges, never words.

Ink
--ink
Titles, names, figures
#18181b#fafafa
On a card 17.7:117.6:1
On the page 16.4:118.3:1
Muted ink
--ink-muted
Second lines, labels, descriptions
#5f5f67#a1a1aa
On a card 6.3:17.1:1
On the soft fill 5.5:16.4:1
Faint ink
--ink-subtle
Placeholders, an empty list’s line
#6b6b73#898991
On a card 5.2:15.3:1
On the soft fill 4.5:14.7:1
Tip ink
--ink-on-inverse
Words on the tip fill
#fafafa#18181b
Ink on copper
--ink-on-copper
Words on the main button
#ffffff#ffffff
Hairline
--line-subtle
Row dividers, the cuts in the summary strip, the phone’s panel tops
#e4e4e7#222225
Line
--line
Card edges, field and button edges
#d4d4d8#313136
Strong line
--line-strong
Link underlines
#a1a1aa#52525b
Scroll thumb
--scroll-thumb
The window’s scrollbar
#d4d4d8#3f3f46

Yours: your move, ready. Also the accent inside the app: the main button on a row, focus, selection, the current place and tab.

Copper
--copper
Your move: status words, summary dots, sent-in and ready-to-bill blocks
#a0500e#e28a44
On a card 5.7:16.9:1
On its tint 5.1:15.7:1
On the page 5.3:17.2:1
On its tint, on the page 4.8:16.0:1
Copper tint
--copper-tint
Behind copper words: a status word, the current place’s count
rgb(179 90 16 / 0.08)rgb(226 138 68 / 0.13)
Copper edge
--copper-edge
The edge of a copper notice
rgb(179 90 16 / 0.32)rgb(226 138 68 / 0.38)
Copper fill
--copper-fill
The main button on a row, a picked day
#b35a10#b35a10
White words on it 4.7:14.7:1
Copper fill, pointed at
--copper-fill-hover
The main button under the pointer
#9c4e0c#a8540e
White words on it 5.9:15.3:1
Copper fill, pressed
--copper-fill-press
The main button while pressed
#8a440a#96490c
White words on it 7.2:16.4:1
Copper focus
--copper-focus
The focus ring, the current place’s bar, the current tab
#b35a10#e28a44
Against a card 4.7:16.9:1
Against the frame 4.7:17.5:1
Copper selection
--copper-select
Selected text
rgb(179 90 16 / 0.18)rgb(226 138 68 / 0.3)
Ink on it 13.9:110.3:1

The other three meanings, each with its tint and edge, and the one grey. As words they reach 4.5:1; as bar blocks 3:1.

Purple
--purple
Under way: in the field, on the clock, invoiced not paid
#6a4fd6#a594f9
On a card 5.6:17.1:1
On its tint 5.0:15.7:1
On the page 5.2:17.4:1
On its tint, on the page 4.7:16.1:1
Purple tint
--purple-tint
Behind purple words
rgb(106 79 214 / 0.08)rgb(165 148 249 / 0.14)
Purple edge
--purple-edge
The edge of a purple notice
rgb(106 79 214 / 0.32)rgb(165 148 249 / 0.4)
Green
--green
Done or paid
#1c7a4b#4cc38a
On a card 5.3:18.3:1
On its tint 4.9:16.8:1
On the page 4.9:18.6:1
On its tint, on the page 4.5:17.2:1
Green tint
--green-tint
Behind green words
rgb(28 122 75 / 0.06)rgb(76 195 138 / 0.12)
Green edge
--green-edge
The edge of a green notice
rgb(28 122 75 / 0.32)rgb(76 195 138 / 0.4)
Red
--red
A stop: a bill held up, something unsafe
#c0282e#f26a6e
On a card 5.8:16.1:1
On its tint 5.2:15.2:1
On the page 5.4:16.4:1
On its tint, on the page 4.8:15.5:1
Red tint
--red-tint
Behind red words
rgb(197 42 48 / 0.07)rgb(242 106 110 / 0.13)
Red edge
--red-edge
The edge of a red notice
rgb(197 42 48 / 0.32)rgb(242 106 110 / 0.4)
Grey
--grey
Booked (filled), to book (hollow), on hold and held back (striped), still to come, a summary dot at zero
#80808a#71717a
Against a card 3.9:13.8:1
Against the page 3.6:13.9:1

Geist for everything, in the sizes the Home uses. Figures that change are tabular, so they line up and do not jump.

23 / 28 · 600
Summary figures
$48,620.75
18 / 26 · 600
Page titles
Home
16 / 24 · 600
Panel titles
Pinned jobs
14 / 20 · 500
Names, row titles, menu places
Invoice 1052
14 / 20 · 400
Running text, the greeting
Good morning, Danielle · Tuesday, September 29
13 / 18 · 400
Second lines, panel notes, bar labels
Pinecrest Seniors’ Home · $18,940.00 · Yesterday
13 / 18 · 500
Small buttons, in rows and panel heads
Review and approve
12 / 16 · 400
Summary lines, the colour key, crew lines
3 not booked · 1 on hold
12 / 16 · 500
Status words
Your move
11 / 16 · 600
The menu’s group labels, in capitals
Money