Skip to content

For Product Owners

Who this is for. The product owner whose primary responsibility is shaping what the product becomes — the surface's intent, density, voice, empty states, error tone, status labels. At SageOx this role is still a builder: you write copy that ships to customers, you shape the surface directly in Claude Design or by editing the live component catalog, and you have commit access. "Product owner" is what we call the role that the industry calls PM; the rename reflects that the job is shipping product, not managing a backlog.

Sister pages: for design engineers (refining the harness itself) · for product engineers (consuming tokens in product code).

This page is the writing reference for any SageOx interface — voice, tone, microcopy, status labels, density. The same rules apply to anyone shipping UI copy, including design engineers and product engineers; this is just the entry point for the person whose primary work is shaping it.

Voice Principles

Principle Expression
Clear Say it once, say it well
Confident Statements over questions
Helpful Guide without condescending
Calm No urgency theater

Tone Examples

Error Messages

Avoid Use
"Oops! Something went wrong!" "Upload failed. Check your connection."
"Error 500" "Server unavailable. Try again in a moment."
"Invalid input!!!" "Enter a valid email address."

Success Messages

Avoid Use
"Awesome! You did it!" "Changes saved."
"Successfully completed successfully" "Export complete."
"Yay! 🎉" "Report generated."

Buttons

Avoid Use
"Click here to submit" "Submit"
"Go" "Search"
"OK" "Confirm" or "Save"

Information Density

SageOx interfaces are high density by default.

Why: Users are experts who scan rather than read.

How: - Tables over card grids - Inline actions over menus - Data visible, not collapsed

Density Spectrum

LOW DENSITY                           HIGH DENSITY
(Marketing sites)                     (Power user tools)
      ←──────────────────────────────────→
                                    SageOx sits here

Hierarchy

Every screen should answer:

  1. What is this? (Title)
  2. What can I do? (Actions)
  3. What am I looking at? (Content)
  4. What's the status? (Feedback)
┌─────────────────────────────────────┐
│ 1. Title (what is this?)            │
│                                     │
│ 2. Actions ──────────────► [Button] │
│                                     │
│ 3. Content (data, lists, etc.)      │
│                                     │
│ 4. Status (toast, inline feedback)  │
└─────────────────────────────────────┘

Labels & Microcopy

Form Labels

Avoid Use
"Please enter your email:" "Email"
"Your password should be..." Password requirements below field
"Click the button below" Button label is sufficient

Helper Text

  • One line only
  • No periods at end
  • Answers "why" not "what"
Email
[____________________]
We'll send a verification link

Placeholders

  • Example data, not instructions
  • Lowercase, no punctuation
Search
[e.g. project name, tag]

Empty States

Structure: Headline + Explanation + Action

┌─────────────────────────────────────┐
│                                     │
│        No projects yet              │
│                                     │
│   Create your first project to      │
│   start organizing your work.       │
│                                     │
│         [Create Project]            │
│                                     │
└─────────────────────────────────────┘

Number Formatting

Type Format
Large numbers 12,456 (with comma)
Percentages 12.5% (one decimal)
Currency $1,234.56
Dates Jan 15, 2024
Times 2:30 PM
Durations 4m 23s

Status Indicators

Status Color Example
Active/Running Success green ● Active
Idle/Pending Neutral gray ○ Idle
Warning Warning amber ◐ Attention
Error/Failed Danger red ● Failed

Capitalization

Element Style Example
Titles Title Case "Project Settings"
Buttons Title Case "Save Changes"
Labels Sentence case "Email address"
Body text Sentence case "Enter your email."
Menu items Sentence case "Export as PDF"