Art Direction Daily

Top result from benovermyer.com

Which is harder to generate: a coat of arms or a Japanese mon?

Ben Overmyer, who builds the Iron Arachne generators, compares the two crest traditions as software. A coat of arms is a description to parse; a Japanese mon is one shape copied and turned, and a generator has to know which one it is drawing.

Showing results for

Identity marks that are written or turned, from the last 14 days, newest first.

Technique 2 results

benovermyer.com, blog

A blazon is a syntax tree; a mon is a scene graph

A blazon like three roundels argent, two and one is a description an artist reconstructs. A mon generator loads one motif, makes three copies, and rotates them by 0, 120, and 240 degrees, so Overmyer maps the first to an abstract syntax tree and the second to a scene graph.

Detail: a white shield painted with three red roundels, two above and one below.
Written. Three roundels, two and one.
Detail: a cut-paper mon of three white circles turned around a centre inside a white ring.
Turned. One circle, rotated three times.

benovermyer.com, blog

Rules beat symbol lists

His first heraldry generator picked from a catalogue of lions and crowns and produced marks that only looked vaguely heraldic. The rebuild keeps a grammar for how designs are made apart from a corpus of documented exceptions, and lets earlier choices constrain later ones, the way a field colour limits the charges that can sit on it.

Procedural generation should not begin by asking what objects exist in a particular domain. It should begin by asking what operations exist.

Ben Overmyer

Tooling 2 results

webflow.com, blog

Keep designing in Webflow, send visitor data to Supabase

A new Webflow guide mounts a small Next.js app on Webflow Cloud at a path such as /app, where a route handler writes signups and votes to a Supabase Postgres table. Editors keep the Designer and the CMS, and the guide lists authentication, validation, and rate limiting as work to finish before launch.

creativeboom.com, type drop

Fifteen new typefaces for September

Creative Boom's monthly roundup runs from Exemplar, a humanist serif from Letters from Sweden covering 370 languages, to Estelar, Zanon Studio's first commercial release with weight and slant axes. Exemplar is the one to note for multilingual client sites.

Workflow 1 result

figma.com, blog

Figma's product lead puts the difference in the design system

Paige Costello, VP of Product at Figma, sorts building products now into speed, direction, and differentiation. On the last, she argues a strong design system encodes brand decisions and that teams should refine generated output directly, with custom illustration and motion.

The tools she walks through, Make, Motion, and the design agent, are mostly the ones Figma showed in June (see issue 051).

Borrow this pattern

Write the filters back as a sentence

Above a results list, restate the active filters as one readable line, the way a herald reads a shield aloud. Each filter word is a live value, so the searcher sees the whole query at once instead of hunting through a sidebar.

Use it on any search with three or more filters: template marketplaces, icon libraries, job boards, property search. Keep it honest by generating the sentence from the filter state, never writing it by hand, and check that it still reads correctly for every combination, including zero results.

Marks that are written or turned, from the last 14 days, newest first.
<output for="kind time sort" aria-live="polite">
  Marks that are <b>written or turned</b>,
  from <b>the last 14 days</b>, <b>newest first</b>.
</output>

Prompt Lab, featured snippet

Build the crest index

Build a search results page for an online library of logos and identity marks (crests, monograms, emblems), the page a design studio or template marketplace would pay a freelancer to ship.

Ground and colour: a saturated heraldic azure ground #1C5F9E with a faint dot grid in #F5F1E6 at 17 percent opacity every 24px. Follow the heraldic rule of tincture as the colour system: on the blue ground, only the two metals carry type, argent #F5F1E6 for text and or #E2B23C for large display words and focus rings. Result cards, panels, and tabs are argent #F5F1E6 with sable #141B24 text; gules red #B8322A appears only on argent (buttons, hover states, one small label). Links inside cards are deep azure #16487A.

Type: Zilla Slab 600 for the headline, tab titles, and result titles; Hanken Grotesk at 19px with line height 1.68 for body; IBM Plex Mono for labels, dates, and source lines. The contrast logic: a sturdy slab for anything you scan, a neutral grotesque for anything you read.

Masthead: no boxed meta cells. A breadcrumb rail under the top nav, between two hairlines, with small gold CSS chevrons between the crumbs: site, section, issue number, date, reading time.

Layout: a two-column page, results column on the left and a sticky 336px knowledge panel on the right. Above the results, the query card: an argent card with one soft shadow that writes the active filters back as a single sentence in 30px Zilla Slab, each filter value bold with a gold highlighter underline, and a mono result count under a hairline. Under it, results grouped by type. Each group opens with a tab strip: its own tab is a raised argent tab holding the h2 and a count, attached to the argent results card below; the other tabs are real anchor links to the other groups. Each result card has a mono source line with the date right-aligned, a 27px slab title link, and one or two sentences of snippet. The first result carries an image pack: one overhead photograph shown whole plus two cropped details, each with a mono caption. The right panel holds the style name, an italic one-line summary, a short explanation, and small vocabulary chips, then two small SVG glyphs explaining the two grammars.

Also: one italic pullquote on the blue between groups; a "Borrow this pattern" card with a working demo of three native selects that rewrite the sentence in an output element; the prompt as a featured snippet card with a gold header band and a red copy button; field note, numbered sources, pagination, and a colophon on the blue.

Guardrails: body at least 18px and line height at least 1.6; WCAG AA contrast for every label against its real surface (gold never for small text on the blue); no fake search field, no fake filter pills, no decorative toggles; no readable text inside images; no neon, glow, or gradients; radius 12px on cards, 6 to 10px on small parts, no pill shapes; hover and focus states on every link, tab, select, and button with 150ms easing; a reduced-motion guard. On mobile, stack the knowledge panel under the query card and let the tabs wrap.

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

Field note

A crest library, a template gallery, and a type specimen are all catalogues. Index the operations behind them and the catalogue starts to generate.

Sources

  1. Ben Overmyer: What Heraldry and Japanese Mon Can Teach Us About Building Visual-Identity Generators
  2. Webflow: How to use Supabase as a database backend for a Webflow site your team still edits visually
  3. Creative Boom: The best new fonts for September 2026
  4. Figma: What it takes to build great products now
  5. Art Direction Daily, issue 051: Animate in Figma, leave with React