JHB

Graaft

Building the site that sells AI people

(Design System + Information Architecture + Front-end Build)

Live · measurement pending

Seen over a man’s shoulder in a dim studio at dusk, a large display on a timber desk showing the Graaft site: the logo top left and, across a photograph of two people talking, the line We build AI people. Made present. A laptop sits open beside the keyboard, a small desktop computer behind it, and a paned window looks out on trees going dark.

(Overview)Graaft sells AI people. Its site had to prove one could feel real without reading as though an AI had written it. I designed, built and wrote it.

At a glance

Client
Graaft
Sector
AI products
Year
2026
Role
Design and build
Scale
13 pages · 76 entries
Status
Live · measuring

The colours, off the site

Type

Aa set in Satoshi Variable at weight 720.Satoshi Variable 720Primary
Aa set in JetBrains Mono.JetBrains MonoSecondary

We build AI people. Made present.

Hero Video: We build AI people. Made present.

The problem

We sell AI people, so the site selling them could not read like an AI wrote it.

Every category has a smell now and ours is the worst of them. Pages of confident, frictionless copy that says nothing and could belong to anybody. A studio selling AI cannot afford one line of it, because the site is the first thing a buyer meets and the whole claim is that we make this stuff feel like a person. The promise is six words, "we build AI people, made present", and a reader decides whether to believe it in about a second. So the site is not a brochure for the work. It is the work, and the first one anybody sees.

What I built to hold it together is one shape: every AI worker, every person on the team and every project answers the same short set of questions, in the same order, from one file. That is why thirteen pages sound like one studio instead of thirteen.

The studio is built the way it builds for others, and the site says so out loud rather than hiding it: two founders and sixteen AI specialists, with the sixteen doing the specialist work and the two holding the standard. That is a structure most people would keep quiet about, and putting it on the About page was my call. A reader who catches you hiding the small thing stops believing the large one, so the awkward structure goes on the page. That is the habit I would bring to somebody else’s product, and it is worth more than any single screen in this study: I would rather lose a claim than keep one I cannot stand behind.

A large display on a timber desk in a dark studio at night, lit by its own screen, showing the Graaft home page: the logo and navigation across the top, the line We build AI people. Made present. set over a photograph of a video call, and in the corner the note Two humans. Sixteen AI co-workers. Ten more for hire. A paned window looks out on the dark behind it and a keyboard sits in front.
The first screen a buyer meets, and the second they decide in.

What I’d bring

I did not design a system and then fill it. I designed pages, and kept the parts that earned a second use.

Fifty components came out of that, every one drawn for this site and not one taken from a library. A component exists here because the design needed it a second time, which is backwards to how design systems are usually taught and is exactly why there is nothing in this one that nobody uses.

The ones that did not work were scrapped immediately and kept as scaffolding, so a component that failed usually became part of the one that replaced it. Nothing here was carried because it had already been built.

That is the part that transfers. Most systems are specified up front and end up half unused, because somebody guessed at what would be needed. This one grew at the speed the design actually asked for, which is why it is smaller than it would otherwise be and why every piece of it is load-bearing. I would work the same way on somebody else’s product: draw it, use it twice, and only then does it become a component.

The Graaft component library page. Under the heading Every component, on one page. a line describes it as a living inventory of the site, every specimen rendered with the production stylesheet and the self-hosted faces, and a row of counts reads 50 components, 41 src/components, 9 components/home, 763 CSS rules and 1 stylesheet. Below it a section headed Foundations shows the colour tokens as swatches with their names and hex values, cream, ink, mid, plate and accent, each with a note on where it is used, and under them the measured contrast ratios. A dark sidebar down the left indexes every component by group.
The component library, and the counts at the top of it.

Outcomes

Thirteen pages and seventy-six entries, running on one content model and fifty components.

Live on graaft.ai, and it is the first thing anyone who might hire the studio meets. Seventy-six written entries and 1,216 separate changes, from one pair of hands. What makes that a design result rather than a build is that it holds one voice at that volume, with no page inventing its own way of describing things. Adding the next one is filling in a shape rather than designing a new page, which is the test the system was built to pass.

The part I would want judged is not the volume. It is that nothing on it claims more than it can hold. Whether it reaches anybody is not measured yet, and the studio built its own console to find out, which is the study next to this one.

Of it, made by one person
100%
AI specialists
16
Components, one stylesheet
50
Passes before a picture ships
6
The Graaft co-workers page: the heading Sixteen seats. Ten for hire. over a line offering sector-specialist AI co-workers for the Australian mid-market in mining, manufacturing, construction and healthcare, running inside your environment and behind your firewall. Below it a grid of cards, each with a portrait photograph, a number out of ten, a sector, a name, a job title and a few lines of description: Tina Mason, an accounts receivable clerk in wholesale distribution; Aroha Tipene, a senior bookkeeper at an accounting practice; and Joel Bautista, an accounts payable clerk in agricultural machinery.
The co-workers page, and the entry shape repeated down it.

Role

I designed and built the entire site, and wrote every word on it.

What I did

  • The content model behind it
  • Fifty components, one stylesheet
  • The rules about our own pictures

What the team did

  • Dave, my co-founder, signs off
  • The models we made them with

Gallery

01 / 06

The home page, and the six words it opens on
One entry shape, and all sixteen co-workers in it
The podcast art, fronted by one of the sixteen
The same page at phone width, with the desktop behind it
Two of the fifty, with their behaviour written beside them
The writing index, and the twelve essays on one template

