Paper holds the story.
Warm, quiet surfaces frame the book. Image and caption belong to print. Controls stay outside that promise.
The internet is temporary.
Make your mark.
A shared language for one collective book. The artwork gets the stage. The interface makes the next move clear.
TFTI / SYSTEM 01ONE SYSTEM · EVERY SCREEN
Ink holds the activity.
Dark surfaces bring proposals, people, balances and conversations together. Content, not chrome, provides the colour.
Intent sets the hierarchy.
Blue moves you forward. Neutral actions navigate and support. Red stays expressive, with explicit words when it means danger.
A small vocabulary. A strong character.
Inter speaks to people. JetBrains Mono labels the book, the clock and the numbers. Warm neutrals connect the physical object to its digital workspace.
One hundred pages.
One moment in time.
Room for the image. A reason to remember it.
Open the bookFind your people.
Take it together.
Proposals turn a shared idea into a place in print.
Explore proposalsA quiet backdrop.
The dotted canvas adds structure behind the interface. Its color follows the selected light or dark theme.
Display / Inter 800Leave your mark.
Title / Inter 700–800Take a page together
Body / Inter 400
Back the images you believe belong in the book. Your Ink joins everyone else's.
Metadata / JetBrains Mono
PAGE 041 / 100 · 25 INKSpacing: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64Radius: 8 controls · 12 cards · 20 overlays
Implementation notes
src/lib/shared/design-system/tokens.csssrc/lib/features/tfti/tfti.csssrc/lib/features/mobile/mobile.css
One clear next move.
Primary actions commit or advance. Secondary actions support that decision. Navigation stays neutral. A disabled action explains what is missing nearby; loading prevents a second submission.
Commit + advance
Use the product's verb. State the cost at the point of commitment.
Navigate + support
Round controls belong to spatial navigation. Utility controls do not compete with the main action.
Express + protect
Red is part of TFTI's voice. Danger also needs an unambiguous label and a safe way out.
Wait + recover
Add an image and a reason before taking a page.
THE CONTROL SCALE
Touch controls have at least a 44px target. Text can wrap; narrow screens never clip the action.
Implementation notes
src/lib/shared/ui/Action.sveltesrc/lib/shared/design-system/controls.css
Ask clearly. Respond locally.
Every field has a persistent label. Hints explain the requirement before submission. Errors stay beside the value that needs attention.
We send a one-time link. No password to remember.
10–40 characters, printed with your image.
Use letters, numbers or underscores. No spaces.
This field is unavailable while your account is being updated.
Ink is not dollars.
Dollars describe payment. Ink describes participation. The rate and the actual available presets come from the billing feature.
Minimum $5 · $1 = 1 Ink
Implementation notes
src/lib/shared/ui/TextField.sveltesrc/lib/shared/ui/CustomAmountField.sveltesrc/lib/features/billing/components/DepositAmountPicker.svelte
A focused step, not a new world.
The same dialog becomes a bottom sheet on a phone. The title says what happens here, the context survives dismissal, and keyboard focus stays with the task.
Ink loaded
Your wallet is ready for your next move.
The image did not upload
Your reason is saved. Check your connection and try again.
Finding your activity
Your latest page takes and proposals are on their way.
No proposals yet
An image and a reason are all you need to start.
Transient feedback
Toasts confirm a completed action. Important errors also stay in the affected screen.
Active proposalIn the bookClosing soonUpload failedPending review
Implementation notes
src/lib/shared/ui/Dialog.sveltesrc/lib/shared/ui/dialog.tssrc/lib/shared/ui/Feedback.sveltesrc/lib/shared/ui/AppToaster.svelte
Show the object. Explain the move.
The six-step introduction uses the current onboarding artwork. Big ideas get short sentences. The final blue action hands the visitor to the book.
THINGS
FROM THE
INTERNET
FROM THE
INTERNET
VOL. 1 · 100 PAGES
HOW IT WORKS / 1
The internet has no history books.
So we’re printing one. 100 pages, ten days. Then it’s over.
1 INK
P. 048
AVERAGE UNC STATUS NO CONTEXT REAL ONES KNOW @you · 1 Ink @ghostposter · 2 Ink
1 INK YOUR IMAGE HERE
HOW IT WORKS / 2
Take a page. Say why.
Tell everyone why it belongs in the 2026 snapshot. No reason, no page.
1 INK2 INK3 INK ↗
HOW IT WORKS / 3
Cheap now. Not for long.
Every take costs 1 Ink more than the last. Get in before you can’t.
9 of 22 INK · 14 people in
HOW IT WORKS / 4
Can’t afford it alone? Get a mob.
Pool your Ink with everyone who agrees. Take the page together.
HOW IT WORKS / 5
Then it’s a real book.
Printed once. Nobody can delete it.
--d --:--:--
UNTIL IT PRINTS
HOW IT WORKS / 6
Printed once. Nobody can delete it.
Whatever gets defended is what 2026 looks like. Clock’s running.
Implementation notes
src/lib/features/arrival/components/Walkthrough.sveltesrc/lib/features/arrival/components/steps/StepVisual.sveltesrc/lib/features/arrival/data/steps.ts
Make the commitment clear.
The image leads. The live price, holder and remaining balance frame the decision. The printed caption and the consequences are stated before the blue commitment action.
CONFIRM THE TAKE
Take page 12
YOUR IMAGE✓ ATTACHED
- Page price
- 19 INK
- Currently held by
- @papertrail
- You have
- 45 INK
- Left after this
- 26 INK
✓ this prints in the book2 left
Yours goes up, theirs comes down, and @papertrail gets told about it. They can pay 20 INK to undo you.
If this image is pulled, you lose the page and the Ink. Nobody else on this page is touched.
Implementation notes
src/lib/features/tfti/components/ClaimForm.sveltesrc/lib/features/tfti/components/ConfirmSheet.sveltesrc/lib/features/tfti/components/confirm-sheet-copy.tssrc/lib/features/tfti/components/CropModal.svelte
Know what you have.
The available balance is the main fact. Buying Ink is the next action. Missing data is shown honestly, with a recovery path instead of an invented zero.
Every page is priced in Ink. 1 Ink costs $1.
Every page is priced in Ink. 1 Ink costs $1.
Your balance is unavailable
We could not read your wallet. No amount has been changed.
Implementation notes
src/lib/features/wallet/components/WalletBalance.sveltesrc/lib/features/wallet/components/WalletView.sveltesrc/lib/shared/ui/Screen.svelte
A page, taken together.
Show what the pool has, what it still needs, and what the next contribution changes. A head start is distinct from contributed Ink.
Proposals · pool your Ink · take any page
No page is out of reach
when everyone chips in.
Pitch the image you want, seed the pool with a little Ink, and let everyone who wants it add more. The moment the pool reaches the page price, the image takes the page.
Pool Ink with your friends, your server, your whole corner of the internet, and take the pages nobody could take alone.
One proposal, two compositions. List rows lead with the author and pitch; cards lead with the image and the Ink still needed. Gold marks a pool at least 80% funded. These are the app components with illustrative data; preview actions do not spend Ink.
PROPOSED
12 TO OVERWRITE
18h 0m 8 / 20 INK PROPOSED
2 TO OVERWRITE
2h 0m 18 / 20 INK PROPOSED
8 TO OVERWRITE
18h 0m 4 / 20 INK 8 head start Preview a contribution
8 of 20 INK pooled · 12 still needed
+1 INK from you
Page history
Newest first · swipe up for older versions
← EarliestDrag or scrub through history · select an image to previewMost recent →
Revive: choose a new page
Illustrative targets. Selection is neutral; the blue confirmation in the revive dialog commits the choice.
The striped area previews the next contribution; it is not yet part of the pool.
A revived pool
2 INK pooled · 8 INK head start · 20 INK goal
The marked segment explains why this pool is already halfway to the page. A head start is not a wallet deposit.
Opening a pool
Opening a pool uses 1 proposal credit. You have 4.
Proposal credits are spent when the pool opens and are not refunded, even if it expires. If the pool expires, your Ink stake is refunded in full.
No proposal credits
You're out of proposal credits.
Proposal credits are spent when the pool opens and are not refunded, even if it expires. If the pool expires, your Ink stake is refunded in full.
One Ink buys 10 proposal credits.
Illustrative balances and exchange rate. The app reads these figures from the wallet.
Implementation notes
src/lib/features/tfti/components/PoolProgress.sveltesrc/lib/features/tfti/components/ChipInSheet.sveltesrc/lib/features/tfti/components/ProposalCreditLine.svelte
Keep the system connected.
The kit is a living reference, not a separate mockup. Change a shared component, then check it in the product before calling the change complete.
One source per decision.
Colour, type and geometry come from shared tokens. Actions, fields, dialogs and navigation render their production components here. Product patterns inherit them.
Plain words. Exact meaning.
Use “Ink” for participation, dollars for payment, and “proposal credit” in full. Explain pending, failed and empty states without pretending a result is known.
Accessibility is a state.
Test keyboard focus, touch targets, reduced motion, errors, long content and zoom. Colour supports meaning; it never carries meaning alone.
Review the actual flow.
Before changing Figma or shipping code, compare the same component states at phone, tablet and desktop widths. Record deliberate exceptions in the rollout log.
Implementation notes
tfti-plan/v2/work/design-system-rollout.mdtfti-plan/v2/work/design-system-progress.md