Bento Brand Blocks
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
Gavin Parker
