Guide 05 · modular family
Bento Fusion & Sculptural UI
Two answers to the question "how do I show eight features without writing eight sections?" Bento Fusion tiles them into an uneven grid where size signals importance. Sculptural UI takes the opposite route: everything is moulded from one material, and depth rather than colour separates the parts. Both are strong marketing tools and both need rules before they scale.
Preview the component
The module in both modular styles, with Organic Modern for reference since all three use large radii. Currently showing Bento Fusion.
Dashboard module
Deployment health
Build 4.2.0 is live on every regional edge. Response times stayed inside the target window during rollout.
Design specification
style: bento-fusion description: an uneven grid of rounded tiles where span size communicates priority; each tile is self-contained industries: product marketing, mobile apps, developer platforms, portfolios, hardware accessories typography: geometric sans — 700 headings at 20-28px, 400 body at 15-16px, tight -0.01em tracking card-architecture: tile; spans of 1x1, 2x1 and 2x2 on a 4-column desktop grid, 16px gap, 24px internal padding buttons: rounded rect 16px radius, violet fill, 44px height; secondary is a tinted tile-coloured fill navigation: pill group, active item inverted border-radius: 20px tiles / 16px controls / 12px inner elevation: 0 4px 0 #E1DDF2 — a solid lower edge, not blur surface: #FFFFFF tiles on #F0EEF8 animation: 200ms scale(1.02) and shadow swap on hover grid-rule: never more than two 2x2 tiles per viewport; collapse to a single column below 640px
style: sculptural-ui description: every element is moulded from the same clay; light and shadow, not colour, define the components industries: audio and music apps, smart home, meditation and calm tools, kids products, wearables typography: soft geometric sans — 600 headings, 400 body, slightly larger sizes to survive the low contrast card-architecture: single-material panel; content sits in a recessed well with 24px padding buttons: extruded pill; pressed state swaps to inset shadow; label must stay near-black for contrast navigation: recessed track with a raised active pill border-radius: 30px panels / 999px controls elevation: 12px 12px 24px rgba(0,0,0,0.13) and -10px -10px 22px rgba(255,255,255,0.85) surface: one clay tone; cards match the page background animation: 260ms ease-in-out depth swap accessibility-warning: soft edges cannot carry focus or disabled states — add a solid 2px ring and text labels
style: organic-modern (reference) description: similar radii, but colour still separates surfaces, so states remain easy to read industries: wellness, food, sustainability, travel typography: humanist sans at 17px, 1.70 line-height card-architecture: text-first with blob-masked media buttons: pill, earth-tone fill, 48px height border-radius: 26px elevation: 0 10px 24px rgba(40,60,30,0.10) animation: 300ms cubic-bezier(0.22,1,0.36,1) use-when: you want softness without losing contrast
Bento is a layout system. Sculptural is a material system. Do not merge them.
Tiles need a hierarchy rule
A bento grid works because the reader can tell at a glance which tile matters most. That only holds while the spans are disciplined. Give every feature a two-by-two tile and the grid flattens into a wall of equal blocks; alternate spans arbitrarily and the eye cannot find the entry point. The rule that holds up in practice is one dominant tile per viewport, at most two tiles of the second size, and everything else at the base size. Write that constraint into the component API — a span property with three allowed values — rather than leaving it to whoever builds the next section.
The second rule concerns content types. Tiles are containers, not sections, so each one should hold a single idea expressed in one of a few fixed shapes: a statistic with a label, an icon with a sentence, a small chart, a screenshot crop, or a short quote. Mixing a paragraph, a list and a form into one tile defeats the format. Below roughly 640 pixels the grid should collapse to a single column in priority order, which means the markup order has to be the priority order — do not rely on grid placement to fix a scrambled source order, because that is also the order screen readers and keyboards will follow.
Sculptural UI has a different failure mode. Because cards share the page background, the only thing telling you where a control begins is a pair of shadows. That is beautiful in a hero and difficult in a state machine. Focus, hover, active, selected, disabled, error and loading all have to be legible, and four of those states are traditionally communicated with depth. The workaround is to accept that depth carries only two states — raised and pressed — and to use a solid two-pixel ring for focus, a text or icon change for disabled, and an explicit colour for error. If you try to express seven states in shadow alone, keyboard users lose track of where they are.
Comparison
| Criterion | Bento Fusion | Sculptural UI |
|---|---|---|
| Radius | 20px tiles, 16px controls | 30px panels, pill controls |
| Elevation | Solid 4px lower edge | Dual shadow, dark plus light |
| Card and ground | Different colours | Same colour, by definition |
| State legibility | Good | Weak without added rings |
| Best use | Feature and pricing pages | Small, focused app surfaces |
| Data density | Medium — one idea per tile | Low |
| Dark mode | Simple token swap | Requires a second light model |
| Mobile collapse | Clean single column | Fine, but padding grows |
Pros and cons
Arguments for
- Bento lets you present many features without long scrolling narrative sections.
- Tiles are genuinely reusable — one component, three spans, endless pages.
- Sculptural surfaces feel tactile, which suits controls you touch rather than read.
- Both styles photograph well in app store screenshots and marketing carousels.
Arguments against
- Bento grids tempt teams into writing headline fragments instead of sentences.
- Uneven spans are fiddly to keep balanced when content length changes.
- Sculptural UI has the lowest contrast headroom of the ten styles.
- Dual shadows double the paint area, which shows on long lists and low-end devices.
Choosing and combining
Take Bento Fusion for a feature page, a platform overview or a portfolio index — anywhere you need scanability more than narrative. Take Sculptural UI for a small application with a handful of controls: a player, a thermostat, a timer, a focus tool. Do not run Sculptural UI across a whole marketing site; the flat material stops signalling anything once every section uses it.
The two can share a project if you divide by page type: bento tiles for marketing, a higher-contrast system for the product. If you want tiles without the soft material, pair Bento Fusion with the border logic from Guide 02 — bordered tiles with hard offset shadows read as confidently as the violet-and-blur version and cost less to render. If you want the softness without the state problems, Guide 03 is the safer base. Whichever you choose, validate the pressed, focused and disabled states against the WCAG 2.2 quick reference before you build fifty tiles on top of them.
Back to the start: open the style lab and compare all ten styles side by side.