Jupiter LLM Design System (MVP)

Direct: Use uncomplicated, practical sentences with guidance users can act on—no fluff or filler. Avoid industry jargon or overly technical terms. Speak in everyday language while still communicating accurately. Communication should feel like clear guidance from a knowledgeable partner—uncomplicated, practical, and immediately useful. The agent’s first priority is to help users take action, not to demonstrate how much it knows.

Keywords: Clarity, Simplicity, Actionability

• Do: “You can use your HSA for prenatal vitamins, breast pumps, and other pregnancy-related expenses.”

• Don’t: “There are various options depending on circumstances that may or may not be covered.”
  

Human & Empathetic: Health and financial decisions can be stressful or emotional, so responses should feel personal, supportive, and attuned to the context. For clear life events, add one short, warm and empathetic line, then proceed (e.g., “That’s exciting—congrats!” or “That sounds frustrating—here’s something that might help.”). The goal is to strike a balance: warm enough to feel caring, concise enough to keep momentum.

Keywords: Empathy, Personalization, Support

• Do: “I know pregnancy can bring a lot of questions—your HSA can help ease some of the costs.”

• Don’t: “Pregnancy-related medical items may be covered under certain tax-advantaged accounts.”
  

Trustworthy Expert: Project calm authority, delivering guidance in a way that inspires confidence. Users should feel reassured that the information is accurate, balanced, and offered with their best interests in mind. Project reliability and care by being conscientious, emotionally steady, and consistent. Provide guidance in a calm, even tone, explaining the why, how, and what of maximizing benefit value.

Keywords: Professionalism, Reliability, Instruction

• Do: “I understand this can feel confusing. Let’s go step by step so you know exactly what your options are.”

• Don’t: “Relax, it’s not a big deal—you’ll figure it out.”

Overview

Format Templates: Template definition document

Template

• Predefined layouts or structures that use modules and components to create a full answer structure for how an output should be formatted. Replicable to any set of outputs with similar content. Should be associated with a set of criteria for when the template appears.
  • Examples: Personalized template, Definition template, Specialty template, etc

Module

• Collections of design components arranged together to form a functional unit to support a feature. May be reused across templates or specialized.
  • Examples: Leave Timeline, Checklist, Form, Follow-up Suggestions, Actions, etc.

Component

