# Mood Journal App Design: Quotes, Events, and Scores

Source: https://www.jvds.cn/en/share/ui-design/nonarcissai-dialogue-cases-community-u141
Language: en
Published: 2026-10-22
Author: JVDS Design Studio

NoNarcissAI uses off-white, pale pink, and brown, with separate containers for quotes, recordings, and case cards. Beyond gentle visuals, original words and organized results have distinct identities; scores, trials, and saved states also need their own explanations.

## Key takeaways

- Grouped quotes and input retain context, while case cards distinguish recording from organization.
- Zero values, trial activation, and saving need separate explanations; gentle visuals cannot replace states.

## Quotes and recordings retain a specific reply context

The UI kit places a previous question in pale pink before a reply, with waveform, timer, cancel, pause, and send in another group. Collapsed recording and date selector appear separately, sharing rounded corners and brown actions.

Quotes help recall what a sentence answers. Voice and text sources remain distinct, and cancelling a segment need not mean deleting the entire draft. These input components suit conversational tools retaining context.

JVDS would follow switching from partial recording to text: what remains unsubmitted, what is saved, and which object cancellation affects. These are combined components without full receipts; a waveform cannot prove audio was saved.

![Quoted dialogue, recording waveform, and date selector components](https://www.jvds.cn/upload/2026/1008/d187-tp/u141-i1.webp)

Recording controls below the quote | Cancel, pause, and send have distinct states and scopes.

## Case cards have names; zero still needs a state

Cases stacks cards, with names on the first two and two metrics beside colored strips. The third has no title, two zeros, and gray strips. Names, numbers, and colors share an area for quick differences.

Those zeros may be valid results, missing input, or organization in progress, with no explicit status. [Define state](https://www.jvds.cn/en/share/ui-design/b2b-business-state-model) before choosing values, placeholders, or progress. Gray helps; text makes meaning independently readable.

Values need sources and scope, plus supporting records. JVDS makes no personality or relationship judgments from metrics; precision does not mean complete explanation. Original words, event organization, and other people’s stories should retain source cues rather than merging through shared corners.

![Cases metrics and a gray third card with zero values](https://www.jvds.cn/upload/2026/1008/d187-tp/u141-i2.webp)

Two zeros and gray strips in Case 3 | Missing title and status leave the zeros’ identity unclear.

## Trial timelines expose starting and ending

The portrait-backed trial lists Today, a reminder two days later, and ending three days later before a brown start button. Adjacent onboarding creates a case through dialogue and audio examples; starting a trial and recording an event are different actions.

The timeline scans more easily than “free trial” alone but needs actual start/end, payment, and [cancellation conditions](https://www.jvds.cn/en/share/ui-design/saas-subscription-billing-ux). Whether case creation activates trial should be stated in the flow, not inferred from adjacent images.

JVDS would give subscriptions and records separate feedback, identifying saved events and organization in progress. Soft photography can stay while trial conditions and sources retain stable places.

![Three-day trial timeline beside two case-creation onboarding screens](https://www.jvds.cn/upload/2026/1008/d187-tp/u141-i3.webp)

Trial reminder and ending nodes | Start, payment, and the relation to event creation need clarity.

## Frequently asked questions

### Can unfinished cases show zero scores?

State the status first. Missing input, processing, and valid zero differ; placeholders should not resemble established results.

## Design review checklist

- Specify which content recording cancellation affects.
- Distinguish placeholders, processing, and valid values.

## Make record sources and states recognizable

If your conversational, mood, or diary product needs clearer input and review, begin with original words, organized results, and saved states.

JVDS Design Studio provides UI/UX design, website design, and development services to help organize page content, interface structure, and implementation needs.

[Contact JVDS to discuss your project](https://www.jvds.cn/contact)