The Siptip
brand book.
Welcome to the Siptip brand book. These pages document the design system that powers everything we ship — from the marketing site to the dashboard to the mobile app.
Introduction
Siptip is a rewards app that turns everyday spending into something worth coming back to. Our brand is friendly, energetic and a little bit cheeky. It should feel like cash in your pocket — instant, useful, and quietly delightful.
Personality
Friendly · energetic · confident. We sound like a smart friend who happens to know about money — not a bank.
Voice
Short sentences. Plain words. Concrete numbers. We never hedge, never over-promise, and never use finance jargon when a normal word will do.
Promise
Earn while you live. Every interaction should give the user the satisfying feeling of getting a little something back.
Colors
Six documented brand colors anchor the system. Each one is extended into a full tonal scale to support interface states, soft backgrounds and accessible text.
Green scale
- 50#F1FAEF
- 100#DCF0D8
- 200#B9E2B0
- 300#8BCE7D
- 400#5FB94E
- 500#3B992E
- 600#2E7C24
- 700#25621D
- 800#1D4E17
- 900#143810
- 950#0A1F08
Yellow scale
- 50#FFFBE6
- 100#FFF6CC
- 200#FFEF99
- 300#FFE770
- 400#FFD93B
- 500#F5C20A
- 600#C99A04
- 700#927105
- 800#5C470B
- 900#3A2E0C
- 950#1F1806
Neutral scale
- 0#FFFFFF
- 50#FAFAFA
- 100#F3F3F3
- 200#E3E3E3
- 300#C7C7C7
- 400#9C9C9C
- 500#6B6B6B
- 600#4D4D4D
- 700#393939
- 800#2A2A2A
- 900#1C1C1C
- 950#0E0E0E
Just Green carries action — CTAs, links, success and the brand surfaces on dark backgrounds.
Butter Yellow is the spotlight — promotions, highlights and moments worth celebrating.
Not so Black is our voice — confident type, immersive heroes and content-first dashboards.
Typography
Satoshi Variable is our single typeface. Five weights cover everything from microcopy to display headlines, with italic cuts reserved for the wordmark.
Typeface
Satoshi
Indian Type Foundry · Variable · Latin · 5 weights
Earn while you live
Earn while you live
Earn while you live
Section heading
Section heading
Section heading
Section heading
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
META · LABEL · CAPTION
Logo & Mark
The Siptip identity has two forms. The mark is a droplet with a check cut into it — the drop for the “sip”, the check for a reward confirmed — and the lockup pairs it with the Siptip wordmark. Four tones cover light, dark and monochrome grounds.
Mark
Horizontal lockup · Wordmark
Components
The smallest building blocks of every screen. Everything here is token-driven — change a token and the system updates.
Buttons
Inputs
We’ll never share it.
At least 8 characters.
Badges
Avatars
Stat tiles
Releases in 3 days
Cards
Surface
Default content container.
For tables, panels and forms inside the dashboard.
Elevated
Carries shadow for hierarchy.
Use sparingly — one or two per screen.
Brand
For hero moments and promotional surfaces.
Pair with highlight or ink-inverse type.
Patterns
A few combinations of the primitives above, in the shape they’ll appear across the dashboard and the landing page.
Dashboard previewRecent rewards
Last 5 transactions across all partners.
Lina’s Cafe
2h ago
Bookhouse
Yesterday
Northside Gas
Wed
Hello Sushi
Tue
Bus Pass
Mon
Refer a friend
Both of you get $5 when they spend their first dollar.
siptip.app/r/adaSample data — illustrative figures and copy, not real rewards.
Spend like you
always do.
Earn like you never did.
Sign up this week, get
double rewards.