# Lazy Vacations — Design System

> **Lazy Vacations. Live as it should be.**
> A hosting brand for waterfront vacation rentals. The flagship property is
> **Sabattus Shalomus**, a 2-bedroom waterfront Airbnb / VRBO on Sabattus Pond
> in Central Maine — private deck, boat & dock, fire pit, family- and pet-friendly.

This design system captures the brand so any agent can build on-brand guest
microsites, booking flows, welcome guides, slides, and marketing assets.

---

## Sources

Everything here was reverse-engineered from the **live property site codebase**,
a Webflow export mounted read-only at `lazyvacations/`:

- `lazyvacations/index.html` — the single-page guest microsite (hero video, tabbed
  Arrival / House / Waterfront / Attractions / Social / Weather sections).
- `lazyvacations/css/sabattus-shalomus-7fa27f.webflow.css` — the full stylesheet;
  the `:root` block is the original source of every color/radius token here.
- `lazyvacations/images/` — amenity icon set (teal line PNGs), property photos,
  the `SABATTUS Shalomus` wordmark (`Artboard-7-copy-3.svg`), favicon (teal gem).
- `lazyvacations/videos/` — looping autumn-lake hero video + poster.
- `lazyvacations/documents/Welcome-to-Sabattus.pdf` — guest welcome guide (copy reference).

Booking lives off-site on **Airbnb** (room 53222214) and **VRBO**; a Printify
**Gift Shop**, Elfsight reviews/chatbot/weather widgets, and Google "My Maps"
embeds round out the real stack. Design credited to InkPromptu / sandyux.com.

> ⚠️ **Font substitution flag:** the original loads **Lato**, **Open Sans**, and
> **Source Sans Pro** from Google Fonts. We pull the same families from Google
> Fonts (Source Sans Pro is served as its successor **Source Sans 3**). These are
> the genuine brand families — no guessing — but if you want self-hosted binaries,
> drop `.woff2` files in and swap the `@import` in `tokens/fonts.css` for `@font-face`.

---

## CONTENT FUNDAMENTALS

The voice is a **warm, hands-on host talking directly to a guest** — equal parts
innkeeper and friend who lives down the road. It is generous, reassuring, and
practical, never corporate or salesy.

**Person & address.** First-person plural for the hosts, second person for the
guest: *"our house," "we provide," "let us know," "you can get there."* The brand
("Lazy Vacations") speaks as *we*; the guest is always *you*.

**Tone — reassuring & permission-giving.** The copy anticipates worry and removes
it: *"If you are lost, please call us, it is OK to call late."* / *"…just in case."*
Hospitality reads as small generosities stated plainly:
*"Enjoy free coffee, tea, and grill gas. Please be considerate."*

