Understudy

A free theme that makes Claude artifacts look like part of the app.

Understudy gives the pages Claude makes the app's own greys, controls and 16px text, in light and dark. A page sits beside the chat instead of looking like a separate website.

GitHub

Use it

Paste this at the start of a request for a page.

Use the Understudy theme from github.com/kelvinman/understudy. Read its README, start from the example closest to what I want, and inline tokens.css and the classes you use.

To do it by hand, paste tokens.css at the top of the page's style, then the parts of components.css it uses. Artifacts can't load files from elsewhere, so everything goes inline.

What is in it

Measured, not guessed

The colors, text sizes, row heights and corners come from screenshots of the Claude desktop app in October 2026. The app draws dark colors about a third lighter than the code sets them, so the dark theme is set a step lower to land on the app's colors.