← All design reviews

Open Collective

The design system behind a fork of Open Collective, and pages built on it. Published so it can be opened on a real device and reviewed by people and models who are not on the machine running the fork.

Read this before reporting anything.

These are static HTML pages. Nothing is wired up — no data, no clicks that go anywhere (the module picker is the one exception: its checkboxes work, but nothing is saved and reloading resets them), no dark mode, no icons (the product uses Lucide throughout and none are embedded here).

The design tokens are not approximations. Every colour, radius and type size is copied from the platform's own stylesheet, and the Inter font files are the ones it self-hosts. Where a page departs from upstream, it says so on the page.

Start here

The shaping document Leads everything What this is for, three storyboards, what got cut, the ordered roadmap with the release line, and the decisions taken. Every other page here is downstream of it. The people in the storyboards are invented, and the page says so. Design system Colours, type, buttons, badges, form controls, shape, and the ledger row. Every other page reads from the same tokens.css.

Superseded

The module picker Selection overturned Twenty modules and the problem each removes. Its 19-of-20 selection has been overturned — the model turned out not to be fiscal hosting at all. The method and the descriptions still hold; the selection does not.

Faithful to what the fork renders today

Collective profile What the public sees: who runs it, what it's for, what money came in and went out, and how to give. Modelled on the running fork's BrusselsTogether page. Admin dashboard What an admin sees on signing in — balance, money in and out against the previous period, and what is waiting for a decision.

Proposals — these do not exist upstream

Contribute in rupees Proposal Open Collective has no Indian payment method. This is the contribution flow with UPI first, showing the fee without charging it. The page argues its own case at the bottom.

Known gaps in this set

Six pages, not thirteen. The expense detail, the transactions ledger, the fiscal-host dashboard, the event page and the sign-in flow are not here yet.
No icons. Every place the product shows a Lucide icon, these pages show a plain shape or nothing.
No photographs or avatars. Contributor faces are initials on a grey circle.
No dark mode. The platform defines a full dark palette; none of it is exercised here.
The hero arc is approximated. The product draws it as an SVG; here it is a radial gradient. It is close, not identical.
No error, empty or loading states anywhere.

How to change it

Do not edit the copy you are reading. This folder is published output and gets overwritten. The source is ~/opencollective/design-system/ on the machine running the fork; changes are made there and republished.

Everything visual lives in tokens.css. Change --primary and every button, link and focus ring moves together.
Change --radius and every rounded corner in the system follows, because the medium and small radii are derived from it rather than set separately.
There is no build step. Edit a file, reload the page.