Tally design system
Editorial form, split-view navigation, one committed colour. Made for a record that two sides have to trust, read in bright rooms next to paper.
Brand
Every day on site, written down.
A tally is how work has always been counted: four strokes and a line through them. The mark is the product: count what happened, in order, where everyone can see it.
What we refused
Hi-vis yellow and black with hard-hat photography, which is every site app. Blueprint blue on grid paper, which is what you get by avoiding the first. And “tracking blue plus delivery orange”, which is what a design database returns for this brief. Fired clay comes from the material itself: plaster, brick, board. Status colours stay pure so a delay never reads as brand; danger is pulled toward crimson to keep it apart from the clay.
Colour
OKLCH, with measured contrast against the groundStatus vocabulary
Always an icon and a word, never colour aloneTypography
Newsreader for what is said, Onest for what is measuredPayment 2 is claimable.
Boarding closed in meeting room 2
Where the 20.4% comes from
What Tally understood
Body, 15px Onest. Marco photographs the wall at 14:32. Tally links it to the BOQ item, adds 1.2% to progress, and tells the contractor the second payment can be invoiced.
Small, 13px. Site photo · 18 Sep 2026 14:32:07
Tabular figures: USD 486,000 · 20.4% · 1,284 · 0123456789
Space, radius, rules
Controls
Domain components
The parts made only for this productRecord entry
Milestone scale
BOQ item with its stages
Payment callout
Payment 2 is claimable. Measured progress passed 20%. USD 72,900 can be invoiced under clause 6.2.
Feedback and states
Nothing is waiting on you
Empty, and says what will appear here.
The record does not mention that
Zero results, stated honestly.
Reading the document
Pages 3 and 4 could not be read. Error: says what happened, what was kept, and what to do next.
Saved on this phone. Offline: it sends itself later, stamped with the time it was taken.
You do not have access to people and access. Permission denied: names your role and logs the attempt.
Iconography
One family, 1.6 stroke, 24 grid, inlinedMotion
Buttons press to 97% in 140ms. Layers enter in 160 to 220ms on a strong ease-out, from their trigger. Progress bars ease to their value once. New record entries settle in from above. Nothing seen dozens of times a day animates, and everything honours reduced-motion.
Bans
Held across every screen- No boxed card grids. Sections are divided by whitespace and one hairline.
- No coloured stripe down the side of anything. Callouts use a tinted ground and a leading icon.
- No hero-metric tiles. Figures sit in one ruled row.
- No gradient text, no glass, no glow, no dark mode.
- No emoji as icons, no second icon family.
- No status shown by colour alone.
- No cream or sand page ground. The ground is a true off-white; warmth comes from the clay and the serif.
- No placeholder text, no dead controls. Every button navigates, changes the shared data, opens a layer, or says what it would do.