The Redesign: RCT Now Takes Its Colors From What You Buy
RCT’s latest update is a redesign built on one written-down design system. Surfaces now take their color from what is on them: a receipt row is tinted by the categories you bought, category limits are drawn as receipt-tape ticks instead of bars, and Home’s budget ring is two circles of ticks, one for money spent and one for time passed.
This is the largest update RCT has had. Most of it is visual, but not decoration for its own sake: every screen in the app was rebuilt out of the same small set of parts, and those parts were chosen so that a screen tells you something before you read a single word on it. Below is what changed, with each new piece drawn the way the app draws it.
Color comes from what you bought
The first rule of the new design is that color belongs to the content, not the chrome. A receipt full of vegetables is green; a mixed grocery run is the colors of everything in the bag. Each receipt row in your list now picks up the colors of its own category icons, washing in from the trailing edge where those icons sit and fading out before the amount, so the icons never lose contrast against their own tint.
One category reads as a single color. A receipt spread across several categories shows up to five of them, the most-represented one strongest and each one after it a little quieter. More than five stops being a tint and starts being a rainbow, so the rest are dropped.
The same rule runs through the rest of the app. Filter pills are tinted by the thing they select whether or not they are selected; selecting one only changes how much of that color it shows. The “All” pill is painted with every group’s color at once. That one pill style is now the filter control on the Money tab, in Reports, in comparison mode and on the receipt list’s tags. An open receipt is washed from the top in the colors of its categories, each color sitting under its own icon.
Limits drawn as receipt tape
Progress bars are gone. A category limit is now a row of fixed-size ticks with real gaps between them, like a strip of receipt tape: the part you have spent is filled in the category’s own color, and the rest stays as a faint ghost of the same tick. A bar only shows how much is gone; the tape shows how much is left as well.
The ticks never stretch. A wider row gets more of them, never fatter ones, which is why the same tape reads the same on Home, on the limits screen and next to a ranking. Two small rules keep it honest: spending anything at all lights the first tick, and a limit you have not used up never lights the last one, so rounding can’t claim a row is finished when it isn’t. Go over, and the whole tape turns red.
Home’s budget ring, rebuilt from ticks
The ring at the top of Home is that same tape bent into a circle, twice. The outer ring is your budget, filling in green as you spend. The inner ring is the month, filling in blue as the days pass, and it fills continuously through the day rather than jumping a whole tick at midnight. Reading it takes one glance: if the blue ring is further round than the green one, you are spending slower than the month is passing.
Both rings use the same quantized ticks as the limit rows, so a tick means the same thing wherever you see it. Tap the ring and a scale appears: the tick at every 20% of the budget and of the month is outlined, and the month ring pulls back slightly to make room for the money labels inside the outer band. When you open the app, the ticks light one after another in a single sweep around the dial.
A month of days as tiles
Next to the ring, the consistency calendar used to be a grid of dots. Each day is now a rounded square, and each square is a small picture of what that day’s money went on. A day’s top categories cut across the tile as diagonal stripes, each as wide as that category’s share of the day and showing that category’s own icon. Anything past the top three is folded into one leftover stripe, so a day with a long tail of tiny purchases still reads as one shape instead of confetti.
Days you didn’t track, and days that haven’t happened yet, draw no tile at all, just their date. Today’s date sits in its own highlighted label. Tap into the history and every past month is laid out the same way; tap a day there and it opens with the same tile drawn large.
Fewer shapes, one loud button
Underneath all of this is a rule set written down in one place. Before the redesign, the app carried sixteen different corner radii, twenty-five hardcoded text sizes and four different primary buttons. Now there are four radii, each with a job: 12 points for controls, 16 for rows, 22 for cards, and the capsule for buttons and pills. Text comes from one six-step type scale, and rounded numerals are reserved for one meaning: this number is money.
Every screen gets exactly one loud action, a full-width capsule in RCT’s pink-red that turns green with a checkmark once the thing is done, so the screen visibly notices what you did. Everything else is a quiet text button. The loud one answers with a firmer haptic tap than the quiet ones.
Everything else in this update
A redesign this size touched almost every screen, so a few changes deserve a line of their own:
- Receipt screens. A fresh scan and a saved receipt are now the same screen at two stages, with a floating glass bar at the top and the receipt’s category icons gathered under the total. Five identical scanned lines fold back into a single “5x” line.
- Home screen widget. The Money tab’s pace chart now fits on your home screen, with a green line at what the month is expected to bring in (income already recorded plus any recurring salary still to come) and a mosaic of your spending groups underneath.
- Today on Home. The TODAY box flips to “Budget Spent”, and flipping it deals in your last two receipts from today underneath, one at a time.
- Budget periods. Your month can now start on payday: pick any day from 1 to 31 in Settings, and Home, the Money tab and your insights count the month from that day.
The goal of all of it is the same as the item-level categorization underneath: fewer numbers to decode, and more of the answer visible at a glance.