Bento Brand Blocks · Premium Layout Component
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
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
