Back to projects

Graaft

At night, a man holding a phone up in front of a large display, the home page on both.

Project details

Client
Graaft

Designed, built and written as one job, Graaft’s website was given the same voice on every page and fifty components of its own.

The lockup on Ink: the Graaft figure beside the wordmark, in cream.

Brief

Graaft’s buyers run mid-sized businesses. They are sold AI constantly and have learned to discount it, so the site needed to be believed at a glance and never read as if AI wrote it.

At night, a large display on a timber desk showing the graaft.ai home page, the window’s bars behind.
The Graaft figure alone on Rust, in Ink.
A phone face up on a worn timber table, the home page on its screen.
A display and an open laptop side by side on a timber desk at night, the home page’s hero on one and They learn the room. on the other.
The home page from its real top: the hero line over a display in a study, the line again on cream, then They learn the room.
A man at a display at night, the home page’s co-workers on its screen, page wireframes pinned to the wall beside him.
The home page’s co-workers on ink, from the top of the screen: the nav, Tina Mason, Aroha Tipene and Joel Bautista’s cards, the arrows and See all.

Colour

  • PaperGround#F2EBDA
  • WordsInk#1A1410
  • EmphasisAccent#C0612A
  • Second voiceMuted#6B5F54

Type

  • Aa, set in Satoshi Variable 720PrimarySatoshi Variable 720
  • Aa, set in JetBrains MonoSecondaryJetBrains Mono

Approach

  • Same questions, same order

    What it is, why it matters, how it works and what it produces: every profile, project and essay answered them in that order.

  • Needed twice

    A component was made only once a page needed it a second time.

  • Pictures declared

    The site’s pictures were labelled as generated and hand-finished, and client projects named their photographers.

A man at a large display in a studio at night, the co-workers page from its top, nav and all, on its screen.
The co-workers page from its real top: Sixteen seats. Ten for hire., then profile cards, each a portrait, sector, name, role and one line, in one order.
Tina Mason’s profile page from its real top: her portrait, name and role, a quoted line in rust, then the fixed fields and Hire Tina Mason.

Result

The site is live at graaft.ai, and adding the next profile or project means answering the same questions, not designing a page.

A large display square on, on a timber desk at night, the Companions page on its screen.
A desk at night from above: Your kitchen. Your garden. on the display, Sofia on a phone face up, a laptop showing code.
The Companions page from its real top: Companions., Deme, who knows the garden, then Sofia, who knows the kitchen.
The studio at night: the Writing page, We publish the rubric., on a display on a long timber desk, wireframes pinned to the wall.
The Writing page from its real top: We publish the rubric., its filters and essays on one template.
An essay from its real top: its player, then 32 pixels, on a receipt. Where every identity starts. and its standfirst.
Felix at his desk in Graaft’s studio, headphones round his neck, a microphone on its arm beside him.
An open laptop square on, on a timber table at night, the component library’s Home sections on its screen.
The component library from its real top: Every component, on one page., its five counts, then the colour tokens and Typography.
A timber desk from above: the co-workers page on a phone, Sixteen seats. Ten for hire., beside pens, a steel rule, glasses and a printed layout.

Credits

Design, build and writing
Will Derman
Sign-off
Dave Derman