Stake
Design system

One yellow, one black, one font.

The visual language for the Stake owner and investor portals. Light cards on soft ground, a single black hero card per screen, fully rounded golden actions, Figtree throughout. Every component below lives in theme.css.

Logo

two formats
Stake
Black — use on light backgrounds
Stake
Yellow — use on dark backgrounds
The mark is the steak-swirl “S.” Pair it with the Figtree 800 wordmark, or use the mark alone as an app icon / favicon. Keep clear space around it and don’t recolor the accents.

Color

brand + system
Brand yellow
#E7B84B
Near-black
#0D0D0D
White
#FFFFFF
Background
#F3F3F1
Received green
#2FB06B
Alert red
#E0503A
Yellow tint
#FBF3DC
Yellow (text)
#B08A20
Green and red mark payment status only. Yellow text on light surfaces uses #B08A20 for contrast; #E7B84B is for fills and dark backgrounds.

Typography

Figtree · weight = hierarchy
Display · 800
Good money, daily.
Page title · 800 / 26
Welcome back, Dana
Section · 700 / 16
Recent payments
Hero number · 800 / 42
$41,600
KPI number · 800 / 23
$8,940
Body · 400 / 14
Paid via Plaid, arriving tomorrow.
Label · 600 · tracked
Balance remaining

Buttons & Chips

fully rounded
✓ Sent Awaiting Approval ● Today +$312.50 Sent Pending Returned
All buttons are now fully rounded (pill). Primary = yellow with dark text; dark and ghost variants share the same pill shape.

Hero Card

one per screen
Tonight's close✓ Auto-sent
$8,940
Deposit cleared · paid via Plaid
Pool · 24%
$2,145
Sent to
9
Balance remaining1.4×
$41,600
repaid $28,400 of $70,000
40.6% repaid14.0% return

KPI Cards

white, tinted icon
Deposited Today
$8,940
▲ 17% vs yest.
Disbursed
$2,145
9 investors
Repaid to Date
$28,400
since Mar 2025
%
Rate of Return
14.0%
annualized

Rows & Banners

lists + attention

Recent Payments

View All
Daily Disbursement
Aug 17 · arriving Aug 18
+$312.50
Daily Disbursement
Aug 16 · settled
+$266.40
17
Aug 17 · nightly run
9 investors · $2,145
Sent

Needs Attention

Payment returned
R. Okafor · $214
Fix →
Invite pending
D. Whitfield · 3 days
Resend →

Forms & Navigation

inputs, toggle, nav
Auto-send nightly run
Off = you approve each run
Home
Investors
Reports
Settings

Screens

everything we're building
47Total screens
44In the MVP
3Later phase
BothDesktop & mobile
Every screen is built responsively for both desktop and mobile. The badge notes which form factor each screen is optimized for first — desktop for configuration-heavy screens, mobile for quick, glanceable ones.

Shared

11 screens · used by every user
1
Splash / launch
Branded load screen (mobile).
MobileMVP
2
Login
Sign in with email or SSO.
Desktop + MobileMVP
3
Invite acceptance & setup
Entry point — accounts are invite-only.
Desktop + MobileMVP
4
Forgot / reset password
Recover access.
Desktop + MobileMVP
5
Two-factor / MFA
Extra security for a money-moving app.
Desktop + MobileMVP
6
Identity verification (KYC)
Verify identity via Plaid before any payments.
Desktop + MobileMVP
7
Notifications center
Payment sent/received, action needed.
MobileMVP
8
Account & security settings
Profile, password, MFA, preferences.
Desktop + MobileMVP
9
Help / support
FAQ and contact.
Desktop + MobileMVP
10
Legal & consent
Terms, privacy, e-signature.
Desktop + MobileMVP
11
System states
Error, empty, loading, offline, sync-failed.
Desktop + MobileMVP

Restaurant Owner