Use the left and right arrow keys to move through the images.

01 / 06

A large display on a timber desk in a designer’s studio at night, a paned window behind it and a small desktop computer beside it. On screen, the Graaft home page: the logo and navigation across the top, the line We build AI people. Made present. set over a photograph of a video call, and in the corner the note Two humans. Sixteen AI co-workers. Ten more for hire. A keyboard and trackpad lie on the desk in front of it.
The home page, and the six words it opens on
The full length of the Graaft co-workers page, headed 16 studio specialists on the left and AI co-workers, named, accountable on the right. Below it a four-column grid of cards, each with a portrait photograph of a person at their desk, a name, a role, a few lines describing how they work and a quoted line beneath: Tess Halloran, researcher; Harper Quinn, SaaS strategist; Cole Bergman, marketing strategist; Lachlan Pierce, creative director; Pippa Hartigan, senior copywriter; Felix Donnelly, graphic designer and brand identity lead; Jess Tran, UI designer; Hugh Mercer, UX designer; and eight more below them.
One entry shape, and all sixteen co-workers in it
Show art for the Graaft podcast: a portrait of a bearded man split precisely down the centre of his face, the left half lit warm against a wall of pinned type specimens, the right half cooler against pinned flow diagrams and phone wireframes. Across the lower third, the Graaft mark and wordmark, and under it the line by Felix Donnelly.
The podcast art, fronted by one of the sixteen
Seen over a man’s shoulder in the dark studio at night: he holds a phone in both hands showing the Graaft home page at mobile width, the logo and MENU across the top and the headline We build AI people. Made present. over a photograph of a video call. On the desk behind him a large display carries the same page at desktop width, and beyond it a paned window looks out on the dark.
The same page at phone width, with the desktop behind it
The Graaft component library, open at section 05, Home sections. The dark sidebar down the left indexes every component by group. On the right, a specimen headed CineHero with its source path src/components/home/CineHero.tsx and tags reading client and scrub parallax, a paragraph describing the two scrubbed ScrollTriggers that run across the hero’s height, and below it the rendered hero itself carrying We build AI people. Made present. A second specimen, CinePromise, begins underneath.
Two of the fifty, with their behaviour written beside them
The Graaft writing index. Under the heading We publish the rubric., a line describes it as the thinking behind the work, field notes from two founders and sixteen specialists building AI people in Perth and Joburg. A row of filters reads All 12, Craft 4, AI People 4 and Studio 4, and below it a three-column grid of essay cards, each with a photograph, a category, a reading time, a date, a title, a summary and a Read article link.
The writing index, and the twelve essays on one template

(The call)We say which pictures on this site we made with AI. And on every client project we say which ones we did not, because their photographers took those.

Nobody in this category discloses, and the reason is not mysterious: saying an image was generated invites the reader to trust it less. We took that hit on our own pages. The harder half was the second line, because on a site full of declared AI a client’s real photography reads as AI too unless somebody says otherwise, and that quietly takes the credit off the photographer who actually stood there.

Website

Home
Companions
Co-workers
Tina Mason
Studio
Writing
32 pixels, on a receipt
About
Contact
01 / 09

What I learned

When every page was free to describe things its own way, the site drifted inside a fortnight. The shape is what holds the voice, not the writing.

Only I have ever written to that shape, so whether it holds when somebody else adds the next entry is a thing I believe rather than a thing I have tested.

More case studies

View all case studies
A portrait of Priya, the studio’s SEO specialist, who is not a real person: a woman in a dark blazer standing in a home office in front of two monitors showing charts, a corkboard of printed reports, a desk lamp and a small plant.
Graaft Designing Priya, an AI colleague you talk to
A man seen from behind at a desk in the evening, wearing an olive-green jacket, holding a phone in both hands. The phone shows the GardenHarvestAI home page: the logo, a photograph of a basket of tomatoes and courgettes, and the heading Your actual garden. On the large display behind him is the same page at desktop width, with a chat panel open beside it.
GardenHarvestAI Selling a garden companion by teaching first
Seen over a woman’s shoulder as she sits at a timber table in an overwater bungalow, working on a laptop that shows the Seaya Holidays home page: the logo, an underwater photograph of fish over a reef, a search bar, and three blocks of reassurance beneath it. Beyond her, shingled bungalows on stilts, a palm island and clear turquoise water.
Seaya Holidays Building the booking journey around what stopped people
A designer’s desk at dusk lit only by its screens: a large display turned slightly away, showing Absa’s vehicle finance page headed Finance, insure, drive! with a vehicle finance calculator beside it, and a laptop at the left carrying app screens laid out in a design tool.
Absa Personal Bank Setting one pattern across a 29-page redesign
Seen over a woman’s shoulder in her own kitchen in the morning as she reads Absa’s mobile home loans page on her phone: the headline Apply to access funds from my Home Loan, a Tell me more button and an orange Apply now button.
Absa Personal Bank Redesigning the 59 pages that lead to a home loan

Difficult by nature yet simple to use.

Contact

Absa Personal Bank. Home loans journey, 2025.

A designer's studio at night, lit only by the display on the timber desk. Absa's home loans page is open on it, the headline Find the home loan that's best for you over a photograph of a family, with a rates panel beside it. A keyboard and trackpad sit in front, a small desktop computer behind, printed wireframes are pinned to the wall on the left, and two tall paned windows look out on the dark.