Keys in seven variants and three sizes, each with an ink outline and a solid ink offset that presses: hover lifts 2 px onto 2 px more shadow, a click sinks it into the shadow. primary is the volt key, secondary the card-white key, outline the clear key that takes the fill it sits on (use it on volt, lilac and cobalt), accent the cobalt key (it turns volt with ink text on the cobalt band), destructive the tomato key, ghost no outline and no shadow, link ink text with a 2 px underline.
Keys in seven variants and three sizes, each with an ink outline and a solid ink offset that presses: hover lifts 2 px onto 2 px more shadow, a click sinks it into the shadow. primary is the volt key, secondary the card-white key, outline the clear key that takes the fill it sits on (use it on volt, lilac and cobalt), accent the cobalt key (it turns volt with ink text on the cobalt band), destructive the tomato key, ghost no outline and no shadow, link ink text with a 2 px underline. Loading keeps the width, stays pressed, sets aria-busy, disables the button and announces loadingLabel. ButtonLink is an <a> with the same look (never disabled). buttonClass(look, className) gives the classes for a router link.
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.
Buttons in seven variants and three sizes. primary is the main action, one per block: silver on Night, ink on Day, with an aurora underglow on hover. secondary is a lit control that sits beside it, outline a quiet bordered control, ghost text only (navbar, toolbars), accent aurora green (rare: an action inside product UI), destructive for deleting, link text underlined in aurora.
Pill buttons in seven variants and three sizes; every one squishes when pressed and rises 1 px on hover. primary is the blue clay pill (one per block; on the blue block it turns into the white clay button with blue text), secondary white clay, accent the soft brand pill, outline a ring for busy surfaces, ghost text only, destructive the red clay pill, link underlined text.
Buttons in seven variants and three sizes (32 / 40 / 48 px). primary is ink with a lime wipe on hover (the main action, one per block), secondary white with a grey border (beside a primary), outline transparent with a border, ghost text only (navbar, toolbars), accent the lime button (only for the selected choice, such as the featured plan), destructive for deleting, link underlined text. iconEnd arrows nudge on hover.