Cards

A card is a flat paper text plate beside the art, with a paper gutter between them. The title is fitted line by line in the display face and prints its second ink at rest; the art is the blocks, a plate or the ink field. Cards are Press moments on Bone; article, page and docs cards print at Studio; the edition card is Rave on Night.

When to use#

• Every route's og:image and twitter:image, through opengraph-image.tsx.
• Posts Max shares by hand: square, portrait and story sizes from overprint-gen cards.
• Not for anything a visitor reads on the page: a card repeats the page's title, it never replaces it.

Gallery#

These PNGs are built by this site's own next build, from the same fixtures the generator's tests use.

• 

  home · Home: the logo blocks over a halftone of the lead · 1200 × 630

• 

  line · Line: the line's blocks and chip · 1200 × 630

• 

  case · Case: the case-study cover · 1200 × 630

• 

  article · Article: the slug's plate, at Studio · 1200 × 630

• 

  product · Product: the literal status word · 1200 × 630

• 

  page · Page: every other route, at Studio · 1200 × 630

• 

  docs · Docs: this site's own cards · 1200 × 630

• 

  edition · Edition: Rave on Night, one SFX · 1200 × 630

• 

  line · Square, 1080 × 1080 · 1080 × 1080

• 

  case · Portrait, 1080 × 1350, the comic cover · 1080 × 1350

• 

  edition · Story, 1080 × 1920 · 1080 × 1920

Inputs#

The other templates (line, article, product, page, docs) follow the same pattern: a title of at most 60 characters (110 for an article), an optional kicker, and the template's own field, such as the line letter or the literal status word.

How makrlabs.dev calls it#

// app/opengraph-image.tsx (and twitter-image.tsx re-exporting it)
import { cardAlt, cardResponse } from "@maxgrits/overprint-generators/og";

export const runtime = "nodejs";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
const input = { title: "Websites that win customers.", kicker: "Taking projects" };
export const alt = cardAlt("home", input);

export default function Image() {
  return cardResponse("home", input);
}

In next.config, list serverExternalPackages: ["@resvg/resvg-js", "sharp"]. Dynamic segments come from the page's generateStaticParams, so next build lists every card as static. Social sizes: overprint-gen cards --config overprint.cards.json --out .overprint/cards.

Rules#

• Text at least 26 px at card size (the domain at least 22), titles fitted, never truncated.
• The line chip is always glyph, letter and name; meaning never rests on hue alone (D-C2).
• Status and action words stay literal (D-I2): "In development", "Live".
• Each card stays inside its volume's colour budget (D-B4), measured on the PNG.