Give every action
a clear purpose.
Blue advances the task. Neutral controls navigate and support. Loading and disabled states make the boundary visible, while feedback gives a useful next step.
One system.
Every screen.
A shared visual language for a collective book. Clear controls, expressive details, and the same familiar patterns wherever you join in.
Loading the published card specimens…
A collaborative product
Built with the TFTI team. My contribution spans front-end implementation, the design system, Go backend, and cloud infrastructure. Backend work includes authentication, proposals, wallets and payments, realtime updates, admin functionality, and content moderation. Infrastructure work covers deployment, data services, storage, and recovery, including the Grafana monitoring setup with Prometheus metrics and dashboards. We use Figma for design and collaboration, alongside the maintained code-based kit. Brand and visual direction are collaborative contributions.
The front-end challengeKeep the character.
Keep the character.
Make the next move clear.
TFTI brings images, people, proposals, and page history into one shared workspace. The interface needs to feel expressive while keeping the decisions around it easy to understand.
The design kit connects those decisions: actions and fields, focused dialogs, balances and funding, navigation and feedback. Shared components carry the visual language across the product.
From the published design kitThe details.
The details.
Working together.
A closer look at the real kit’s components. Explore nine groups of specimens, switch appearances, and try the local example controls.
01 / ACTIONS
One clear next move.
Primary, secondary, expressive, disabled, loading, and recovery actions share a clear hierarchy.
See this in the public kit ↗ (opens in a new tab)Loading the published kit specimens…
The system decisionsRecognisable.
Recognisable.
From part to whole.
Give every action
Keep the meaning
across screen sizes.
Desktop headers and mobile navigation share destinations. Dialogs become sheets. Proposal rows and cards tell the same funding story in different amounts of space.
Let the materials
carry the character.
Warm paper and deep ink provide a quiet ground for the artwork. Seven contributor-card treatments celebrate participation while keeping the same structure and rules.
The living design systemA small vocabulary.
A small vocabulary.
A strong character.
Inter carries the conversation. JetBrains Mono labels the book and the numbers. Semantic roles connect warm paper, deep ink, and a blue next action across the product.
Canvas
#f5f4f0Surface
#fbfaf6Text
#0c0c0aAction
#3e6ef0Accent
#e5372aCollective
#3e6ef0INTER / 400–800
PAGE 041 / 100 · 25 INK
Leave your mark.
The artwork belongs to the book. The interface makes the next step clear.
JETBRAINS MONOPAGE 041 / 100 · 25 INK
SPACING / 4 · 8 · 12 · 16 · 24 · 32RADIUS / 8 · 12 · 20PAGE FLIP / 660ms
The implemented foundationConnected by code.
Connected by code.
Consistent by design.
15Sections in the public kit
107Unique TFTI CSS tokens
16Shared UI component files
07Contributor card treatments
Source counts captured in October 2026. Portfolio specimens use the public kit’s example data. Explore the live product for its current content and full interactions.
Experience the productOpen the live TFTI app ↗ (opens in a new tab)