# 11 · Buttons — Pet Air Valet Brand Guide

> © 2026 Pet Air Valet. All rights reserved. **Strictly confidential — internal use only.**

Full-pill. Depth through shadow — never a colour shift on hover. A gentle glow-pulse is reserved for the single conversion CTA on a screen; every other button sits still.

## Conversion CTA · the only animated button

One per screen. Pulse is slow (~11s), half strength, quiets on hover.

- **Book now · terracotta** — `btn btn--terracotta btn--cta btn--lg`
- **Reserve · golden** — `btn btn--golden btn--cta btn--lg`
- **Plan a Journey · xl** — `btn btn--terracotta btn--cta btn--xl`

## Variants

Terracotta primary · midnight secondary · golden accent · ghost tertiary · link inline.

| Variant | Use |
| --- | --- |
| Primary · terracotta | Contact Concierge, book-like CTAs |
| Secondary · midnight | Learn-more, neutral actions |
| Accent · golden | Reservation accents |
| Ghost | Tertiary actions on cream |
| Link | Inline navigation |

## Sizes

44 · 48 · 54 · 60 — every size clears the 44px mobile hit target.

| Token | Height | Use |
| --- | --- | --- |
| `btn--sm` | 44 | Dense UI, nav |
| `btn` (default) | 48 | Default body buttons |
| `btn--lg` | 54 | Section CTAs |
| `btn--xl` | 60 | Hero CTAs |

## States

Hover deepens the fill and lifts the shadow. Press scales to 0.98.

- **Default** — resting.
- **Hover** — fill deepens, shadow lifts.
- **Active / press** — scales to `0.98`.
- **Loading** — `aria-busy="true"` with a spinner; label changes to "Reserving…".
- **Disabled** — `disabled` attribute; 0.5 opacity, no pointer events.
- **Icon-only** — always include `aria-label`.

## On midnight

Golden becomes primary on dark. Terracotta holds. Ghost flips to a soft wash.

---
*Pet Air Valet — Brand Guide, v1.0 · April 2026 · Fly Together, In-Cabin.*