composer-2.5

---
name: Direct Response AI Receptionist
colors:
  surface: '#faf8ff'
  surface-dim: '#d2d9f4'
  surface-bright: '#faf8ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f2f3ff'
  surface-container: '#eaedff'
  surface-container-high: '#e2e7ff'
  surface-container-highest: '#dae2fd'
  on-surface: '#131b2e'
  on-surface-variant: '#434656'
  inverse-surface: '#283044'
  inverse-on-surface: '#eef0ff'
  outline: '#737688'
  outline-variant: '#c3c5d9'
  surface-tint: '#004ced'
  primary: '#003ec7'
  on-primary: '#ffffff'
  primary-container: '#0052ff'
  on-primary-container: '#dfe3ff'
  inverse-primary: '#b7c4ff'
  secondary: '#595e6d'
  on-secondary: '#ffffff'
  secondary-container: '#dee2f4'
  on-secondary-container: '#5f6473'
  tertiary: '#005a3c'
  on-tertiary: '#ffffff'
  tertiary-container: '#007550'
  on-tertiary-container: '#72fec0'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#dde1ff'
  primary-fixed-dim: '#b7c4ff'
  on-primary-fixed: '#001452'
  on-primary-fixed-variant: '#0038b6'
  secondary-fixed: '#dee2f4'
  secondary-fixed-dim: '#c2c6d7'
  on-secondary-fixed: '#161b28'
  on-secondary-fixed-variant: '#424655'
  tertiary-fixed: '#6ffbbe'
  tertiary-fixed-dim: '#4edea3'
  on-tertiary-fixed: '#002113'
  on-tertiary-fixed-variant: '#005236'
  background: '#faf8ff'
  on-background: '#131b2e'
  surface-variant: '#dae2fd'
typography:
  display-hero:
    fontFamily: Plus Jakarta Sans
    fontSize: 56px
    fontWeight: '800'
    lineHeight: 64px
    letterSpacing: -0.03em
  display-hero-mobile:
    fontFamily: Plus Jakarta Sans
    fontSize: 36px
    fontWeight: '800'
    lineHeight: 42px
    letterSpacing: -0.025em
  headline-xl:
    fontFamily: Plus Jakarta Sans
    fontSize: 40px
    fontWeight: '800'
    lineHeight: 48px
    letterSpacing: -0.025em
  headline-xl-mobile:
    fontFamily: Plus Jakarta Sans
    fontSize: 28px
    fontWeight: '700'
    lineHeight: 34px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 28px
    fontWeight: '700'
    lineHeight: 36px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 22px
    fontWeight: '700'
    lineHeight: 28px
    letterSpacing: -0.015em
  headline-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: '600'
    lineHeight: 24px
    letterSpacing: -0.01em
  body-xl:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '400'
    lineHeight: 30px
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 26px
    letterSpacing: 0em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 22px
    letterSpacing: 0em
  body-bold:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 22px
    letterSpacing: 0em
  label-uppercase:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '700'
    lineHeight: 16px
    letterSpacing: 0.08em
  label-badge:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: '600'
    lineHeight: 18px
    letterSpacing: 0em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0em
rounded:
  DEFAULT: 0.125rem
  lg: 0.25rem
  xl: 0.5rem
  full: 0.75rem
spacing:
  space-2xs: 0.25rem
  space-xs: 0.5rem
  space-sm: 0.75rem
  space-md: 1rem
  space-lg: 1.5rem
  space-xl: 2rem
  space-2xl: 3rem
  space-3xl: 4rem
  space-4xl: 6rem
  container-max: 1160px
  gutter: 1.5rem
icons: Material Symbols Outlined
---

## Brand & Style

A direct-response B2B SaaS landing page for CallPulse, an AI voice receptionist. The copy is
high-velocity and outcome-obsessed; the interface around it is soft, tokenized product SaaS in the
Material You idiom. Lavender-tinted surfaces, semantic color roles, blurred elevation, and pill
chips carry the whole page.

This is not brutalism. There are no ink borders, no hard offset shadows, no editorial gridlines.

Every token named below already exists as a Tailwind utility in `src/styles/global.css`. Use those
utilities. Do not add raw hex colors, one-off pixel type sizes, or a second radius scale.

### Brand Personality & Tone
- **Punchy copy, calm chrome:** Headlines and CTAs are blunt and numeric. The chrome stays rounded,
  tinted, and low-contrast so the words do the shouting.
