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. 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:
[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.