Improve It — Google Finance, on mobile
October 2026
Stocks jump and drop for a reason. The chart never tells you which.
Catalyst puts the news behind big moves right on the chart. Drag your finger across it and the moments that matter explain themselves.
Try it
Drag across the chart
This is the working prototype. Switch platforms and themes, change the range, tap a marker, open a story.
- Drag across the line. The price above follows your finger.
- Slide onto a marker. It snaps, ticks, and a card shows what happened.
- Tap the card to open the full story in a sheet.
- Switch to 5Y. Crowded moments cluster into one marker.
- Keyboard: focus the chart, use arrows, Shift + arrow to jump events, Enter to open.
What you get today
A price and a date. That's it.
Hover a stock chart on Google Finance and you get a line telling you where you are. Nothing about why it fell off a cliff that week. Hover this recreation.
Desktop chart, recreated. No context on any of the spikes.
So people go find out themselves
The numbers
More people trade than ever. Few know why prices move.
Most of these people trade on their phones. The context they need already exists as news. It just lives in a different app than the chart.
Process
Lo-fi to hi-fi
Three states carried through every round: scrubbing, snapped to a moment, and the story open.
Native on both
Same feature, built for each platform
One component spec, two native renderings. The behavior is shared. The controls, type, sheets and haptics follow each platform.
- Type SF Pro, Dynamic Type
- Range Segmented control
- Sheet 12pt radius, grabber, detents
- Nav Tab bar with labels
- Haptic UISelectionFeedbackGenerator on snap
- Type Roboto, M3 type scale
- Range Filter chips
- Sheet 28dp radius, drag handle
- Nav Navigation bar, pill indicator
- Haptic HapticFeedbackConstants.CLOCK_TICK on snap
Design system
Tokens first, then components
Built to drop into an existing enterprise library. Everything references semantic tokens, so light, dark, and a brand's own palette are a variable swap, not a redraw.
Color
surface/default#FFFFFF#14171Csurface/raised#FFFFFF#1C2027text/primary#0E1116#F2F4F7text/secondary#5B6270#A0A8B6border/subtle#E7E9ED#262B33accent/default#3D5AFE#7C8CFFsignal/gain#0E9F6E#3DD68Csignal/loss#E5484D#FF6B6BType
price/display · 34/40 · bold · tabulartitle/sheet · 20/26 · semiboldbody/strong · 14/19 · semiboldcaption · 12/16 · regularSpace, radius, motion
space/1 · 4space/2 · 8space/3 · 12space/4 · 16space/6 · 24radius/sm 8radius/md 14radius/xl 28motion/snap120ms · ease-outmotion/card180ms · cubic-bezier(.22,1,.36,1)motion/sheet320ms · cubic-bezier(.32,.72,0,1)Components
Handoff
Specs an engineer can build from
Every number maps to a token. Positioning rules are written as logic, not pixels, so the card behaves at any screen width.
Edge cases
Where this could break
The marker still shows, labeled "No clear catalyst," with how the sector moved that day. Silence is information too.
Markers within 14px merge into a numbered cluster. The card leads with the biggest move. The sheet lists the rest.
It slides inward to stay 8px from the screen edge. Near the top of the chart it flips below the line.
The card always opens above the touch point, and the price readout sits above the chart, never under the finger.
The marker lands on the next session's open, tagged "After hours," with the time the news broke.
The summary always shows in the app. The link says "Subscription may be required" before you tap.
Copy says "Possibly related," never "caused by." Every card shows its source. Users can report a mismatch.
On 1M there may be no big moves. The list says so plainly instead of padding it with small ones.
Accessibility
Up is a triangle pointing up, down points down, no-news is a dashed circle. Works in grayscale and for color blindness.
You can't scrub a chart by ear. The "Why it moved" list carries the same events, read as "Up 7.2 percent, Mar 14, joins S&P MidCap 400."
Arrows move along the chart, Shift + arrow jumps between events, Enter opens the story. Try it in the prototype.
The card headline grows to 3 lines at large text sizes. Reduce Motion turns off the halo and sheet spring.
Every spike has a story.
Catalyst just puts it where you're already looking.
Concept. Halcyon Labs, its ticker, prices and headlines are fictional. Not affiliated with Google or any brokerage. Not investment advice.