Phase 2 · Sensory Layer · Clear Day

Sound &
Motion.

The half of Reflekt that most products never design. Sound defines the emotional register before a single word is spoken. Motion defines whether the product feels alive or mechanical. Both must be as considered as every screen we built in Phase 1.

2A · Sonic Identity — 3 Core Sounds 2B · Motion Language — 4 Principles + CSS
2A · Sonic Identity Brief

Three sounds.
One voice.

This brief is precise enough for a sound designer to execute all three sounds in 3 days without a single follow-up question. Every parameter is defined. Every constraint is explicit.

SOUND_01
🌅
Wake Tone
Luma activating. A warm lamp switching on.
Duration600–800ms
Frequency440–660 Hz
CharacterSoft sine + warm overtones
Volume-18 dBFS max
SOUND_02
✓
Confirm Tone
Action complete. A small thing placed precisely.
Duration200–280ms
Frequency520–660 Hz
CharacterClean transient, fast decay
Volume-14 dBFS max
SOUND_03
◎
Alert Tone
Attention needed. A caring hand on a shoulder.
Duration2× 400ms, 200ms gap
Frequency330–440 Hz (lower = calmer)
CharacterRounded, no sharp transient
Volume-10 dBFS · steady level
SOUND_01 Wake Tone — Full Specification
Emotional Brief
The feeling of a warm lamp switching on in a quiet room. Present but not intrusive. The senior should register it subconsciously before they consciously notice it.
Not: a phone notification, a door chime, an alert, anything that breaks concentration.
Target: a senior who is asleep should not be startled. A senior who is occupied should notice it gently.
Technical Parameters
Frequency: Begin at 440Hz (A4), rise softly to 550–660Hz over first 200ms
Waveform: Sine wave with subtle warm harmonics (2nd harmonic at -12dB)
Envelope: Slow attack 150ms · Sustain 300ms · Release 250ms
Duration: 600–800ms total
Volume: -18 dBFS maximum. This is quiet.
Stereo: Mono. No stereo widening.
Reference Tracks — Listen For
macOS Startup Chime (pre-2016)Warm sine, unhurried, never anxious
Sonos system tonesLow volume, clean, domestic — never clinical
Headspace app loading toneSoft, present, no sharp transient
Tibetan singing bowl (short strike)Warm overtones — the quality, not the sound
Must Not Sound Like
Any iOS/Android notification sound
A microwave beep or timer
Medical equipment alerts
A doorbell (too functional)
Anything with a sharp attack transient
SOUND_02 Confirmation Tone — Full Specification
Emotional Brief
The feeling of a small wooden block placed precisely on a table. Clean, final, satisfying. The senior has done something — this sound confirms it was received.
Triggers: reminder confirmed, voice postcard sent, message received, any completed action.
Target feeling: a tiny, private satisfaction. Not celebration. Not reward. Just: done.
Technical Parameters
Frequency: 520–600Hz, slight descending pitch at end (600→520Hz over 80ms)
Waveform: Clean sine. Minimal harmonics.
Envelope: Fast attack 20ms · Very short sustain 60ms · Medium release 180ms
Duration: 200–280ms total — short, decisive
Volume: -14 dBFS. Slightly louder than wake — it's confirming an action.
Reference Tracks — Listen For
Apple Pay confirmation toneShort, clean, decisive — not celebratory
Notion checkbox completion soundSoft satisfaction without fanfare
Calm app session end toneWarmth + finality without ceremony
Must Not Sound Like
A game achievement / level-up sound (too celebratory)
A cash register (transactional)
Identical to the wake tone (must be distinguishable)
Any two-note ascending pattern (too cheerful)
Senior Accessibility Note
Many seniors have reduced high-frequency hearing. Keep fundamental frequency below 700Hz. Never rely solely on very high frequencies to convey the tone's character.
SOUND_03 Alert Tone — Full Specification
Emotional Brief — The Hardest Sound to Design
This sound must do two contradictory things simultaneously: communicate urgency and avoid panic. A senior hearing this should feel "something needs my attention" — not "something terrible is happening."
The analogy: a caring hand placed on a shoulder. Present, attentive, not alarming.
Two-pulse pattern: The double pulse signals "this is intentional, not a glitch" without being aggressive. Gap between pulses must be 180–220ms — long enough to register as two distinct sounds.
Technical Parameters
Pattern: Pulse 1 (400ms) · Gap (200ms) · Pulse 2 (400ms)
Frequency: 330–440Hz. Lower than wake/confirm. Lower Hz = calmer psychology.
Waveform: Rounded square or triangle — slightly more presence than sine but no harsh edges
Envelope per pulse: Attack 40ms · Sustain 280ms · Release 80ms
Volume: -10 dBFS — louder than other tones. Must be heard across a room.
Repetition: Plays once, then 8-second silence, then once more if no response. Max 3 repetitions.
Reference Tracks — Listen For
Apple Watch haptic alert (translated to audio)Urgent but not alarming — the quality to capture
Withings health monitor alertMedical-adjacent urgency without hospital feel
Nest Protect pre-alert chirpTwo-pulse pattern done well
Must Not Sound Like
An ambulance or emergency vehicle
A fire alarm or smoke detector
Any hospital monitor beep
A continuous tone (no sustained alarm sound)
High-frequency beeping above 800Hz
Anything that would cause a senior with heart conditions to feel adrenaline
Critical Design Note
Test this sound with real seniors aged 70+ before approving. What sounds "calm" to a 35-year-old designer may sound alarming to a 75-year-old living alone. This is non-negotiable validation.
For the Sound Designer — Brief Summary
SoundDurationHz RangeCharacterVolumeTest With
Wake600–800ms440–660 HzWarm sine, slow attack-18 dBFSSeniors asleep / occupied
Confirm200–280ms520–600 HzClean, fast decay-14 dBFSDoes it feel satisfying, not celebratory?
Alert2× 400ms + gap330–440 HzRounded, two-pulse-10 dBFSSeniors 70+ — does it cause anxiety?
Deliverable: 3 .wav files at 44.1kHz / 24-bit. Also provide 3 .mp3 at 192kbps for app delivery. All sounds must work on Luma's speaker hardware — test on physical device before final delivery.
2B · Motion Language

