26 pieces in four styles. Preview each one live, then copy the prompt that puts it in your project.
Surface box with a 2 px ink outline and the card radius. flat (card stock) and sunken (paper-2) cast nothing; outline is transparent; raised floats on the hatched offset (float-panel), for one featured or pinned card. interactive makes it a key that presses (use it when the whole card is a link); a toned interactive card casts the page's ink onto the page (press-cast).
The image frame: a photo in a ratio box (no layout shift) inside a 2 px ink outline, with an optional mono caption strip under it (then the root is a <figure>), an overlay as an ink chip, and the print grade: grey, a touch of contrast and grain.
Blog posts as pressable cards (an image frame at the top that zooms on hover, a neutral category badge and a mono date, a bold display title, the excerpt and an author row), ruled rows (list) or a featured layout (the first post wide, image on 7 columns, text on 5).
Case studies as image frames with a mono caption strip ("Fig. 01" | "Kestrel · 2026"), neutral tag badges, a bold display title, the summary and a ruled link row with an up-right arrow.
Shop cards that press: a square image frame (zooms on hover) with a solid badge over it (volt "New", tomato "Sale"), the name in the display face (one link that covers the card), the description, a Rating, a big type-figure price and a struck old price with screen-reader text.
Photos in image frames with a mono caption strip: a grid (each frame crops to 4:3), a masonry wall (each image keeps its own ratio: give it width and height) or a mosaic (square cells, the first 2×2, captions as ink chips over the photo; on phones it is two columns, and with an even count the last photo takes its row at 2:1).
The ruled spec sheet for free compositions: cells 2 px apart over the line colour inside one outline and one panel radius, on the 12-column grid, each opening with a mono label row (label bold at the start, meta at the end, hidden on phones) when either is set.
Surface box, lit from above: flat (night surface with a hairline, light falling on the fill and a bright top edge with a glint of sky), raised (flat with a soft long shadow), outline (transparent with a stronger hairline) or sunken (a well, no top light), on any tone. interactive adds the hover lift for cards that are links.
An image in a ratio box (no layout shift), with an optional caption in mono (then the root is a <figure>), an overlay on a night scrim, and the aurora grade: a duotone in the sky's colours with a thin aurora hem along the bottom edge.
Blog posts on lit cards with graded images and the hem: a grid, a list or a featured layout (the first post large and full width).
Case studies on lit cards with graded images, the hem and a mono index line ("Case 01 · Halcyon"): a grid, an offset editorial grid (alternating heights, stacked on phones) or rows.
Shop cards on lit cards with the sky spotlight: a graded image with the hem (zooms on hover), the badge as a glass chip over it, name (one link that covers the card), description, rating, a mono price and a struck old price with screen-reader text.
Graded photos with mono captions as a grid, a masonry wall (each image keeps its own ratio: give it width and height) or a mosaic (the first spans two cells, captions on a scrim).
Clay surface: flat (white clay at card height, the default), raised (higher), outline (transparent with a line-2 ring) or sunken (a pressed well), on any tone: accent is the blue slab (one per view), tint-1 … tint-4 are candy, inverse night clay. interactive adds the hover lift (rises 8 px, sinks back on press) for cards that are links. cardClass(look, className) styles an <a> or <article> as a card; for tone inverse or accent also set data-surface on that element.
An image in a ratio box (no layout shift), with an optional caption (then the root is a <figure>), an overlay on a scrim, and the kit's photo grade.
Blog posts as clay journal cards in a grid, a list or a featured layout (the first post large and full width).
Case studies as clay cards in a grid, an offset editorial grid (alternating heights, stacked on phones) or rows.
Shop cards in clay: a 4:3 image (zooms on hover) with the price chip on it, badge, name (one link that covers the card), description, rating, price and a struck old price with screen-reader text.
Photos in white clay rims as a grid, a masonry wall (each image keeps its own ratio: give it width and height) or a mosaic (the first spans two cells, captions on a scrim).
Surface box: flat (white tile with a hairline, nearly no shadow), raised (tight lift), outline (transparent with a rule) or sunken (haze well), on any tone (inverse is the ink card, accent the lime card). interactive adds the hover lift for cards that are links. rule puts the 4 px lime bar across the top. cardClass(look, className) styles an <a> or <article> as a card; for tone inverse or accent also set data-surface on that element.
An image in a ratio box (no layout shift).
Blog posts as a grid, a list or a featured layout (the first post large and full width).
Case studies as a grid (Media plates with crop marks and a "Fig." caption), an offset editorial grid (alternating heights, stacked on phones) or an indexed list (list: rows on rules with "P.01", the title, client, tags and year; the index turns into a lime tag on hover).
Shop cards: a square image (zooms on hover), badge, name (one link that covers the card), description, rating, price and a struck old price with screen-reader text.
Photos with mono "Fig. 01" captions and crop marks on hover, as a grid, a masonry wall (each image keeps its own ratio: give it width and height) or a mosaic (the first spans two cells, captions on a scrim).
The measured plate: crop marks that settle in around any child (ProductMock, Media, Chart, a drawing), a mono caption row (index and caption in ink, meta at the right, an optional grid address tag) and an optional keyed legend (A, B, C squares with a label and a line of text).
A free account takes 3 new pieces a day: the code, the styles and the install prompt. Pro and Team remove the limit.