# Verdigris

> A design kit for Astro and Tailwind v4, built on Swiss Minimal: a strict grid, one family (Cormorant), a cream page, green-black ink, verdigris and copper, and ornament that earns its place. No capitals anywhere.

The kit is plain CSS (`kit/theme.css` and `kit/verdigris.css`, loaded through `kit/tailwind.css` on a Tailwind v4 site), a few small plain scripts and some Astro components. A site without Tailwind or Astro can link `theme.css` and `verdigris.css` as stylesheets and copy the components' markup. To use it, copy `kit/` and `fonts/` from the repository into a project's `src/design/`, side by side.

The kit is written for agents to follow: a set of rules, not a library of components to copy and paste. Agents: start with AGENTS.md. It covers the three tasks people bring, which are changing the kit, starting a new site with it and restyling an existing site, and says which other files to read for each one. Every token value is in tokens.json; if theme.css disagrees, tokens.json wins.

## Docs

- [AGENTS.md](https://raw.githubusercontent.com/danny-englander/verdigris/main/AGENTS.md): Notes for AI agents: working on the kit, starting a new site with it, restyling an existing site. Start here.
- [DESIGN.md](https://raw.githubusercontent.com/danny-englander/verdigris/main/DESIGN.md): The rules: color, type, layout, iconography, images, motion, accessibility, the Tailwind setup and the "Do not" list.
- [COMPONENTS.md](https://raw.githubusercontent.com/danny-englander/verdigris/main/COMPONENTS.md): Markup, behavior and do's and don'ts for each component.
- [tokens.json](https://raw.githubusercontent.com/danny-englander/verdigris/main/tokens.json): Every token value, light and dark, with a note on what each is for.
- [TOOLING.md](https://raw.githubusercontent.com/danny-englander/verdigris/main/TOOLING.md): Accessibility tests with Playwright and axe, a manual checklist, and date-tagged releases.

## Kit

- [kit/tailwind.css](https://raw.githubusercontent.com/danny-englander/verdigris/main/kit/tailwind.css): The entry point for a Tailwind v4 site. Imports Tailwind, loads theme.css and maps the tokens to utilities.
- [kit/theme.css](https://raw.githubusercontent.com/danny-englander/verdigris/main/kit/theme.css): Every token, the base styles and every component class, in plain CSS.
- [kit/astro/](https://github.com/danny-englander/verdigris/tree/main/kit/astro): Astro components: BaseLayout, Hero, PageTitle, Ellipse, Cta, CardGrid, the menu, drawer and theme toggle, the blog's PostFeature, PostList, Pager, PostHeader and PostNav, and their types.
- [kit/example.html](https://raw.githubusercontent.com/danny-englander/verdigris/main/kit/example.html): A one-page demo using only theme.css.

## Demo

- [Components](https://verdigris.ch/components/): Every component in the kit on one page.
- [Agents](https://verdigris.ch/agents/): How to build or restyle a site with the kit using an AI coding agent.
- [Forms](https://verdigris.ch/forms/): Fields, a select, radios, switches, date fields and a file picker in working forms, with an export task that streams live output.
- [Blog](https://verdigris.ch/blog/): A featured post beside its image, the rest by date and numbered pages; each post has a byline, Markdown body text, highlighted code and links to the posts before and after.

## Optional

- [README](https://raw.githubusercontent.com/danny-englander/verdigris/main/README.md): What is in the repository, and how to run, test and release the demo.
- [Repository](https://github.com/danny-englander/verdigris): The source, including the demo site in demo/.
- [Home](https://verdigris.ch/): The demo's home page, with a split hero and list rows.
- [Work](https://verdigris.ch/work/): A filterable list with favorites and a dark page title.
- [About](https://verdigris.ch/about/): Running text and code blocks.