PLZBRO design system
Grain turns to ink as a plz becomes real, and everything that happens prints. Each part on this page is the one the product uses, reading the same tokens.
01 Principles
- Density is truth. There is no grey ink. Lightness is dot density, and density always means something: how certain a thing is, or how long ago it happened.
- Everything that happens prints. Each state change is a printed line on the plz's receipt, with a time. The receipt is the proof, and the thing people share.
- The amount leads. On every plz surface the money and who it is waiting for come first, the sentence second, the one action third.
- Precise and quiet. Hairlines, one accent, generous space, small mono labels, exact alignment. Motion is small and physical, and explains a change.
- One idea per screen. Pages fit the viewport or scroll in one calm column. No nested scroll areas, no dashboard panels.
02 Colour
Two grounds, one system. Slips are paper in both, so at night they glow on the counter. Signal is the only accent.
Day
- --paper Page ground
- --ink Text and solid marks
- --meta Small labels only
- --rule Hairlines
- --signal Real money, the one primary action
- --on-signal Text on signal
- --void VOID, refusals, errors
- --slip Receipt paper
- --slip-ink Text on slips
- --slip-meta Labels on slips
- --slip-rule Rules on slips
- --slip-signal Money on slips
Night
- --paper Page ground
- --ink Text and solid marks
- --meta Small labels only
- --rule Hairlines
- --signal Real money, the one primary action
- --on-signal Text on signal
- --void VOID, refusals, errors
- --slip Receipt paper
- --slip-ink Text on slips
- --slip-meta Labels on slips
- --slip-rule Rules on slips
- --slip-signal Money on slips
03 Type
Inter Tight for every word people read; Martian Mono, wdth 75 to 112.5, for receipts, labels, numbers and ids.
- --fs-poster The plz page amount$300
- --fs-display Landing and composer sentencesI'll pay $300 to @threadooor
- --fs-head Page titles, the plz page's second lineis waiting for whoever does it
- --fs-title Section and sheet titlesNeed something done on Fomo?
- --fs-amount Amounts in board rows$1,250
- --fs-lead Lead paragraphs, row askspost a thesis on PLZBRO
- --fs-body Body textThey paste the link. You check it.
- --fs-ui Buttons and inputsSay plz
- --fs-mono Receipt lines10:29 PAID ........ $500.00
- --fs-label Uppercase mono labels2D 7H LEFT · FOMO
- --fs-micro Barcode captions, fine printPLZ-7Q2F0A91
04 Space and grid
A 4 px base. Twelve columns, margins of clamp(20px, 3.4vw, 56px), gutters of 24 px (16 px on phones), content at most 1440 px.
- --s1
- --s2
- --s3
- --s4
- --s5
- --s6
- --s7
- --s8
- --s9
05 Certainty
The one token family every state-bearing part reads. Grain draws at the state's density; old print fades to 0.55 over seven days.
- 0.00voidrefunded, expired, canceled
- 0.35promisea promise with no money; blanks
- 0.45openlive and waiting for someone
- 0.60takena spot claimed, an offer accepted
- 0.80checkingproof sent, being checked
- 1.00paidpaid, or money locked
06 Motion
- micro
- 140 ms
- exit
- 160 ms
- enter
- 260 ms
- resolve
- 520 ms
- 220 ms
- printStagger
- 45 ms
- morph
- 420 ms
- underline
- 180 ms
- hold
- 900 ms
- ease out
- cubic-bezier(0.22, 1, 0.36, 1)
- ease in
- cubic-bezier(0.5, 0, 0.75, 0)
- ease stamp
- cubic-bezier(0.2, 0.9, 0.3, 1.2)
- resolve / dissolveGrain density moves to a new value in blue-noise order, so dots arrive or drop evenly.
- printA line reveals left to right in steps behind a 1 px print head.
- pressDown 1 px while held, back with the stamp ease.
- busyA 2 px line prints along a button's bottom edge until the answer arrives. Never a spinner.
- doneThe label gives way to a check that prints in, held for 900 ms.
- refuseA 3 px shake where something was refused, the reason printed beneath.
- stampPAID, VOID and CHECKING land from 1.18 at their angle.
- tearA paid receipt's stub separates along the perforation.
- rollA changing number rolls its digits like an odometer.
- underlineLinks draw their underline from the left and retract to the right.
07 Grain
Certainty and grain
Six densities, one per state. The square leads every row and state label; grain draws real text at the same density.
Day
- 0.00 voidpost a thesis on PLZBRO
- 0.35 promisepost a thesis on PLZBRO
- 0.45 openpost a thesis on PLZBRO
- 0.60 takenpost a thesis on PLZBRO
- 0.80 checkingpost a thesis on PLZBRO
- 1.00 paidpost a thesis on PLZBRO
Night
- 0.00 voidpost a thesis on PLZBRO
- 0.35 promisepost a thesis on PLZBRO
- 0.45 openpost a thesis on PLZBRO
- 0.60 takenpost a thesis on PLZBRO
- 0.80 checkingpost a thesis on PLZBRO
- 1.00 paidpost a thesis on PLZBRO
Resolve and dissolve
Grain moves to a new density in blue-noise order, so dots arrive or drop evenly. Under reduced motion it lands at once.
Day
post a thesis on PLZBRO
0.45 openNight
post a thesis on PLZBRO
0.45 openObserve
Only the landing's promise line. A fine pointer near it thins the grain and re-rolls it, rendering only while the pointer moves.
Day
I'll pay you later. Trust me bro.
Night
I'll pay you later. Trust me bro.
Blocks
Blanks, placeholders and loading. A skeleton is grain blocks at a promise.
Day
- 0.00 void
- 0.35 promise
- 0.45 open
- 0.60 taken
- 0.80 checking
- 1.00 paid
Night
- 0.00 void
- 0.35 promise
- 0.45 open
- 0.60 taken
- 0.80 checking
- 1.00 paid
Money
Signal only when the money is real, locked or paid. Money not locked yet is grain at a promise and resolves to solid as it locks; money that went back is struck.
Day
The pot holds $300 until proof is in.
Night
The pot holds $300 until proof is in.
Sentence
The plz as one sentence. The work is grain until proof is in and ink once it is paid; an outline when the money went back. With resolveFrom, the words draw at that density on first mount and resolve, as the landing's featured ask does; the amount stays solid.
Steps
Say it, Lock it, Prove it, Get paid. Done steps are solid, the current one resolves to its density, later ones are outlines. With captions, as on the landing, each step takes a column and its sentence (stacked on phones); off screen at first, the squares resolve one after another as they scroll in.
Day
- Say it (done)
- Lock it (done)
- Prove it
- Get paid
Proof in. The asker checks it; silence for 72 hours after a proof pays the bro.
Night
- Say it (done)
- Lock it (done)
- Prove it
- Get paid
Proof in. The asker checks it; silence for 72 hours after a proof pays the bro.
- Say it (done)
Write the ask as one sentence: what, who, where, how much, by when.
- Lock it (done)
The money goes into escrow first, so they can see it's real.
- Prove it (done)
They paste the link. You check it.
- Get paid
They get the whole reward and a receipt. Anything unused comes back to you.
Board
One ask a row, set like a table: certainty, the amount, the work, who, where, time left and the one action. Rows print in on first load.
- Do itAn ask open to anyone, with spots left.
- Accept $300The person an offer names.
- Everyone else on that offer: no action. The who column says for @threadooor.
- Spots takenEvery spot is held.
- YoursThe asker, on their own ask.
Rows by their list
A row lays out by the list it sits in (RowList or AskBoard), not the screen: under 1150 px it takes two lines. Me's column is about 880 px, and its rows carry the viewer's next step in the slot under the work.
08 Receipts
design/receipt · tape · report · toast
Thermal paper, the proof that something happened. Slips print on a whole-pixel grid of mono columns, cut to whole teeth, light paper on both grounds.
A receipt
Done lines in ink, money in signal, rules at the foot. Paid receipts are stamped and torn along the perforation.
Day
RECEIPT
Night
RECEIPT
Pending and void
What hasn't happened yet is grain at --c-promise with its value blank. What didn't happen is struck.
Day
RECEIPT
RECEIPT
Night
RECEIPT
RECEIPT
SlipLine
Label and value joined by a dot leader that falls on the columns. Money never breaks: a long label wraps, and the leader and the money follow its last line. A long value wraps under its first line. A “·” sub-line hangs its wrapped lines under its first word. Lines print what they are given: caps(text) keeps @handles, quotes and plz as written.
Day
Night
Rules, notes and marks
Dashes one a column, a double rule before a total, fine print, a scannable Code 128 and a QR code in slip ink.
Day
Fine print: Fomo can't be read automatically; the asker checks the author and the post.
Night
Fine print: Fomo can't be read automatically; the asker checks the author and the post.
DotText
Round dots on a 5 × 7 grid. Density inks a share of the dots in blue-noise order; the rest stay as rings, so the word stays legible.
Day
Night
Stamp
PAID and LOCKED in signal, VOID in void, CHECKING in ink at --c-checking. Large at −6°, small at −4°. SlipStamp presses one among a slip's lines, taking no room: across the total on its leaders, never over a value, or over the right edge.
Day
Night
Edges
Zigzag at both ends; a tear-off stub below a perforation; flat for slips set into something else.
Day
Night
Motion
print: 8 px steps behind a 1 px head, 220 ms a line, 45 ms apart. stamp: lands from 1.18, then the ink spreads. tear: the stub drops 6 px and turns 0.6°.
PRINTED
PAID
Tape and X-report
What happened, from /v1/activity, live from the activity stream: new lines grow in and print, the oldest collapses off. Older print loses dots.
WHAT HAPPENED
X-REPORT
WHAT HAPPENED
X-REPORT
Toasts
Small slips at the bottom centre that print in and tear away. Done, refused, with an action, busy then done.
09 Controls
Square, ink and one signal blue. Every press, wait, success and refusal has its own motion, and every state below is the real component.
Button
Primary is solid signal, one per view. Secondary is a 1 px ink outline. Quiet is text with an arrow. With href it is a link.
TextLink
Links in running text are ink, set apart by a rule: dotted at rest, drawn solid while reached for.
Choice
One of a few. Chips are 1 px outlines and the chosen one is solid ink; a word inside a sentence opens a small slip of its alternatives.
Show on , .
Show on , .
Field
A value written on a rule. Focus draws a 2 px signal rule in from the left; a refusal turns it void and prints the reason beneath.
Sheet
The one overlay: a 480 px slip from the right edge, a bottom sheet on phones that drags away. Focus stays inside; Escape closes it.
Handle
@handle with its mark: 5 × 5 symmetric cells from the handle's hash, whole pixels per cell. It links to the profile.
PlatformMark
Where the plz happens: Fomo and X, 14 px, ink.
TimeLeft · Ago
Mono relative times that keep up with the clock. Hover one for the exact time.
Motion
The family's part of the motion vocabulary, one at a time. Under reduced motion each one lands in its final state.
10 Money flow
MoneyFlow: the asker, the escrow, PLZBRO's fee and the bro on one line. The bar of grain sits where the money is: a promise at the asker before it locks, solid in escrow, paid to the bro with the fee peeled off, or back with the asker.
- Pending
Nothing is locked yet. Once it is, $150 and the $15 fee wait in escrow, and $150 goes to whoever does it when it's done. - Locked
$150 and the $15 fee are locked in escrow. On payout $150 goes to whoever does it and $15 to PLZBRO. - Locked, five spots
$750 and the $75 fee are locked in escrow. On payout the first 5 get $150 each, and PLZBRO the $75 fee. - Paid
$150 went from escrow to @threadooor, and $15 to PLZBRO. - Refunded
$150 and the $15 fee went back from escrow to @alphadesk.
11 Page transitions
- Board row → plz pagepage-forwardFeeds out the top, in from below; the amount morphs (amount-<id>)
- plz receipt → receipt pagepage-forwardThe slip morphs into the full receipt (slip-<id>)
- Say plz → composerpage-forwardA new sheet feeds in
- Wordmark, back linkspage-backThe reverse: out the bottom, in from above
- Nav, browser historypage-fadeA 160 ms crossfade; the nav stays put
- Theme changeground-feedThe new ground feeds down from the top