A design kit in patina and print

Verdigris

A design kit your AI agent can implement: the discipline of a Swiss grid and the warmth of a printed book.

Engine-turned rosette, drawn in verdigris and copper. Example artwork.

Components

See the whole kit

Every button, form, list and menu, live on one page with the classes that build it.

View components

01–03

How it works

Not a library of components to copy and paste. A set of rules, and an agent that follows them.

Most UI kits hand you finished code and leave the judgment to you. This one hands the judgment to your agent: what each color is for, which weights to use, where a rule goes, and when not to add anything at all.

  • 01Hand it to your agentPoint it at the kit’s AGENTS.md and DESIGN.md
  • 02Say what the site should doIn plain words, the way you would to a designer
  • 03Check the resultAccessibility tests in both themes, so you check the work, not just trust it

Use it with your agent

Copy this into Claude Code, Cursor or any agent that can read a repository, and change the pages to suit. Agents has more, including how to restyle a site you already have.

Start a new Astro site with the Verdigris design kit.
Follow "Starting a new site with the kit" in
https://github.com/danny-englander/verdigris/blob/main/AGENTS.md
Pages: Home, Work, About and Contact. Accent: verdigris.
Add an AGENTS.md for the site that points at the kit's docs.

01–06

Principles

  • 01One family, many voicesCormorant in light, medium, semibold and italic
  • 02Patina and copperA cool accent, and a warm metal for ornament
  • 03The scotch ruleThick and thin, drawn as one line
  • 04Ornament from the fontFleurons, asterisms and daggers before drawings
  • 05Larger than it looksAn 18px floor, because the x-height is small
  • 06Access firstVisible focus, no capitals, real buttons

Reading