Skip to content
dinçer.design

Berlin

Fair tips, no drama.

Three Tipza screens: History, Split summary, and New split.
Tipza
Consumer · Side product

Split summary, new split and history, the core of Tipza.

02 Snapshot

Role
Designer and builder, end to end
Team
Just me, with Cursor, Codex, Claude and Grok Bot
Timeline
Side product, live on both stores in 2026.
My contribution
Research, tokens, design system, UI, React Native code and the store launch

Top results

  1. 01
    Live on iOS and Android, in English and German
  2. 02
    Featured on Product Hunt
  3. 03
    Free to start, with an optional Pro plan

03 Why it exists

Fair tips, no drama.

My partner works in hospitality. Every time her team split tips, the same debate came back: who worked longer, who is still a trainee, who rounds what. The maths was never the hard part. Agreeing on it was.

That became the brief: a split everyone can see, check and trust.

So Tipza is a calculator and a record. A shift lead adds the total, picks how to split it, and the whole team sees the hours, the rate and their own share. It never touches the money. Payments, payroll and tax stay with the team and the employer.

Three hospitality colleagues around a bar table, counting tips next to a phone.
The Split summary screen on green: All slices served, with each team member's share and the total.
From the Tipza website.

04 Research

What already exists

I reviewed other tip apps and the spreadsheets teams already use, and watched tips being split in real cafés and bars. What I saw was simple: teams needed a clear calculator and a shared record, not another payments tool.

That decided what Tipza would not do.

No payments. It records the splits you enter and doesn’t collect, hold or send funds.

No POS integration and no IT setup. A shift lead can set it up tonight.

Clear for both sides. The person running the split and the people receiving it read the same breakdown.

Part of the benchmark board from the Figma cover page.

05 Visual language

Tokens first

Before any screen, I defined the visual language as Figma variables: a warm neutral scale instead of grey, a green and a yellow from the brand, Space Grotesk for display and Figtree for reading.

Primitives feed a semantic layer named by role, so a button asks for action primary, never a hex code. Spacing and radius follow the same t-shirt scale, from 2xs to 8xl.

core variables: colour scales, type, spacing and radius
145
semantic variables, named by role: action, base, border, control, icon, text
122
typefaces: Space Grotesk and Figtree
02
01

Colour

Core scales. Green 20 and Neutral 99 carry the brand.

Green

12 steps

  • 01#b3f7dd
  • 05#2bda98
  • 10#06bc78
  • 20#02925c
  • 30#027a4d
  • 40#02643f
  • 50#025032
  • 60#013c25
  • 70#012819
  • 80#011e13
  • 90#01140d
  • 99#000a06

Neutral

15 steps

  • 00#ffffff
  • 01#f3ede8
  • 05#eee5dd
  • 10#ebe0d6
  • 20#e4d5c9
  • 30#ddcabb
  • 40#d1b7a3
  • 50#c19d81
  • 60#b88f70
  • 70#8f6647
  • 80#583f2c
  • 90#332519
  • 95#221811
  • 99#0a0705
  • 100#000000

Orange

12 steps

  • 01#ffc8b8
  • 05#ffa285
  • 10#ff7b52
  • 20#ff5b29
  • 30#ff3c00
  • 40#d63300
  • 50#ad2900
  • 60#8f2200
  • 70#6b1900
  • 80#421000
  • 90#240900
  • 99#0f0400

Red

12 steps

  • 01#ffd6de
  • 05#ffb2c0
  • 10#ff8a9f
  • 20#ff5775
  • 30#ff294f
  • 40#f0002b
  • 50#bd0023
  • 60#99001c
  • 70#660012
  • 80#4d000e
  • 90#3d000b
  • 99#240006

Blue

12 steps

  • 01#cae7fc
  • 05#a3d5fa
  • 10#73bff8
  • 20#2fa0f4
  • 30#0c83da
  • 40#0860a0
  • 50#074e83
  • 60#053d66
  • 70#042944
  • 80#032035
  • 90#021a2c
  • 99#010f18
02

Type

Space Grotesk for display, Figtree for reading.

Space Grotesk

  • All slices served!

    Display 4xl · 40/40

  • All slices served!

    Display 3xl · 32/32

  • All slices served!

    Display 2xl · 24/32

  • All slices served!

    Display xl · 20/26

  • All slices served!

    Display lg · 18/24

  • All slices served!

    Display md · 16/20

Figtree

  • Everyone sees the hours, the rate and their share.

    Body md · 16/24

  • Everyone sees the hours, the rate and their share.

    Body md semibold · 16/24

  • Everyone sees the hours, the rate and their share.

    Body sm · 14/20

  • Everyone sees the hours, the rate and their share.

    Body sm medium · 14/20

  • Everyone sees the hours, the rate and their share.

    Body xs · 12/14

03

Spacing

In pixels.
  • none0
  • 2xs2
  • xs4
  • s6
  • m8
  • l12
  • 2xl16
  • 4xl20
  • 5xl24
  • 6xl32
  • 7xl40
  • 8xl48
04

Radius

In pixels.
  • xs4
  • m8
  • l12
  • 2xl16
  • 5xl24
  • 6xl32
  • pill9999
05

Semantic layer

