artifact-css
artifact-css
A lightweight stylesheet and a small vocabulary of patterns for the kind of HTML artifacts an agent produces inline. The goal: when the user asks for a status report or an explainer or a triage board, the output reads like a real document at a glance - same typographic rhythm, same palette, same components - regardless of which agent skill produced it.
What's in the library
One file, artifact.css, ~16KB raw and ~4KB gzipped. No JavaScript, no build step, no external dependencies. Drop it into the <head> of any artifact and write semantic HTML against the class vocabulary below.
The library covers: tokens (color, type, spacing, radius, shadow), base typography (h1–h4, body, eyebrow, lead), section chrome (sec-head, sec-intro, rule), surfaces (panel, callout, note, prompt-box), inline atoms (tag, pill, badge, avatar, dot), buttons and inputs, tables, stat cards, key-value strips, highlights and tag lists, timelines and milestones, code blocks, diffs, and a small set of grid and utility helpers.
How to use it in an artifact
Two delivery modes. Choose based on context.
Mode A - link to the file. Used when the artifact is hosted, or when the user has artifact.css available alongside the HTML.
<link rel="stylesheet" href="artifact.css">