Colors & Branding
FieldFlow lets you adjust the visual style of your directory so it blends with your website’s design.
Color settings
Section titled “Color settings”In the Configure > Display tab, you can customize:
Primary color
Section titled “Primary color”Used for links, buttons, and accent elements. Pick a color that matches your brand.
Card borders and shadows
Section titled “Card borders and shadows”- Subtle — light borders, minimal shadow
- Prominent — visible borders with drop shadow
Header style
Section titled “Header style”- Gradient — a color gradient behind the card header area
- Flat — solid background color
How colors apply
Section titled “How colors apply”Your color choices affect card link colors, filter button active states, search focus ring, detail page hero background, taxonomy tag colors, and “View Details” buttons.
Theme options for embeds
Section titled “Theme options for embeds”| Theme | Description |
|---|---|
| System | Follows the visitor’s device preference (light or dark) |
| Light | Always uses a light background |
| Dark | Always uses a dark background |
The theme is set in your embed code, not in the layout builder.
- Pick a primary color with enough contrast against both light and dark backgrounds
- Test your directory in both light and dark mode before publishing
- Use the live preview in the layout builder to see changes in real time