Every value on this page is copied from the platform's own stylesheet, not approximated by eye.
Open Collective defines its design system as Tailwind v4 variables in one file
(public/static/styles/app.css) and builds 44 components on top of it.
Edit tokens.css and every page in this folder changes with it.
There are two blues and they are not interchangeable.
No component ever names a raw colour. They name a role, and the role points at a colour. That indirection is why a whole rebrand is a handful of lines rather than a search across 79 files.
Inter, self-hosted — these are the platform's own font files, not a web-font substitute. Body text is 14px, which is smaller than most sites and is deliberate: these pages are dense with figures.
Figures are tabular: the digits sit on a fixed grid so columns of money align.
Ten variants and nine sizes exist. These are all ten variants, at the default size.
Expense and contribution states. Colour alone never carries the meaning — the word is always there too, because roughly one man in twelve cannot separate the green from the amber.
One number drives every rounded corner. --radius is 12px; medium is 10px and small
is 6px, both derived from it. Change the one value and the entire product's softness changes.
The most important pattern in the product, and the one most likely to be got wrong. A single contribution is not one row — it is a group: the money, and each fee taken out of it, each as its own line. Collapsing them into one number is what makes a budget stop being transparent.
| Date | Description | Kind | Amount |
|---|---|---|---|
| 7 Aug 2026 | Monthly contribution from Priya R. | Contribution | + ₹5,000.00 |
| 7 Aug 2026 | Payment processor fee | Processor fee | − ₹118.00 |
| 7 Aug 2026 | Host fee | Host fee | − ₹250.00 |
| 2 Aug 2026 | Venue hire — November community evening | Expense | − ₹24,500.00 |
Said plainly so a reviewer does not spend their pass reporting it: no dark mode (the platform defines one, these pages do not use it), no icons (the product uses Lucide throughout), no loading or empty states, and no focus-visible walkthrough. Components here are the ones the pages in this folder actually use — not all 44.