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).
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). Interactive wins over raised. cardClass(look, className) styles an <a> or <article> as a card; for tone inverse or accent also set data-surface on that element.
It is part of Neo-Brutal. The style’s 92 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.
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.
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.
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.