- **Operational liveness:** Pulsing and pinging dots, a "Live Call in Progress" frame, and emerald
  tertiary tokens signal that the agent is answering right now.
- **Every section ends on a number:** Lost quotes per week, minutes included, revenue captured.

### Visual Language
- **Tinted token surfaces, not a white canvas:** The page background is `surface` (`#faf8ff`). Cards
  sit on `surface-container-lowest` (`#ffffff`). Alternating bands step through
  `surface-container-low` and `surface-container`.
- **No section navigation:** The fixed header holds the brand mark, a live-status pill, and an avatar
  disc. Zero in-header links. Every CTA on the page targets `#pricing`.
- **Soft elevation only:** Tailwind's blurred `shadow-sm` through `shadow-2xl`. Never
  `box-shadow: Npx Npx 0 <color>`, and never a `1.5px` outline on a card or button.
- **Material Symbols Outlined** icons, set in tinted rounded squares (40-48px). No bordered icon
  chips.

## Colors

Use the token names from the front matter. Do not introduce slate or ink hexes (`#090E1A`,
`#334155`, `#F8FAFC`, `#10B981`) — every color on the page comes from a token below.

### Primary
- **`primary` (`#003ec7`):** Deep royal blue. Header avatar disc, star ratings, FAQ icons, and the
  hover state of every primary button (`hover:bg-primary`).
- **`primary-container` (`#0052ff`):** Bright electric blue. Logo tile, primary CTAs, the AI chat
  bubble, the Growth highlight pill, and the full-bleed closing CTA band.
- **`on-primary` (`#ffffff`):** Text and icons on both blues.

### Surfaces
- **`surface` / `background` (`#faf8ff`):** Default page background and most content sections.
- **`surface-container-lowest` (`#ffffff`):** Cards, the call-simulation frame, FAQ items, and the
  inverted button on the blue closing band.
- **`surface-container-low` (`#f2f3ff`):** Problem, pricing, and testimonial bands; caller chat
  bubbles; the guarantee panel; the brand footer.
- **`surface-container` (`#eaedff`):** The mid-page centered CTA band, plus the hairline on
  testimonial author rows (`border-surface-container`).
- **`surface-container-high` (`#e2e7ff`):** The header "AI Voice" chip, section kickers, secondary
  pricing buttons, the disclaimer band, and the call-simulation top bar.
- **`inverse-surface` (`#283044`):** The live ticker ribbon and the first dark CTA band.

### Accent & Feedback
- **Tertiary family** (`tertiary` `#005a3c`, `tertiary-container` `#007550`, `tertiary-fixed`
  `#6ffbbe`, `tertiary-fixed-dim` `#4edea3`): live pulse dots, the verified check, the CRM-sync
  strip, pricing checkmarks on Starter and Scale, the guarantee icon, and testimonial metrics.
- **Error family** (`error` `#ba1a1a`, `error-container` `#ffdad6`): the problem-section kicker, the
  missed-call icon tile, the "Avg. Loss" chip, the Option A/B/C failure rows, and the red
  live-call dot.

### Text
- **`on-surface` (`#131b2e`):** Headlines and body copy on light surfaces.
- **`on-surface-variant` (`#434656`):** Subheads, card descriptions, footer meta.
- **`secondary` (`#595e6d`):** Captions, caller labels, the legal disclaimer.
- **`on-primary-container` (`#dfe3ff`):** Secondary text on the blue closing band and the AI bubble's
  metadata line.

## Typography

### Font Roles
- **Display and headlines (`Plus Jakarta Sans`):** The hero `h1` uses `display-hero` (56/64, weight
  800) from the `md` breakpoint up and `headline-xl` below it. Section titles use `headline-xl`.
  Band titles use `headline-lg`. Card titles use `headline-sm`. Pricing plan names use
  `headline-md`. CTA button labels use `headline-sm`.
- **Body (`Inter`):** `body-lg` for section intros, `body-md` for card copy and quotes, `body-bold`
  for inline emphasis and ticker labels, `caption` for microcopy and legal text,
  `label-uppercase` for section kickers, `label-badge` for Option tags and the "Most Popular
  Choice" flag.

### Typographic Patterns
- **Hero money phrase:** `$1,500 Customer` is set in `primary-container` with a **wavy** underline
  (`decoration-wavy decoration-2 underline-offset-8`), not a solid rule.
