PurpleSpace

What is PurpleSpace?

PurpleSpace is a sleep companion app that gently supports users through music, bedtime stories, and reflection.
It’s not just about falling asleep—it’s about helping users feel emotionally safe, calm, and cared for at the end and the beginning of each day.

What makes it special?

| 🧠 Emotion-first design | Every decision—from visuals to interactions—was made to support emotional ease and trust. |
| 🎵 Multi-modal sleep tools | A combination of ambient music and bedtime storytelling creates a holistic sleep experience. |
| 🌫️ Reflective UI, not data-heavy | We visualize sleep not through cold metrics, but through soft, affirming visual narratives. |

https://www.youtube.com/watch?v=f1jmBCrjELQ 三张卡 半透明的感觉的动效 模糊 科技感整个就是这个感觉

What will I show you?

In this case study, I focus on two key areas of the PurpleSpace experience:
the Motion Design System and the Sleep Mirror feature.
Both were designed with a deep care for emotional timing, accessibility, and gentle transitions.
They reflect our belief that design should not only function—but comfort.

两张卡，歪的hover后变成正卡，点击就到达相应位置 下面：

Motion design system

  1. 动效设计原则（原则、语调、节奏）

  2. motion tokens（节奏定义、easing 曲线、状态反馈）

  3. 示例组件：Story Card、Sleep Bubble、Emotion Tag 的动画演示

  4. 组件图谱：哪些组件统一用什么 token

  5. 视觉 + 行为的一致性成果

    重点：如何让系统感情化 + scalable

Motion Design System

Motion Principles

Accessible

Motion should support — never overwhelm — the user. We respect motion preferences and avoid visual fatigue. All transitions are slow, stable, and can be reduced when needed.

purposeful

Every animation serves a function — guiding attention, signaling change, providing feedback, or reinforcing meaning. Motion always answers the question: what just happened, and what happens next?

consistent

Motion patterns are reused across contexts to maintain a predictable rhythm and emotional coherence. Shared motion tokens and timing curves build trust across surfaces.

Emotionally Attuned

Motion in Purplespace is designed to feel gentle, soft, and human.
It adapts to the emotional context — avoiding sudden jumps and favoring fluid, comforting transitions that feel natural to the body and mind.

Transitions & Timing

Choreography

Atomic animation patterns

Motion Tokens

Structure

Motion tokens define animation behavior across platforms in a consistent, scalable, and semantic way. Each motion token follows a standardized structure composed of the following properties:

Name(Required) - The unique identifier for the token. It follows a structured format to ensure clarity and consistency.

  • Format: motion.[category].[emotion]

  • Example: motion.entry.calm

  • The category (e.g., entry, exit, hover) indicates the interaction type.

  • The emotion (e.g., calm, soft, uplift) conveys the intended mood or tone.

Type (Optional) - Specifies the design decision category. In this case, $motion indicates this token is related to animation or transitions. While optional, it can support tooling and classification across token types.

Scope (Required) - Indicates the intended usage context of the token.

  • "Global": used across the entire system

  • Can also be component-specific if needed (e.g., "Component.Modal")

Value (Required) - Defines the actual motion behavior. Typically includes duration and easing function, e.g.:

  • "300ms ease-in-out"

  • "200ms cubic-bezier(0.4, 0, 0.2, 1)" Supports string values that can be directly applied in code.

W3C Alignment

We follow W3C’s core principle: design tokens should express design decisions in a platform-agnostic, reusable way.

Our motion token structure — Name, Type (optional), Scope, and Value — is designed for clarity and consistency across teams. While we’re not fully migrated to the official W3C format, our system aligns closely with its intent and will adapt as the spec evolves.

Sleep Mirror

让数据变得温柔，让情绪被看见。”

  • 背后洞察：睡眠其实是情绪问题，数据无法解释一切

  • 情绪 + 睡眠数据可视化（折线、气泡、渐变）

  • 关键动效：泡泡浮动、情绪波纹、慢节奏消散动画

  • 用户反馈（"我感受到有人理解我"）

  • 可衡量结果（Retention / DAU / NPS）

Sleep mirror

Daily Active Users (DAU) increased by +12%

  1. 7-day retention improved by 8 percentage points

  2. Net Promoter Score (NPS) rose by +14, reflecting stronger user loyalty and emotional connection

Reflection

在这个项目中，我真正理解了 motion system 的意义：
它不只是让界面动起来，而是让用户的情绪得以流动、被安放。
Sleep Mirror 帮我实践了这一点——通过动效的节奏、颜色的语调、数据的温度，
我构建的是一个既“可维护”，又“有人情味”的体验系统。）