No. 18 · Product & SaaS · Rate it
Bento
Modular modern — every idea in its own rounded tile on one calm grid
A modern, modular language where pages and dashboards are built from rounded tiles on a single grid with one shared gap. Each tile holds exactly one idea — a stat in condensed numerals, a feature, a form, a chart — on a calm grey canvas; one tile per group goes dark, one takes the raspberry accent. Even the header is three tiles. Linked tiles carry a corner arrow, choices are small option tiles, and dashboards have a Customize mode that resizes widgets in place. Neutral enough for any product, strict enough to always look composed.
Best for
- Hardware and app product pages
- SaaS feature overviews and changelogs
- Personal and team dashboards with widgets
- Portfolios and link-in-bio pages
Not ideal for
- Long-form reading and documentation
- Dense tabular back-offices
- Brands that need ornament or heritage
Signature moves
- Everything is a 28px-radius tile on one grid with one gap
- One idea per tile; one dark tile and one accent tile per group
- Condensed numerals (wdth 75) for every stat
- The header is three tiles: logo, nav, actions
- Corner arrows on linked tiles; option tiles for choices
- Customize mode resizes dashboard widgets in place
Try it with another brand color
Opens the demo with only --brand changed. The style should still read as Bento.
Install this skill
/plugin marketplace add tastefolio/tastefolio.github.io
/plugin install bento@tastefolionpx skills add tastefolio/tastefolio.github.io --skill bentocurl -L https://tastefolio.github.io/downloads/bento.zip -o bento.zip
unzip bento.zip -d .claude/skills/Copy the folder anywhere your agent can read it, then reference it from AGENTS.md / rules:
"Follow skills/bento/SKILL.md for every UI change."Files
Rate this style
Like it? Give it a 👍 below; you sign in with GitHub. The gallery’s Top rated order counts these votes and refreshes every hour. Comments and questions are welcome too.