- **Subhook:** "Never Miss Another Paying Lead Again." is bold `on-surface` with a **4px solid**
  `tertiary-container` underline at `underline-offset-4`.
- **Section kickers:** `label-uppercase` with `tracking-widest`, wrapped in a `rounded-full` pill on
  a tinted fill (`bg-error-container/40`, `bg-surface-container-high`, or `bg-tertiary-fixed/30`).
  Never bare gray kicker text above the headline.

## Layout & Spacing

A single-column marketing scroll. Content centers in `max-w-[1160px]` with `px-gutter` (`1.5rem`).
The hero's inner measure is `max-w-4xl`; some CTA and FAQ stacks tighten to `max-w-[800px]` or
`max-w-[900px]`.

### Header
- Fixed, `h-16`, `bg-surface/90 backdrop-blur-md`, `z-50`.
- Left: a 32px `primary-container` `rounded-lg` tile holding `ring_volume`, then "CallPulse", then
  an "AI Voice" pill.
- Right: a "Receptionist Online 24/7" pill with a pulsing `tertiary-container` dot (`hidden sm:flex`)
  and a 32px `primary` avatar disc holding `person`.
- `main` carries `pt-16` to clear the fixed header. No nav links, no header CTA button.

### Page Rhythm
1. Inverse ticker ribbon, full bleed, `py-2`.
2. Hero on `surface` (`pt-space-2xl pb-space-3xl`), a **centered stack** — not a split layout.
3. Problem section on `surface-container-low` (`py-space-3xl`).
4. Three-step implementation on `surface`.
5. Dark CTA band on `inverse-surface` (`py-space-xl`), a row from `md` up.
6. Options comparison on `surface`.
7. Centered CTA on `surface-container` (`py-space-2xl`).
8. Feature pillars, 2x2, on `surface`.
9. Pricing on `surface-container-low`, carrying `id="pricing"`.
10. Guarantee card on `surface`.
11. Testimonials on `surface-container-low`.
12. Full-bleed `primary-container` closing CTA (`py-space-3xl`).
13. FAQ on `surface`, `max-w-[800px]`.
14. Disclaimer band on `surface-container-high`.
15. Brand footer on `surface-container-low`.

### Grids
- Problem, steps, options, testimonials: `grid-cols-1 md:grid-cols-3 gap-space-lg`.
- Feature pillars: `grid-cols-1 md:grid-cols-2`.
- Pricing: `grid-cols-1 lg:grid-cols-3`.
- No asymmetric 12-column layout. The hero visual is a full-width card beneath the copy at
  `max-w-4xl`.

### Responsive Breakpoints
- **Below 640px:** Single column. The header live pill is hidden. The hero CTA is full width. The
  call-simulation frame drops to `p-space-md`.
- **640px and up (`sm`):** The header live pill appears. The hero CTA shrinks to its content. The
  call-simulation frame goes to `p-space-xl`.
- **768px and up (`md`):** Three- and two-column grids engage. The dark CTA band becomes a row with
  copy left and button right. Hero type steps up to `display-hero`.
- **1024px and up (`lg`):** Pricing becomes three columns.

## Elevation & Depth

Depth comes from blurred Tailwind shadows on borderless surfaces.

| Level | Class | Applied to |
|---|---|---|
| 0 | none | Page bands: `surface`, `surface-container-low`, inverse, `primary-container` |
| 1 | `shadow-sm` | Step cards, option cards, FAQ items, guarantee panel |
| 2 | `shadow-md` | Problem cards, feature tiles, Starter and Scale cards, testimonials |
| 3 | `shadow-lg` / `shadow-xl` | Mid-page primary buttons; the hero CTA uses `shadow-xl` |
| 4 | `shadow-2xl` | Call-simulation module, the Growth card, the inverted closing button |

Interaction: primary buttons take `hover:bg-primary`; the hero CTA adds `hover:-translate-y-0.5` and
`active:translate-y-0`. Step cards go `shadow-sm` to `hover:shadow-md`. Transitions run
`duration-200`. Live dots use `animate-pulse` or `animate-ping`.

There is no shadow-collapse click treatment and no structural border system. The only hairline in the
page is `border-t border-surface-container` on testimonial author rows.

## Shapes

