Idea → Prompt

# Website prompt: a booking site for a small dog-grooming salon

Act as a senior web designer and front-end developer. Create a complete, responsive multi-page website design for the idea below, in a playful style. Follow every section of this brief; where it leaves a choice open, make the decision and state it.

## Idea
a booking site for a small dog-grooming salon

## Audience & tone
- Audience: the people most likely to need this, described as specifically as possible
- Tone: warm, upbeat and friendly; light humour, never sarcastic

## Colour palette
- Background (bg): #FFF8EE
- Surface (cards, panels): #FFFFFF
- Text (primary): #2B1D3A — contrast on bg 14.9:1
- Muted text (secondary): #5E4E6E — contrast on bg 7.1:1
- Accent (buttons, links, highlights): #7C3AED
- Accent contrast (text on accent): #FFFFFF — contrast 5.7:1
- Use the accent sparingly (about 10% of the screen); never put muted text on the accent colour.

## Typography
- Headings: Fredoka (600); body: Nunito (400)
- Type scale (base 16px, ratio 1.25): caption 13px, body 16px, h6 20px, h5 25px, h4 31px, h3 39px, h2 49px, h1 61px
- Line height: 1.5 for body, 1.15–1.25 for headings; body line length 60–75 characters
- Never set body text below 16px on mobile

## Spacing & layout
- Spacing scale on a 4/8pt grid: 4, 8, 12, 16, 24, 32, 48, 64, 96px
- 12-column grid, max content width 1200px, 24px gutters; 16px side margins on mobile
- Section spacing: 96px desktop, 64px mobile; related items 8–16px apart, groups 32–48px apart

## Radii & shadows
- Radius: small 10px (inputs, tags), medium 16px (buttons, cards), large 28px (modals, sheets)
- Shadow: 0 4px 0 rgba(43,29,58,.12)

## Page structure
- Header: logo, 4–5 nav links, one primary button
- Hero: headline (max 10 words), one-sentence subhead, primary and secondary button, supporting visual
- Value propositions: 3 short benefit blocks with icons
- Features or services: 3–6 cards with title, 2-line description and link
- Social proof: 3 testimonials or a logo row with real names and roles
- About / story: short paragraph and photo
- FAQ: 5–6 questions in an accessible accordion
- Footer: contact details, secondary nav, legal links

## Components
- Buttons (primary, secondary, ghost) with all states
- Navigation bar with mobile menu
- Cards
- Accordion
- Form inputs with labels, help text and error messages
- Footer
- Show every interactive component in default, hover, focus, active, disabled and loading states

## Motion
- Feel: bouncy springs and gentle overshoot
- Durations: 150ms (hover, toggles), 260ms (menus, cards), 420ms (page and modal transitions)
- Easing: cubic-bezier(0.34, 1.56, 0.64, 1)
- Animate only opacity and transform; no layout-shifting animation
- Respect prefers-reduced-motion: replace movement with instant changes or simple fades

## Accessibility
- Meet WCAG 2.2 AA: text contrast at least 4.5:1, large text and UI components at least 3:1
- Visible focus ring on every interactive element (2px, accent colour, 2px offset)
- Semantic structure: one H1, ordered headings, labelled form fields, alt text for meaningful images
- Full keyboard support; never rely on colour alone to convey meaning

## Output format
- Start with a 2-sentence summary of your approach
- Then deliver the work section by section, using the headings above
- End with 3 questions you would ask the client before the next round