Soft Bento Bakery page
A complete example page built from the kit's blocks, with every section and its content.
Soft Bento
Moulded objects on a warm oat canvas: soft tiles, rounded keys and a calm bento rhythm.
The look
Moulded objects on a warm oat canvas (#F3EFE9 with a faint paper grain): white clay cards lit by a rim on top and a soft bevel underneath, candy tiles in peach, butter, mint and lilac, and exactly one saturated ultramarine block per view. Outfit set large, semibold and tight for headings and big numbers, Figtree for reading, DM Mono for small numbers; everything is round (pill buttons, 22 px cards, 32 px tiles) and everything touchable squishes on a spring.
Soft Bento Landing page
A complete example page built from the kit's blocks, with every section and its content.
Soft Bento Hero
The page opener and its only h1. split puts the text beside the media from xl (stacked above it below), centered is text only, stacked centres the text with the media below.
Soft Bento Hero Stage
The blue stage behind the hero composition: brand clay with a peach and a lilac light, paper grain and wind grooves (aria-hidden), entering with a scale.
Soft Bento Navbar
The site header: logo, links and actions, as a full-width bar (the links centred in a clay nav pill) or a floating pill.
Soft Bento Announcement Bar
A short announcement: a strip above the navbar (bar) or the hero's pill (pill).
Soft Bento Footer
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.
Soft Bento Pricing
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Soft Bento Comparison Table
Plans side by side: header prices and calls to action, grouped feature rows, ticks and dashes with screen-reader text.
Soft Bento Price List
A services or menu list on a white clay panel: name and price on a dotted leader, a note and a description under each, in one or two columns.
Soft Bento Bento Grid
Feature tiles on a 12-column grid.
Soft Bento Frame
Clay chrome around a screenshot or mock: a browser (address bar), a window (title bar), a phone (keeps its 9:19 shape) or a plain panel.
Soft Bento Product Mock
A data-driven app dashboard in clay for heroes, CTAs and feature blocks: sidebar, title, period tabs, a rolling revenue figure, KPI wells (with sparklines), a chart, share bars, people and a status line, inside a Frame.
Soft Bento Float Card
A satellite card for hero and CTA compositions: white clay, candy or the blue slab, with rounded-card and raised depth.
Soft Bento Breadcrumb
Trail of links to the current page; the last item is the current page and the separators are hidden from screen readers.
Soft Bento Pagination
Page links with previous and next, ellipses for skipped pages and an optional summary.
Soft Bento Button
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.
Soft Bento Icon Button
Round, icon-only clay button that squishes like Button. label is the accessible name and the native tooltip.
Soft Bento Button Group
Related buttons in a row or column (role="group"). attached joins them into one pill with hairline dividers.
Soft Bento Metric
A KPI: label, value (tabular-nums, never wraps), a delta pill whose colour says good or bad news, and a hint.
Everything in Soft Bento
All 92 pieces, category by category.
Keep the pieces you like
Save a favorite or a whole style, and find them in your workspace on any device.