Spraycash's UI was designed and built with Kimi K3 in Devin, one chat message at a time. This post walks through the design: where the look came from, the type and colour system, the motion, and the exact prompt behind each change. The prompts are copied from the chat, with only my typos fixed.
The reference
I started from a screenshot of a landing page I liked: a soft blue sky, a meadow hill, butterflies, and a hand-drawn circle around one word of the headline.
---prompt---
So the hero text should be saying payroll, like cross-border payments for the rest of us, or payroll for the rest of us. Just find the one that is most useful and make sure it's catchy and very, very good. Use the image as inspiration for my landing page, and add the cloud animation too.
What came back:
One background photo. A generated sky-and-meadow image (sky-hill.webp) fills the hero, and the payslip cards sit on top of the hill.
Layered clouds. Five cloud images drift across the sky in a straight line, each with its own speed and start delay, so they never move in step.
Butterflies. Each one wanders along a slow path while its wings flap by squashing the image horizontally (scaleX from 1 to 0.45).
The ring. The green circle around "us all" is a single SVG path. It draws itself in once on load: the path length is normalised to 1 and the dash offset animates to 0.
Real objects. The coins, the paperclip, the sticky note and the PAID stamp on the receipt are all generated images rather than drawn shapes, so they have real light and shadow.
Type
Three fonts, each with one job:
Instrument Serif for headlines and every amount of money. Money uses tabular numbers, so a balance that ticks up every second keeps its width and the digits don't jump around.
Geist for the interface: labels, buttons, table rows.
Geist Mono for codes and receipt numbers.
Big serif amounts next to small, quiet sans labels give each screen one obvious thing to read first.
Colour
The palette is warm paper with one green:
Background #faf8f4, cards #ffffff, text #16130f, secondary text #6b655c, lines #e7e2d9.
One accent, #0f6b4f, used for primary buttons, the ring, the numbered steps and the moving coins on the map.
Amber and red appear only for warnings and errors.
Every screen uses the same tokens, so moving from the landing page into the app never feels like switching sites. The repo also carries an Untitled UI agent guide (CLAUDE.md), which kept text levels, borders, button and input shadows and focus rings consistent on every new screen.
Spacing and shape
Spacing runs on a fixed scale of 8, 16, 24, 40 and 64 px, content is capped at 1080 px wide, and cards use a 14 px radius with two soft shadows: a flat one for resting cards and a deeper one for cards that lift.
The nav
The first nav stretched edge to edge and had a sound button in it.
The nav bar is too long. You have to fix the nav bar. And also, why have you put that voice icon there? You have to fix all that.
It became a floating white pill in the centre, only as wide as the logo, two links and a solid black "Send pay" button. The sound toggle moved to the footer.
The headline
The first headline read "Payroll for the rest of the world".
It should be "Payroll for the rest of us all", not for the rest of the world.
The ring moved to "us all", and one short line sits under it: "Pay anyone, anywhere, by the second."
Phones
On a phone, some coins were sliding off the edges of the screen, and the naira coin was missing.
The coins hide in the corners on mobile view, fix that. And add naira to the currency animation.
On small screens the coins now sit fully inside the screen, between the buttons and the payslip card, and a gold naira coin joined the dollar, rupee and peso. The clouds shrink to 60%, and only three butterflies show.
Motion
Add Lenis smooth scroll, make the animations smooth, and animate the pay routes on the map from the USA and Europe.
The motion is built from a small set of tokens:
Durations: 80 ms for micro changes, 150 ms for hovers and presses, 250 to 500 ms for things entering the screen.
One easing curve for almost everything, cubic-bezier(0.22, 1, 0.36, 1), which starts fast and settles gently.
Entrances rise 8 px and lose a 2 px blur as they fade in, which feels softer than a plain fade.
Scrolling goes through Lenis with a lerp of 0.1, and the guided tour uses the same Lenis instance to glide to each step.
Reduced motion: if the device asks for less motion, the clouds and butterflies stand still and scrolling goes back to normal.
On the map, the routes are dashed curves that march slowly toward each city, and small green coins travel along them on a loop.
Lagos is highlighted by default, and hovering another city highlights its routes instead.
Teaching the screen on the screen
Add an interactive tutorial that shows users how to go through each section.
The tour dims the page, outlines one part at a time in green and explains it in one line, with Next, Back and Skip. It runs once the first time someone opens a screen, and a "Show me how" pill in the bottom-right corner replays it. On phones that pill shrinks to a "?".
The rate card
Put the Chainlink logo there instead of the name.
The exchange rate is set in the big serif, with a small green "Verified by" badge carrying the logo, the time of the last update, and a thin countdown ring on the right that redraws as the quote refreshes.
Forms
The payslip form is split into numbered sections (who you're paying, what you pay, when it runs), with the step numbers in the green serif. The amount field uses the serif at 28 px, so the number you type reads like the number on the payslip.
The freelancer screens
The phone screens reuse the same pieces: the white card, the big serif amount, a quiet table underneath and one green button. The receipt is styled like a paper slip, with a perforated bottom edge and a PAID stamp.
Every one of these screens comes from a real run on the live site, and the explorer shows the withdrawal behind the receipt above.
Top comments (0)