tend design system

tend is an app I’m building for solo workers to keep track of clients, appointments and payments. Before drawing real screens, I set up color, type, spacing and the core parts. Dozens of screens later, everything still matches.

I picked petrol, then pushed it brighter one step at a time. The limit was readability: white text on a button needs 4.5:1. P4 and P5 looked great but failed, so I stopped at P2 (#08739A), the brightest step where petrol text on its own light tint still passes too.

Every color in tend has a light and a dark value, so switching modes never breaks a screen. I checked every key pair in both. One failed: the green Paid text in light mode was 4.3:1, so it moved to a darker green.

Buttons, status pills, client and appointment rows, the chat bar and the tab bar. Each one is built from tokens only, so it works in both modes without a second version. The button alone has 24 versions across style, size and state.

The coded prototype uses the same tokens as CSS variables with the same names. color/bg/brand in Figma is --color-bg-brand in code. Dark mode is just a second set of values for those same names, so no screen needs its own dark version.

Next up is testing with real people. Whatever I learn will change the screens, and the system is set up so those changes stay small: fix a token or a component once, and every screen follows.