Art Direction Daily

New from Automattic, November 9

Each publish gets a link the client can still open next month

Art Direction DailyNO. 178Mon, Nov 9, 20265 min read

Automattic's new Spacefast hosts what your assistant builds and hands the link back in the chat. Every publish becomes a version at its own permanent address, so client review turns into a list of links.

Read the delivery notesSkip to the prompt
Cut-paper diagram on spruce green paper: a pale violet speech bubble, a dotted kraft route to a kraft parcel tied with violet string, and on to an off-white front door with a blank number plate.
The route: a request leaves the chat, travels as a package and arrives at a door with its own number.Cut paper, shot flat

Today's art direction

The Courier Dispatch Page

A local courier's landing page in cut paper and franking violet, where How it works reads like a tracking history.

  • Postmark masthead
  • Rubber stamp markers
  • Tracking timeline
  • Waybill fields
  • Cut-paper diagram
  • Terrazzo ground
  • Franking violet

The archetype is a local service business page, the kind a same-day courier or a removals firm pays for: one promise, one booking path, proof that the parcel arrives. It wears the livery of a dispatch office. A postmark carries the issue details, rubber stamps land on the corner of each delivery step, and a cut-paper route diagram sits above a tracking line that doubles as the contents.

Archivo at its widest cut gives the van-side lettering, and Newsreader keeps the reading calm on label-white cards over a spruce terrazzo ground.

Tooling, automattic.com, November 9, 2026

Spacefast hosts what the assistant built and hands back the link

Automattic has launched Spacefast, a hosting service from a new Automattic company that you run through the AI assistant you already use. Connect it to ChatGPT, Claude, Grok or one of the coding tools it lists, ask for the project to go on Spacefast, and a link comes back in the conversation. There is no dashboard to visit.

The part a designer should notice is the versioning. Each publish creates a new version with its own permanent URL, older builds stay linked, and you can roll back. A draft can stay behind a password, an invite or a share link before the whole web sees it.

It comes with hosting, your own domain and a SQL database, and Automattic says it runs on the same infrastructure as WordPress.com and Tumblr. There is a free personal plan, and the company bills for infrastructure rather than AI credits. An API, a CLI and an MCP server sit beside the chat flow.

The preview link stops moving. The client opens the build you showed them, not whatever shipped after it.

Technique, vercel.com/changelog, November 6, 2026

Vercel's chat cards are composed from a catalog you typed

Chat SDK agents can now stream generative UI through json-render. The agent writes a JSON spec against a typed catalog of components, and json-render turns it into a Chat SDK card that each platform adapter posts in its own format, Block Kit on Slack and Adaptive Cards on Teams.

The catalog is where the design lives. The agent can only compose from the components on that list, so whoever writes the list sets the look of every reply. That carries on from issue 108, which argued the chat surface deserves the same care as the page around it.

Workflow, from the Spacefast launch notes

Review by version, not by site

Cut-paper shelf on spruce green paper holding six kraft parcels with blank paper tags on violet string; the fourth parcel, tagged in pale violet, is pulled forward off the shelf.
Six publishes on one shelf, the fourth pulled forward the way a rollback brings one back.

  1. Send the version, not the homepage

    Because each publish keeps its own permanent URL, the review email can point at exactly the build you discussed. Feedback arrives against something that does not change under the client.

  2. Keep the door shut while it is rough

    Put an early draft behind a password or an invite, then open it to the web once the client signs off.

  3. Let the risky steps ask first

    Rollbacks and DNS changes go through an approval check, so asking the assistant for last week's version is a confirmed step rather than a surprise.

Design move, borrow this pattern

Write How it works as a tracking history

Service pages usually explain themselves with three equal cards: book, we come, done. A tracking line does the same job with more honesty. Lay the stages out the way the customer sees them on the day, give each one a real lead time, and fill the line up to the current stage.

