Sonarist project

Sonarist / Design system

Documentation v1.0.0 · Work in progress · UI prototype with separate server foundations

Design system contents

Foundations

Content, names and time

Write useful subjects, restrained metadata and explicit feedback without overstating prototype behavior.

On this page

Writing rules

  • Subjects identify the customer’s problem or next decision.
  • Snippets summarize the latest content without duplicating all metadata.
  • Use Needs reply, Waiting, Follow up, Reference, Closed and Junk consistently.
  • Status messages distinguish local preparation from delivery or persistence.
  • Error text explains what failed and which action can recover.
  • Keep sender names and addresses visible where email identity matters.

Time and feedback

Time and feedback
Source expressionLimit
waitingAge and waitingMinutesFixture-readable age plus numeric sort value; not calculated from a live clock here
lastActivity and sentAtDisplay strings; locale and timezone are not normalized DTOs
Follow-up dateIntl month/day from selected date at noon; year is omitted
Draft saved500ms local fingerprint timer, not durable storage
Toast3200ms local message; no proof of provider success
Message originalSynthesized source view from fixture fields, not an archived raw MIME email

Fictional evidence

Preserve realistic paragraph lengths, varied relationships and conversation states. All addresses in capture copies use example.com. Product names remain source labels, but their sample descriptions are fixture content and must not be treated as factual descriptions of those products.

Source references

Source references
FileResponsibility
lib/mock-data.tsSample content
components/inbox/follow-up-dialog.tsxDate presentation
components/inbox/composer.tsxDraft feedback
components/helpdesk-app.tsxToast duration

Examples from the app

Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.

Conversation Row · Component detail · Light · Desktop · 2044 × 190 px
Follow Up · Component detail · Light · Desktop · 1152 × 868 px
Follow Up · Component detail · Light · Desktop · Date Selected · 1152 × 868 px
Message Details · Component detail · Light · Desktop · 1152 × 948 px
Message Details · Component detail · Light · Desktop · Original · 1152 × 1468 px

Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0