Your visit is scheduled.
Tuesday, 2:30–3:30 PM. We’ll let you know when Mike is on his way.
DigitalMarketing & booking
A small, consistent UI vocabulary.
Solid brand fills, plum labels, and pill-shaped actions. These examples use the same button rules as the homepage. Hover or tab to a live button; labeled states are pinned examples for comparison.
Disabled buttons use the neutral border color. Loading retains its brand fill with a progress indicator and disabled interaction. Reduced-motion settings stop the spinner. These specimen buttons do not submit anything.
Color that communicates
A little more time.
Mike is delayed by 15 minutes. Your updated arrival time is 2:45 PM.
Please review your visit.
Your appointment time has changed. Review the new time or choose another slot.
This visit is canceled.
You can choose a new appointment when you’re ready.
Mint signals progress; marigold calls attention to a delay; coral highlights a change that needs a response. Always include words and a symbol. These are proposed customer-message examples; they do not add features to the homepage.
Forms that explain themselves
We’ll use this to follow up about Booker.
! Enter a complete email address, such as [email protected].
Editable specimens only; no data is submitted. Validation uses a visible border and explanatory text instead of color alone.
- Icons: rounded strokes with consistent weight, usually 20–24px. Pair unfamiliar icons with text.
- Motion: 180ms feedback for controls. No looping decorative movement. Respect reduced-motion preferences.
- Hierarchy: coral leads the main action. Mint and marigold provide alternatives; avoid placing three equally prominent actions together in a real flow.
Build with proven compositions.
The homepage is our current reference. These small layout studies show how the same content rearranges; the live preview below uses the actual page.
The scheduling layer
for AI agents.
for AI agents.
One clear explanation.
Existing integrations
MatchBookUpdate
44% copy, 56% visual. The hero has at least 740px of breathing room, increasing to 800px on large displays. UI supports the lower portrait.
The scheduling layer
for AI agents.
for AI agents.
MatchBookUpdate
Copy, person, journey, integrations. Cards enter normal document flow. At 601–900px, copy stacks above the portrait while the three cards stay horizontal.
Your AI agentBookerProvider calendars
Dark sections explain the infrastructure. Keep the central Booker block prominent; stack the sequence vertically on narrow screens.
Open the live homepage preview
This is the actual homepage ↗, using the same local font and shared styles. Resize your browser to see its responsive composition.