Noir AuroraMotion
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.
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. A cta renders as a separate button link above the card link. ProductGrid shows two columns on phones.
It is part of Noir Aurora. The style’s 91 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
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.
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.
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.