bentolisted

# Bento Bento arranges content the way a compartmented lunch box arranges a meal: distinct, rounded blocks of different sizes locked into one tidy grid, each holding a single idea. The varied tile sizes create instant hierarchy—big blocks lead, small blocks support—while consistent gaps and soft shadows keep everything feeling deliberate and calm. It is the fastest way to make a dense page read as organized and modern. Reach for Bento on feature sections, dashboards, and profile pages where many pieces of content need to coexist without clutter. ## Design principles - Compose the page from modular blocks of varied size; let the size of a tile express its importance. - Keep gaps uniform and generous so the grid reads as one cohesive system, not scattered cards. - One idea per tile—an icon, a heading, and a short supporting line is the canonical unit. - Use asymmetry on purpose: mix one hero block with medium and small ones for visual rhythm. - Soft, crisp shadows and rounded corners separate tiles from the canvas without heavy borders. - Reserve the accent for the single most important number, label, or action inside a tile. ## Color Bento sits on a soft neutral gray canvas (`#F4F4F6`) so white tiles (`#FFFFFF`) pop forward cleanly. Separation comes from a crisp subtle shadow plus an optional 1px `#E6E6EB` border for extra definition on dense grids. Primary text is a near-black `#16181D` for sharp headings; muted text (`#6B7280`) carries labels, captions, and secondary line