A tiny web app design system for you and your agent

Write semantic HTML, link one stylesheet, and it looks right. No build step, no dependencies, and no utility classes. Originally built for me and my agents, YMMV.

Browse the reference Read DESIGN.md

How it works

1. Link the stylesheet

One file, in cascade layers. Link it from this site, pin a version, or copy it into your project.

2. Give your agent DESIGN.md

Copy the usage guide into your repo. It lists every element, class, token, and rule, so your agent writes markup that fits.

3. Write semantic HTML

A form, a table, a nav, or a dialog looks right with no classes.

<!-- Always the latest -->
<link rel="stylesheet" href="https://css.henrypoydar.com/henry.css">

<!-- Pinned to a release -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/henrypoydar/henry.css@v1.0.0/henry.css">

<ui-card>
  <header><h3>Invoice #1042</h3><p>Due Oct 14</p></header>
  <p>Three line items, $1,200 total.</p>
  <footer><button>Send</button></footer>
</ui-card>

Built to be small

Coding agents write better UI when the system fits in a page. henry.css keeps the surface area tiny on purpose.

Elements first. Most of the stylesheet styles plain HTML elements.
Three custom elements. ui-card, ui-toast, and ui-empty, for things HTML has no element for. Unregistered, so there's no JavaScript.
A short list of classes. Button and badge variants, tabs, and four layout helpers. That's all of them.
Tokens for every value. Colors, spacing, type, radii, and shadows are custom properties, with dark mode built in.
Overrides without a fight. Everything sits in cascade layers, so any rule in your own CSS wins.

Everything in the box

Variables: Type scale, color ramps, semantic colors, spacing, radii, and shadows.
Elements: Headings, text, lists, tables, forms, disclosures, and dialogs, with no classes.
Components: The custom elements, every class, and the background patterns.
Layouts: An app shell, settings, a list, sign-in, and a marketing page, from phone to desktop.
henry.css: The stylesheet itself.
DESIGN.md: The usage guide for you and your agent. Copy it into your project.
README.md: How the system is organized, and why it looks the way it does.