Use it on any page selling a sequence the customer waits through: couriers, removals, print shops, repair services, a studio's onboarding for a retainer. It stays honest when the times are ones you can meet and exactly one stage is marked current.

  1. Name stages as the customer's events: booked, collected, en route, delivered.
  2. Every stage carries a time or a window, never a vague promise.
  3. Fill everything before the current stage, outline everything after it.
  4. Under 640px the line turns vertical and the times sit beside each stop.
Preview a stage
  1. Bookedby 11:00Now
  2. Collectedby 12:30Now
  3. En route40 minNow
  4. Deliveredby 15:00Now

One stage is current; the line fills up to it with a plain CSS :has() selector and no script.

.track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.track li {
  border-top: 4px solid var(--line);
}
.bench:has(#st2:checked)
  .track li:nth-child(-n+2) {
  border-top-color: var(--ink);
}
@media (max-width: 640px) {
  .track { grid-template-columns: 1fr; }
  .track li {
    border-top: 0;
    border-left: 4px solid var(--line);
  }
}

Prompt Lab

Build a courier dispatch page

Build a landing page for a local same-day courier service. Treat it as a real client page: one promise, one booking path, proof of delivery.

Palette: spruce green ground #163A30, a deeper #0F2A23 for the top bar and dark cards, cool label white #EEF0E7 for content cards, green-black ink #15211D for text on cards, franking violet #4E2F8F for stamps, links and buttons on light cards, pale heather #C2B2EA for links, buttons and stamps on the dark ground, sage #93B3A1 for secondary labels, kraft #C29A63 only for small luggage-tag chips.

Type: Archivo at its widest width (font-stretch 125%) in weight 800 for the headline and section titles, like van-side lettering; Newsreader 400 for body at 19px with a 1.7 line height; Martian Mono only for tracking codes and small uppercase labels.

Structure:
1. A slim dark top bar with the business name and three links.
2. Hero: a large wide headline, at most 15 characters per line. A circular postmark in heather outline, rotated about 9 degrees, overlaps its top right corner and holds the business details (service area, hours, phone) in place of a metadata row, with three wavy cancellation lines trailing from it. Below, one sentence of deck on the left and a Book a pickup button plus one text link on the right.
3. A wide cut-paper illustration of the route (a phone or speech bubble, a parcel, a front door) in a thin label-white frame with a one-line caption.
4. Directly under it, a horizontal tracking timeline that doubles as page navigation: four stops (Booked, Collected, On the way, Delivered) on a dashed heather line. Each stop is a link to a section with a short tracking code, the stage name and a real time window. Filled dots up to the current stop, outlined after.
5. Content sections as label-white cards with a 10px radius on the ground. Mark each card with a rubber stamp in violet outline (double border, two lines: a code and a stage word), rotated a few degrees and overlapping the card's top right corner. Vary each stamp's angle and position slightly, as if pressed by hand, and keep them to the service steps only. Inside: a heading and a 640px reading column, beside a narrow facts column styled as waybill fields (tiny uppercase violet label above each value, separated by hairline rules).
6. A pricing card, an areas-served card with a plain list of neighbourhoods, and an FAQ built on native details elements.
7. A packing-slip card for the booking form, with a scalloped tear edge along its top made from a repeating radial gradient.
8. A footer with address, hours and a second Book a pickup button.

Background: a terrazzo speckle on the spruce ground, an inline SVG tile of small irregular chips in heather, sage, kraft and label white at about 11 percent opacity. No gradients, no glow.

Guardrails: body text at least 18px, line height at least 1.6, line length 60 to 75 characters. Check WCAG AA contrast for every small label against the surface it actually sits on. Cards at 10 to 12px radius; no pill shapes except status dots. No neon, no purple-blue gradients, no glow shadows, no three identical feature cards, no fake readable text inside images. Give every link, button and stop a 150ms hover and focus state, respect prefers-reduced-motion, and below 640px turn the tracking line vertical with the times beside each stop.

Paste it into Beaver Builder AI, Claude Code, v0, Lovable or Framer.

Field note

When hosting answers inside the chat, publishing stops being a separate trip. What stays with the designer is choosing which version the client should open.

Sources