Review payment request, $600
James Brown · Meridial · from Amara Okoye
Auto taskPayment request
20h leftDone when: you approve, reject or send back
Six rules that settle most design arguments.
Cream working panel, charcoal context panel, one accent.
A status looks identical everywhere, from one definition.
Components hold tokens, never colours.
Change it once; text colour adapts to stay readable.
Auto tasks, system entries and locked records are marked.
44px targets, 12px minimum text, generous radii.
Both themes side by side, regardless of the theme selected above. Tones are paired background and foreground, checked for 4.5:1.
The accent can be any colour. The text on it is chosen from its luminance, so a pale accent gets dark text and a deep one gets white.
#FFC107 · text #1a1a1a
#FF8A65 · text #1a1a1a
#7DD3A8 · text #1a1a1a
#8AB4FF · text #1a1a1a
#C7A6FF · text #1a1a1a
#1F3A8A · text #ffffff
#0F766E · text #ffffff
#B91C1C · text #ffffff
Plus Jakarta Sans. Light weight only from 28px up. Numbers that change use tabular figures.
Radii step down toward the inside. Spacing sits on a 4px base. Only three elevations exist.
Every status has a tone, an icon and a label. Colour is never the only signal. Defined once in STATUS.
Red when overdue, accent under 24 hours, neutral otherwise.
Icon plus label plus tone. Readable without colour.
Colour-only dots, or a status styled inline in a feature.
Two panels. The cream left panel is where work happens; the charcoal right panel gives context and one hero number.
Shell 1376 max, grid 720 | 1fr, radii 40/56. Single column under 1100px.
State machines the UI and the server share. Terminal states are locked.
Verified is a badge usable while Working. It sorts the account first.
Overdue is derived from the due time, not a stored status.
One transaction records the change and the event. Everything else reacts to the event.
timeline entry (system, locked)
close review task, open Pay the tasker
in-app, email, push
totals and ledger projections
Realtime updates are pushed to open browsers over server-sent events.
A rule turns an event into a task, links it to the exact page, and closes it when the matching event arrives.
Proof added, marked Paid
Request approved. Total and split edited
Payment request sent: $600
Enforced by the server and the database. The interface only reflects it.
| Capability | Admin | Manager |
|---|---|---|
| Directory, accounts, rules | Full | None |
| Assigned accounts and projects | All | Only assigned |
| Track time and add session notes | Yes | If tool enabled |
| Request a payment | n/a | If enabled; edit until approved |
| Approve, edit total and split, mark Paid | Yes | Never |
| Splits, bills, admin cut | Yes | Hidden unless full amount chosen |
| Audit log notes | Edit and delete | None |
| Custom tables | Build and assign | Fill assigned tables |
The short version. Full text in docs/COMPONENT-RULES.md and docs/ENGINEERING-RULES.md.
Tokens only, so every theme and accent works.
Never styled inline in a feature.
Buttons are buttons; icon-only controls have labels.
Real props, realistic text, both themes.
Audit, tasks, notifications are handlers, not inline code.
Created by a rule, closed by an event on the same record.
Integer minor units, typed rate, adjustments after Paid.
Row-level security and per-role response models.
Sections: principles · color · accent · type · shape · status · layout · flows · events · tasks · permissions · rules. Component gallery