SaltieBubble

• Layer: Primitive
• Base: Custom — no Ark UI dependency

Default

Default

G'day. Still looking for that one ticket from last Tuesday?

With signature

With signature footer

The swamp never forgets. We've indexed everything you've fed me.

— Saltie · 200M yr · unimpressed

Rare state

Activated when Saltie surfaces something precise — a found thread, a confirmed match. Uses --saltie-rare-border and --saltie-color CSS vars, which shift with the active theme.

Rare

Found it. Exactly where you lost it. You're welcome.

— Saltie · ceremonial tier

Both states side by side

Normal vs rare

Back again? The swamp remembers.

— Saltie

Found it, mate. Here.

— Saltie · rare

Props

Prop	Type	Default	Description
children	JSX.Element	required	Saltie’s voice text
rare	boolean	false	Activates ceremonial tier — accent border, accent text color, glow
signature	string	—	Footer line e.g. "— Saltie · 200M yr"

Design notes

• Border radius: 12px all corners, 4px bottom-left — the asymmetry creates the speech-bubble tail without a pseudo-element.
• Text is font-mono, italic, text.secondary — Saltie speaks in a distinct voice.
• rare=true sources its color from --saltie-color and its border from --saltie-rare-border. Both are defined per-theme in html[data-theme] blocks — adding a new theme only requires those two vars.
• The --glow-text text-shadow on rare state is subtle on Relight, stronger on Delight.

Plane 1 Constraints

• No background gradient
• No drop shadow in default state
• Glow only on rare=true via --glow-text (text-shadow, not box-shadow)

Token Dependencies

Token	Source
bg.surface	Surface background
border	Default border color
text.secondary	Bubble text color
text.muted	Signature text color
--saltie-color	Per-theme CSS var (accent for rare state)
--saltie-rare-border	Per-theme CSS var (border for rare state)
--glow-text	Per-theme CSS var (text glow for rare state)