Pigment
StarConnect an agent

Felt-tip Market

Updated 2026-10-25

A 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.

playful · tight corners · regular · light and dark · code MIT

agent.mdApply this system

On a real product

Three products with their own design, and the same products after a coding agent applied Felt-tip Market. Pages, copy, photos and features are the product's own; everything you see change is the system.

With Felt-tip Market

One run of the standard prompt on a product with its own design, captured as built. Unedited. Photos are public domain. Before release, every system is also applied to six plain test apps and checked screen by screen.

Color

Semantic tokens · contrast against surface.default
surface.default#f4f4f0—
surface.subtle#dddddd—
surface.raised#ffffff—
border.default#000000—
border.strong#000000—
text.primary#000000AAA
text.secondary#6b6b66AA
action.primary#ff90e8fail
action.primaryHover#ff90e8fail
focus.ring#000000AAA
status.success#23a094fail
status.warning#ffc900fail
status.danger#c42a12AA
status.info#90a8edfail

Type and shape

Space Grotesk · Space Grotesk
font.size.display · 72pxFelt-tip Market
font.size.section · 48pxFelt-tip Market
font.size.heroMobile · 48pxFelt-tip Market
font.size.displayMobile · 40pxFelt-tip Market
font.size.statement · 36pxFelt-tip Market
radius.none
0px
radius.sm
4px
radius.md
16px
radius.lg
24px
radius.full
9999px
space · 0px 4px 8px 12px 16px 20px 24px 32px 48px 64px 96px 128px

Components

12 fully specified · 12 listed
Every component and its states
action / buttonspecifieddefault · hover · focus-visible · active · disabled · loading
form / text-fieldspecifieddefault · hover · focus-visible · disabled · error
form / selectspecifieddefault · hover · focus-visible · disabled · error
form / checkboxspecifieddefault · hover · focus-visible · selected · disabled · error
form / switchspecifieddefault · hover · focus-visible · selected · disabled
navigation / tabsspecifieddefault · hover · focus-visible · selected
navigation / navigationspecifieddefault · hover · focus-visible · selected
surface / cardspecifieddefault · hover · focus-visible · active · selected · disabled
data-display / tablespecifieddefault · hover · focus-visible · selected · loading · error
data-display / badgespecifieddefault
overlay / dialogspecifieddefault · focus-visible
feedback / toastspecifieddefault

Changelog

Your project keeps its own copy

Setting a system up keeps its whole spec (design-system/agent.md) and tokens in your project, and every later screen is built from that copy. Updates here never restyle a project on their own — ask your agent to update and it applies only what changed since your copy.

  1. 2026-10-25current

    First release of Felt-tip Market: a cheerful storefront drawn in black felt-tip. Paper ground, 1px ink hairlines and 4px corners, flat poster-color bands that meet at ink seams, chunky ink-outlined sticker objects and one big friendly grotesk. Buttons lift onto a hard black shadow and slam flat when pressed. A dark theme comes with it.

    Details (5)
    • Ten defining rules and a Never list: pure ink borders on every product surface, no soft shadows or gradients, color only as whole flat fields, one band color per product area, and pink kept for the one action that matters.
    • Hard-lift buttons: hover lifts 4px onto a solid ink shadow, press lands flat; the main call to action can stack over two colored plates, once per screen.
    • Sticker objects built by recipe: a face swept down into a solid edge with one ink outline, sized for heroes, header bands, empty states and media boxes, with a reusable SVG builder. Items without their own image get a drawn vignette of their subject, never a stock picture glyph.
    • Poster color bands for headers, split checkerboard sections and a closing band; front pages open on a hero with a large headline, a ring of stickers and a call to action paired with an input at one height.
    • Ink-hairline panels, tables and forms with pill markers for "where you are", a notched price flag, and a dark theme with a black ground and raised panels one step lighter, where bands and stickers keep their colors.
Apply this system