Switchback Atlas

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

Alegreya's calligraphic italic has the wanderer's-handwriting romance, and its sans sibling keeps the travel details clean.

• AlegreyaHeadings: hero 72px 700 italic, section heads 36px
• Alegreya SansBody: body 16px, 12px uppercase eyebrows

Who it is for

• Travel bloggers with lots of guides
• Van-life and road-trip creators
• Tour operators publishing content
• Travel creators selling digital guides

Layout

1. Header: Destinations mega-menu, Travel Routes, Shop left; italic serif wordmark center; search and cart right
2. Full-bleed hero photo with dark overlay, circular badge, spaced eyebrow, large italic serif headline, destination search with olive button, wavy bottom edge
3. Latest travel tips: 3 article cards with region labels
4. Dark textured band with circular badge and continent pills
5. Promo split: italic serif headline + copy left, desert photo right
6. About section, newsletter band
7. Continent/region destination grids, itinerary pages, shop, footer, cookie consent modal

Palette

Warm, romantic, adventurous, earthy, editorial. A classic travel magazine with a wanderer's handwriting feel.

• background#f8f6f1
• text#2a2622
• primary olive#6b6737
• secondary sand#d6cfc2
• accent linen#eae3d7
• dark band#4a433b
• card#fbfaf8
• muted text#6b6259
• input border#9c8c6c

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

Alegreya 700 italic, 72px hero, 36px section heads

Body

Alegreya Sans 400 16px; uppercase eyebrows of 1-4 words, 12px with 0.2em tracking

Romantic italic serif for headlines with neutral Alegreya Sans body; olive gold accents

Spacing and imagery

Full-bleed heroes and bands, 1240px content container, 3-column card grids, 8px radius, pill filter chips; wavy SVG section dividers

Big destination landscape photography (island coastlines, deserts, auroras) with dark overlays for text; textured map-like backgrounds.

Components

• Mega menu with regions
• Centered serif wordmark
• Hero with search
• Circular rotating badge
• Wavy divider
• Article card with region label
• Continent pill filters
• Promo split section
• Best-visit month selector
• Day-by-day itinerary timeline
• Breadcrumbs
• Digital product cards with cart
• Newsletter band
• Cookie consent modal

Interactions

• Auto-advancing hero carousel
• Mega menu open on hover/click
• Category filtering and pagination
• Month selector highlights best destinations
• Add to cart and cart drawer
• Scroll reveal animations
• Cookie consent accept/reject
• Share buttons

Data

• Destination{slug, name, continent, country, cover, best_months[], summary}
• Guide{slug, title, destination_slug, category, cover, body_md, date}
• Itinerary{slug, title, days[{day, title, stops[], notes}]}
• Product{id, title, price, cover, file_type, checkout_url}
• Subscriber{email}

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 **Switchback Atlas**, an editorial travel publication with destination guides, itineraries and a small shop of downloadable guides. Readers navigate by continent through a mega menu, discover when to visit via a month selector, follow day-by-day routes, and subscribe. The job: be a trustworthy, beautiful reference for planning road trips worldwide.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix, including NavigationMenu for the mega menu), lucide-react. MDX content; Embla for the auto-advancing hero carousel; Framer Motion for reveals; Zustand or context for the cart (persisted to localStorage); react-hook-form + zod for newsletter. No custom backend: checkout via hosted Stripe Payment Links; newsletter via an Edge Function or provider.

### Pages & layout
1. **Home** – header (Destinations ▾, Routes, Shop | centered italic serif wordmark | search, cart). Hero carousel of full-bleed photos with dark overlay, spaced uppercase eyebrow, 72px italic serif headline, search field with olive button, circular badge, wavy bottom divider. Latest tips (3 cards with region eyebrow, 2-line title). Dark textured band with continent pills. Promo split (italic headline, copy, CTA + photo). About section. Newsletter band. Footer.
2. **Destinations** – continent → country → destination pages with breadcrumbs, filters, pagination.
3. **Best time to visit** – 12 month chips; selecting one lists destinations whose `best_months` include it.
4. **Itinerary** – day timeline with stops, map placeholder, tips.
5. **Guide article** – hero, prose, share, related.
6. **Shop** – product cards, cart drawer, "Checkout" linking to hosted checkout.

### Design system
`--background: #f8f6f1`, `--foreground: #2a2622`, `--primary: #6b6737` (olive), `--secondary: #d6cfc2`, `--accent: #eae3d7`, `--muted: #eeeae2`, `--border: #e0dbd1` (decorative), `--input-border: #9c8c6c`, `--muted-foreground: #6b6259`, `--band: #4a433b`, `--card: #fbfaf8`. Fonts: Alegreya 600/700 italic (display) + Alegreya Sans 400/500. Scale 12 (tracked caps, 0.2em) / 14 / 16 / 20 / 36 / 72; body 16px/1.6 at ~70ch; Georgia/serif and system-ui fallbacks. Radius 8px, pills 999px. Shadows light on cards. Motion: carousel 6s, fades 500ms.

### Components & interactions
MegaMenu (keyboard navigable), SearchField, HeroCarousel (pause, dots), CircleBadge, WaveDivider, ArticleCard, ContinentPills, PromoSplit, MonthSelector, ItineraryTimeline, Breadcrumbs, Pagination, ProductCard, CartDrawer (empty/items/updating), NewsletterBand (states), CookieConsent (accept/reject/preferences), ShareButtons.

### Data & state
Typed content collections (destinations, guides, itineraries, products). Cart in client store with quantity and totals. Consent choice stored locally and respected before loading any analytics. Seed with original guides to real regions but fictional personal anecdotes; generated/CC0 photos.

### Accessibility
White italic headline over photos sits on a `rgb(0 0 0 / .55)` overlay (≥ 4.7:1 even over bright sky). Olive is set to #6b6737 so white button text reaches 5.8:1. Mega menu follows the Radix NavigationMenu pattern (arrow keys, Esc). Carousel has pause and doesn't auto-advance under reduced motion. Month chips are toggle buttons with `aria-pressed`. Cookie modal is focus-trapped and doesn't block reading before choice beyond necessity. Verified contrast: body text #2a2622 on #f8f6f1 = 13.9:1; muted text #6b6259 on #f8f6f1 = 5.5:1; white #ffffff on #6b6737 = 5.8:1; white text #ffffff on #4a433b = 9.7:1; white hero headline #ffffff on #737373 = 4.7:1.

### Security
No card data on site: checkout via hosted Stripe links only. Newsletter validated with zod client and server, honeypot, rate limit. Sanitize MDX. Load analytics only after consent. Affiliate/external links `rel="noopener noreferrer sponsored"` where applicable. No secrets in client code.

### Performance & SEO
Hero images preloaded (first slide only), others lazy; responsive images. Pre-render content pages; breadcrumb and Article structured data, meta/OG per page, sitemap. Lighthouse 90+.

### Guardrails
- Original writing; no real tour-company names or discounts; placeholder imagery.
- No fake traveler testimonials.
- Minimal data: emails only; honor consent.
- Typed small components, no `any`, visible errors.
- Done when: mega menu works by keyboard, month selector filters correctly, itinerary pages render from data, cart persists across reloads and hands off to hosted checkout, and consent gates analytics.

Open the builderAll templatesThis palette on its own