The Color Gallery Component is designed to showcase one of your saved color palettes in a structured, visually consistent grid.
It automatically pulls colors from your Color Manager → Palettes, making it perfect for:

• Primary / secondary color systems
• Extended palettes
• UI color sets
• Print vs. digital palettes
• Brand color families

This component is ideal when you want to present a curated palette rather than individual HEX values.

🌟 What You Can Do with the Color Gallery Component

Inside this component, you can:

• Add a title, subtitle, and category label
• Choose how many swatches appear per row
• Select a palette from your saved color palettes
• Customize colors for titles, text, labels, and background
• Automatically display all colors from the selected palette
• Maintain brand consistency with theme‑aware color options

It’s a clean, structured way to present your brand’s color system.

🧭 Component Overview

When you open the Color Gallery Component in the Component Editor, you’ll see three main sections:

1. Gallery Text Settings

These fields control the text that appears above the color gallery.

Title

A large heading for the section.
Examples:

• “Primary Palette”
• “Brand Colors”
• “UI Color System”

Subtitle

A smaller supporting line.
Examples:

• “Core brand colors”
• “Use these colors for digital and print applications”

Category Label

A label that appears above each swatch.
Examples:

• “Primary”
• “Secondary”
• “Accent”

Images Per Row

Controls how many swatches appear in each row:

• 2 per row — large swatches
• 3 per row — balanced
• 4 per row — compact
• 5 per row — tighter grid
• 6 per row — dense layout

This gives you full control over the visual density of your palette.

2. Color Settings

You can customize four color fields:

Title Color

Controls the color of the main gallery title.

Text Color

Controls the subtitle and general text.

Category Label Color

Controls the label above each swatch.

Background Color

Sets the background behind the entire gallery section.

All color fields support:

• HEX values
• Theme color presets
• Leaving blank to use default styling

This ensures your color gallery stays visually consistent with your brand.

3. Select Palette

This is the heart of the component.

You’ll see a dropdown listing all palettes saved in:

/colors/palettes/

Each palette includes:

• A name
• An ID
• A list of colors (HEX values, names, and metadata)

To use a palette:

1. Open the dropdown
2. Choose the palette you want
3. The gallery automatically displays all colors in that palette

This makes it easy to maintain consistency across your brand guide — update the palette once, and every Color Gallery using it stays in sync.

🎨 Theme‑Aware Color Options

All color pickers automatically pull from your brand’s theme colors, including:

• Light / dark backgrounds
• Highlight colors
• Typography colors

This ensures your color gallery blends seamlessly with the rest of your guide.

💾 Saving Your Changes

As you edit:

• Fields update the component’s JSON automatically
• The preview refreshes in real time
• Click Save Component to finalize your changes

Your color gallery will now appear on the page exactly as configured.

🎯 Summary

The Color Gallery Component helps you:

• Display full color palettes in a clean, responsive grid
• Add titles, subtitles, and category labels
• Control layout density
• Customize colors for full brand consistency
• Automatically pull from your saved palettes

It’s the perfect component for presenting curated color systems clearly and professionally.