Four principles.
Everything moves with intention.

Every animation in Reflekt follows these four principles. No random transitions. No decorative motion. Each movement has a reason and a feeling. All CSS is copy-paste ready for your dev team.

The governing metaphor for all Reflekt motion: breathing, not machinery. Things arrive like someone entering a room — unhurried. They leave like someone stepping back — not disappearing. State changes feel like the same light changing quality, not a channel switch. The product should feel alive without feeling anxious.
P1
Entrance — breathing in
Content arrives from below with a fade. Never pops in. Never bounces. The easing curve decelerates to stillness — like something settling, not stopping. Staggered reveals for multiple elements: each item enters 60ms after the last.
Live Demo — Click to replay
Lily · Safe
Safe right now
No urgent concerns. Activity appears normal.
Copy-paste CSS — Entrance Animation 
/* ── REFLEKT ENTRANCE ── */
.reflekt-enter {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 480ms cubic-bezier(0.2, 0, 0, 1),
    transform 480ms cubic-bezier(0.2, 0, 0, 1);
}

.reflekt-enter.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — add to each child */
.reflekt-enter:nth-child(1) { transition-delay: 0ms }
.reflekt-enter:nth-child(2) { transition-delay: 60ms }
.reflekt-enter:nth-child(3) { transition-delay: 120ms }
.reflekt-enter:nth-child(4) { transition-delay: 180ms }

