---
name: Vacation Inc
description: "The site stands out for its highly specific, cohesive retro aesthetic that avoids typical modern web design trends."
version: alpha

colors:
  background: "#ebe6dc"
  primary: "#333333"
  neutral: "#d8d4cb"
  line: "rgba(51,51,51,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.92px"
  heading:
    fontFamily: humanist-sans
    fontSize: 30px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.54px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.48px"
  small:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.48px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Retro-inspired sunscreen brand with a playful 1980s poolside aesthetic.

*A vintage vacation brochure brought to life on the web.*

## Colors

Warm, off-white backgrounds with dark grey text for high readability.

- **Background (`#ebe6dc`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Muted (`#d8d4cb`)** — uses `muted` token
- **Borders (`rgba(51,51,51,1.0)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

- Use transitional-serif for large promotional and display text.
- Use humanist-sans for body copy and navigation.
- Maintain negative letter spacing for display typography.

## Layout

Asymmetric grid with overlapping images and generous whitespace.

*Rhythm:* Consistent spacing based on a 4px grid, with larger gaps for major sections.

## Elevation & Depth

- rgba(0, 0, 0, 0.1) 1px 1px 5px 0px
- rgba(0, 0, 0, 0.75) 2px 2px 2px 0px
- Borders: 4px solid #333333

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Full-width button with a rounded pill shape and warm yellow background.
- **card:** Image-heavy cards with thin borders and retro labels like 'FIG. 1'.
- **input:** Simple input with a bottom border and no background fill.
- **hero:** Full-width background image with a thin 4px border frame and overlaid text.

## Do's and Don'ts

**Don't:**
- Don't use a stark white background — screenshot shows a warm off-white (#ebe6dc) instead.
- Don't use a bright, high-chroma accent color for primary buttons — screenshot shows a warm muted yellow (#f1d27a) instead.
- Don't use a heavy sans-serif for display text — screenshot shows a thin transitional-serif instead.
- Don't use a 12-column symmetric layout with tight gutters — screenshot shows generous spacing and asymmetrical alignment.
- Don't use sharp, rectangular corners for primary buttons — screenshot shows fully rounded pill shapes instead.
- Don't use dark mode or black backgrounds — screenshot shows a light, paper-like background instead.

---

## System Prompt (paste into AI agent)

```
Design a playful, retro-inspired consumer website for a sunscreen brand. The aesthetic is nostalgic 1980s poolside luxury, using warm off-white backgrounds (#ebe6dc) and dark grey text (#333333). Typography combines thin transitional-serif for display text and humanist-sans for body copy. Primary action buttons are full-width, pill-shaped, and filled with a warm muted yellow. Layout is spacious and asymmetrical, often featuring vintage photography and retro graphic elements like barcodes or dashed borders. Avoid modern minimalism, stark white backgrounds, or high-contrast neon accents. The overall feel is sophisticated yet whimsical.
```