These docs are a work in progress and may not be fully up to date. Some pages may contain internal notes for our team.
Skip to Content
FeaturesTheme & Colors

Theme & Colors

The Theme page in the Finder Builder is where you set the look of your Finder. Sixteen curated themes ship with DropAFinder; each one is a complete, accessible color set you can apply with one click. When you need exactly your brand color, override individual tokens — the live WCAG checker tells you the moment a change drops below accessibility threshold.

This page describes the page in the builder. For the theme roster itself, see Themes. For per-token overrides, see Custom colors.

Where to find it

In the Finder Builder, open the Look & Feel group in the sidebar and click Theme & colors.

What you see

The Theme page is organized top-to-bottom into three layers — summary, change-theme entry, and customize entry — so you can stop reading at the layer that fits your need.

1. The Theme summary card

The top of the page is a single card showing the current state of your theme:

  • The active preset name (e.g., Signal)
  • A row of swatch chips showing the main color tokens
  • A font sample showing your current heading + body fonts
  • A WCAG status pill — green Passes WCAG 2.1 AA if every audited color pair meets contrast threshold, amber N pairs below AA — review otherwise
  • Two action buttons: Change theme and Customize

🟡 [SCREENSHOT: Theme summary card with the Signal preset active, swatches visible, type sample reading “Aa” in heading + body fonts, and the green WCAG pill.]

This summary is the page’s whole point: a quick-glance answer to “what theme am I on, and is it accessible?“

2. Change theme

Click Change theme to open a drawer showing the 16 curated themes grouped by mood (Light, Bold, Dark, Warm). Click any card to apply the theme. The drawer closes; the summary card and Live Preview update.

🟡 [SCREENSHOT: Change theme drawer fully open, the 16 cards visible in their four mood groups, with one card hover-highlighted and the WCAG AA banner across the top of the drawer.]

A single banner across the top of the drawer reads: All curated themes pass WCAG 2.1 AA. That guarantee holds for the default values of each theme; the moment you customize, the WCAG status pill on the summary takes over the responsibility of telling you whether you’re still passing.

For the full theme roster with brand-fit notes and the token list each theme covers, see Themes.

3. Customize

Click Customize to expand the Custom colors panel below the summary. The panel lists every color token your theme defines (surfaces, text, buttons, inputs, filter chips, tag pills, map markers, borders) with its current value and a swatch. Click any swatch to open a color picker and override that token.

Changes apply to the Live Preview immediately. The WCAG status pill updates as you go.

For the full token reference and the brand-color iteration recipe, see Custom colors.

The live WCAG status pill

Once you customize, the status pill at the summary becomes the most important indicator on the page. The two states:

  • 🟢 Passes WCAG 2.1 AA — every audited color pair meets the WCAG threshold (4.5:1 for body text, 3:1 for large text and UI). You can ship.
  • 🟡 N pairs below AA — review — at least one pair is below threshold. Click the pill to see the Contrast report drawer.

🟡 [SCREENSHOT: Theme summary in the amber state, pill text reading “3 pairs below AA — review”, with a click affordance.]

The Contrast report drawer

The drawer enumerates every failing pair, grouped by audit area (search button, location card, filter chip, etc.). Each row shows:

  • The two color swatches
  • The current ratio (e.g., 3.2:1)
  • The required ratio for that pair
  • A Reset to preset action that restores just that pair to your active theme’s defaults

🟡 [SCREENSHOT: Contrast report drawer open with three failing pairs visible, grouped by area, ratios and targets shown, and one row’s “Reset to preset” action highlighted.]

Use Reset to preset when you want to keep most of your customization but pull a specific token back into accessibility. Use the panel-level Reset all when you want to start over from the active theme.

Cross-section impact

Color tokens cascade through every part of the visitor experience. A change to the Primary button background affects:

  • The search button on the visitor-facing finder
  • Active-state filter chips that share the primary accent
  • The CTA button if you’ve configured one in the Content section

A change to the Marker fill affects:

  • Every map marker
  • The cluster background when many markers cluster at low zoom

In practice this means: spend a minute matching colors to the right token (button background vs. accent vs. focus ring), and you avoid the “I changed one thing and three others moved” surprise.

💡 Tip: If your brand color clashes with WCAG when used as a surface (button background, panel background), try using it as an accent (focus ring, marker fill) instead. Accents have lower contrast requirements and brand-color drift is more forgiving there.

Edge cases and limitations

  • Switching themes after customizing keeps overrides. Picking a new theme from the drawer replaces only the unchanged tokens. Custom values you set persist. To get a clean theme switch, use Reset all in the Custom colors panel first.
  • No partial themes. You can’t mix-and-match — e.g., “borrow the buttons from Coastal but the surfaces from Charcoal.” Pick one theme, then customize.
  • Map tile colors are not part of the theme. The map tiles come from your map provider (TomTom, Mapbox, etc.). A Dark theme paired with a light tile style looks mismatched; pair Dark themes with the dark variant of your map provider in Map style.
  • Image colors aren’t recolored. Location images render at their original colors regardless of theme. A bright product photo on a Charcoal theme will be a bright product photo on a Charcoal theme.

🔴 [NEEDS CLARIFICATION: A Look & Feel restructure is in flight (per okay-so-some-specific-adaptive-honey.md). The above describes the planned shape — Theme summary card + Change theme drawer + Customize disclosure + WCAG pill. Confirm whether the revamp has shipped before publishing this page; if not, the current implementation in DesignSection.tsx may differ in layout while sharing the same controls.]

Where to next

Tags and Custom FieldsTypography