Blade & Fade Co.

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Bebas Neue and Oswald keep the classic barbershop poster caps, and Barlow is a sturdy, slightly industrial body that suits the crafted service details.

• Bebas NeueHeadings: headings 192px uppercase, 72px section titles
• OswaldHeadings: the named fallback condensed display
• BarlowBody: body 16px, 14px 600 uppercase buttons

Who it is for

• Barbershops and men's grooming studios
• Clients booking cuts and shaves
• Barbers building a personal brand
• Small salons wanting 24/7 booking

Layout

1. Dark header: condensed wordmark left, links (Services, Gallery, Testimonials, Contact), gold square booking button right
2. Full-viewport hero: moody close-up fade photo, huge right-aligned condensed uppercase headline across three lines, compact price list overlay beneath (haircuts, beard, shave, styling, facial, package) and a booking arrow link
3. Services 3x2 grid separated by hairlines: condensed title, dark-gold price, duration with clock icon, description, booking arrow link
4. Dark booking section: stepwise form (service, barber, calendar, time, details)
5. Eight-image work gallery
6. Auto-scrolling testimonial marquee
7. Location block: address, hours and embedded map; sticky mobile booking bar

Palette

bold, masculine, crafted, confident, premium. It feels like a classic barbershop poster with modern booking.

• dark background#1c1c1c
• light background#f8f8f7
• services surface#e9e9e7
• text#2e2e2e
• gold accent#c1a05c
• border#dddad5
• gold text on light#806428
• muted text on dark#b5b5b0

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Bebas Neue at 192px (fallback: Oswald, Impact, sans-serif), -0.025em tracking, uppercase, headings only; 72px section titles

Body

Barlow 16px, weight 400, line-height 1.6; short uppercase button labels at 14px, weight 600, 0.12em tracking

A condensed poster face for masculine punch with a neutral grotesk for readable service details.

Spacing and imagery

1120px container, hairline-divided grid cells with 32px padding, 120px sections, 4px radius, square buttons.

Warm, dim close-up photography of fades, lineups and beards; hover-zoom gallery tiles; no illustrations.

Components

• Dark sticky header with gold CTA
• Hero with right-aligned mega headline
• Hero price list overlay
• Service menu grid with hairline dividers
• Duration badge with clock icon
• Six-step booking flow
• Barber selector cards
• Custom month calendar with past dates disabled
• Time slot grid
• Eight-image gallery with hover zoom
• Auto-scrolling testimonial marquee
• Address, hours and map block
• Mobile sticky booking bar
• Confirmation toast with appointment summary

Interactions

• Smooth scroll from nav and CTAs
• Each service's booking link preselects the service in the booking flow
• Calendar month navigation with disabled past dates
• Time slot selection
• Step validation and back/next
• Toast confirmation with summary
• Gallery hover zoom
• Marquee pauses on hover

Data

• Service{id, name, price, durationMin, description}
• Barber{id, name, role, photo, workingDays[]}
• TimeSlot{time, available}
• Appointment{serviceId, barberId, date, time, name, phone, email, notes}
• Testimonial{author, rating, quote}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build "Blade & Fade Co.", a one-page website for a premium barbershop where clients can book any time without calling. The hero should show the key prices immediately. The page flows from services to booking, then to proof (gallery, reviews) and location. On phones a booking button is always in reach.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Card, Button, RadioGroup, Calendar, Form, Toast via Sonner, Drawer via Vaul), lucide-react, date-fns. react-hook-form + zod for the booking details. No backend in v1: appointments are sent through a serverless function that emails the shop and the client. Later, move to Supabase with a unique slot constraint.

