SaltieBubble

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

Default

Default

With signature

With signature footer

Rare state

Activated when Saltie surfaces something precise — a found thread, a confirmed match. Uses the borders.saltie-rare and colors.saltie Panda tokens (CSS vars --borders-saltie-rare and --colors-saltie), both conditioned per [data-theme] so they shift with the active theme.

Rare

Both states side by side

Normal vs 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 colors.saltie and its border from borders.saltie-rare. Both are conditioned per [data-theme] in panda.config.ts — adding a new theme only requires extending the value object on each token.
• The shadows.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 shadows.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
colors.saltie	Conditioned per theme (Saltie’s hue for rare state)
borders.saltie-rare	Conditioned per theme (border for rare state)
shadows.glow.text	Conditioned per theme (text glow for rare state)