DetailsPigment Margin Notes
Warm paper, near-black ink for every action, hairlines and a tightly tracked grotesk; the only color is a watercolor wash, tape and pencil notes kept to the margins. Suits products whose content carries the color.
Set one up when a project starts, move a product you already have onto it, and every screen after follows it. Works with Claude Code, Codex and any MCP client. Pick one below.
DetailsWarm paper, near-black ink for every action, hairlines and a tightly tracked grotesk; the only color is a watercolor wash, tape and pencil notes kept to the margins. Suits products whose content carries the color.
DetailsWarm ink on cream paper, a text serif for headings and a quiet sans for the rest, almost no color. Hand-drawn ink pictograms redrawn at 12 fps and pastel stages carry the voice. Suits calm products, tools and publications.
DetailsA 16-bit console booted as a product: night-blue ground, cream pixel type for Hangul and Latin, hard-edged game windows, an RPG menu marker and small pixel scenes that move in stepped frames. Suits docs, dev tools and playful products.
DetailsA near-black instrument panel: graphite greys, hairlines, pill controls, one indigo for focus. Real UI on spotlit stages, 5x5 dot glyphs for work in progress, isometric hairline blueprints. Suits dev tools, SaaS apps and docs.
DetailsA cheerful storefront drawn in black felt-tip: ink hairlines on paper, flat poster-color bands, chunky sticker objects, one big grotesk. Buttons lift on a hard black shadow. Suits stores, creator tools and marketplaces.
DetailsSunny and toy-like: warm cream pages, flat saturated fields with arched edges, crescent-shaded geometric shapes, slowly breathing glyphs and chunky pills that sink onto a 2px ledge. Suits wellness, learning and habit apps.
# 1 · connect once claude mcp add --transport http pigment https://pigmentui.com/mcp # 2 · ask your agent › Apply the Pigment design system <system> to this project. Preserve routes, logic and tests. Show a plan first. # 3 · your agent reads the spec get_design_system("<system>")