### Pages & layout
Single page with anchors:
1. **Header**: dark, condensed wordmark, four links and a gold square "Book appointment".
2. **Hero**: full-viewport dim close-up haircut photo with a gradient at least 65% black behind the text. A massive right-aligned three-line condensed uppercase headline, a compact two-column price list (service name left, price right, hairline rules) and a "Book now →" link.
3. **Services**: light gray section with a 3x2 grid separated by 1px lines. Each cell has a condensed title, a gold price, a clock icon with minutes, two lines of description and "Book →", which scrolls to booking with that service preselected.
4. **Booking**: dark section with a centered heading. Steps: Service (radio cards), Barber (photo cards plus "Any available"), Date (month calendar), Time (slot grid), Details (name, phone, email, notes), Confirm (summary).
5. **Gallery**: 4x2 photo grid with hover zoom.
6. **Reviews**: auto-scrolling marquee of five-star cards.
7. **Find us**: address, hours table and a map embed.
8. **Footer**. On mobile, a sticky bottom "Book appointment" bar.

### Design system
Tokens: `--dark: #1c1c1c`, `--background: #f8f8f7`, `--surface: #e9e9e7`, `--foreground: #2e2e2e`, `--accent: #c1a05c` (gold), `--accent-strong: #806428`, `--border: #dddad5` (decorative hairlines), `--muted-on-dark: #b5b5b0`, `--input-border-dark: #8a8a85`, `--radius: 4px`. Fonts: Bebas Neue for display and Barlow 400/500/600 for text and UI. Scale: clamp(96px, 15vw, 192px) for the hero, then 72/32/20/16/13px; buttons 14px uppercase at 0.12em. Spacing: 8px base, 120px sections. No shadows; use hairlines and contrast. Motion: 200ms hovers, gallery zoom 1.05 over 400ms, marquee 40s.
- Typeface: Oswald (Google Fonts) for the named fallback condensed display.

### Components & interactions
- Gold button: dark text on gold; hover lightens; focus shows a 2px white or dark ring depending on the surface.
- Service cell: hover tints the background; "Book →" nudges.
- Calendar: past dates and closed days disabled, with keyboard navigation.
- Slots: generated from shop hours and service duration; taken slots disabled with a "Booked" label; a loading skeleton while fetching.
- Steps: progress text ("Step 3 of 6"), Back and Next, per-step validation.
- Submit: loading state, then a success toast with the summary, or an error toast with a retry option.
- Marquee: pauses on hover and focus and is static under reduced motion.

### Data & state
`services.ts` (`Service{id, name, price, minutes, description}`), `barbers.ts` (`Barber{id, name, role, photo, days}`), `hours.ts`. Booking state is a single reducer for the six steps. Slot generation uses date-fns in 15-minute increments. Seed four fictional barbers and sample reviews marked as examples.

### Accessibility
White text on gold fails, so use dark text on gold (about 8:1 with #1c1c1c) and `--accent-strong` for gold text on light surfaces. Condensed display type is for headings only and never for body copy. The hero headline must be a real H1. Radio cards need proper radio semantics. Slot buttons get labels like "10:30 AM, available". The map iframe needs a title and a text address. Use a skip link and respect reduced motion. Verified contrast: gold price #806428 on #e9e9e7 = 4.58:1; button #1c1c1c on #c1a05c = 6.86:1; muted on dark #b5b5b0 on #1c1c1c = 8.28:1; input border #8a8a85 on #1c1c1c = 4.91:1.

### Security
Validate the appointment with zod on the client and in the function, re-check the slot on the server, and add a honeypot and rate limit. Collect only name, phone and email. Keep no email API keys in the client and give the map a restrictive iframe `referrerpolicy`.

### Performance & SEO
Serve the hero image optimized with a preload and lazy-load the gallery. Add HairSalon/BarberShop JSON-LD with hours and price range, meta and OG tags. Target Lighthouse 90+.

### Guardrails
- Use original copy and placeholder photos only, with no real shop names or product brands.
- Do not present sample testimonials as real.
- Do not store client data in localStorage.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: the service "Book" preselects correctly; past and closed dates are disabled; slots respect duration; the confirmation toast shows the full summary; the sticky mobile bar works.

Open the builderAll templatesThis palette on its own