**Casing.** Headings are sentence- or Title Case (*"Getting There," "Make a Stop
at the Stores," "Perfect Base to Explore Central Maine"*). **Partner & brand names
are shouted in all-caps** — `AIRBNB`, `VRBO`, `BOOK AIRBNB` — and so are button
labels. Occasional playful mixed-caps appear in nav (*"GifT Shop," "House info"*).

**Emphasis.** Key facts are bolded in the brand's deep green (`bold-text-green`)
rather than colored callout boxes — e.g. **"Lock code is in the reservation
message,"** **"Firewood for stove and firepit is complimentary."**

**Rhythm.** Short, scannable paragraphs (light 300-weight body) introduced by a
green section title, then a row of icon + caption amenities, then photos, then a
recurring helper line: *"Ask Sabattus Bot for details and download the house info
file just in case."* Prices are flat and friendly: `$40`, `$200`, *"discount for
2+ days," "free weekly."*

**Vocabulary.** Concrete and place-rooted: dock, swim ladder, Adirondack chairs,
fire pit, bulkhead, French windows, bamboo linens, twin city Lewiston/Auburn.

**Emoji:** essentially none in guest copy (only internal `💙 MEMBERSCRIPT` dev
comments). **Do not use emoji** in product copy. No exclamation-heavy hype.

---

## VISUAL FOUNDATIONS

**The feeling:** a clean, calm, *lakeside-cabin* aesthetic. Crisp white surfaces,
one confident teal, and large warm photographs of water, woods, and cozy interiors
doing the emotional work. Bright and airy, never dark or moody.

**Color.** A single dominant brand teal — **`#00aca6`** (`--lv-green`) — for icons,
titles, active states and accents, deepened to **`#329794`** for buttons and links
and lifted to **`#98e8e6`** / **`#ebfffe`** for chips, soft borders, and tinted card
fills. Neutrals are warm-grey text on white (`#333` / `#4d4d4d` body, `#adadad`
captions, `#ececec` surfaces). **Coral `#ff6f5e`** is the warm accent — booking
CTAs, highlights, and badges — deepening to `#e8503c` on hover with a `#fff1ee`
haze for tints. Inline text links are blue `#1f6fff`.

**Type.** Source Sans for titles & body (body is deliberately **light, 300**),
Lato for the wide-tracked all-caps buttons, Open Sans as the UI utility face.
Section titles render in teal at ~25–29px, regular weight. Generous line-height
(~23px on 17px body) keeps it breezy.

**Imagery.** The hero is everything: full-bleed **autoplaying autumn-lake video**
with the wordmark floating over it in `hard-light` blend. Property photos are
real, warm-temperature, natural-light shots — fall foliage, blue water with
mirror reflections, cozy plaid-quilt bedrooms, red lounge cushions in green
grass. Photos sit in `4px`-rounded frames, often in 2- or 3-up columns and a
2×2 grid. No stock-y gradients, no illustration backgrounds.

**Iconography.** A custom set of **teal line-art PNG icons** (~32px) — house with
water, lakefront, fire pit, beds, BBQ, parking, door lock, calendar — pillowy
rounded strokes in the brand green. Used inline beside amenity captions and as
the visual anchor of each tab. See ICONOGRAPHY below.

**Surfaces, borders & corners.** Everything is gently rounded at **4px** (5px on
nav/tabs, 8px on map/iframe embeds, 16px pill on the mobile menu button). Cards
are white with a soft ambient shadow (`0 0 4px rgba(0,0,0,.2)`); the tinted
"hazy" card variant fills with `#ebfffe` and a grey hairline. The signature
navigation pattern is a **vertical list of icon + label tab cards** whose active
state is a **3px teal left border** + teal text + a subtle lift shadow.

**Shadows.** Soft and ambient, never hard/directional: `0 1px 3px` on small cards,
`0 0 4px` on content cards, `0 0 30px` on dropdowns, `0 0 33px` on the fixed
navbar. Buttons gain a lifted `0 8px 16px 4px rgba(0,0,0,.3)` on hover.

**Motion.** Restrained and friendly. Webflow IX fade/slide-in-on-scroll (opacity
0→1 with a ~10–30px translate), simple `.2s` ease transitions on color/background
for hover, two small Lottie accents. No bounce, no parallax theatrics. Honor
`prefers-reduced-motion`.

**Hover / press.** Hover = darken to the deeper green (or partner color) + reveal
shadow lift; nav links reveal a faint border (`#0003`). Active/press = solid teal
fill with white text. Links go black on hover (the Webflow default), buttons go
blue.

**Transparency & blur.** Used sparingly: the hero review bar sits on a
`backdrop-filter: blur(18px)` glass panel; photo title overlays use a
semi-transparent deep-teal `rgba(0,88,104,.76)`; the mobile nav overlay dims the
page with a dark scrim.

**Layout.** Centered `940px` container (up to `1200px` wide), white background,
fixed top navbar, comfortable `20px` card padding, `16px` grid gaps.

---

## ICONOGRAPHY

The brand ships its **own amenity icon set** — flat **teal (`#00aca6`) line-art
PNGs**, roughly 32px, with soft rounded strokes and the occasional filled accent.
They are warm and approachable rather than geometric/technical. Copied into
`assets/icons/`:

`lakefront` · `parking` · `door-lock` · `new` (self check-in) · `amazing-views`
(house) · `amazing-pools` (dock) · `fire-pit` · `historical-homes` · `lake` ·
`kingsize-bed` · `small-bed` · `sofa-bed` · `bbq-grill` · `outdoor` · `tv-cable`
· `calendar` · `books` · `luxe` · `location`.

**Usage:** inline beside amenity captions (icon left, light-grey caption right) and
as the anchor of each navigation tab card. On photo-overlay contexts the site
applies `mix-blend-mode` (`luminosity` / `color-dodge`) so icons read on imagery.

- **No emoji** anywhere in the brand.
- **No icon webfont.** These are raster PNGs — prefer them for amenity/feature
  contexts to stay on-brand.
- For generic UI affordances the set doesn't cover (chevrons, close, arrows,
  search, stars), use **Lucide** (CDN, 1.5–2px stroke) as a neutral companion set —
  it matches the rounded, light-stroke feel. *(Substitution — flagged.)* Components
  here use inline Lucide-style SVG or simple glyphs for those affordances.

Brand marks in `assets/`: `logo-wordmark.svg` (the "SABATTUS Shalomus" bold +
script lockup), `favicon.png` / `webclip.png` (teal faceted gem), `cover-share.jpg`
(wordmark over the lake panorama).

---

## INDEX / MANIFEST

**Foundations**
- `styles.css` — root entry (import manifest only)
- `tokens/colors.css` · `tokens/typography.css` · `tokens/spacing.css` · `tokens/fonts.css`
- `guidelines/*.card.html` — foundation specimen cards (Design System tab)

**Assets** — `assets/logo-wordmark.svg`, `assets/favicon.png`, `assets/icons/*`,
`assets/photos/*`

**Components** (`components/`) — reusable React primitives:
- `core/Button`, `core/Tag`, `core/Badge`
- `forms/Input`, `forms/Select`, `forms/Checkbox`
- `display/Card`, `display/AmenityItem`, `display/PriceCard`, `display/Avatar`
- `navigation/NavBar`, `navigation/TabRail`

**UI Kits** (`ui_kits/`)
- `guest_site/` — the Sabattus Shalomus guest microsite (hero, tabs, amenities, booking)

**Templates** (`templates/`) — copy-to-start artifacts for consuming projects:
- `property-page/` — waterfront-rental marketing one-pager (hero, amenities,
  add-on pricing, booking CTAs), composed from the DS components.

**Slides** — none provided in source, so none authored.

**Meta** — `SKILL.md` (Agent-Skills compatible), this `readme.md`.