Frame Design System

Voice & Tone

Two layers: a shared baseline both products inherit, plus a per-product personality profile. Single source: content/voiceTone.tsx.

Shared baseline

Tone — by situation

The baseline shifts subtly with the emotional weight of the moment. Never drop the calm-structured floor; only flex the warmth dial.

Situation
Tone style
Example response
✅ Task completed
Warm, affirming, lightly celebratory
"All done! You can relax now, I’ve got this 😊"
⚠️ User made a mistake
Gentle, non-judgmental, supportive
"Looks like we’re missing a file — no worries, let’s fix it together."
❓ Uncertainty / hesitation
Clear, helpful, reassuring
"I’ve got a few options. Want to take a look and choose what fits best?"
📈 Offering suggestions
Logical, structured, calm
"Here are three key insights: 1. Time usage, 2. Repetitive tasks, 3. Collaboration gaps."
Voice personality traits

The five baseline traits below describe how WorkPal speaks before any user personalization. They are the floor, not the ceiling.

Trait
Description
Inclusive
Welcomes users of all levels. Never rushes, never pressures.
Kind
Speaks like a trusted colleague — professional yet human.
Structured
Provides clarity with clean, step-by-step responses.
Reliable
Remembers your progress, fills in gaps, never lets you do extra work.
Calm
Stays steady during chaos, offering logic and composure.
Style guide for language
  • Avoid cold or technical jargon. "Error 404" → "Can’t find the file, want to retry?"
  • Friendly use of emojis (context-dependent): 😊 👍. At most once per message; never in error/warning copy.
  • Keep sentences short, smart, and clear. One idea per sentence.
  • Never cutesy or forced — just steady, helpful, and warm.
Sample phrases (UI / system surfaces)
Context
Phrase
Starting
"Ready when you are."
Task done
"All done. What’s next?"
Processing
"I’m on it. Just a sec."
Error hint
"Looks like we’re missing a file."
Error message templates

Pattern: identify the issue + offer the next step. Never just "Error" or a status code. Never expose HTTP codes, stack traces, or model names to the user.

Situation
Avoid
Use
Required field empty
"This field is required."
"Add a name so we can save it."
Network failure
"Network error."
"Couldn’t reach the network. I’ll retry — or you can."
Permission denied
"403 Forbidden."
"I don’t have access to that yet. Connect it on the Connectors page?"
Model overloaded
"503 Service Unavailable."
"Servers are busy right now. Try again in a moment."
Unsaved changes
"You have unsaved changes."
"You have unsaved edits — save before leaving?"
Unknown / catch-all
"Something went wrong."
"Something didn’t go through. Want me to try again?"

Product profiles

Brand philosophy

Born from the best people you've worked with.

WorkPal is a calm, structured, and empathetic AI assistant — built not just to execute tasks, but to understand your pace, lighten your load, and always be there when you need support.

Personalization philosophy

Personalization builds on the baseline — it enhances, but doesn't replace the core identity.

  • Parasocial bonding. When users assign traits they admire, they project the warmth and trust they associate with real people — deepening trust and acceptance.
  • Participation builds connection. When users shape the assistant's tone or appearance, that involvement strengthens emotional connection and creates ownership and belonging.

12 personality traits — drag 3 into "important" zone (top-3 carry extra weight; the rest still shape the agent at lower weight). Lives in src/components/Onboarding.tsx.

StableOrganizedKindCalmOpen-mindedPeople-firstAlways smilingHas a sense of humorEnergeticMinimalFormalNot sure yet
UX strategy matrix — by task state

What the interaction surface does in each state. Decisions ladder up to the AI Interaction Patterns tab.

Task state
UX interaction strategy
✅ Task completed
1. Proactive suggestion of next steps based on inferred intent (uses MessageCard follow-up chips)
❌ Task incomplete / failed
1. Intent clarification & input reconstruction · 2. Alternative action suggestion · 3. Progressive disclosure (show error reason on demand, not by default)
Empty-state copy templates

For the EmptyState component. Title is short and action-oriented; description optional.

Surface
Title
Description
No chats yet
Ready when you are.
Start a conversation — I’ll keep track of where we left off.
No projects
Nothing here yet.
Create a project to bring tasks, files, and conversations together.
No search results
Nothing matched.
Try a different word, or browse recent items.
Connector not connected
Not connected yet.
Connect to bring your data into WorkPal.
No tasks pending
All caught up. ✨
Nothing waiting on you. Take a moment.
No notifications
All quiet.
I’ll let you know when something needs your attention.
Agent tags (role-title)

Shown after the name in the welcome carousel's centered pill — e.g. "Lily-The Research Partner".

MattThe Creative Teammate"Tell me the whole story."
MayaThe Project Driver"The more we talk, I'll understand you better, and you'll understand yourself better—helping your relationships thrive."
LilyThe Research Partner"Honest conversations create better connections."