---
title: "Appearance and customization"
description: "Theme presets, light and dark mode, Pro branding, custom CSS, and data-fmt hooks for public pages."
path: /help/appearance
---

# Appearance and customization

Public Book a Time, RSVP, and Find a Time pages use a theme snapshot so guests see your look even if you change presets later. Organizer screens keep the standard app chrome.

Try live examples in the [demo catalog](/demo). Toggle light and dark with the floating control—every Free preset family includes both.

## Free presets

Choose a family such as Harbor, Hearth, Atelier, Signal, Ink, Playground, or Lantern. Each family defines:

- Primary, background, surface, and text colors for **light and dark**
- Font, corner radius, and button style
- Optional calendar plate colors

Guests follow their color-mode preference. Exact Free families swap to the matching light or dark twin automatically.

## Pro customization

Pro unlocks branding beyond presets:

| Setting             | What it does                                     |
| ------------------- | ------------------------------------------------ |
| Custom colors       | Edit light and dark surfaces independently       |
| Font and radius     | Same allowlists as Free                          |
| Button style        | Solid, soft, or outline on primary guest actions |
| Calendar plate      | Optional background for the calendar area        |
| Logo and brand name | Shown in the public header                       |
| Background image    | Full-page background behind the theme surface    |
| Custom CSS          | Scoped under `#findmetime-page`                  |

Free public pages clamp advanced fields so guests only see Free-safe presentation.

## Custom CSS hooks

Pro CSS is rewritten so every rule is scoped under `#findmetime-page`. Prefer stable `data-fmt` hooks instead of fragile class names or `data-testid`.

Common hooks:

| Hook                       | Where it appears               |
| -------------------------- | ------------------------------ |
| `data-fmt="page"`          | Page root (`#findmetime-page`) |
| `data-fmt="branding"`      | Logo / brand name block        |
| `data-fmt="title"`         | Page title                     |
| `data-fmt="host-message"`  | Host message                   |
| `data-fmt="form"`          | Guest form                     |
| `data-fmt="submit"`        | Primary submit control         |
| `data-fmt="calendar"`      | Booking calendar               |
| `data-fmt="calendar-slot"` | Individual time slot           |
| `data-fmt="rsvp-choice"`   | Going / Maybe / Not going      |
| `data-fmt="poll-grid"`     | Find a Time paint grid         |

Example:

```css
[data-fmt='title'] {
  letter-spacing: -0.02em;
}
[data-fmt='host-message'] {
  border-left: 3px solid var(--theme-primary);
  padding-left: 0.75rem;
}
[data-fmt='submit'] button {
  font-weight: 600;
}
```

Useful CSS variables on the page root include `--theme-primary`, `--theme-bg`, `--theme-surface`, `--theme-text`, `--theme-radius`, and `--theme-font`.

External `url(https://…)` in custom CSS is blocked—use the logo and background image fields instead.

## Related links

- [Book a Time pages](/help/book-a-time)
- [RSVP events](/help/rsvp)
- [Find a Time](/help/polls)
- [Try a demo](/demo)
- [Compare plans](/pricing)