Messaging (Lustro)
Messaging examples in the Lustro language: a two-pane inbox and conversation screen. Layout follows the reference Message/Chat screen design by Nizam (https://x.com/nizamdesign/status/2106052336724672692), restyled with glass surfaces and the indigo-to-pink gradient. Demo data is fictitious.
Inbox and thread
search messages
allunreadquotesjobs
SM
sarah miller
ac replacement · $4,731
does the price include hauling away the old…
JC
james carter
roof replacement · $8,900
can you start the week of the 29th instead?
LP
linda park
panel upgrade · $3,150
you: sent the updated options - take a look
DR
dana ruiz
furnace tune-up · $690
thanks! see you thursday
sarah miller1420 elm street · (512) 555-0142
ac replacement · $4,731 ↗you sent the quote - ac replacement · $4,731
hi sarah - here is the quote for the ac replacement we walked through. the balanced option is what i would put in my own house.
thanks mike! give me a couple of days to talk it over with rob.
follow-up #1 sent automatically - "still thinking it over?"does the price include hauling away the old unit?
yes - haul-away and the permit are both includedlet me send you the line itemscall me and i will walk you through it
write a reply…↗
sarah replies by text - this thread also lands on her quote page.
Anatomy
| Part | Spec |
|---|---|
| Inbox list | Glass card, search pill, filter pills (all is the active gradient pill), rows with avatar, name, time, linked-record line, one-line preview, unread dot |
| Selected row | Glass raised (rgba(148,140,255,.12)) with a 3px indigo-soft left rule |
| Thread header | Contact name, secondary detail, a chip linking to the related record |
| Outgoing bubble | Gradient #6366f1 to #ec4899, white text, square bottom-right corner |
| Incoming bubble | Glass rgba(148,140,255,.16), square bottom-left corner |
| System event | Centered glass pill, 11.5px, for things like "quote sent" or "automatic follow-up sent" |
| Suggested replies | Outlined indigo-soft pills above the composer |
| Composer | Pill input with a gradient send button and soft glow |
Rules
- One gradient per view: outgoing bubbles and the send button share it, so the active filter pill may stay flat in busy threads.
- Timestamps and metadata use JetBrains Mono at 10.5px.
- Unread state is a glowing indigo dot, never a semantic color.
- Show delivery state (
not answered yet,read,failed) as meta text under the bubble.