1---
2name: "Wanderstay Rentals"
3description: "Travel magazine that happens to be an app. Single-family typography, coral-pink accent reserved for primary CTAs, generous photography and 14–20px image radius."
4tags: [consumer, editorial, warm, marketplace]
5colors:
6  primary:   "#222222"
7  secondary: "#6a6a6a"
8  tertiary:  "#ff385c"
9  neutral:   "#f7f7f7"
10  surface:   "#ffffff"
11typography:
12  display: "Plus Jakarta Sans"
13  body:    "Plus Jakarta Sans"
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "3.5rem / 1.18 / 700 / -0.7px"
17    h1:   "2.75rem / 1.18 / 700 / -0.55px"
18    h2:   "1.75rem / 1.43 / 700 / 0"
19    body: "1rem / 1.25 / 500 / 0"
20radius:
21  sm: 8px
22  md: 14px
23  lg: 20px
24  pill: 9999px
25shadows:
26  card:   "rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0"
27  button: "rgba(255,56,92,0.22) 0 6px 16px -6px"
28borders:
29  card:    "1px solid #dddddd"
30  divider: "#dddddd"
31buttons:
32  primary:
33    background: #ff385c
34    color: #ffffff
35    border: none
36    shape: rounded
37    padding: 14px 24px
38    font: 600
39    shadow: rgba(255,56,92,0.22) 0 6px 16px -6px
40    hover: scale
41  secondary:
42    background: #ffffff
43    color: #222222
44    border: 1px solid #dddddd
45    shape: pill
46    padding: 12px 22px
47    font: 600
48    hover: scale
49  outline:
50    background: transparent
51    color: #222222
52    border: 1px solid #222222
53    shape: rounded
54    padding: 12px 22px
55    font: 600
56  ghost:
57    background: transparent
58    color: #222222
59    border: none
60    shape: rounded
61    padding: 10px 12px
62    font: 600
63    hover: underline
64charts:
65  variant: "rounded-bars"
66  stroke_width: 2.5
67  fill_opacity: 0.18
68  gridlines: false
69  bar_gap: 10px
70  highlight: all
71  dot_marker: true
72  palette: ["#ffd1d8", "#ffadbd", "#ff7f95", "#ff5878", "#ff385c", "#e00b41", "#92174d"]
73fonts_url: "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap"
74dependencies: ["lucide-react"]
75---
76 
77# Wanderstay Rentals
78 
79## AI Build Instructions
80 
81> **Read this section before writing any code.** The rules below
82> are non-negotiable. Every value used in the UI must come from this
83> file's frontmatter — never substitute, approximate, or invent new
84> colors, fonts, radii, or shadows. If a value is missing, ask the
85> user before adding one.
86 
87### 1 · Your role
88 
89You are building UI for a project that has adopted **Wanderstay Rentals** as its
90design system. Treat `DESIGN.md` as the single source of truth.
91Your job is to translate the user's product requirements into
92components and pages that look like they were designed by the same
93person who authored this file.
94 
95### 2 · Token compliance
96 
97- Pull every color, font family, radius, shadow, and spacing value
98  from the frontmatter at the top of this file.
99- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
100  hard-code hex values that bypass the system.
101- When a token can be expressed as a CSS variable, declare it once
102  in your global stylesheet and reference it everywhere downstream.
103- The Google Fonts `<link>` is provided in the Typography section.
104  Add it to `<head>` before any component renders.
105 
106### 3 · Component recipes
107 
108Use these recipes verbatim when building the corresponding component.
109 
110#### Buttons
111 
112Four variants are defined. Pick one — never blend variants or invent a fifth.
113 
114- **Primary** — rounded shape, bg `#ff385c`, text `#ffffff`, padding `14px 24px`, weight `600`, shadow `rgba(255,56,92,0.22) 0 6px 16px -6px`.
115- **Secondary** — pill shape, bg `#ffffff`, text `#222222`, border `1px solid #dddddd`, padding `12px 22px`, weight `600`.
116- **Outline** — rounded shape, text `#222222`, border `1px solid #222222`, padding `12px 22px`, weight `600`.
117- **Ghost** — rounded shape, text `#222222`, padding `10px 12px`, weight `600`.
118 
119Reach for **primary** as the single dominant CTA per screen.
120**Secondary** for the supporting action. **Outline** for tertiary
121actions in toolbars. **Ghost** for inline links and table actions.
122 
123#### Cards
124 
125- Background: `#ffffff`
126- Border: `1px solid #dddddd`
127- Shadow: `rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0`
128- Radius: `radius.lg` (`20px`)
129- Internal padding: `20px` for compact cards, `24–28px` for content cards.
130 
131#### Charts
132 
133- Bar/line variant: `rounded-bars`
134- No gridlines — let the bars/lines carry the data.
135- Highlight strategy: `all` — emphasize a single bar/point per chart.
136- Use the declared palette in order: `#ffd1d8`, `#ffadbd`, `#ff7f95`, `#ff5878`, `#ff385c`, `#e00b41`, `#92174d`.
137 
138#### Typography pairings
139 
140- **Display (`Plus Jakarta Sans`)** — h1, h2, hero headlines, brand wordmarks.
141- **Body (`Plus Jakarta Sans`)** — paragraphs, labels, button text, form inputs.
142- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
143 
144### 4 · Hard constraints
145 
146Never do any of the following without explicit instruction from the user:
147 
148- Introduce a new color, font, radius, or shadow that isn't declared above.
149- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
150- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
151- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
152- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
153 
154### 5 · Before you finish — verify
155 
156Run through this checklist for every screen you produce:
157 
158- [ ] Every color used appears in the Colors table above.
159- [ ] Headlines use the display font; body copy uses the body font.
160- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
161- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
162- [ ] Cards and dividers use the declared border + shadow tokens.
163- [ ] No values were invented; if you needed something missing, you stopped and asked.
164 
165---
166 
167## 1. Atmosphere
168 
169Wanderstay feels like a travel magazine that happens to be an app — pristine white canvases give way to full-bleed photography, and the interface itself disappears so the listings can breathe. The signature **coral-pink** (`#ff385c`) is used sparingly but unmistakably: search CTA, active tab indicator, primary action button, the occasional price or wishlist heart. Everything else is a disciplined grayscale, with `#222222` carrying almost every line of text.
170 
171What makes the system unmistakably Wanderstay is how much *faith* it places in content. Property photos are displayed at hero scale, 4:3 with edge-to-edge 14–20px radius. The category-tab pattern uses 3D rendered illustrated icons paired with crisp typographic labels — physical, tactile, almost toy-like, the rare consumer product where 3D renders and purely typographic UI coexist without tension.
172 
173A **single-family typography system** carries every label, from 8px legal footnote to 28px section heading. The "regular" weight is 500, giving every paragraph a slightly more confident texture than the web default. Negative tracking only kicks in at display sizes (>20px); body stays at 0 tracking for readability.
174 
175**Signature moves**
176- Coral-pink (`#ff385c`) as a *single*-accent brand color — primary CTAs only
177- Full-bleed photography at 4:3 / 16:9 with gentle 14–20px corner rounding
178- 3D rendered category icons paired with typographic tabs
179- Circular 50% icon buttons (back arrow, share, favorite) scattered throughout
180- Single-family typography — one variable sans carries 8px to 28px
181- 500 is the body weight (not 400) — subtle confidence in every paragraph
182- Three-layer subtle booking-panel shadow stack
183- No all-caps except at 8px superscript
184 
185## 2. Palette
186 
187### Primary
188- **Coral** `#ff385c` — primary CTA, search, active state, wishlist heart
189- **Deep Coral** `#e00b41` — pressed/active CTA states
190- **Plus Magenta** `#92174d` — premium tier accent
191- **Luxe Purple** `#460479` — luxury tier accent
192- **Info Blue** `#428bff` — legal links only
193 
194### Surface
195- **Canvas White** `#ffffff` — page, cards, containers
196- **Soft Cloud** `#f7f7f7` — footer, map wrapper, subsurface
197- **Hairline Gray** `#dddddd` — universal 1px border
198 
199### Neutrals
200- **Ink Black** `#222222` — ~90% of all text
201- Charcoal `#3f3f3f` · Ash Gray `#6a6a6a` · Mute `#929292` · Stone `#c1c1c1`
202 
203### Semantic
204- Error `#c13515` · Deep Error `#b32505`
205 
206## 3. Typography
207 
208Single-family system. Weights observed: 500, 600, 700 — no 400 regular.
209 
210| Role | Size | Weight | Leading | Tracking |
211|------|------|--------|---------|----------|
212| Section | 28px | 700 | 1.43 | 0 |
213| Subsection | 22px | 500 | 1.18 | -0.44px |
214| Card title | 21px | 700 | 1.43 | 0 |
215| Listing title | 20px | 600 | 1.20 | -0.18px |
216| Subtitle Bold | 16px | 600 | 1.25 | 0 |
217| Body Medium | 16px | 500 | 1.25 | 0 |
218| Button Large | 16px | 500 | 1.25 | 0 |
219| Button Default | 14px | 500 | 1.29 | 0 |
220| Link | 14px | 500 | 1.43 | 0 |
221| Caption Bold | 14px | 600 | 1.43 | 0 |
222| Micro | 12px | 400 | 1.33 | 0 |
223| Badge | 11px | 600 | 1.18 | 0 |
224| Superscript | 8px | 700 | 1.25 | +0.32px (uppercase) |
225 
226**500 is the new 400.** Tight line-heights for headlines (1.18–1.25), generous for body (1.43). No all-caps except at 8px.
227 
228## 4. Buttons
229 
230### Primary CTA (Coral)
231```css
232background: #ff385c;
233color: #ffffff;
234padding: 14px 24px;
235border-radius: 8px;
236```
237Active: `scale(0.92)` + 2px `#222222` focus ring.
238 
239### Secondary
240- Background `#ffffff`, text `#222222`
241- 1px `#dddddd` border, 20px (pill) or 8px radius
242 
243### Icon-Only Circular
244- 32–44px diameter, 50% radius
245- Background `#f2f2f2`, icon `#222222` outline 16–20px
246- Active `scale(0.92)` + 4px white ring on photo backgrounds
247 
248### Pill Tab (Category Selector)
249- Transparent, 8px 14px padding
250- Active: 2px Ink Black underline beneath the label
251 
252## 5. Cards
253 
254### Listing Card
255- Background `#ffffff`, **no shadow**
256- Image: 4:3, 14px radius, full-bleed
257- Metadata stacks below: city (16/600) → distance (14/500 ash) → date → price
258 
259### Booking Panel (the signature)
260- Background `#ffffff`
261- 14–20px radius, 1px `#dddddd` border
262- Three-layer shadow: `rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0`
263- 24px padding, ~370px wide, sticky at 120–140px from top
264 
265## 6. Charts
266 
267**Coral gradient bars** — each bar a step in the coral-magenta sweep (light coral → deep coral → magenta). The chart reads like a vacation density heatmap: warmer = more activity. Line charts use a 2.5px coral stroke with subtle fill, end-dot marker.
268 
269## 7. Spacing
270 
271- Base: 8px
272- Scale: `2, 3, 4, 5.5, 6, 8, 10, 11, 12, 15, 16, 18.5, 22, 24, 32`
273- Section padding: 48–64px desktop, 24–32px mobile
274- Listing card gutter: 24px desktop, 16px mobile
275- Stacked text rows: 4–8px (very tight, dense info)
276 
277## 8. Depth & elevation
278 
279| Level | Treatment | Use |
280|-------|-----------|-----|
281| 0 | Flat | Listing cards |
282| 1 | `1px #dddddd` border | Amenity rows, footer |
283| 2 | Subtle 3-layer stack | Booking panels |
284| 3 | Coral glow | Search button |
285 
286## 9. Do's & don'ts
287 
288✅ **Do**
289- Reserve coral (`#ff385c`) for primary CTAs and search only
290- Use 14–20px radius on all photography
291- Use 500 as the body weight — never 400
292- Apply scale(0.92) on button press
293- Stick to single-family typography across all sizes
294 
295❌ **Don't**
296- Use coral decoratively — it loses its signal
297- Use sharp corners on photography
298- Use weight 400 for body
299- Apply all-caps except at 8px superscript
300- Use cool blue-grays — neutrals are warm-tinted
301 
302---
303 
304## Tokens
305 
306> Generated from the same source the live preview renders from.
307> Treat the values below as the contract — never substitute approximations.
308 
309### Colors
310 
311| Role      | Value |
312|-----------|-------|
313| primary   | `#222222` |
314| secondary | `#6a6a6a` |
315| tertiary  | `#ff385c` |
316| neutral   | `#f7f7f7` |
317| surface   | `#ffffff` |
318 
319### Typography
320 
321- **Display:** Plus Jakarta Sans
322- **Body:** Plus Jakarta Sans
323- **Mono:** JetBrains Mono
324 
325| Role | size / leading / weight / tracking |
326|------|------------------------------------|
327| Hero | 3.5rem / 1.18 / 700 / -0.7px |
328| H1   | 2.75rem / 1.18 / 700 / -0.55px |
329| H2   | 1.75rem / 1.43 / 700 / 0 |
330| Body | 1rem / 1.25 / 500 / 0 |
331 
332### Radius
333 
334- sm: `8px`
335- md: `14px`
336- lg: `20px`
337- pill: `9999px`
338 
339### Shadows
340 
341- **card:** `rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0`
342- **button:** `rgba(255,56,92,0.22) 0 6px 16px -6px`
343 
344### Borders
345 
346- **card:** `1px solid #dddddd`
347- **divider:** `#dddddd`
348 
349### Buttons
350 
351Four variants, each fully tokenized. The preview renders from these exact values.
352 
353#### Primary
354 
355| Property | Value |
356|----------|-------|
357| shape | `rounded` |
358| background | `#ff385c` |
359| color | `#ffffff` |
360| border | `none` |
361| padding | `14px 24px` |
362| fontWeight | `600` |
363| shadow | `rgba(255,56,92,0.22) 0 6px 16px -6px` |
364| hoverHint | `scale` |
365 
366#### Secondary
367 
368| Property | Value |
369|----------|-------|
370| shape | `pill` |
371| background | `#ffffff` |
372| color | `#222222` |
373| border | `1px solid #dddddd` |
374| padding | `12px 22px` |
375| fontWeight | `600` |
376| hoverHint | `scale` |
377 
378#### Outline
379 
380| Property | Value |
381|----------|-------|
382| shape | `rounded` |
383| background | `transparent` |
384| color | `#222222` |
385| border | `1px solid #222222` |
386| padding | `12px 22px` |
387| fontWeight | `600` |
388 
389#### Ghost
390 
391| Property | Value |
392|----------|-------|
393| shape | `rounded` |
394| background | `transparent` |
395| color | `#222222` |
396| border | `none` |
397| padding | `10px 12px` |
398| fontWeight | `600` |
399| hoverHint | `underline` |
400 
401### Charts
402 
403| Property | Value |
404|----------|-------|
405| variant | `rounded-bars` |
406| strokeWidth | `2.5` |
407| fillOpacity | `0.18` |
408| gridlines | `false` |
409| barGap | `10px` |
410| highlight | `all` |
411| dotMarker | `true` |
412| palette | `#ffd1d8`, `#ffadbd`, `#ff7f95`, `#ff5878`, `#ff385c`, `#e00b41`, `#92174d` |
413 
414---
415 
416## Pro tokens
417 
418> Production-fidelity tokens. States, density, motion, elevation,
419> content rules and a measured WCAG contract — derived from the
420> resting tokens unless explicitly authored.
421 
422### States
423 
424#### Button
425 
426- **hover** — bg: `rgba(255, 56, 92, 0.92)`, shadow: `0 4px 20px -8px rgba(255, 56, 92, 0.4)`
427- **focus** — outline: `1.5px solid #ff385c`, outline-offset: `4px`
428- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
429- **disabled** — opacity: `0.45`
430- **loading** — opacity: `0.7`
431- **selected** — bg: `#222222`, color: `#ffffff`
432 
433#### Input
434 
435- **hover** — border: `1px solid #222222`
436- **focus** — border: `1px solid #ff385c`, shadow: `0 1px 0 0 #ff385c`
437- **disabled** — opacity: `0.45`
438- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
439 
440#### Card
441 
442- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
443- **selected** — border: `1px solid #222222`
444 
445#### Tab
446 
447- **hover** — color: `#222222`
448- **focus** — outline: `1.5px solid #ff385c`, outline-offset: `3px`
449- **selected** — color: `#ff385c`, border: `0 0 2px 0 solid #ff385c`
450 
451### Density
452 
453| Mode | padding × | row × | body | radius × | Use for |
454|------|-----------|-------|------|----------|---------|
455| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
456| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
457| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
458 
459### Motion
460 
461**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
462 
463```css
464transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
465```
466 
467| Token | Value |
468|-------|-------|
469| duration.instant | `80ms` |
470| duration.fast | `180ms` |
471| duration.base | `320ms` |
472| duration.slow | `500ms` |
473| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
474| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
475| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
476| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
477 
478### Elevation
479 
480Five-level scale, system-specific recipe.
481 
482| Level | Shadow | Recipe |
483|-------|--------|--------|
484| level0 | `none` | Hairline only — typical editorial resting state. |
485| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
486| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
487| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
488| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
489 
490### Content
491 
492- **measure:** `60ch` (max line length for body prose)
493- **paragraph spacing:** `1.5em`
494- **list indent:** `1.75em`
495- **list gap:** `0.55em`
496- **link:** color `#ff385c`, underline `always`
497- **blockquote:** border `4px solid #ff385c`, padding `0.4em 0 0.4em 1.5em`
498- **code:** background `rgba(34, 34, 34, 0.06)`, color `#222222`
499 
500### Accessibility (WCAG 2.1)
501 
502**Overall:** AA-Large
503 
504| Pair | Ratio | Required | Grade | Suggested fix |
505|------|-------|----------|-------|---------------|
506| Body text on surface | 15.91:1 | AA | AAA | — |
507| Body text on canvas | 14.85:1 | AA | AAA | — |
508| Muted text on surface | 5.41:1 | AA | AA | — |
509| Accent on surface | 3.52:1 | AA-Large | AA-Large | — |
510| Accent on canvas | 3.28:1 | AA-Large | AA-Large | — |
511