Section

About the Soft Bento Section

A page band: vertical rhythm, tone and width. Every block on a page sits in one. Sets data-tone; inverse and accent also set data-surface, so every component inside reads correctly. Two adjacent default sections share one gap. In Soft Bento the page stays oat and the objects carry the colour: muted is the sunken oat (only a shade darker than the page, for one quieter band; don't alternate it, since each toned band keeps its own padding and the gaps double), inverse night clay, accent a full-bleed blue slab (rare: prefer a CTA panel), tints a candy wash.

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.