Brand
Liquid Glass, from the counter to the doorstep.
Liquid Glass is the material every Wash Junkie surface is made of. Glass goes on the frame — top bars, panels, modals — and anything holding data stays solid, because body text over a blurred backdrop stops being readable. Every colour, spacing value and duration comes out of one generated token file. That build checks its own contrast, and fails rather than ship a pairing under target.
The mark
The one rule people get wrong
#2cbec5 is a mark colour, not a button colour. It sits at 73% lightness, so white text on it lands at 2.26:1 — well under the 4.5:1 body text needs. Brand teal is the logo and the graphic flourishes; the deeper accent, --wj-accent-solid, does all the interactive work and carries white at 4.86:1. If you have put white type on the brand teal, that is the bug.
Colour, by role
Point at the role, never at a raw palette colour. --wj-accent-solid is a promise: it re-derives from whatever accent hue a business sets, and every theme is checked to keep white on it at 4.5:1 or better. --wj-aqua-9 is the same hex today and promises nothing — a button pointed there is still teal on the day a business turns its accent purple. Switching the theme should turn over a whole screen with nothing else to change. Anywhere it does not, something is pointed at a colour instead of a role.
- Brand mark
--wj-brand-markThe logo and the graphic flourishes. Never a button: white on it is 2.26:1. - Accent
--wj-accent-solidButtons, links, selection, focus rings. White on it is 4.86:1 — clear of the 4.5:1 floor. - Success
--wj-success-solidDone. Delivered. Paid. - Warning
--wj-warning-solidOn hold. Needs a decision. - Danger
--wj-danger-solidIssue. Anything that deletes, or that cannot be undone. - Info
--wj-info-solidEmphasis that carries no verdict — a count, a note, a tip.
The status spectrum
The seventeen order statuses every business starts with, each segment sized by the share of a typical day’s orders sitting there. The ribbon is the shape of a working day, not a gradient somebody drew. It returns across these pages as a thin rule and a legend — same data, same order, labels off.
- New
- Pickup
- Received
- Sorting
- Pre-treatment
- Washing
- Drying
- Folding
- Ironing
- Quality check
- Ready
- Out for delivery
- Delivered
- On hold
- Issue
- Cancelled
- Returned
Three typefaces, by role
Outfit
Display. Headlines, marketing, empty screens, the big number on a dashboard tile. Rounded geometric letterforms echo the drawn wordmark, so a headline and the logo look like they came from the same hand. That is not permission to set the wordmark in it.
Inter
UI and body. Picked for how it holds at 12–15px in a dense table — the screen a staff member reads all day. A face with more personality costs reading speed at that size.
JetBrains
Numbers and identifiers. Order references, machine codes, anything that has to line up down a column — every character is the same width, so digits stack. An order reference is seven characters drawn from the digits and A–Z with I, L, O and U removed, so nobody has to ask “one or letter I?” on a phone call.
The material
Glass is a material, not a finish you add to a card. It has four parts, and it needs all four. Refraction: the backdrop blurred. Saturation: colour behind it coming through stronger, not only blurrier. Specularity: a 1px lit rim along the top edge. Depth: a shadow cast on whatever it floats above. Leave one out and you get a see-through box, not glass. Note what is not on that list: transparency. Glass reads as glass because of the blur and the lit rim. That is why the alpha values below sit so high — high enough that body text still passes its contrast check over the worst backdrop there is, pure black or pure white. The four tiers are ordered by how far a surface floats. The further off the page, the wider the blur.
- blur
- 14px
- saturate
- 160%
- alpha
- 0.82
The top bar while content scrolls under it. Toasts.
- blur
- 24px
- saturate
- 175%
- alpha
- 0.78
Panels. The dashboard’s main surface. The left navigation.
- blur
- 40px
- saturate
- 190%
- alpha
- 0.74
Modals, sheets and the command palette — the layer that covers everything else.
- blur
- 0
- saturate
- 100%
- alpha
- 1
Tables, forms, long-form text. No blur, no transparency: glass never goes on data, because rows of small type over a shifting backdrop cannot be read.
Voice
- Say the thing, then say what happens next. Cover the first clause — if the reader still knows what to do, it was decoration.
- The system takes the blame it earns. When it is our fault, say “we”. When a customer typed something we cannot use, give them the correction rather than the verdict: “Phone numbers need the country code”, not “Invalid number”.
- Specific beats soothing. A name, a number, a time. “Grace is picking up between 2 and 4” settles a customer; “your order is being processed” tells them nothing, and then they ring the outlet.
- Never technical. No status codes, no stack traces, no “an error occurred”. Say what did not happen and what to do next.
- Wash Junkie does not wash anything. We are the software underneath the businesses that do. Never “we washed”, never “our Wash House” — every Wash House belongs to a business, and claiming one puts us on the hook for work we did not do.
Words, and what they replace
| Use | Never |
|---|---|
| outlet | branch, shop, store, site |
| Wash House | facility, plant, factory, hub |
| order | job, ticket, batch, docket |
| driver | rider, courier, dispatch rider |
| customer | client, user, consumer |
| staff member | employee, agent, worker |
| status | stage, state, step |
| Wash Credit | wallet, balance, points, funds |
| fund (verb) | top up, recharge, deposit, load |
| paused | suspended, blocked, disabled, frozen |
Press, partnership or a question about using the mark — info@washjunkie.com.