Inspo.
← All examples

Prompt

“A newsletter about typography: editorial, specimen-led, archive, subscribe.”

The agent invented Counterpunch - A fortnightly letter about typefaces, the people who draw them, and the pages they end up on.

Toolchain
pure + inspo
Register
light mode
Build effort
10+ MCP calls · 5 sites studied
Self-score
7.5 / 10
The page it shipped - live, scaledOpen full page ↗

The move

The specimen is live text all the way down, and the page proves it. The hero card is two Fraunces glyphs at optical size 144 with the wonk axis on; the lavender section runs a four-row waterfall across weight and optical size; and the axis lab lets the reader drag weight and softness and flip the wonk switch while the readout rewrites itself in plain words. It turns the newsletter's premise (one typeface, one argument, a specimen you can select) into the page's own behaviour rather than a claim about it.

What Inspo gave it

The captures it studied, and exactly what each one contributed.

  • Pampatype - The specimen-as-headline move: oversized single glyphs standing in for a hero image. Counterpunch's hero card is two live Fraunces letters ("ag") at optical size 144 with the wonk axis on, labelled in the corners like a foundry card.

  • Commercialtype - Full-width colour-blocked bands with one massive typeface name per band. Gave the page its two-band specimen world: a deep plum hero card and a lavender specimen section, with the paper staying warm around them.

  • Pudding Cool - Outlined issue-number badges ("#217", "#216") sitting above each card, which is what turns a list into a serial archive. The back-issue index borrows the badge ("No. 46") and the date-right rhythm.

  • Home | Logic(s) Magazine - The "Issue 23" label above a one-line headline, long body copy, and a cover on the right. Set the hero's grammar: issue label, headline, lead, two actions, and a specimen object where the cover would be.

  • Thedesignersfoundry - The red card with Weight and Slanted sliders next to a giant "Gg". Became the axis lab: weight and softness sliders plus a wonk switch that rewrite font-variation-settings on live text.

How it was built

The actual MCP calls, in order.

  1. recommend
    brief "A newsletter about typography: editorial, specimen-led, archive of past issues, subscribe form", detail full

    Picked feature-stack, evidence over 24 sites (paper light 75%, display grotesk-sans 88%, accent warm 46%), exemplars ghost-org--about, functionhealth-com--about, character-ai--about, mailchimp-com, posthog-com--about, the pricing table JSX, hero and spacing guidance. The 88% grotesk pull is what I took a position against with a serif display.

  2. search_screens
    query "type foundry specimen editorial serif newsletter", macrostructure type-specimen, limit 8, detail full

    pampatype-com, thedesignersfoundry-com, sharptype-co, commercialtype-com, displaay-net, newglyph-com, velvetyne-fr, boldmonday-com with full autopsies; the specimen vocabulary for the page.

  3. search_screens
    query "editorial newsletter archive of past issues, subscribe form, serif magazine", style editorial, paperBand light, limit 8, detail full

    apartamentomagazine-com, quantamagazine-org, eyemagazine-com, fermliving-com--products-showroom-visit, logicmag-io, aerotime-com, pudding-cool, hypebeast-com--2026-3-balmuda-the-clock-release-info; the magazine and archive references.

  4. find_examples_for_macrostructure
    name specimen, limit 6, detail full

    apartamentomagazine-com, aristidebenoist-com, arweave-org, astro-build, barbican-org-uk, bluebottlecoffee-com; confirmed the issue-plus-object hero and the arweave text-only alternative I did not take.

  5. find_reference_components
    type cta

    Seven archetypes; form-led (single email field, inline submit, real success state, cadence note underneath) shaped the subscribe section, quiet and banded were read and passed over.

  6. get_screen
    slug pudding-cool

    Full record; signature line on the outlined issue badges and the serial archive rhythm.

  7. get_screen
    slug commercialtype-com

    Full record; the stacked band composition and the fact that the type is the visual.

  8. get_screen
    slug logicmag-io

    Full record; the issue label, headline, long lead and cover split, with outlined buttons and no accent on the CTA.

  9. find_reference_components
    type footer

    Seven archetypes; colophon (typefaces, contact, owner in caption type, three columns) became the footer, newsletter and index were read for the form and the back-issue list.

  10. compare
    slugs pampatype-com, commercialtype-com, pudding-cool, logicmag-io

    Shared minimalism plus editorial in the light register, type scales of 3 to 5 steps, containers 1280 to 1440; settled a 1200px column and a six-token scale.

Palette, traced

Every token, and the reference it came from.

  • --paper#f4f0e8Page ground. Warm off-white so the page reads as stock rather than screen, following the light paper band the evidence measured and the warm accent share.
  • --ink#1c1a16Body text, wordmark, the primary pill and the subscribe section's ground. Warm near-black so it sits on the paper without a blue cast.
  • --muted#6e685dMeta lines, captions, summaries in the archive. Two steps down from ink so the hierarchy is carried by colour, not size.
  • --rule#d8d1c4Every hairline: nav, stats strip, waterfall, archive index, footer. Slightly darker than paper so rules read but never box.
  • --accent#c2411fVermilion for the italic phrase in the headline, the second half of the wordmark, hover states, the writer's ampersand disc and the numerals. The single warm brand colour, used sparingly so it always lands.
  • --band#e6ddf1Lavender ground of the specimen section, lifted from Commercial Type's Canela band. Cool against the warm paper so the specimen reads as a separate object, a plate tipped into the letter.
  • --band-deep#2e1b4eDeep plum for the hero specimen card and for all text on the lavender band. Same hue family as the band so the two specimen surfaces read as one world.
Built with the Inspo MCP - try it on your own brief.← All examples