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.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
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: 8px22 md: 14px23 lg: 20px24 pill: 9999px25shadows: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: #ff385c34 color: #ffffff35 border: none36 shape: rounded37 padding: 14px 24px38 font: 60039 shadow: rgba(255,56,92,0.22) 0 6px 16px -6px40 hover: scale41 secondary:42 background: #ffffff43 color: #22222244 border: 1px solid #dddddd45 shape: pill46 padding: 12px 22px47 font: 60048 hover: scale49 outline:50 background: transparent51 color: #22222252 border: 1px solid #22222253 shape: rounded54 padding: 12px 22px55 font: 60056 ghost:57 background: transparent58 color: #22222259 border: none60 shape: rounded61 padding: 10px 12px62 font: 60063 hover: underline64charts:65 variant: "rounded-bars"66 stroke_width: 2.567 fill_opacity: 0.1868 gridlines: false69 bar_gap: 10px70 highlight: all71 dot_marker: true72 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 Rentals78 79## AI Build Instructions80 81> **Read this section before writing any code.** The rules below82> are non-negotiable. Every value used in the UI must come from this83> file's frontmatter — never substitute, approximate, or invent new84> colors, fonts, radii, or shadows. If a value is missing, ask the85> user before adding one.86 87### 1 · Your role88 89You are building UI for a project that has adopted **Wanderstay Rentals** as its90design system. Treat `DESIGN.md` as the single source of truth.91Your job is to translate the user's product requirements into92components and pages that look like they were designed by the same93person who authored this file.94 95### 2 · Token compliance96 97- Pull every color, font family, radius, shadow, and spacing value98 from the frontmatter at the top of this file.99- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never100 hard-code hex values that bypass the system.101- When a token can be expressed as a CSS variable, declare it once102 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 recipes107 108Use these recipes verbatim when building the corresponding component.109 110#### Buttons111 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 tertiary121actions in toolbars. **Ghost** for inline links and table actions.122 123#### Cards124 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#### Charts132 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 pairings139 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 constraints145 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 — verify155 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. Atmosphere168 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 only177- Full-bleed photography at 4:3 / 16:9 with gentle 14–20px corner rounding178- 3D rendered category icons paired with typographic tabs179- Circular 50% icon buttons (back arrow, share, favorite) scattered throughout180- Single-family typography — one variable sans carries 8px to 28px181- 500 is the body weight (not 400) — subtle confidence in every paragraph182- Three-layer subtle booking-panel shadow stack183- No all-caps except at 8px superscript184 185## 2. Palette186 187### Primary188- **Coral** `#ff385c` — primary CTA, search, active state, wishlist heart189- **Deep Coral** `#e00b41` — pressed/active CTA states190- **Plus Magenta** `#92174d` — premium tier accent191- **Luxe Purple** `#460479` — luxury tier accent192- **Info Blue** `#428bff` — legal links only193 194### Surface195- **Canvas White** `#ffffff` — page, cards, containers196- **Soft Cloud** `#f7f7f7` — footer, map wrapper, subsurface197- **Hairline Gray** `#dddddd` — universal 1px border198 199### Neutrals200- **Ink Black** `#222222` — ~90% of all text201- Charcoal `#3f3f3f` · Ash Gray `#6a6a6a` · Mute `#929292` · Stone `#c1c1c1`202 203### Semantic204- Error `#c13515` · Deep Error `#b32505`205 206## 3. Typography207 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. Buttons229 230### Primary CTA (Coral)231```css232background: #ff385c;233color: #ffffff;234padding: 14px 24px;235border-radius: 8px;236```237Active: `scale(0.92)` + 2px `#222222` focus ring.238 239### Secondary240- Background `#ffffff`, text `#222222`241- 1px `#dddddd` border, 20px (pill) or 8px radius242 243### Icon-Only Circular244- 32–44px diameter, 50% radius245- Background `#f2f2f2`, icon `#222222` outline 16–20px246- Active `scale(0.92)` + 4px white ring on photo backgrounds247 248### Pill Tab (Category Selector)249- Transparent, 8px 14px padding250- Active: 2px Ink Black underline beneath the label251 252## 5. Cards253 254### Listing Card255- Background `#ffffff`, **no shadow**256- Image: 4:3, 14px radius, full-bleed257- Metadata stacks below: city (16/600) → distance (14/500 ash) → date → price258 259### Booking Panel (the signature)260- Background `#ffffff`261- 14–20px radius, 1px `#dddddd` border262- 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 top264 265## 6. Charts266 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. Spacing270 271- Base: 8px272- 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 mobile274- Listing card gutter: 24px desktop, 16px mobile275- Stacked text rows: 4–8px (very tight, dense info)276 277## 8. Depth & elevation278 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'ts287 288✅ **Do**289- Reserve coral (`#ff385c`) for primary CTAs and search only290- Use 14–20px radius on all photography291- Use 500 as the body weight — never 400292- Apply scale(0.92) on button press293- Stick to single-family typography across all sizes294 295❌ **Don't**296- Use coral decoratively — it loses its signal297- Use sharp corners on photography298- Use weight 400 for body299- Apply all-caps except at 8px superscript300- Use cool blue-grays — neutrals are warm-tinted301 302---303 304## Tokens305 306> Generated from the same source the live preview renders from.307> Treat the values below as the contract — never substitute approximations.308 309### Colors310 311| Role | Value |312|-----------|-------|313| primary | `#222222` |314| secondary | `#6a6a6a` |315| tertiary | `#ff385c` |316| neutral | `#f7f7f7` |317| surface | `#ffffff` |318 319### Typography320 321- **Display:** Plus Jakarta Sans322- **Body:** Plus Jakarta Sans323- **Mono:** JetBrains Mono324 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### Radius333 334- sm: `8px`335- md: `14px`336- lg: `20px`337- pill: `9999px`338 339### Shadows340 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### Borders345 346- **card:** `1px solid #dddddd`347- **divider:** `#dddddd`348 349### Buttons350 351Four variants, each fully tokenized. The preview renders from these exact values.352 353#### Primary354 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#### Secondary367 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#### Outline379 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#### Ghost390 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### Charts402 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 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Plus Jakarta Sans"', 'serif'], sans: ['"Plus Jakarta Sans"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#222222', secondary: '#6a6a6a', accent: '#ff385c', neutral: '#f7f7f7', surface: '#ffffff', }, borderRadius: { sm: '8px', md: '14px', lg: '20px', }, }, },};tonal-surface with a teal seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The tonal-surface spec applied to a calm aqua palette.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
A law firm that earns trust through restraint. Deep oxford-navy ink on warm parchment, EB Garamond at oversized scale for partner names and case headings, Inter for body, a single muted gold-leaf accent reserved for case-number tags and verified-citation marks. Built for law firms, chambers, advisory practices, and policy institutes where gravitas is the brand.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.