A drop that leaves a mark

One gesture repeated throughout the entire experience. Something drops in. It colors the room. It leaves a mark. The marks form a picture.

Design Concept

Every interaction in the Clarity Engine is a drop landing in water.

A drop of information hits the surface. It ripples outward, coloring the environment. It settles into a mark. Marks accumulate. And when enough marks exist, a picture forms. That's clarity.

This isn't a metaphor bolted on. It's the shape of every element. The teardrop message. The orb. The color shift. The dot. The report. One idea, showing up everywhere.

The Shape

One form, expressed five ways

The drop shape is the DNA of the visual language. It shows up as a message bubble, as the orb, as a captured dot, as an insight tag. Always the same gesture: something arriving, leaving an impression.
The drop
→
Here's what we found...
As a message
→
As the orb
→
As a mark
→
Equity $101K
As an insight
The Ripple

When a drop lands, the room responds

The background subtly shifts color based on what kind of information was shared. A matching tag appears. The environment absorbs what you said. Like ink in water: the color spreads, then settles.
PreFi
1 item clarified
Since you bought this property, you've built about $101,500 in equity.
Captured: Equity $101,500
The room tints green. A fact dropped in.
The Lifecycle

Orb appears. Captures. Becomes a mark.

The orb is the drop before it lands. It hovers near what matters. When it captures, it warms. Then it shrinks, drifts to the top, and joins the other marks. Open the Clarity Report: all the marks spread out into your full picture.

Orb appears

Hovers near an insight. The advisor's attention.

Captures

Pulses warm. Something meaningful found.

Becomes a mark

Shrinks to a dot. Drifts to the top. Counter increments.

Marks spread

Open Clarity Report. Dots expand into your full picture.

The Table

The conversation drops things in. The workspace collects the marks.

Two channels, one surface. Like an advisor writing things down as you talk. The notes on the table and the words in the air are part of the same interaction. Edit a note, the advisor asks why. Say something new, a new note appears.

Conversation

Drops land here
"I want to lower my monthly payment"
"My max is $2,400/mo"
"Actually, shorter term might be better"

Workspace

Marks collect here
Lower monthly payment
Max $2,400/mo
⟳ Tension: shorter term ↔ lower payment
The Loop

Every drop deepens the picture

User shares something. The orb captures it. An artifact forms. Scenarios generate. The user reacts. Their reaction is another drop. The loop turns again. Each cycle, clarity sharpens. That's the engine.
User shares
Orb captures
Artifact forms
Scenarios generate
User reacts
System learns
The orb sits at the center. Every step is a drop landing, leaving a mark, forming the picture.
All Together

One screen. One idea. Every detail traced to the drop.

3 clarified
Log in
3608 Queen St Apt A
Redondo Beach, CA · 2018 · 2bd/3ba
Here's what we found on your place. Does this look about right?
Yes it is
Since you bought this property, you've built about $101,500 in equity. That changes what's possible.
Captured: Equity $101,500
I want to lower my monthly payment
Something else on your mind?
↑
Drop shapeTeardrop messages. The sharp corner points toward the speaker.
Ink in waterBackground tinted green. A fact dropped in and colored the room.
Orb lifecycleOrb appears warm near captured insight. Will shrink to a dot at top.
Marks formColored dots at top. Colored tag below. Open report: dots spread.
Components

How the concept shows up in every element

Dot Flight with Trail
Colored dot flies from pin chip to dots bar, leaving a fading trail along its arc path. Like a droplet streaking across glass. Ripple ring expands at the landing point.
Room Color Shift
Background briefly tints to match the capture color. Gold for facts, indigo for priorities, olive for constraints. The environment absorbs what you said.
Drawer Waterline
Shimmering light line at the drawer top edge. Drifts continuously. The drawer edge is the water surface. Conversation below, clarity above.
Ambient Particle Current
Tiny particles rising behind the UI like sediment in a gentle stream. Always moving, barely visible. Accelerates briefly on capture.
Clarity Report: Underwater Bloom
Items surface from below: blurred and translucent, each deblurs as a colored dot slides in from the left, ripples, and the card sharpens. Caustic light patterns shift on the background. Like objects surfacing through still water.
Scenario Cards: Equal Weight, Named Emotionally
"The Breathing Room." "The Unlock." "The Fast Track." No ranking, no "recommended" badge. Rejecting a card triggers the advisor to ask "What didn't fit?" and generates a replacement based on the feedback. The loop continues through the artifacts.
Progressive Reveal
No tabs at start. Clarity tab appears after first dot. Scenarios tab appears only after Magic Moment. You earn the complexity.
Magic Moment: Inline
Three direction cards appear inside the conversation, not as a page. The workspace emerges from the dialogue. "These aren't ranked."
Explorations

Prototypes and studies

Everything we built and tested. The flow prototype is the real product. The studies informed the motion vocabulary.
Product Prototypes
Interactive flows with full conversation, clarity, scenarios, and capture.
Full Flow + Design Layer
Scenario-view with ambient particles, dot trails, waterline, color shifts.
Primary
Capture Mechanic
Animated conversation with wall bounce, dot condense, Clarity Report bloom.
Primary
Dot Transport Options
5 ways the mark reaches the header: ripple, bleed, evaporate, tide, absorb.
Decision
Capture Moment
How the system signals understanding. Different scales and metaphors.
Drop Size Alternatives
Tiny droplet, medium orb, large presence, ink bloom, pulse wave, gravity pool.
6 options
Pour: Message → Tag
Organic stream pours from message into tag shell with sloshing water physics.
Study
Absorb: Convergence
Particles emit from messages, converge, compress into tag. Ripple rings expand.
Study
Ambient Background
How the surface stays alive between captures. Subtle, slow, barely conscious.
Aurora Backgrounds
Drift, mesh, breathe, caustic, watercolor, lava, grain, northern lights, ink pool.
9 variations
Shimmer Strands
Soul-inspired vertical light. Warm, mixed, dense curtain, firefly, ribbons, pulse, mesh.
7 variations
Particle Physics
Flow field, rising bubbles, big drop splash, gentle current, convergence, ripple pond.
6 systems
Particle Sphere
3D particle sphere exploration. Orbital motion, density shifts, responsive to state.
Study
Portal
Portal transition effect. Depth, threshold crossing, dimensional shift.
Study
Visual Vocabulary v2
Design system visual language. Typography, color, materials, motion, spacing vocabulary.
Reference
Clarity Engine Design Concept. Everett and Co. March 2026. Internal alignment.