19 screens · the operator's control room
12
Owner setup wizard
Connect Toast, QuickBooks, and the bank via Plaid.
DesktopMVP
13
Owner dashboard / home
Tonight's close, KPIs, what needs attention.
Desktop + MobileMVP
14
Investor list
All investors with ownership % and status.
Desktop + MobileMVP
15
Investor detail / profile
One investor's terms, balances, and history.
Desktop + MobileMVP
16
Invite investor
Send an invite and set their terms.
Desktop + MobileMVP
17
Manage pending invites
Resend, revoke, track invites.
Desktop + MobileMVP
18
Cap table / terms & balances
Source of truth for the disbursement math.
DesktopMVP
19
Disbursement configuration
Calc base, schedule, auto-send/approval toggle.
DesktopMVP
20
Daily disbursement review
Approve the nightly run (when approval is on).
MobileMVP
21
Payment run detail
One night's run, investor by investor.
Desktop + MobileMVP
22
Payment history
Every run over time, filterable.
Desktop + MobileMVP
23
Failed / returned payments
Resolve bounced payments.
Desktop + MobileMVP
24
Funding source (Plaid)
Manage the account payouts draw from.
Desktop + MobileMVP
25
Metrics dashboard
Full restaurant performance view.
DesktopMVP
26
Reports
Generate, schedule, export.
DesktopMVP
27
Integrations health
Toast / QuickBooks / Plaid status.
Desktop + MobileMVP
28
Restaurant settings
Name, address, fiscal settings.
Desktop + MobileMVP
29
Team access
Extra owner-side users (bookkeeper, partner).
DesktopLater
30
Audit log
Who changed what, and when.
DesktopMVP

Investor

11 screens · a live view of their repayment
31
Investor onboarding
Accept invite, verify ID, link payout, e-sign.
Desktop + MobileMVP
32
Investor dashboard / home
Repayment meter and key numbers.
MobileMVP
33
Investment detail
Per-restaurant view (for multi-restaurant later).
Desktop + MobileLater
34
Returns & balance detail
Remaining balance and return over time.
Desktop + MobileMVP
35
Restaurant performance detail
Daily / monthly / annual sales.
Desktop + MobileMVP
36
Payment history
Every disbursement received.
MobileMVP
37
Payout method (Plaid)
Manage the receiving account.
Desktop + MobileMVP
38
Tax documents
1099 / K-1, downloadable.
Desktop + MobileMVP
39
Document library
Agreement, annual report, shared files.
Desktop + MobileMVP
40
Reports
View and download investor reports.
Desktop + MobileMVP
41
Profile & account settings
Profile and notification preferences.
Desktop + MobileMVP

Admin / Operator

6 screens · your internal console
42
Admin dashboard
Platform health, volume, failures.
DesktopMVP
43
User & account management
Support and manage all accounts.
DesktopMVP
44
Onboarding & KYC review
Monitor identity verification.
DesktopMVP
45
Payments monitoring
Cross-account runs and failures.
DesktopMVP
46
Compliance & audit
KYC/AML, consent, and payment records.
DesktopMVP
47
Support / disputes
Dedicated tooling (starts manual).
DesktopLater

Preview the App

desktop & mobile
Two ways to try the live preview. Desktop opens in any browser; mobile runs through the free Expo Go app.

Desktop Preview

On a computer, open the link below and sign in with the details provided.

Open Desktop Preview
stake-app.replit.app/login
Login Details
UsernameLINKS TO ACCESS ARE ON SCREEN
PasswordLINKS TO ACCESS ARE ON SCREEN

Mobile Preview

  1. Install Expo Go (free) on your phone from the App Store or Google Play.
  2. On Android, open Expo Go and tap Scan QR code. On iPhone, open the Camera app and point it at the code.
  3. The Stake app opens in Expo Go. Sign in with the Expo details below if prompted.
stake-app.replit.app/stake-mobile/
Expo login details
EmailSENT VIA EMAIL
PasswordSENT VIA EMAIL