The theme remaps Tailwind's radius scale, so class names do not carry their stock values:
`rounded` = 2px, `rounded-lg` = 4px, `rounded-xl` = 8px, `rounded-full` = 12px.

- **`rounded-xl` (8px):** Cards, primary and secondary buttons, chat bubbles, 48px icon wells, the
  guarantee panel.
- **`rounded-lg` (4px):** The logo tile, the call-simulation header bar, the automation outcome strip.
- **`rounded-full` (12px):** Status pills, the hero eyebrow, the social-proof chip, the "Most Popular
  Choice" flag, avatars, the latency chip.
- **`rounded` (2px):** Option tags, metric chips, inline caller-ID tags.

Note that `rounded-full` here is a 12px radius, not a circle. Elements that read as circular
(avatars, dots) get their round shape from equal width and height plus `rounded-full`.

## Components

### Buttons
- **Primary:** `bg-primary-container text-on-primary font-headline-sm rounded-xl` with `shadow-xl`
  in the hero and `shadow-lg` or `shadow-md` on later bands. Padding is `px-space-2xl py-4` in the
  hero, `px-space-xl py-3.5` elsewhere. Hover goes to `bg-primary`. An optional trailing
  `arrow_forward` icon. No border.
- **Secondary (Starter, Scale):** `bg-surface-container-high text-on-surface rounded-xl`, full
  width, `hover:bg-surface-variant`. Not a ghost or outlined treatment.
- **Inverted (closing band):** `bg-surface-container-lowest text-on-surface rounded-xl shadow-2xl`
  sitting on the `primary-container` band.
- There is **no dial-in phone-number button** and **no lead-capture form** anywhere on the page.

### Pills & Kickers
- **Live status:** `rounded-full` on `surface-container-low` or `surface-container-high`, caption
  text, with an 8px pulsing dot in `tertiary-container` or `tertiary-fixed-dim`.
- **Section kicker:** `label-uppercase tracking-widest` inside a tinted pill. Problem and options
  sections use error tokens; technology and social proof use tertiary; the rest use `primary` on
  `surface-container-high`.
- **Most Popular flag:** absolutely positioned at `-top-3` on the Growth card,
  `bg-primary-container text-on-primary shadow-md`.

### Cards
- **Default tile:** `bg-surface-container-lowest p-space-xl rounded-xl` plus a shadow. A 40-48px
  icon well, then `headline-sm`, then `body-md`.
- **Metric footer chip:** `bg-surface-container-high p-space-sm rounded` pinned at the bottom of each
  problem card (lost quotes, lost hours, annual overhead).
- **Option cards:** same padding on `surface-container-low`; the failure row is
  `bg-surface-container-highest text-error` with a `close` icon. Not a bordered comparison table.
- **Feature tiles:** horizontal — icon well beside the copy — two across from `md` up.

### Call Simulation (hero visual)
- A `surface-container-lowest` frame, `rounded-xl shadow-2xl`, `max-w-4xl`.
- Top bar: a red pulsing dot, `label-uppercase` "Live Call in Progress (00:48)", then caller-ID and
  line tags.
- Caller bubbles align left on `surface-container-low`. The AI bubble aligns right in a reversed row
  on `bg-primary-container text-on-primary` with a `smart_toy` avatar and an inline latency chip.
- Bottom strip: calendar-sync and SMS-confirmation rows with tertiary and primary icons.

### Pricing
- Three equal-height cards. Growth uses the same surface as the others but takes `shadow-2xl` plus
  the floating pill — it is not outlined.
- Prices `$99`, `$249`, `$499` in `headline-xl`, with `/month` in `body-md` on the baseline.
- Feature checks use the `check` icon in `tertiary-container` on Starter and Scale, and in
  `primary-container` on Growth.

### Testimonials
- A `★★★★★` row in `primary`, an italic `body-md` quote, then an author row: 48px circular photo,
  name, company, and a green metric line. Photos may be placeholders, but the layout (avatar plus
  two text lines plus metric) is required.

### FAQ
- Exactly three stacked cards with `shadow-sm`. Each is a `help` icon plus a `headline-sm` question
  and a `body-md` answer. Static, not an accordion.

### Footer
- Disclaimer section: centered legal copy with Privacy, Terms, and FCC/TCPA links on
  `surface-container-high`.
- Brand footer: a small logo tile, "CallPulse", and a caption line on `surface-container-low`.