Core
Primary is the anchor
Settings

How the five derived colors are placed around the anchor.

Theme builder

Core

A theme builder for Astro and Tailwind. Pick six colors and a type scale, watch this site restyle itself, then paste the result into your project.

Two files, one paste

global.css
Six brand colors and the fluid type scale — the only parts of a theme that genuinely have to be CSS, because only they are arbitrary.
theme-rules.md
Spacing, radius, elevation, borders and motion as plain Tailwind conventions. Written to be read once by an agent, rather than re-explained every session.

How to use it

One procedure, two ways to run it. If you work with a coding agent, hand it the link and it can do the whole thing — core.koval.dev/llms.txt is these same steps, written for a machine.

Ask an agent

Start an Astro project for a small law firm site — established, not stuffy.
Theme it with Koval Core: follow the instructions at core.koval.dev/llms.txt

It reads the vocabulary, turns the brief into a config, fetches global.css and theme-rules.md from a /r/… URL, and points AGENTS.md at them. From then on it knows the corners are sharp without being told again.

Give it @kovaldev/core-mcp as well and it can do more than the URL allows — search the font and icon catalogues, and derive a palette from one color rather than naming six:

{ "mcpServers": {
  "kovalCore": { "command": "npx", "args": ["-y", "@kovaldev/core-mcp"] }
} }

Or start one by hand

  1. Scaffold the starter:
    npm create astro@latest my-site -- --template koval-dev/astro-starter
  2. Open the theme builder and pick a palette, a type scale and the conventions. The site restyles itself as you go, so what you are looking at is the theme.
  3. Get the files — download global.css over src/styles/global.css, and put theme-rules.md in the project root.
  4. Copy the Link tab’s block into AGENTS.md. There is one ready for CLAUDE.md, Cursor and Copilot too — take one, not four.
  5. Do what the Fonts and Icons sections of theme-rules.md say: one astro.config.mjs block and one npm i, both written for the theme you just made.
Re-theming
Replace both files and rebuild. Nothing else moves — the conventions are Tailwind classes already in your markup, and the ink ladder follows the six brand values rather than being baked against them.
Several clients
The /r/… link is the record of what a theme is. Keep it in the project. The payload is the identity, so the same link can only ever produce the same bytes.
Missing a word
The vocabulary is deliberately small. When a project needs something it does not have, add it here rather than there — a one-off utility beside these conventions is the second house style all of this exists to prevent.