# Vacation Inc · Design system migration spec

> Source: https://www.vacation.inc  ·  Curated by OpenDesign  ·  en

> The site stands out for its highly specific, cohesive retro aesthetic that avoids typical modern web design trends.

## 1. Identity DNA

Vacation Inc.'s design system is a vintage vacation brochure brought to life on the web. It translates the nostalgia and playful warmth of a 1980s poolside aesthetic into a cohesive digital language, where every component feels like a sun-faded photograph or a retro label.

**One-liner:** Retro-inspired sunscreen brand with a playful 1980s poolside aesthetic.
**Keywords:** retro · playful · sunscreen · poolside · nostalgia
**Analogy:** A vintage vacation brochure brought to life on the web.

## 2. Color

The color system is built on a foundation of warm, off-white backgrounds and dark grey text, creating a paper-like feel that avoids the clinical starkness of modern interfaces. A palette of muted yellows and sun-bleached tones provides accent and emphasis without breaking the nostalgic atmosphere.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ebe6dc` | main background |
| `--ink` | `#333333` | body text |
| `--muted` | `#d8d4cb` | placeholder |
| `--line` | `rgba(51,51,51,1.0)` | divider |

**Color principle:** Warm, off-white backgrounds with dark grey text for high readability.

Every color choice reinforces the feeling of a faded, sun-drenched memory rather than a contemporary digital display.

## 3. Typography

Typography establishes the system's dual voice: a thin transitional-serif carries the elegant, nostalgic weight for display text, while a humanist-sans provides clarity and approachability for body copy and navigation. This pairing separates the promotional from the practical, much like a well-designed brochure.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 400 | -0.92px | Large promotional text |
| heading | 30px | 1.2 | 400 | -0.54px | Section headings |
| body | 16px | 1.5 | 400 | -0.48px | Main body text |
| small | 18px | 1.3 | 400 | -0.48px | Secondary body text |

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

## 4. Spacing

Spacing follows a consistent 4px grid rhythm, creating a measured, comfortable pace for content consumption.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent spacing based on a 4px grid, with larger gaps for major sections.

## 5. Surfaces

Surfaces are defined by subtle depth and deliberate framing, using light, offset shadows and a signature 4px border to evoke the tactile quality of a printed card or a framed photograph.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 1px 1px 5px 0px
  - rgba(0, 0, 0, 0.75) 2px 2px 2px 0px
- **Borders:** 4px solid #333333

## 6. Layout

The layout skeleton favors an asymmetric grid with overlapping imagery and generous whitespace, creating a sense of curated, casual discovery. It rejects the predictable uniformity of standard column systems in favor of a more editorial, scrapbook-like composition.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric grid with overlapping images and generous whitespace.

## 7. Motion & Interaction

Motion is minimal and smooth, applied only to functional transitions that guide the user. A single cubic-bezier timing function ensures all color shifts and scale changes feel consistent and unhurried, like the lazy pan across a vintage postcard.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0, 0.75, 1)`
- **Patterns:**
  - Smooth color and transform transitions on interactive elements.

- **Hover:** Subtle color shifts or image scaling.
- **Click:** Standard pointer cursor.
- **Transition:** All properties transition with a 0.3s cubic-bezier.
- **Keyboard:** Standard focusable elements.

## 8. Voice & Don'ts

The editorial voice is witty, nostalgic, and playfully authoritative, delivered through elegant serif headlines and direct, bold CTAs. It speaks with the confident charm of a bygone travel advertisement.

- **Tone:** Witty, nostalgic, and playfully authoritative.
- **Headline style:** Large, elegant serif typography.
- **CTA style:** Pill-shaped buttons with bold sans-serif text.
- **Avoid:** Modern minimalism / Cool or clinical color palettes / Overly complex layouts

### Don'ts
- ❌ 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.

The system deliberately rejects modern minimalism, cool palettes, and complex layouts to fully commit to its specific, retro-inspired identity.

## System Prompt (paste into AI tool)

```
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.
```