Named by role. Each one points at a core token.
  • action/color/primary/enabledcolor/neutral/99 · #0a0705
  • action/color/tertiary/enabledcolor/orange/20 · #ff5b29
  • base/color/flatcolor/neutral/01 · #f3ede8
  • text/color/secondarycolor/neutral/70 · #8f6647
  • text/color/successcolor/green/30 · #027a4d
  • icon/color/dangercolor/red/40 · #f0002b
  • daterange/color/enabledcolor/green/20 · #02925c
Colour, type, spacing, radius and the semantic layer, drawn from the real Figma variables.

06 Components

Built by hand

I designed the foundations and every component myself: pill buttons in three colours, three sizes and four states, form fields, calendar ranges, team cards, drawers and a small set of illustrations. Each one reads only from tokens.

Variants carry the sizes and states, and every colour and radius is bound to a variable. Change a token and the library follows.

A playful pizza motif runs through the app: slice icons, a split-pizza illustration and a result screen that says “All slices served!”

Figma export neededPill buttonsThree colours, three sizes, four states
Figma export neededCalendar rangePick the days a split covers
Figma export neededTeam member cardName, role and points
Figma export neededBottom drawersForms and sharing
Figma export neededNavigation barHome, history, team, settings
The split-pizza illustration: a pizza box with slices being shared by three hands.Split-pizza illustrationOne of a small set
A slice of the component library.

07 Design to code

From Figma to code

Tokens Studio exports the variables to JSON, and that file feeds both the Figma file and the React Native app. Figma MCP gave Codex and Claude the context of each screen, and I built it all in Cursor with Expo.

I coded it alone. Vibe coding is fast, but some nights it’s just you, an AI and a very confident linter.

  1. Step 1Figma variablesCore and Semantics collections
  2. Step 2tokens.jsonExported with Tokens Studio
  3. Step 3React Native appBuilt in Cursor with Expo
tokens.jsonSimplified excerpt of the real values
{
  "action.primary.enabled": "{color.neutral.99}",
  "special.green": "{color.green.20}",
  "color.neutral.99": "#0a0705",
  "color.green.20": "#02925c",
  "spacing.2xl": 16,
  "radius.pill": 9999
}
One JSON file, shared by design and code.

08 Screens and flows

One split, four steps

Add the total, pick the dates, add the team, then review and share. Split equally, by hours, by points or your own way. The team list carries over between splits, and leftover change can roll to the next shift.

  1. 01

    Add the total

    Type the tips for the shift. Round up if you like, and the change is saved until next shift.

  2. 02

    Pick the dates

    One day or a date range, with an optional tag for morning, evening, weekend or event shifts.

  3. 03

    Add the team

    Hours or points per person. The roster carries over, so the next split starts half done.

  4. 04

    Review and share

    Everyone sees the hours, the rate and their share. Every split is saved in a calendar history.

1. Add the total

2. Pick the dates

The New split screen: a total of 625 euros, the dates 18 to 21 November and four team members with their hours.

3. Add the team

The Split summary screen on green: All slices served, with each team member's share and the total.

4. Review and share

From total to shared result.

09 Testing and iteration

Tested, then refined

I put working builds in front of hospitality staff and changed what didn’t land. Three changes came straight out of it.

Points for trainees. Not everyone on a shift carries the same load, so each team member has points. There is a 5-point option for trainees.

Swipe to confirm. A swipe now confirms each split.

Shift tags. Optional tags tell a busy weekend from a quiet Tuesday.

The New team member sheet: name, surname, role and a points selector, with a note on when to use 10, 12 or 15 points.

Points for trainees

Swipe to confirm

Shift tags

Changes that came from testing.

10 Free and Pro

Free to start, Pro to grow.

The app is free to download. Free covers all four split methods, shareable breakdowns, saved history and up to three team members per split.

Pro unlocks the fourth team member onward, plus Pro Insights: tip trends over 30 days, 3 months and 12 months, tips per hour, a comparison across shift types, and priority support. Pro is an in-app purchase.

The Team screen with the Tipza Pro badge at the top right, listing five team members with their roles and points.
FreeDownload and split
  • All four split methods
  • Shareable breakdowns
  • Saved history
  • Up to 3 team members per split
ProFor bigger teams
  • Everything in Free
  • The 4th team member onward
  • Pro Insights: tip trends, tips per hour, shift comparison
  • Priority support

The app is free to download. Pro is an in-app purchase.

The Team screen, with the Tipza Pro badge.

11 Shipped

Live on both stores

Tipza is live on the App Store and Google Play in English and German, with its own website and blog, and it was featured on Product Hunt (opens in new tab). Grok Bot helped with the marketing and the deployment.

App Store slide: Fair tips. Zero drama. Split tips fairly in seconds. Everyone gets their share. Shows the Split summary screen.
App Store slide: Your tip history, saved. View past splits in your calendar. Nothing disappears. Shows the History calendar.
App Store slide: Level up with Tipza Pro. Unlimited teammates and smart insights. Shows the Team screen.
Tipza on the App Store.

12 What’s next

Next, an assistant

An AI assistant to log a split in one sentence and turn history into insight.

Tipza

Fair tips for your team, today.

Free to download on iOS and Android, in English and German.

Download on the App StoreGet it on Google Play
Next caseCape Plugin Suite