/* JS: add 'visible' class on mount or scroll into view */
// element.classList.add('visible')
P2
State Transition — the same light changing
When the app state changes — CALM to ALERT, CALM to FAMILY — the content crossfades. It does not slide. It does not flip. The hero card fades out at 200ms, new content fades in at 300ms. The overlap creates continuity. Different states use slightly different durations — alert transitions are 20% faster to communicate urgency without jarring.
Live Demo — Click a state to transition Notice the crossfade quality
CALM
Safe right now
→
Click the card to cycle through states
Copy-paste CSS — State Transition 
/* ── REFLEKT STATE TRANSITION ── */
.state-card {
  transition:
    background-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
    color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Content inside crossfades */
.state-content {
  transition: opacity 200ms ease-out;
}
.state-content.changing {
  opacity: 0;
}
.state-content.changed {
  transition: opacity 300ms ease-in;
  opacity: 1;
}

/* Alert transitions: 20% faster for urgency */
.state-card[data-state="alert"] .state-content {
  transition-duration: 160ms, 240ms;
}
P3
Touch Feedback — immediate and confirming
Every tap gets instant visual feedback. Scale to 0.96 on press — subtle but perceptible. Release returns with a spring-like ease-out. Max 120ms for press, 180ms for release. Never more than 300ms total — accessibility rule. No bouncing past 1.0 scale — this is not a game.
Live Demo — Tap / Click the buttons Feel the feedback quality
Primary CTA
Accent CTA
Status dot — ambient breath animation (3s loop)
Copy-paste CSS — Touch Feedback 
/* ── REFLEKT TOUCH FEEDBACK ── */
.reflekt-btn {
  transition:
    transform 120ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 120ms cubic-bezier(0.2, 0, 0, 1),
    opacity 120ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.reflekt-btn:active {
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Release: spring back */
.reflekt-btn:not(:active) {
  transition:
    transform 180ms cubic-bezier(0.34, 1.2, 0.64, 1),
    box-shadow 180ms ease-out;
}

/* Status dot — ambient breath */
.status-dot {
  animation: dotBreath 3s ease-in-out infinite;
}
@keyframes dotBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,138,90,0.4) }
  50%      { box-shadow: 0 0 0 6px rgba(74,138,90,0)   }
}
P4
Ambient — the screen breathes
The Luma screen is never truly still. The time opacity breathes at a 6-second cycle. The greeting fades gently at 8 seconds. The teal radial glow pulses at 4 seconds. These are slow, biological rhythms — the product should feel like something that is present, not just displayed. All animations loop indefinitely with ease-in-out curves.
Live Demo — Luma ambient screen (watch over 10 seconds)
10:47
Friday · February 27
Good morning, Mary.
I'm here if you need me.
"Just say my name whenever you're ready."
Copy-paste CSS — Ambient Animations 
/* ── REFLEKT AMBIENT MOTION (LUMA SCREEN) ── */

/* Time display — slow breath, 6s cycle */
.luma-time {
  animation: timeBreath 6s ease-in-out infinite;
}
@keyframes timeBreath {
  0%, 100% { opacity: 0.88 }
  50%      { opacity: 0.72 }
}

/* Greeting — slower fade, 8s cycle */
.luma-greeting {
  animation: greetFade 8s ease-in-out infinite;
}
@keyframes greetFade {
  0%, 100% { opacity: 0.65 }
  50%      { opacity: 0.48 }
}

/* Background teal glow — 4s pulse */
.luma-glow {
  animation: ambientPulse 4s ease-in-out infinite;
}
@keyframes ambientPulse {
  0%, 100% { opacity: 0.5; transform: scale(1)   }
  50%      { opacity: 1;   transform: scale(1.1) }
}

/* HELP state: gentle urgency pulse */
.luma-help-glow {
  animation: helpGlow 2s ease-in-out infinite;
}
@keyframes helpGlow {
  0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,0.4)    }
  50%      { box-shadow: 0 20px 60px rgba(138,48,48,0.2) }
}

/* Accessibility: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .luma-time, .luma-greeting, .luma-glow, .luma-help-glow {
    animation: none;
  }
}
Easing Curve Reference — All Four Curves
cubic-bezier(0.2, 0, 0, 1)
Entrance animations. Decelerates to stillness. The primary curve.
cubic-bezier(0.4, 0, 0.2, 1)
State transitions. Standard material ease. Familiar and smooth.
cubic-bezier(0.34, 1.2, 0.64, 1)
Touch release only. Slight overshoot (1.2) for spring quality. Never for entrance.
ease-in-out (ambient)
Ambient loops only. Symmetric — starts and ends at the same speed.
Motion Accessibility — Required
Max 300ms for any interactive feedback — WCAG 2.1 timing requirement
All ambient loops must respect prefers-reduced-motion media query
No flashing content — no animation faster than 3 times per second
No horizontal scrolling animations — vestibular disorder risk
State transitions must not rely on motion alone to convey the change
Luma ambient motion is decorative — disable entirely on reduced-motion
Phase 2 complete. What comes next.
Phase 3 · Edge Cases
Luma mishear recovery. False alert handling. Extended no-response (senior is fine, just away). All scenarios scripted and designed — full screen states for each.
Phase 4 · Generative Layer
Onboarding arc Day 1→7 with visible progression. Memory Prompt feature. Three key onboarding moments designed as full screens.
Now · For your team
Send the 3-sound brief to a sound designer. Copy the CSS into your codebase. Share the motion spec with the Guangzhou dev team alongside Phase 1 screens.