J: "It's two cartoonish right now the website looks like it was made
by first grade teacher." Pulled the DiceBear personas-style headshots
and the emoji role badges. They were generative-illustration playful;
this is supposed to read like a staffing tool, not a kindergarten
attendance sheet.
Replacement design — restraint, signal, no glyphs:
Avatar: 40px circle, monogram initials, muted dark background
(#161b22), 1px ring (#21262d), white-ish text. No image,
no emoji. Looks like a pre-photo placeholder slot in a
real ATS.
Role band: the role gets classified into one of five families:
WAREHOUSE / PRODUCTION / SKILLED TRADE / DRIVER / LEAD
(regex-based; falls back to the first word of the role
for unknown families). Each family has a single muted
color: blue / amber / purple / green / orange. The
color appears as:
- a 3px left border on the .iworker card
- a 2px left border + matching text color on a small
uppercase pill in the detail line
That's it. No images, no emojis, no per-role illustrations. The
staffer sees role-family at a glance via the band color, name and
initials prominently, full role + city + zip in the detail string
behind the pill. Five colors total instead of an eight-color rainbow.
CSS:
.iworker[data-role-band="warehouse"] etc. → 3px left border
.role-pill[data-rb="warehouse"] etc. → matching pill border
JS:
ROLE_BANDS = 6 regex → band+label entries (warehouse, production,
trades, driver, lead, quality)
roleBand(role) = first matching entry, fallback to first
word of role uppercased
Verified end-to-end via playwright on devop.live/lakehouse:
forklift query → 10 cards
every card → monogram avatar + WAREHOUSE pill (blue band)
no images, no emojis, no rainbow
Restart sequence after these edits:
pkill -9 -f "/home/profit/lakehouse/mcp-server/index.ts"
( setsid bun run /home/profit/lakehouse/mcp-server/index.ts \
> /tmp/mcp-server.log 2>&1 < /dev/null & disown )
f92b55615f