Bento Brand Blocks

Display brand colours in a bento grid.

The Bento Brand Block is designed for designers building portfolio case studies or presenting brand identity work in Framer. It gives you a flexible colour palette component that adapts automatically as you add colours, while still giving you full control over typography, formatting, and layout. Whether you’re documenting a full brand palette or highlighting key colours from a project, the component keeps everything visually balanced and easy to read across all breakpoints. • Add up to 8 brand colours with custom colour names in a dynamic bento grid that automatically adapts as tiles are added or removed • Toggle colour formats between HEX, RGB, and CMYK for sharing palette values with developers or clients • Fully responsive grid that reflows at every breakpoint with no gaps or uneven spacing • Independent typography controls for colour names and colour values using Framer’s native font system • Per-tile text colour override to ensure labels remain readable on any background colour • Optional label background with controls for colour, blur, radius, and padding • Click any tile to instantly copy the current colour value to the clipboard • Frame-driven sizing so the component fills the width and height of any Framer frame without fixed dimensions

Display brand colours in a bento grid.