Guidelines

Imagery

Builtwell shows real work, big. The image carries the colour and the proof; the page around it stays black and off-white so nothing competes.

The work is the image

Case study covers, as published. Real projects, never stock, never mockups of work that doesn't exist.
Raíces: A heritage brand plants deep roots to cultivate authentic connections.
Raíces · 2024
OneMagnify: Builtwell rebranded OneMagnify and launched their new Webflow site.
OneMagnify · 2023
Embrujo: A bold brand embraces authenticity to cast its spell on American markets.
Embrujo · 2024
Aldana: A restaurant brand transports diners from table to Mexican plaza.
Aldana · 2023
La Niña: A Mexican churrería brings authentic tradition to modern appetites.
La Niña · 2023
Tlynt: A casting platform bridges the gap between authentic talent and targeted advertising.
Tlynt · 2023
Time Out Taco: Serving up success: Time Out Taco's brand transformation.
Time Out Taco · 2023
HalfRez, a Builtwell project
HalfRez · 2022

Full bleed

Full bleed for the moment a page is about the work. Inside the grid, images keep the outer gutter and round their corners only in the UI, not on case study spreads.
Raíces: A heritage brand plants deep roots to cultivate authentic connections.

Crops

Four crops. Pick by what's in the frame, then crop with intent: the subject stays whole, the edges do the cutting.
Aldana: A restaurant brand transports diners from table to Mexican plaza.
aspect-videoProject covers and heroes. The default.
Aldana: A restaurant brand transports diners from table to Mexican plaza.
aspect-3/2Case study spreads, two up.
Aldana: A restaurant brand transports diners from table to Mexican plaza.
aspect-4/5People and products, in a grid of three or four.
Aldana: A restaurant brand transports diners from table to Mexican plaza.
aspect-squareSocial, logos in context, avatars.

Text on images

Type over a photograph sits on a black scrim from the edge it's set against, and is off-white. If the image has to fight the text, move the text off the image.

Time Out Taco

DoA black scrim from the bottom, off-white type.

Time Out Taco

Don'tType straight on a busy image. It drops out in places.

Placeholder

Until the real image exists, use /images/placeholder.png. It reads as a placeholder at a glance, so nobody ships it by mistake.
Placeholder
/images/placeholder.png

In code

Always next/image, always with sizes. Sanity images go through its CDN at the width the slot needs.
import Image from "next/image";
import { urlForImage } from "@repo/sanity/image";

<div className="relative aspect-video overflow-hidden">
  <Image
    alt="Raíces: a heritage brand plants deep roots"
    className="object-cover"
    fill
    sizes="(min-width: 990px) 50vw, 100vw"
    src={urlForImage(project.coverImage)?.width(1600).url() ?? "/images/placeholder.png"}
  />
</div>
SlotRequest widthsizes
Full bleed hero1920100vw
Half the grid1200(min-width: 990px) 50vw, 100vw
Card in a grid of three800(min-width: 990px) 33vw, 50vw

Rules

  • Real work and real people only. No stock photography, no AI images passed off as client work.
  • Alt text says what the image shows and whose project it is. Builtwell is one word there too.
  • Don't round case study images inside a spread; rounded corners are for UI thumbnails.
  • No filters, duotones or colour overlays on client work. The scrim is the only overlay, and only under type.
  • Never an img tag: next/image with sizes, so phones never pull a 1920px PNG.