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