How we built Damru
One soft shape that does a lot of work.
Every curve, colour and movement has a reason. Here is how we designed Damru, from the first dot to 25 moods.
Construction
One shape. Two eyes. Nothing else.
- Silhouette
- A squircle dome: rounder on top, settled and flat at the base. One continuous curve with no corners, so it reads at 16px and at 600px.
- Face
- Two glossy capsule eyes, 18 × 31, set 36 apart on a line 56% down. No mouth: Damru speaks with its light and its eyes.
- Material and light
- Soft-touch pearl, like warm silicone. Key light from the top left, a cool rim on the right, and a coloured glow from inside at the base.
- Rules
- Proportions never change between products. Below 80px the eyes grow 35% and the cheeks drop out, so the face stays readable.
Built in 3D
It started as a dot.
One point of light. Before a face, before a name, just the feeling we wanted: calm, and close by.
Then a softer shape.
Not a robot and not a circle. A dome you want to poke, rounder on top, settled at the base.
Pearl, not plastic.
A glossy white body with a big soft highlight, so it sits well on light and dark screens alike.
A light inside.
Coral into violet, pooled at the base. That light is how Damru shows what it’s doing, even at 24px.
Two eyes. No mouth.
Capsule eyes and a little blush. Everything else comes from the eyes, the light and a gentle squash.
Expressions
25 moods. One Damru.
Every mood is built from the same four levers: eye shape, inner light, body squash and, only when needed, hands. The silhouette never changes. Hover or tap one to see it move.
Voice life cycle
What Damru is doing. Seen most of the time.
- Sleeping: Nobody around
- Waking: Wake word heard
- Hey!: Greets you
- Listening: You’re talking
- Thinking: Understanding
- Searching: Looking it up
- Working: Doing the task
- Speaking: Answering aloud
- Idle: Ready for more
Reactions
Personality. Short, rare, never in the way of an answer.
- Happy: Task done
- Excited: Big news
- Laughing: You joked
- Proud: Streak or goal
- Celebrate: Milestone hit
- Curious: Needs a detail
- Surprised: Unexpected result
- Confused: Didn’t catch that
- Suspicious: Risky action
- Shy: Got a compliment
- Playful: Tapped once
- Bored: Long wait
- Drowsy: Going to sleep
- Sad: Couldn’t do it
- Scared: Error or warning
- Angry: Tapped too much
Light language
The light tells you the state.
Even when Damru is 24px in a corner, the colour and rhythm of its inner light say what it’s doing.
- Sleeping: Dim, cool and slow.
- Listening: Bright, quick pulse.
- Thinking: Slow rise and fall.
- Speaking: Pulses with the voice.
- Done: Warm bloom, then rest.
- Needs help: Soft blue.
- Error: Short red flash.
Every size
Same Damru, from hero to menu bar.
Small sizes get bigger eyes and lose the cheeks, so the face never turns into a smudge.
- Hero: 200px
- Widget: 120px
- Dock: 64px
- Menu bar: 40px
- Badge: 24px
Design and motion principles
Cute, but it works for you.
Six rules that keep Damru delightful without turning a work tool into a game.
Always alive
Breathes, blinks and glows softly, even when nothing is happening. Breath 4s, blink every 5s.
Light leads, body follows
The inner light reacts first: brighter when listening, pulsing with the voice when speaking. Listening 1.35× light, 1.1s pulse.
Squash, never wobble
All motion squashes from the base like a soft toy. Never more than 5%, never rubbery. Bounce 1s, eased in and out.
Hands only for gestures
Hands appear to wave, cheer, think or hide, then disappear. Never idle limbs. In 180ms, out 240ms.
Calm by default
Reactions last under 1.5s, then settle back. They never delay or cover the answer. 1.5s at most, then idle.
Readable anywhere
Works from 24px to full screen. With reduced motion on, poses change without movement. 24px minimum, respects reduced motion.