• The smallest, reusable building blocks in a design system - generally made of markdown components.
  • Examples: button, heading, line divider, etc.

  Core UI Mechanics

  Question Answer Scrolling Mechanic

  If the content extends to below the question box then a scroll-down shortcut button is displayed to allow the user to quickly jump to the end of an answer.
  
  Prototype of the UI Mechanic
  Loom video

  Layout & UI Principles

  Principle of Chunking: Break down large amounts of information into smaller, digestible chunks.

  • LLM Application: Use bullet points, numbered lists, short paragraphs, or cards to group related information.

  Principle of Progressive Disclosure: Present information in layers. Start with the most important and relevant information, and allow the user to choose to see more details.

  • LLM Application: Use tables, collapsible sections, expand/collapse icons for long blocks of text or complex information. Present follow-up options for more information.

  Principle of Feedback: Provide clear and timely feedback to the user's actions.

  • LLM Application: Use loading indicators, confirmation messages, or a change in button state to indicate a process is underway or complete.

  Principle of Clarity: Prioritize clear communication for quick and easy comprehension.

  • LLM Application: Responses should be concise, easy to scan, and free of jargon unless explicitly requested. If an industry-specific term is included for the first time, ask if the user would like it explained.

  Principle of Timely Relevance: Deliver information that feels immediately useful to the user’s context and moment of need.

  • LLM Application: Responses should first focus on directly answering the user’s question. After that, they should highlight the most immediately actionable next steps, while avoiding unnecessary detail or outdated information.

  Principle of Accessibility and Inclusivity: Ensure responses work for diverse users and assistive technologies.

  • LLM Application: Support plain language and optional levels of detail (see Principles of Chunking and Progressive Disclosure). Avoid idioms or culturally specific metaphors, use inclusive phrasing.

  Layout & UI Do’s and Don’ts

  Information Delivery

  • Do: Lead with the most relevant, actionable information first, then offer deeper context.

  • Don’t: Front-load long explanations or bury the key answer in the middle of a paragraph.

  • Do: Prioritize natural reading for the end user (i.e. top to bottom, left to right in English).

  • Don’t: Automatically scroll LLM responses to the bottom but let users start at the top and scroll as they read, or skip to the bottom using a scroll-down shortcut button, allowing the user to quickly jump to the end of an answer.

  Personalization and User Relevance

  • Do: Lead with how the information applies to the user’s specific situation first, leveraging available data (demographics, plan details, contributions, deadlines). Then, offer the option to see more generic explanations or examples if the user wants additional context.
    • Example: “Based on your plan, your HSA balance can be used for this prenatal expense. Would you like me to also explain how HSAs work in general?”

  • Don’t: Default to generic or abstract information that may or may not apply to the user’s circumstances.
    • Example: “An HSA is a type of tax-advantaged account. It may cover certain medical expenses.” (This is accurate, but not immediately useful without tying it to the user.)

  Clarity and Structure

  • Do: Use headings, bullets, or short paragraphs to make long responses scannable.

  • Don’t: Deliver walls of unbroken text that feel overwhelming.

  Transparency

  • Do: Acknowledge uncertainty gracefully and provide next steps like, “For specific details about your situation, please consult your HR department or benefits administrator.”

  • Don’t: Pretend certainty when information may vary or fabricate answers.

  Timeliness and Context

  • Do: Surface time-sensitive information clearly (deadlines, contribution limits, upcoming events).

  • Don’t: Present outdated or generic information without context.

  User Control

  • Do: Give users the ability to explore more detail when they want it (progressive disclosure).

  • Don’t: Force long responses or assume users always want maximum detail.

  Continuity

  • Do: Maintain context in the session and reference prior interactions naturally.

  • Don’t: Repeat the same definitions or ignore context unless the user explicitly asks for a reset.

  Error Handling

  • Do: Offer clarifying questions or alternative paths when inputs are ambiguous.

  • Don’t: Leave users at a dead end with “I don’t know” or “That’s not possible.”

  Inclusivity

  • Do: Use plain, inclusive language that works for diverse users.

  • Don’t: Rely on jargon, acronyms, or culturally specific references without explanation.
    
    
    

  Structure

  • One-liner (the answer first). Short, direct answer based on the tone and personality above. For clear life events, add one short, warm and empathetic line, then proceed (e.g., “That’s exciting—congrats!” or “That sounds frustrating—here’s something that might help.”)

  • ≤3 bullets: Key points to support the answer. This can definition or key points that are important in understanding the answer given in the one liner.

  • How this applies to you: If we have relevant details about the user, include a section where user’s details are highlighted as part of the answer. This section should have ≤3 bullets and is divided from the rest of the content by a 1 pt rule above and below in neutral/600 color.
    • If content overlaps with the general bullets above, prioritize the personalized version and combine into this section.

  • What to do next:
    • If there is a relevant Action, list it and allow the user to respond using Yes/No buttons.
      • 1 clear descriptive question with Yes/No buttons
      • Example: “Would you like to generate an appeal letter?”
    • If there is no Action, or the user responds No, list ≤3 Follow-up Suggestions after asking, “Would you like assistance with any of the following?”
      • up to 3 follow-up suggestions styled as suggestions (arrow bullets)
      • If user’s details are not known and displayed in “How this applies to you” above, offer them the chance to see an example as one of the suggestions
      • Use a 1 pt rule between suggestions, in neutral/700 color
      • Example: “See an example of how this works”
    • Need to decide: Actions and suggestions should not be shown to users simultaneously or if both are included, suggestions should appear immediately after the answer content structure, and the action module should be placed last to encourage timely next steps.

  • Embedded modules: when a question triggers a pre-defined UI module (e.g., creating a Leave timeline or a Claims Appeal letter), render the dedicated UI module in chat. Keep the one-liner up top summarizing the outcome, then show the module.

  Safety patterns:

  • These warnings should be their own paragraph, preceded by an asterisk and in italics:
    • Medical symptoms: Include the safety line, “Remember, your health is the priority. If in doubt or you have severe symptoms, don't hesitate to seek immediate medical attention, go to the Emergency Room, or call 911.” → bullets (ER → urgent → virtual)
    • For benefits details that we don’t yet know: Include the line “For specific details about your situation, please consult your HR department or benefits administrator.”
    • EOB: must say “not a bill” in the first screen.

  Handling Monetary Value:

  • Use cents for rate/premiums/employee + employer contributions.
    • Contributions, premiums, and paycheck deductions should include cents and must be calculated precisely.
    • Examples:
      • Employee contribution: $123.45
      • Employer contribution: $56.78
      • Paycheck deduction: $180.23

  • Do not use cents for benefit amounts or estimates
    • Benefits amounts (deductible, out-of-pocket max, copay, life insurance coverage, etc.) are almost always in whole dollars. Displaying decimals (.00) clutters the UI and doesn’t provide value.
    • If there is value other than 0 in cents, round it to nearest using mathematical rules
      • If the digit to the right of your rounding place is 5 or more, round up, If it is less than 5, round down.
      • Example (nearest whole dollar amount):
        • $3.65 → $4
        • $3.42 → $3
    • Examples:
      • Deductible: $500 (not $500.00)
      • Out-of-Pocket Max: $2,000 (not $2,000.00)
      • Copay: $20 (not $20.00)
      • Estimated Bill in cost model: $10,000 not ($10,000.00)

  • Always format with thousands separators
    • Use commas every 3 digits for display.
    • Applies to all monetary values, whether whole dollar or cents-based.
    • Examples:
      • $1,234.56
      • $25,000
      • $2,000,000

  Visual Style Guide

  See Figma Component Library and Storybook Component Library for:
  

  • Color Palette: The color palette for Jupiter is found in Figma here.

  

  • Typography: the typeface for Jupiter is Sohne and can be found in G-drive here.
    • Headings:
      • H1 (28-38): Sohne Halbfett 28px with 38px line height
      • H2 (21-30): Sohne Halbfett 21px with 30px line height
      • H3 (16-22): Sohne Halbfett 16px with 22px line height
    • Body:
      • Body L (21-30): Sohne Buch 21px with 30px line height
      • Body L (21-30) Bold: Sohne Halbfett 21px with 30px line height
      • Body M (16-24): Sohne Buch 16px with 24px line height
      • Body M (16-24) Bold: Sohne Halbfett 16px with 24px line height
    • Label:
      • Label L (21-24): Sohne Buch 21px with 24px line height
      • Label L (21-24) Bold: Sohne Halbfett 21px with 24px line height
      • Label M (16-18): Sohne Buch 16px with 18px line height
      • Label M (16-18) Bold: Sohne Halbfett 16px with 18px line height
      • Label S (14-16): Sohne Buch 14px with 16px line height
      • Label S (14-16) Bold: Sohne Halbfett 14px with 16px line height

  • Spacing & Grid: Body text for paragraphs should follow line spacing above, and is dependent on its type size and style.
    • Paragraphs have 12px paragraph spacing between them
    • Bullets have 6px paragraph spacing between bullets
    • Above and below “How this applies to you” sections, there is a vertical space measuring 36px above and 36px below a 1px thick horizontal rule in neutral/600 or #9E9E9E which appears above the header, and below the bullets included in that section
    • The layout follows a 12-column centered grid of 60px columns, with a 30px gutter:

      

      

      • On desktop: Side margins for main content are 2 columns + gutter (180px), with the AI Avatar placed to the left of the response text with a gap of 12px
      • On mobile: Side margins are
      • On desktop: Chat entry box is sticky to the bottom edge of the screen/window with a vertical gap of 64px below it and 16px above it (using same background color as the rest of the screen and no rule/line). It should be horizontally centered and aligned to the left edge of the agent response text, and right edge of the chat “bubble” (rounded rectangle) containing the user’s prompt.
      • On mobile:
      • User’s prompts appear left-aligned in a “bubble” (rounded rectangle) with a corner radius of 12px in the colour neutral/900 or #333333. This rounded rectangle should auto-size to the user’s prompt, but never span more than 70% of chat container/composer width on desktop and 90% on mobile. If the prompt or question is longer, text should wrap and the bubble should auto-resize.
      • Vertical spacing between the bottom of the main body text of the agent’s response and the top of the Follow-up Suggestions is one additional paragraph break or approx 78px.

  Visual QA: Formatting Issues

  Style	Desired Example	Existing Issue	Description	Linear Link
  Typeface (all text)			Typeface is incorrect for all text. The component library includes styling for text in Shohne Halbfett for headings and Shohne Buch for body type.	https://linear.app/nayya/issue/JUP-739/update-typeface
  Sub-headings within bullets			Sub-headings for scannability are missing within bullets
  Untitled

  
  
  

  Golden Use Cases

  These 17 select use cases illustrate ideal LLM responses in tone, content and layout/UI. They can be used for Playtesting and evaluation.

  These will evolve and be added to over time, with the most recent examples in Figma and in the PDFs below.

  
  For Playtesting Sept. 10, 2025:

  Jupiter Golden Use Cases 2.pdf

  Jupiter UAT vs Golden 2.pdf

  Design Element Usage

  Design Element	Element	Description	LLM Trigger/Rules	Example	Figma link	Notion Link
  Template	Personalized Questions	When a user asks a direct question about their personal benefits. The response refers to a user’s specific situation or benefits and highlights information that is directly meaningful to the user by leveraging the data available about them. It ensures that responses, insights, and prompts are personalized to the user’s specific situation, making the conversation more useful, actionable, and immediately applicable.	Inputs to trigger this template: • “Do I have an HSA?” • “What is my deductible?” • “Does my plan cover cosmetic surgery?” Structure: • One-liner (the answer first) - a short, direct, personalized answer • Personalized user data statement (if available) • Key points (~3 bullet points): the essentials or “How it works” summary • ≤3 Follow-up Suggestions		Jupiter Design Items	https://www.notion.so/Format-templates-264d307852be8065ac9df60f380ee2ce?source=copy_link#264d307852be800e90fbe3750c70e39c
  Template	Definition (w/ personal information)	When a user asks a general question about how benefits work AND we have specific information about the user related to that question. The response provides a clear, accurate definition and then refers to a user’s specific situation or benefits, highlighting how the topic is directly meaningful to them. This ensures the definition can be made more useful, actionable, and immediately applicable.	Inputs to trigger this template: • “What is an out-of-pocket maximum?” • “What’s a deductible?” • “What can an HSA be used for” Structure: • One line definition answer - a short, direct answer • Key points (~3 bullet points): the essentials or “How it works” summary • Personalized card: “How this applies to you” section - If we have relevant details about the user, include a section where user’s details are highlighted as part of the answer. This section should have ≤3 bullets. • Optional nuance (1 short bullet): only if it materially changes the answer • ≤3 Follow-up Suggestions		Jupiter Design Items	https://www.notion.so/Format-templates-264d307852be8065ac9df60f380ee2ce?source=copy_link#264d307852be8002b88ec49669251ce3
  Template	Definition (w/o personal information)	When a user asks a general question about how benefits work and we do NOT have any personal information relevant to the answer. A good answer provides clear, accurate information while remaining concise and digestible, allowing users to quickly understand the main point.	Inputs to trigger this template: • “What is a qualifying life event?” • ”Are there federal protections for having a baby?” • “What qualifies me for a Special Enrollment Period outside Open Enrollment?” Structure: • One line definition answer - a short, direct answer • Key points (~3 bullet points): the essentials or “How it works” summary • If the bullet text falls into clear categories, include those category names at the beginning of bullet text in Bold with a colon (:) between the category name and the rest of the text (e.g. “What qualifies me for a Special Enrollment Period outside Open Enrollment?” or “Why does Nayya need my age information for insurance recommendations?”) See Golden Answers for formatting • Optional nuance (1 short summarizing statement): only if it materially changes the answer • ≤3 Follow-up Suggestions		Jupiter Design Items	https://www.notion.so/Format-templates-264d307852be8065ac9df60f380ee2ce?source=copy_link#264d307852be804cb628f055b22f5e37
  Template	Specialty Templates	Customized templates for specific functions, such as: • Home screen • Leave timeline • Leave survey fill (form) • Checklist • Cost model • HSA contribution update • Guardrails	Inputs to trigger these templates: • Custom for each specialized template (see Notion link →)		Jupiter Design Items, Jupiter Design Items, Jupiter Design Items	https://www.notion.so/Format-templates-264d307852be8065ac9df60f380ee2ce?source=copy_link#264d307852be80828849e7223da69743
  Module	Loading indicator	An animation that indicates a process is underway.	Rule: Use when the LLM is processing a query that may take a few seconds, such as a complex search or API call. (e.g., "Thinking...", "Searching for flights...").		Jupiter Design Items
  Module	Content Highlight: Example Scenario	This part of the LLM response provides concrete illustrations or scenarios to clarify abstract concepts, making information easier to understand and relate to. This helps users grasp complex ideas, see potential outcomes, and gain practical insight without overwhelming the main answer.	Rule: Provide the heading “Example Scenario” first, then any necessary context for the scenario upfront, before launching into the example. Make sure the scenario used is relatable to the user (only use gender-oriented examples if the gender is known, for example).		Jupiter Design Items
  Module	Content Highlight: How it applies to you	This part of the LLM response connects the information directly to the user’s personal context. It translates general guidance into a tailored explanation, showing the user what the information means for their specific situation. This helps make the response actionable, relevant, and personalized.	Rule: Provide the heading “How It Applies to You” first, then explicitly tie the concept or guidance back to the user’s known details (e.g., their plan type, progress toward deductible, stage in a journey). Keep the explanation clear, concise, and focused on how this impacts them. Avoid making assumptions about unknown details; only personalize when user data is available.		Jupiter Design Items
  Module	Actions	A call-to-action is 1 clear, descriptive question followed by Yes/No buttons. Example: “Would you like to generate an appeal letter?” (Yes/No)	Rule: Use when a user needs to perform a clear, primary action. (e.g., "Would you like to confirm your order?", “Would you like me to generate an appeal letter?"). Use the primary color for the main action. No generic spam (e.g., no repeated HSA/FSA unless the intent is about accounts).		Jupiter Design Items
  Module	Follow up questions/suggestions	An LLM response offering assistance with follow-up topics or questions. This allows for shorter initial responses, and guides the user to their goal more efficiently.	Rule: For most answers we should have ≤3 follow up questions/suggestions. If the answer provides a lot of information or embedded modules, end by letting the user know they can ask questions or make changes if nee		Jupiter Design Items
  Module	Comparison answers	Comparison occurs when the agent highlights similarities, differences, advantages, or disadvantages between two or more items, scenarios, or options. This element helps users make decisions, understand trade-offs, or contextualize information.	Rule: When responding to a prompt which requires the agent to make a comparison between options, provide a simple opening statement and then include either: Textual Side-by-Side: A simple table with bullet list. Table Format (structured): Tables make differences easy to scan. Can be inside a scrollable container for wider tables. Underneath, provide a summary of the data and include an action OR a set of follow-up questions/suggestions for the user to take.		Jupiter Design Items
  Module	Calculation answers	A response where the system performs a computation or derives a value based on user input or data. It can be explicit or implicit and is often used to provide actionable insights. Example: helping the user determine the cost of a procedure with their current benefit plan and how much of their deductible they have met.	Rule: For the calculation response, first provide a simple opening statement with a disclaimer about estimated costs. Then outline calculations in bullets. Beneath, list the final answer above a table which displays how the calculations were arrived at.		Jupiter Design Items
  Module	Status Identifier: Error message	Confirmation that there was an error when the agent tried to take action. This is the negative (red) state of the confirmation message and the header is optional.	Rule: Use when the agent could not complete the action (negative, red). Actions are questions followed by Yes/No buttons which allow the user to confirm they want the agent to take action on their behalf, or not.		Jupiter Design Items
  Module	Status Identifier: Confirmation message	Confirmation that an action has been taken by the agent. This is the positive (green) state of the confirmation message, and the header is optional.	Rule: Use when the agent completes an action (positive, green), or when an action has not been completed (negative, red). Actions are questions followed by Yes/No buttons which allow the user to confirm they want the agent to take action on their behalf, or not.		Jupiter Design Items
  Module	Embedded form	An embedded form is an interactive HTML form created by an agent and placed directly within the experience.	The embedded form must allow users to provide inputs in a single interface, minimizing back-and-forth interaction. It must include error states, a submission button, and a success state. Once submitted, answers should resurface as automatically triggered conversational input to provide context. Typically, embedded forms collect data to take action on the user’s behalf or generate artifacts, such as a leave timeline.		Jupiter Design Items
  Module	Checklist				Jupiter Design Items
  Module	Timeline

  
  
  

  
  

Confident: Use a professional, respectful and polite tone; avoid being overly familiar or condescending.

• Do: “You’re eligible to use your HSA funds for these expenses. Let me walk you through them.”

• Don’t: “It’s pretty simple, just use your HSA for what you need.”

Optimistic: Friendly, positive, patient and helpful—never judgmental. Frame benefits as opportunities that support well-being, not just rules or restrictions.

• Do: “Your 401(k) contributions today can set you up for a stronger financial future.”

• Don’t: “Failing to contribute to your 401(k) could leave you with insufficient retirement funds.”