Soft BentoMotion
The site footer: brand, text, actions and status (a clay pill with a live ping, the view's one loop) beside the link columns (h2 titles in a labelled nav), then copyright, legal links and labelled social icons.
The site footer: brand, text, actions and status (a clay pill with a live ping, the view's one loop) beside the link columns (h2 titles in a labelled nav), then copyright, legal links and labelled social icons. The wordmark variant moulds the brand name in white clay across the bottom, sized to fit any width and hidden from screen readers.
It is part of Soft Bento. 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.
The site footer, always on the ink set (in both themes): brand, text and actions on columns 1–5, link columns on 6–12 (mono caps h2 titles, ink links whose underline turns volt), then a ruled legal row with the copyright, legal links, labelled social keys and a live status with a pulsing volt dot.
The site footer on the 12-column grid: brand, text, a mono status pill with a live dot and actions beside the link columns (mono h2 titles in a labelled nav), then copyright, legal links and labelled social icons over a hairline.
The site footer, always on the ink band over the column guides: brand, text, a live status (a lime dot) and actions on 5 columns, link columns from column 7 (h2 titles in a labelled nav), then the legal row with copyright, legal links, labelled social icons and, with motionToggle, the pause control.