Complete Farmer
A design system that survived three product teams
One token layer, adopted in an afternoon, that outlived the team that built it.
Read case studyKit
Every component in section 9 of the brief, rendered at the proportions its Figma frame gives it. Imagery is a labelled stand-in, never a shipped placeholder — except in the last section, where the placeholder is the thing being shown.
Logo, Icon, BrandChip
Logo · outlines, not live text, so the wordmark cannot reflow
on ink · the logo takes currentColor
Icon · 19 Tabler outlines, at the five sizes the frames use
- arrow-right
- arrow-up-right
- chevron-left
- chevron-right
- player-play
- player-pause
- brand-linkedin
- brand-github
- file-text
- calendar
- download
- x
- lock
- brand-x
- brand-whatsapp
- link
- share
- check
1214161820
BrandChip · a 20px mark inline in a sentence
Leading design at Nlockd by day, building Bookflow by night, and Parley when a room needs routing.
Button
Four styles, two sizes, with and without icons. Every style is the same height because the stroke is drawn inside the box. The secondary stroke is ink, not rule — it is a button, not a divider.
size md · 44px, UI/Button 15, 18px icons
size sm · 36px, UI/Label 14, 16px icons
icons
on ink
Breadcrumb
The current page is last, in ink, and is not a link.
TabStrip
50 tall on a 20 gap, with the 2px rule running the full width behind the row so the strip reads as one line. The underline stays in layout when a tab is inactive, which is what stops the row jumping by 2px as the active tab moves. The count pill is band with muted text, and cream with ink text on the active tab — barely there against the page, exactly as the frame draws it. The third tab carries no count, to show the pill is optional rather than a zero.
Arrow keys, Home and End move between tabs. This strip is not linkable: on /work the active tab lives in the URL hash so each panel can be linked to, and only one strip on a page may take that.
The first panel. Switching tabs hides the others, so only one panel is in the accessibility tree at a time.
The second panel. The count on a tab is a number, so a count of 0 still draws a pill — an empty category reads as empty rather than as missing.
The third panel, whose tab has no count at all.
SectionHead
No number prefix and no rule: 64 above, 24 below, and the link is a UI/Label with a 16px arrow.
Writing
Lab
CaseHero
Fraunces 60/64, capped at 900, over an eyebrow row on a 16 gap: the title and dek alone. The eyebrow it used to carry — a label beside a slug — came out of the frames on 2026-10-06.
A breakpoint is a context, not a property
I co-authored Complete Farmer's design system in 2024 and rebuilt it in 2026. The fault that shaped the whole re-architecture was one I had helped ship.
Routing a room without a server in the middle
What it cost to keep the media path peer to peer, and where that stopped being worth it.
MetaBand
Four cells — role, timeline, team, outcome — on a filled band, top-aligned across a 32px column gap so a detail line never pushes its neighbours down.
ContentsOutline
All JetBrains Mono at 14/20 on a 16 gap, numbered in the item itself. Sticky at 1280, flat above the body at 1024.
The rail sits beside the body at 1280 and moves above it at 1024. The active item is amber; everything else is muted until hovered.
DecisionBlock
A 3px marigold bar on the page ground, no panel behind it, with a stacked head on a 24 gap. The third one is a deliberate torture test: nothing may clip or truncate at any width.
Figure, Stat, StatRow, PullQuote
The figure caption is one muted run beginning fig N ·, 24 under the image. Stat tiles are radius-sm with a 34px number, four to a StatRow on a 24 gap — the "numbers" row the case study frames put under an outcome. The pull quote takes the same 3px bar as the decision block, and a Markdown blockquote in the copy renders as one too.
1,483 → 1
colour styles into one collection, six modes
64 → 36
Time picker variants, period modelled as content
0.002%
detach rate across the foundation
84
components across four products
The system stopped being something we had to remember and started being something we could lean on.
WorkRow
A 64px year column, a fixed 520 × 320 preview with its play pill, and the rule on the bottom. The decision line is hidden by default. The third row is locked: the link becomes "Password required" behind the lock and opens the passcode modal instead of navigating.
Parley
Routing a room without a server in the middle
A decision note on keeping the media path peer to peer.
Read case studyComplete Farmer
Designing AI buyers would actually trust
AI decision support for commodity buyers, built on confidence, explanation and a visible way out.
Cards
PostCard · horizontal, 140 tall, 115px square image. Three across, as the home page grids them
essayEverything I caught, I caught by lookingessayConfidence, explanation, overrideessayNotes on shipping a system that outlived my seatCaseStudyCard · keep reading. The title is the headline, not the short name
Complete FarmerA breakpoint is a context, not a property
A design system re-architecture that started with one component that could not be a drawer.ParleyAn unfurl discloses on paste, not on open
A video meeting product built around a guest on mobile data, and the link preview I specified and then withdrew.MotionCard · 568 × 320 ink box, no card around it
0:24Sourcing, end to end
The flow as it runs, at speed. Every move is a real state change, no fake data.
0:18Parse to booking
What the parser sees, and what it does when it cannot tell.
TemplateCard · the stage renders the real component, and says so when it is empty
42
components
Stat tile
A number and a label on cream, at radius-sm.
live preview renders here
Decision block
The marigold-barred block every case study uses to name a call and what it cost.
LabCard · a 180px image over the name, no border. External shows the arrow
ExperienceRow
The row runs a 160 years column and a 260 org column against the role and its line, with the rule on the bottom.
Nlockd
Lead product designer
Design system and product surfaces for a commerce intelligence platform serving EU merchants.
Complete Farmer
Senior product designer
Built the design system from foundations to v1.2 in production, and the AI sourcing dashboard for procurement teams.
ClientBand, PhotoPile, AppStage
ClientBand · 15 marks in one wrapping row, ink silhouettes at 60%, lifting to full opacity on hover
teams I have designed for · 15 and counting
PhotoPile · ten prints at the frame's coordinates, landing 80ms apart, caption tracks the hovered print
five-a-side, most saturdays
AppStage · tap an icon, or swipe, or use the arrows
I build apps. Quite a few apps.
I get asked how I have time for side products. I do not have a good answer.
Hero, About, EssayFeature, HiringNote
Hi, I'm Austine. I design the systems other designers build on.
Senior product designer with a shipped-product habit. Leading design at Nlockd by day, building Bookflow by night. Accra, open to remote EU.
A bit about me
Systems are how I think.Shipping is how I prove it.
I am looking for a Lead or Staff seat where the system is the product.
If your team has three designers drawing the same button, or an AI feature that needs to be trusted before it can be used, that is the work I want.
Chat
On every other route the launcher is fixed 24 from the bottom-right corner and the panel opens over the page. Here both are pinned into the flow so they can be read against the frame — the launcher is live, so clicking it opens the 380 × 560 panel in place, with its ink header, 300-wide bubbles, chips and cream composer. The assistant itself is a stub until section 15.
Austine's assistantAsk anything about Austine EluroHi, I am the assistant on Austine's site. I can answer from his case studies, or take a message and get it to him. What are you working on?
I cannot deliver that yet — message delivery is not connected. Booking fifteen minutes does work, and that reaches Austine directly.
This project is locked
It isn't public yet. Enter your passcode to view it. No passcode? Reach out and I'll send you one.
Don't have one?Say hello
PasscodeModal
Opens from "Password required" on a locked work row — the third WorkRow above does it. Both variants of the set are drawn here the way the kit frame draws them (609:1442): 440 wide, the default 415 tall and the wrong-passcode state 467, which is the error line's 36 plus its 16 gap. The field is masked in both. Inline here, so there is no scrim and nothing is trapped; the live one sits behind the row.
Placeholder, EmptyState
The two components that refuse to reach a production build unless a page passes allowInProduction. They are how the site stayed previewable while the copy and the asset exports were outstanding, and npm run check:scaffoldlists every one still standing.
austine at work
0:12 motion preview
content needed
No case studies are published yet.