#2563EBPrimary actions · Brand
--vend-brandVEND PERSONAL · 01Our identity.
Our identity.
A simpler rhythm.
VEND blue, navy, and real machine businesses.
Clearer money moments, with bigger numbers and fewer steps.
01VEND at the core
Keep the established VEND colors and wordmark.
02Familiar interactions
Take cues from Cash App’s spacing, hierarchy, and direct actions.
03Our product, our purpose
Machines → Term → Interest → Repayment.
01 / FOUNDATIONS
VEND, from the first pixel.
These colors carry forward the VEND identity from Earn2. Blue signals action; green marks completed transactions.
#182B49Numbers · Headings · Body
--vend-ink#EDF4FFSelection · Supporting surfaces
--vend-brand-soft#F6F8FBPage background
--vend-canvas#FFFFFFCards · Sheets
--vend-surface#65748ADescriptions · Supporting text
--vend-mutedSemantic colors
RepaidPendingComing soon
Pair color with a status label and icon so meaning never depends on color alone.
Success #128268 · Warning #8A5D16 · Error #B93842Space & shape
4
8
12
16
24
32
48
4px spacing scale · 14px controls · 24px cards · Pill buttons
Touch target ≥ 44px · Default button 48px02 / TYPOGRAPHY
The number comes first.
Geist Sans. Keep numbers prominent, sentences short, and contrast strong enough to read even small amounts.
DISPLAY / 56–88 / 600$2,450.00
HEADING / 32 / 650Your money.
SECTION / 20 / 600Coming back to you
BODY / 14–16 / 400
Lend to laundry operators in Korea over 12 months, with four quarterly repayments.
CAPTION / 12 / 40010% service fee on interest. None on principal.
Format amounts consistently with thousands separators and decimal points. Separate principal from interest, and pair annual rates with the term and risk statement.
03 / COMPONENTS
Made to be used.
The buttons, amount fields, repayment timelines, badges, and receipt rows on this page are the same React components used in Earn3.
Buttons
ButtonTry a button to see its interaction.
Give each screen one primary action. Use blue to continue or confirm, pale blue for secondary actions, and navy for exploration.
States
BadgeAt work RepaidReview neededComing soon
Explain availability when someone opens a planned feature. Never present an unavailable action as a completed one.
Confirmation
Native dialogCenter dialogs on desktop and use bottom sheets on mobile. Keep keyboard focus inside and support Escape to close.
One icon family
Lucide · 20–24px · 1.8–2px strokeMoney
Earn
Spend
Activity
Add money
Cash out
Repayment
Laundry
Coffee
EV charging
Bank
Passkey
04 / MONEY & TERMS
Try the real components.
Change the amount to recalculate Korea 13 interest and fees using the same 12-month, four-repayment schedule as Personal.
$2,450.00 available
Full term12 months · 4 quarterly repayments
Interest you could earn$56.09
12-month term · after fee
9.0% example annual rate after fee. No early cash out. Repayment is not guaranteed.
The whole picture
DetailRowPrincipal$1,000.00
Gross interest$62.32
Service fee · 10% of interest−$6.23
Net interest$56.09
Total scheduled repayment$1,056.09
Term endsSep 14, 2027
Duration12-month term
Money coming back
4 scheduled payments · original amount + interest
Principal still at work Scheduled after each payment
- StartSep 14, 2026$1,000.00
- After payment 1Dec 14, 2026$750.00
- After payment 2Mar 14, 2027$500.00
- After payment 3Jun 14, 2027$250.00
- After payment 4Sep 14, 2027$0.00
Interest is calculated on the remaining principal between payment dates. Scheduled reductions depend on payments being received.
Dec 14, 2026$250.00 of your original amount + $22.44 interest
Follow the dates above. Only received money is available to use.
No service fee is charged on principal. Visually distinguish scheduled repayment from money already repaid.
05 / PATTERNS
Familiar moves. VEND’s purpose.
Money → Earn → Spend → Activity. Keep profile settings separate so they do not interrupt the first visit.
Ready for whatever’s next.
Navigation
Selected: Money
Use four bottom tabs on mobile and a left sidebar on desktop. Show selection through color, background, and weight.
What’s available. What’s next.
Lead with the balance, Add money, and Cash out. Keep detailed machine metrics out of the opening view.
Where it goes. For how long.
Show the machine, country, term, and interest. Let people open the details and operating records when they need them.
The details before deciding.
Principal, net interest, fees, end date, no early cash out, and the risk of losing money.
Motion: 160ms buttons, 220ms sheets, and a subtle lift on interactive cards. Use motion for feedback, avoid decorative loops, and respect reduced-motion preferences.
06 / LANGUAGE
Easy to read. Precise when it counts.
The language reference informs these patterns. Keep the experience approachable while describing the product precisely. Term means how long lending lasts, never a count of lending entries.
SurfaceUseReason
Tabs / NavigationEarnA short, familiar feature name
BalancesAvailable balance / At workSeparate available money from committed principal
Adding moneyAdd moneyName the action people are taking
Choosing a businessLaundry in KoreaLead with a concrete business
Reviewing the duration12-month term / Days from joiningDistinguish the full term from a later join’s actual duration
Lending actionsLend / Lend again / Confirm lendingName the action without calling it a new term
Lending historyYour lending / Active lendingUse lending for the record; term describes duration
Same-date repayments2 repayments scheduled → Your balanceCount repayments due on that date, never terms
Confirmation / ReceiptPrincipal / Net interest / Service feeIdentify exactly what each amount represents
Scheduled / CompletedScheduled repayment / RepaidDistinguish expected repayment from completion
What we keep
Greet people by name. Explain details when they matter. Show the machine businesses. Keep principal and interest separate.
What stays provisional
Offered rates, partners, operating records, and country-specific product wording remain provisional. Unverified research figures are not treated as evidence.
07 / DATA VISUALIZATION
Numbers with a little perspective.
Three ways to make money easier to understand. One VEND visual language.
01 / MOVEMENT
Your money, over time.
$7,432Sep · balance
View data
| Period / category | Amount |
|---|---|
| Apr | $3,200 |
| May | $4,150 |
| Jun | $3,900 |
| Jul | $5,400 |
| Aug | $6,100 |
| Sep | $7,432 |
Line + area · Follow a balance through time. Deposits and withdrawals affect this line; it is not an investment return.
02 / COMPARISON
A little more, month by month.
$1,432Sep · money added
USD · Bars start at $0
View data
| Period / category | Amount |
|---|---|
| Apr | $800 |
| May | $1,500 |
| Jun | $600 |
| Jul | $1,800 |
| Aug | $950 |
| Sep | $1,432 |
Bar · Compare amounts across periods. Select a month to see its exact value.
03 / ALLOCATION
Every dollar has a place.
Total money$7,432USD
View data
| Period / category | Amount |
|---|---|
| Available | $2,432 |
| At work | $5,000 |
Donut · Show parts of one total. Select a category to focus; select it again to see the total.
04 / REPAYMENT PROGRESS
Scheduled and received, separately.
$22.44interest received through Dec 14, 2026 · $22.44 scheduled · Received
USD · Bars start at $0 · Filled: received · Outlined: scheduled
View data
| Period | Status | Scheduled | Received |
|---|---|---|---|
| Dec 14, 2026 | Received | $22.44 | $22.44 |
| Mar 14, 2027 | Scheduled | $39.08 | $22.44 |
| Jun 14, 2027 | Scheduled | $50.42 | $22.44 |
| Sep 14, 2027 | Scheduled | $56.09 | $22.44 |
The $1,000 annual schedule uses the same calculations as Personal. Filled columns show received interest; outlines show the schedule. Status labels and exact values remain available in View data.
Clarity before decoration.
Blue leads. Navy adds contrast. Always show the currency, keep bar baselines at zero, and make exact values available without hover. Use lines for time, bars for comparison, and donuts for a small number of parts.
08 / SHARING & CELEBRATION
A little win, worth keeping.
Celebrate money coming back with a quiet chime, a brief blue flourish, and a card to keep.
PERSONAL / EARNA little more.
Back to you.
INTEREST RECEIVED · AFTER FEE+$56.09
Korea 13365 days · Sep 14, 2027
Principal returned$1,000.00
Total received$1,056.09
Make the moment feel good.
A short three-note chime and a single checkmark flourish mark a completed repayment. No looping confetti. Reduced motion keeps the checkmark still; sound can be turned off in the profile.
Share cards use the original VEND logo, blue and navy, and clear amounts. Net interest, returned principal, and the total stay separate in both the app and the saved image.
Export: 1080 × 1350 PNG. The app previews the actual image before sharing. File sharing opens the device share sheet; image download is the fallback.